/* /Pages/Admin/AdminEmailReceiver.razor.rz.scp.css */
/* Form Grid */
.form-grid[b-uj1rsjvjpm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.full-width[b-uj1rsjvjpm] {
    grid-column: 1 / -1;
}

.form-hint[b-uj1rsjvjpm] {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
}

    .form-hint i[b-uj1rsjvjpm] {
        margin-right: 2px;
    }

.password-set-hint[b-uj1rsjvjpm] {
    color: var(--color-success, #10b981);
    font-size: 12px;
}

/* Checkbox Section */
.checkbox-section[b-uj1rsjvjpm] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.checkbox-group[b-uj1rsjvjpm] {
    max-width: 400px;
}

.checkbox-label[b-uj1rsjvjpm] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

    .checkbox-label input[type="checkbox"][b-uj1rsjvjpm] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

.enable-label[b-uj1rsjvjpm] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form Actions */
.form-actions[b-uj1rsjvjpm] {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.warning-hint[b-uj1rsjvjpm] {
    color: var(--color-warning, #d97706);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Stats */
.stats-grid[b-uj1rsjvjpm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.last-poll-info[b-uj1rsjvjpm] {
    margin-top: 16px;
    padding: 12px;
    background: var(--color-bg-secondary, #f9fafb);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
}

/* Guide */
.guide-heading[b-uj1rsjvjpm] {
    margin-bottom: 12px;
    font-size: 16px;
}

.guide-heading-spaced[b-uj1rsjvjpm] {
    margin-top: 20px;
}

.guide-list[b-uj1rsjvjpm] {
    margin-left: 20px;
    line-height: 2;
}

/* SMTP Providers */
.providers-grid[b-uj1rsjvjpm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.smtp-provider[b-uj1rsjvjpm] {
    padding: 16px;
    background: var(--color-bg-secondary, #f9fafb);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: var(--radius-md, 6px);
}

.provider-name[b-uj1rsjvjpm] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin-bottom: 12px;
}

.provider-details[b-uj1rsjvjpm] {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.8;
}

    .provider-details strong[b-uj1rsjvjpm] {
        color: var(--color-text-primary, #111827);
    }

/* Security Notice */
.security-notice[b-uj1rsjvjpm] {
    margin-top: 20px;
    padding: 16px;
    background: var(--color-warning-light, #fff8e1);
    border-left: 4px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius-sm, 4px);
}

    .security-notice ul[b-uj1rsjvjpm] {
        margin: 8px 0 0 20px;
        font-size: 13px;
    }

    .security-notice i[b-uj1rsjvjpm] {
        margin-right: 4px;
    }

/* Test Connection Modal */
.test-description[b-uj1rsjvjpm] {
    margin-bottom: 16px;
}

.connection-details[b-uj1rsjvjpm] {
    padding: 12px;
    background: var(--color-bg-secondary, #f9fafb);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
}
/* /Pages/Admin/AdminEmailSettings.razor.rz.scp.css */
/* Form Grid */
.form-grid[b-gq40uk1bpe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-hint[b-gq40uk1bpe] {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
}

.password-set-hint[b-gq40uk1bpe] {
    color: var(--color-success, #10b981);
    font-size: 12px;
}

/* Checkbox Section */
.checkbox-section[b-gq40uk1bpe] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.checkbox-group[b-gq40uk1bpe] {
    max-width: 300px;
}

.checkbox-label[b-gq40uk1bpe] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

    .checkbox-label input[type="checkbox"][b-gq40uk1bpe] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* Form Actions */
.form-actions[b-gq40uk1bpe] {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.warning-hint[b-gq40uk1bpe] {
    color: var(--color-warning, #d97706);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* SMTP Providers */
.providers-grid[b-gq40uk1bpe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.smtp-provider[b-gq40uk1bpe] {
    padding: 16px;
    background: var(--color-bg-secondary, #f9fafb);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: var(--radius-md, 6px);
}

.provider-name[b-gq40uk1bpe] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin-bottom: 12px;
}

.provider-details[b-gq40uk1bpe] {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.8;
}

    .provider-details strong[b-gq40uk1bpe] {
        color: var(--color-text-primary, #111827);
    }

/* Pro Tip */
.pro-tip[b-gq40uk1bpe] {
    margin-top: 20px;
    padding: 16px;
    background: var(--color-warning-light, #fff8e1);
    border-left: 4px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius-sm, 4px);
}

    .pro-tip ol[b-gq40uk1bpe] {
        margin: 8px 0 0 20px;
        font-size: 13px;
    }

    .pro-tip i[b-gq40uk1bpe] {
        margin-right: 4px;
    }
/* /Pages/Admin/AdminLayout.razor.rz.scp.css */
/* ==========================================
   ADMIN PAGE LAYOUT
   ========================================== */
.admin-page[b-3kr7fxxw5d] {
    --sidebar-width: 220px;
    display: flex;
    min-height: 100vh;
}

/* ==========================================
   SIDEBAR — Flush to browser edge
   Hidden scrollbar, scrolls via mousewheel
   ========================================== */
.sidebar[b-3kr7fxxw5d] {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface, white);
    border-right: 1px solid var(--color-border, #e1e4e8);
    padding: 16px 12px 42px;
    overflow-y: auto;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

    .sidebar[b-3kr7fxxw5d]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

.sidebar-back[b-3kr7fxxw5d] {
    margin-bottom: 16px;
}

.back-button[b-3kr7fxxw5d] {
    width: 100%;
    padding: 8px 12px;
    background: var(--color-gray-50, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .back-button:hover[b-3kr7fxxw5d] {
        background: var(--color-border, #e1e4e8);
        color: var(--color-text-primary, #24292e);
    }

.sidebar-title[b-3kr7fxxw5d] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    padding: 8px 12px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-menu[b-3kr7fxxw5d] {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
}

.sidebar-item[b-3kr7fxxw5d] {
    padding: 8px 12px;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    margin-bottom: 2px;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sidebar-item:hover[b-3kr7fxxw5d] {
        background: var(--color-gray-50, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

    .sidebar-item.active[b-3kr7fxxw5d] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, #fff);

        /* The selected item has a primary-coloured background, so its icon must
           read as the inverse (on-primary) colour. The global theme icon system
           (design-tokens.css) paints phosphor icons per weight using
           --icon-color-* variables via very high-specificity selectors (e.g.
           `.active i.ph:not(...)`), so rather than out-specify them we simply
           override those variables here — the winning rule then resolves them to
           the inverse colour for icons inside the selected item. Theme-driven. */
        --icon-color-regular: var(--color-text-inverse, #fff);
        --icon-color-regular-active: var(--color-text-inverse, #fff);
        --icon-color-fill: var(--color-text-inverse, #fff);
        --icon-color-fill-active: var(--color-text-inverse, #fff);
        --icon-color-duotone: var(--color-text-inverse, #fff);
        --icon-color-duotone-active: var(--color-text-inverse, #fff);
        --icon-color-bold: var(--color-text-inverse, #fff);
        --icon-color-bold-active: var(--color-text-inverse, #fff);
        --icon-color-light: var(--color-text-inverse, #fff);
        --icon-color-light-active: var(--color-text-inverse, #fff);
        --icon-color-thin: var(--color-text-inverse, #fff);
        --icon-color-thin-active: var(--color-text-inverse, #fff);
    }

/* ==========================================
   ADMIN MAIN CONTENT — Centered
   ========================================== */
.admin-main[b-3kr7fxxw5d] {
    flex: 1;
    min-width: 0;
    padding: 24px;
    padding-bottom: 54px;
}

/* Global search + notifications bell, right-aligned above the admin content
   (mirrors the main-app top nav so they're present on every page). */
.admin-topbar[b-3kr7fxxw5d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: -6px 0 16px;
}

.admin-topbar-search[b-3kr7fxxw5d] {
    width: 260px;
}

/* Notifications: bell that hovers the recent popup and clicks to the center.
   Reveal + positioning are handled in js/notif-popup.js (fixed-position popup). */
.nav-notif[b-3kr7fxxw5d] {
    position: relative;
}

.admin-notif-btn[b-3kr7fxxw5d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--color-text-secondary, #586069);
    text-decoration: none;
}

.admin-notif-btn:hover[b-3kr7fxxw5d] {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-primary, #24292e);
}

.admin-notif-btn i[b-3kr7fxxw5d] {
    font-size: 19px;
}

@media (max-width: 900px) {
    .admin-topbar[b-3kr7fxxw5d] {
        display: none;
    }
}

/* ==========================================
   STICKY COPYRIGHT FOOTER
   Offset by sidebar width — doesn't extend
   under the sidebar, matching MainLayout
   ========================================== */
.copyright-bar[b-3kr7fxxw5d] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 99;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    letter-spacing: 0.3px;
}

/* Dark theme support */
[data-theme="dark"] .copyright-bar[b-3kr7fxxw5d] {
    background: rgba(22, 27, 34, 0.8);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted, #8b949e);
}

/* ==========================================
   ICONS ONLY MODE
   ========================================== */
[data-nav-display="icons-only"][b-3kr7fxxw5d] {
    --sidebar-width: 60px;
}

    [data-nav-display="icons-only"] .sidebar[b-3kr7fxxw5d] {
        padding: 12px 6px 42px;
    }

    [data-nav-display="icons-only"] .sidebar-title[b-3kr7fxxw5d] {
        font-size: 0;
        line-height: 0;
        padding: 4px 0;
        margin-bottom: 2px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        overflow: hidden;
    }

    [data-nav-display="icons-only"] .sidebar-item[b-3kr7fxxw5d] {
        justify-content: center;
        padding: 8px;
        gap: 0;
    }

    [data-nav-display="icons-only"] .nav-label[b-3kr7fxxw5d] {
        display: none;
    }

    [data-nav-display="icons-only"] .sidebar-item i[b-3kr7fxxw5d] {
        font-size: 18px;
        flex-shrink: 0;
    }

    [data-nav-display="icons-only"] .back-button[b-3kr7fxxw5d] {
        justify-content: center;
        padding: 8px;
        gap: 0;
    }

        [data-nav-display="icons-only"] .back-button .nav-label[b-3kr7fxxw5d] {
            display: none;
        }

    [data-nav-display="icons-only"] .sidebar-menu[b-3kr7fxxw5d] {
        margin-bottom: 4px;
    }

/* ==========================================
   TEXT ONLY MODE
   ========================================== */
[data-nav-display="text-only"] .sidebar-item i[b-3kr7fxxw5d] {
    display: none;
}

[data-nav-display="text-only"] .back-button i[b-3kr7fxxw5d] {
    display: none;
}

/* ==========================================
   COMPACT MODE
   ========================================== */
[data-compact="true"][b-3kr7fxxw5d] {
    --sidebar-width: 200px;
}

    [data-compact="true"] .sidebar-item[b-3kr7fxxw5d] {
        padding: 6px 12px;
        font-size: 13px;
        margin-bottom: 1px;
    }

    [data-compact="true"] .sidebar-title[b-3kr7fxxw5d] {
        padding: 6px 12px;
        margin-bottom: 2px;
        font-size: 10px;
    }

    [data-compact="true"] .sidebar[b-3kr7fxxw5d] {
        padding: 12px 8px 36px;
    }

    [data-compact="true"] .admin-main[b-3kr7fxxw5d] {
        padding: 16px;
        padding-bottom: 46px;
    }

    /* Compact + Icons Only */
    [data-compact="true"][data-nav-display="icons-only"][b-3kr7fxxw5d] {
        --sidebar-width: 48px;
    }

        [data-compact="true"][data-nav-display="icons-only"] .sidebar-item[b-3kr7fxxw5d] {
            padding: 6px;
        }

            [data-compact="true"][data-nav-display="icons-only"] .sidebar-item i[b-3kr7fxxw5d] {
                font-size: 16px;
            }

/* ==========================================
   Global Admin Form & UI Styles
   These styles are used by all admin child pages.
   Keep until all pages use components exclusively.
   ========================================== */

/* Legacy card styles (for pages not yet using Card component) */
[b-3kr7fxxw5d] .card {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    margin-bottom: 24px;
}

[b-3kr7fxxw5d] .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-3kr7fxxw5d] .card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

[b-3kr7fxxw5d] .card-body {
    padding: 20px;
}

/* Legacy button styles (for pages not yet using Button component) */
[b-3kr7fxxw5d] .btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

[b-3kr7fxxw5d] .btn-primary {
    background: var(--color-primary, #0366d6);
    color: white;
}

    [b-3kr7fxxw5d] .btn-primary:hover {
        background: var(--color-primary-hover, #0256c7);
    }

[b-3kr7fxxw5d] .btn-secondary {
    background: var(--color-surface, white);
    color: var(--color-text-primary, #24292e);
    border: 1px solid var(--color-border, #e1e4e8);
}

    [b-3kr7fxxw5d] .btn-secondary:hover {
        background: var(--color-gray-50, #f6f8fa);
    }

[b-3kr7fxxw5d] .btn-danger {
    background: var(--color-danger, #d73a49);
    color: white;
}

    [b-3kr7fxxw5d] .btn-danger:hover {
        background: var(--color-danger-hover, #cb2431);
    }

    [b-3kr7fxxw5d] .btn-danger:disabled {
        background: var(--color-border, #d1d5da);
        cursor: not-allowed;
        opacity: 0.5;
    }

[b-3kr7fxxw5d] .btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Legacy data table styles */
[b-3kr7fxxw5d] .data-table {
    width: 100%;
    border-collapse: collapse;
}

    [b-3kr7fxxw5d] .data-table thead th {
        background: var(--color-gray-50, #f6f8fa);
        padding: 12px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    [b-3kr7fxxw5d] .data-table tbody td {
        padding: 16px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    [b-3kr7fxxw5d] .data-table tbody tr:hover {
        background: var(--color-gray-50, #f6f8fa);
    }

/* Legacy badge styles */
[b-3kr7fxxw5d] .badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

/* Legacy modal styles */
[b-3kr7fxxw5d] .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    [b-3kr7fxxw5d] .modal.active {
        display: flex;
    }

[b-3kr7fxxw5d] .modal-content {
    position: relative;
    background: var(--color-surface, white);
    border-radius: var(--radius-md, 6px);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

[b-3kr7fxxw5d] .modal-header {
    padding: 20px 48px 20px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    align-items: center;
}

[b-3kr7fxxw5d] .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

[b-3kr7fxxw5d] .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 1;
}

    [b-3kr7fxxw5d] .modal-close:hover {
        background: var(--color-gray-50, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

[b-3kr7fxxw5d] .modal-body {
    padding: 24px;
}

[b-3kr7fxxw5d] .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Common utilities */
[b-3kr7fxxw5d] .action-buttons {
    display: flex;
    gap: 8px;
}

[b-3kr7fxxw5d] .loading,
[b-3kr7fxxw5d] .empty-state {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* Form styles */
[b-3kr7fxxw5d] .form-group {
    margin-bottom: 16px;
}

[b-3kr7fxxw5d] .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

[b-3kr7fxxw5d] .form-input,
[b-3kr7fxxw5d] .form-select,
[b-3kr7fxxw5d] .form-text {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    font-family: inherit;
}

    [b-3kr7fxxw5d] .form-input:focus,
    [b-3kr7fxxw5d] .form-select:focus {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

[b-3kr7fxxw5d] .form-text {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-top: 8px;
}

[b-3kr7fxxw5d] textarea.form-input {
    resize: vertical;
    font-family: inherit;
}



/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .admin-page[b-3kr7fxxw5d] {
        flex-direction: column;
        --sidebar-width: 0px;
    }

    .sidebar[b-3kr7fxxw5d] {
        width: 100% !important;
        min-width: 100% !important;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        padding-bottom: 16px;
        overflow: visible;
    }

    /* Always show labels on mobile */
    [data-nav-display="icons-only"] .nav-label[b-3kr7fxxw5d] {
        display: inline;
    }

    [data-nav-display="icons-only"] .sidebar-item[b-3kr7fxxw5d] {
        justify-content: flex-start;
        gap: 8px;
    }

        [data-nav-display="icons-only"] .sidebar-item i[b-3kr7fxxw5d] {
            font-size: 14px;
        }

    [data-nav-display="icons-only"] .back-button .nav-label[b-3kr7fxxw5d] {
        display: inline;
    }

    [data-nav-display="icons-only"] .back-button[b-3kr7fxxw5d] {
        gap: 6px;
    }

    .copyright-bar[b-3kr7fxxw5d] {
        left: 0;
    }
}
/* /Pages/Admin/AnnouncementManagement.razor.rz.scp.css */
.loading[b-glamjpdj2m] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* ============================================
   TITLE SEARCH
   ============================================ */
.ann-search-bar[b-glamjpdj2m] {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

    .ann-search-bar .form-input[b-glamjpdj2m] {
        max-width: 360px;
    }

/* ============================================
   DATA TABLE (matches OrganizationManagement)
   ============================================ */
.data-table[b-glamjpdj2m] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-glamjpdj2m] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-glamjpdj2m] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-glamjpdj2m] {
        background: var(--color-gray-50, #f6f8fa);
    }

.text-muted[b-glamjpdj2m] {
    color: var(--color-text-secondary, #586069);
}

/* ============================================
   ACTION BUTTONS + DANGER ICON FIX
   ============================================ */
.action-buttons[b-glamjpdj2m] {
    display: flex;
    gap: 6px;
}

    /* Ensure danger button icons render white like primary does */
    .action-buttons[b-glamjpdj2m]  .btn-danger,
    .action-buttons[b-glamjpdj2m]  .btn-danger i,
    .action-buttons[b-glamjpdj2m]  .btn-danger i::before {
        color: var(--color-text-inverse, white);
    }

/* ============================================
   MODAL FORM LAYOUT
   ============================================ */
.form-row[b-glamjpdj2m] {
    display: flex;
    gap: 16px;
}

.form-col[b-glamjpdj2m] {
    flex: 1;
    min-width: 0;
}

.audience-toggle[b-glamjpdj2m] {
    display: flex;
    gap: 20px;
    padding: 10px 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.radio-label[b-glamjpdj2m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

    .radio-label input[type="radio"][b-glamjpdj2m] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

.audience-picker[b-glamjpdj2m] {
    margin-top: 10px;
}

.toggle-grid[b-glamjpdj2m] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    padding: 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.checkbox-label[b-glamjpdj2m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

    .checkbox-label input[type="checkbox"][b-glamjpdj2m] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.checkbox-disabled[b-glamjpdj2m] {
    opacity: 0.55;
    cursor: not-allowed;
}

    .checkbox-disabled input[type="checkbox"][b-glamjpdj2m] {
        cursor: not-allowed;
    }

.form-hint[b-glamjpdj2m] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-top: 4px;
}
/* /Pages/Admin/ApiClients.razor.rz.scp.css */
.callout-info[b-ewxy11apdt] {
    padding: 12px 14px;
    margin: 0 0 16px;
    background: color-mix(in srgb, var(--color-primary, #0366d6) 8%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary, #0366d6) 25%, white);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text, #1f2937);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .callout-info i[b-ewxy11apdt] {
        color: var(--color-primary, #0366d6);
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .callout-info code[b-ewxy11apdt] {
        background: var(--color-surface, white);
        padding: 1px 5px;
        border-radius: 3px;
        font-family: ui-monospace, Consolas, monospace;
        font-size: 12px;
    }

.key-prefix[b-ewxy11apdt] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    background: var(--color-bg-secondary, #f6f8fa);
    padding: 2px 6px;
    border-radius: 4px;
}

.row-inactive td[b-ewxy11apdt] {
    opacity: 0.55;
}

.action-buttons[b-ewxy11apdt] {
    display: flex;
    gap: 6px;
}

.small[b-ewxy11apdt] {
    font-size: 11px;
}

.text-muted[b-ewxy11apdt] {
    color: var(--color-text-muted, #6e7681);
}

.reveal-warning[b-ewxy11apdt] {
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--color-warning-light, #fff4e5);
    border: 1px solid var(--color-warning, #ffd28d);
    border-radius: 8px;
    color: var(--color-warning-text, #7a4500);
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .reveal-warning i[b-ewxy11apdt] {
        color: var(--color-warning-text, #b45309);
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 1px;
    }

.curl-example[b-ewxy11apdt] {
    background: #0f172a;
    color: #cbd5e1;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

.capability-suggestions[b-ewxy11apdt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.cap-chip[b-ewxy11apdt] {
    padding: 3px 10px;
    font-size: 11px;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-primary, #0366d6) 10%, white);
    color: var(--color-primary, #0366d6);
    border: 1px solid color-mix(in srgb, var(--color-primary, #0366d6) 30%, white);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .cap-chip:hover[b-ewxy11apdt] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
    }

.event-checkbox[b-ewxy11apdt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    font-size: 12px;
    cursor: pointer;
}

    .event-checkbox code[b-ewxy11apdt] {
        background: var(--color-bg-secondary, #f6f8fa);
        padding: 1px 6px;
        border-radius: 3px;
        font-family: ui-monospace, Consolas, monospace;
    }
/* /Pages/Admin/AuditLog.razor.rz.scp.css */
/* ============================================
   AUDIT LOG - CENTRALIZED ADMIN PAGE
   ============================================ */

.container[b-hy1w16z2pa] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
}

.page-header[b-hy1w16z2pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-5, 20px);
}

.page-header-left h1[b-hy1w16z2pa] {
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #24292f);
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    margin: 0;
}

    .page-header-left h1 i[b-hy1w16z2pa] {
        color: var(--color-primary, #0969da);
    }

.page-subtitle[b-hy1w16z2pa] {
    color: var(--color-text-secondary, #586069);
    font-size: var(--font-size-sm, 13px);
    margin: var(--spacing-1, 4px) 0 0;
}

/* ═══════ Filters ═══════ */
.audit-filters[b-hy1w16z2pa] {
    margin-bottom: var(--spacing-5, 20px);
    padding-bottom: var(--spacing-4, 16px);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.filter-row[b-hy1w16z2pa] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-3, 12px);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-3, 12px);
}

    .filter-row:last-child[b-hy1w16z2pa] {
        margin-bottom: 0;
    }

.filter-group[b-hy1w16z2pa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.filter-label[b-hy1w16z2pa] {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-group[b-hy1w16z2pa] {
    flex: 1;
    min-width: 200px;
}

.filter-actions[b-hy1w16z2pa] {
    align-items: flex-end;
}

.form-control-sm[b-hy1w16z2pa],
.form-select-sm[b-hy1w16z2pa] {
    padding: 6px 10px;
    font-size: var(--font-size-sm, 13px);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #24292f);
    font-family: inherit;
}

    .form-control-sm:focus[b-hy1w16z2pa],
    .form-select-sm:focus[b-hy1w16z2pa] {
        outline: none;
        border-color: var(--color-primary, #0969da);
        box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
    }

/* ═══════ Results Table ═══════ */
.data-table[b-hy1w16z2pa] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-hy1w16z2pa] {
        background: var(--color-gray-50, #fafbfc);
        padding: 10px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-hy1w16z2pa] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 13px;
        vertical-align: top;
    }

    .data-table tbody tr:hover[b-hy1w16z2pa] {
        background: var(--color-gray-50, #f6f8fa);
    }

.timestamp-cell[b-hy1w16z2pa] {
    white-space: nowrap;
}

.date-primary[b-hy1w16z2pa] {
    display: block;
    font-weight: 500;
    color: var(--color-text-primary, #24292f);
}

.date-secondary[b-hy1w16z2pa] {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.user-name[b-hy1w16z2pa] {
    font-weight: 500;
}

.entity-name[b-hy1w16z2pa] {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-top: 2px;
}

.action-cell[b-hy1w16z2pa] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.action-icon[b-hy1w16z2pa] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

.audit-icon-field[b-hy1w16z2pa] {
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary, #2563eb);
}

.audit-icon-comment[b-hy1w16z2pa] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary, #4f46e5);
}

.audit-icon-attachment[b-hy1w16z2pa] {
    background: #fce7f3;
    color: #db2777;
}

.audit-icon-time[b-hy1w16z2pa] {
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning, #d97706);
}

.audit-icon-lifecycle[b-hy1w16z2pa] {
    background: var(--color-success-light, #d1fae5);
    color: var(--color-success, #059669);
}

.audit-icon-security[b-hy1w16z2pa] {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger, #dc2626);
}

.audit-icon-settings[b-hy1w16z2pa] {
    background: var(--color-accent-ai-light, #f3e8ff);
    color: var(--color-accent-ai, #9333ea);
}

.audit-icon-default[b-hy1w16z2pa] {
    background: var(--color-gray-100, #f6f8fa);
    color: var(--color-text-secondary, #586069);
}

.action-label[b-hy1w16z2pa] {
    font-weight: 500;
    color: var(--color-text-primary, #24292f);
}

.audit-values[b-hy1w16z2pa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.audit-old-value[b-hy1w16z2pa] {
    padding: 1px 6px;
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
    border-radius: 4px;
    text-decoration: line-through;
    font-size: 12px;
}

.audit-new-value[b-hy1w16z2pa] {
    padding: 1px 6px;
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success, #16a34a);
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
}

.audit-values i[b-hy1w16z2pa] {
    font-size: 10px;
    color: var(--color-text-secondary, #586069);
}

.details-cell[b-hy1w16z2pa] {
    max-width: 250px;
}

.detail-text[b-hy1w16z2pa] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ip-badge[b-hy1w16z2pa] {
    padding: 2px 6px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
}

.loading[b-hy1w16z2pa] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* ═══════ Responsive ═══════ */
@media (max-width: 768px) {
    .filter-row[b-hy1w16z2pa] {
        flex-direction: column;
    }

    .filter-group[b-hy1w16z2pa] {
        min-width: 100%;
    }

    .data-table[b-hy1w16z2pa] {
        font-size: 12px;
    }

        .data-table thead th[b-hy1w16z2pa],
        .data-table tbody td[b-hy1w16z2pa] {
            padding: 8px 10px;
        }
}
/* /Pages/Admin/BrandingSettings.razor.rz.scp.css */
/* Layout */
.branding-container[b-x49cnaib7x] {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 24px;
    max-width: 1400px;
}

.settings-panel[b-x49cnaib7x] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Logo Upload */
.logo-upload-section[b-x49cnaib7x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.current-logo[b-x49cnaib7x] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-secondary, #f6f8fa);
    border-radius: var(--radius-lg, 8px);
}

.logo-preview-img[b-x49cnaib7x] {
    max-width: 100px;
    max-height: 100px;
    border-radius: var(--radius-lg, 8px);
}

.emoji-logo[b-x49cnaib7x] {
    font-size: 64px;
}

.upload-area[b-x49cnaib7x] {
    border: 2px dashed var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

    .upload-area:hover[b-x49cnaib7x] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-bg-secondary, #f6f8fa);
    }

    .upload-area:active[b-x49cnaib7x] {
        transform: scale(0.98);
    }

.upload-icon[b-x49cnaib7x] {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--color-text-muted, #586069);
}

.upload-text[b-x49cnaib7x] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.upload-hint[b-x49cnaib7x] {
    font-size: 13px;
    color: var(--color-text-muted, #586069);
}

.emoji-section[b-x49cnaib7x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.emoji-input[b-x49cnaib7x] {
    width: 60px;
    padding: 6px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    text-align: center;
    font-size: 24px;
}

/* Color Pickers */
.color-picker[b-x49cnaib7x] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-input[b-x49cnaib7x] {
    width: 50px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.gradient-picker[b-x49cnaib7x] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.gradient-arrow[b-x49cnaib7x] {
    font-size: 24px;
    color: var(--color-text-muted, #586069);
}

.gradient-preview[b-x49cnaib7x] {
    height: 60px;
    border-radius: var(--radius-lg, 8px);
    margin-top: 12px;
    border: 1px solid var(--color-border, #e1e4e8);
}

/* Toggle Switch */
.toggle-wrapper[b-x49cnaib7x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch[b-x49cnaib7x] {
    position: relative;
    width: 50px;
    height: 24px;
    /* Lock the toggle's width — without this, a long sibling description
       inside .toggle-wrapper (a flex row) shrinks the switch toward zero,
       leaving only the slider's circular :before visible behind the text. */
    flex-shrink: 0;
}

    .switch input[b-x49cnaib7x] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-x49cnaib7x] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border, #e1e4e8);
    transition: .2s;
    border-radius: 24px;
}

    .slider[b-x49cnaib7x]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .2s;
        border-radius: 50%;
    }

input:checked + .slider[b-x49cnaib7x] {
    background-color: var(--color-primary, #0366d6);
}

    input:checked + .slider[b-x49cnaib7x]:before {
        transform: translateX(26px);
    }

/* Action Buttons */
.action-buttons[b-x49cnaib7x] {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

/* Info Box */
.info-box[b-x49cnaib7x] {
    margin-top: 8px;
    font-size: 13px;
}

.info-box-item[b-x49cnaib7x] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 4px;
}

    .info-box-item code[b-x49cnaib7x] {
        background: var(--color-bg-secondary, #f6f8fa);
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 12px;
        white-space: nowrap;
    }

    .info-box-item span[b-x49cnaib7x] {
        color: var(--color-text-muted, #586069);
        font-size: 12px;
    }

/* Preview Panel */
.preview-panel[b-x49cnaib7x] {
    background: var(--color-surface, white);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 24px;
}

.preview-header[b-x49cnaib7x] {
    padding: 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .preview-header h3[b-x49cnaib7x] {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text-primary, #24292e);
        margin: 0;
    }

.preview-content[b-x49cnaib7x] {
    padding: 40px;
    background: var(--color-bg-secondary, #f6f8fa);
}

/* ═══════════════════════════════════════════════════════════════
   Live Preview — mirrors Login.razor (Aurora + glass card + floating logo)
   ═══════════════════════════════════════════════════════════════ */

.login-preview[b-x49cnaib7x] {
    --brand-ink: #0a1929;
    --brand-muted: #5b6b80;

    position: relative;
    border-radius: 12px;
    min-height: 540px;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    color: var(--brand-ink);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Aurora blobs (static — no animation in admin preview) */
.preview-aurora[b-x49cnaib7x] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}

.preview-aurora-1[b-x49cnaib7x] {
    width: 320px;
    height: 320px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 55%, transparent);
    top: -80px;
    right: -80px;
}

.preview-aurora-2[b-x49cnaib7x] {
    width: 300px;
    height: 300px;
    background: color-mix(in srgb, var(--brand-accent, #1A8AC4) 50%, transparent);
    bottom: -80px;
    left: -60px;
}

/* Two-column grid (single column when info panel hidden) */
.preview-grid[b-x49cnaib7x] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 24px;
    padding: 32px 24px;
    align-items: center;
    min-height: 540px;
}

    .preview-grid.form-only[b-x49cnaib7x] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

.preview-left[b-x49cnaib7x] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-right[b-x49cnaib7x] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Glass card */
.preview-card[b-x49cnaib7x] {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 28px;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 8px 24px -6px rgba(15, 23, 42, 0.16),
        0 24px 48px -16px rgba(15, 23, 42, 0.22);
}

    .preview-card[b-x49cnaib7x]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 14px;
        padding: 1px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-primary, #0052CC) 40%, transparent) 0%,
            color-mix(in srgb, var(--brand-accent, #1A8AC4) 15%, transparent) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }

/* Floating logo (no tile, just shadow) */
.preview-brand-tile[b-x49cnaib7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-bottom: 16px;
    filter:
        drop-shadow(0 3px 5px rgba(15, 23, 42, 0.10))
        drop-shadow(0 10px 16px rgba(15, 23, 42, 0.16));
}

.preview-logo-img[b-x49cnaib7x] {
    display: block;
    max-width: 150px;
    max-height: 64px;
    object-fit: contain;
}

.preview-emoji[b-x49cnaib7x] {
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 0.5px;
    color: var(--brand-primary, #0052CC);
    line-height: 1;
}

.preview-card-title[b-x49cnaib7x] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--brand-ink);
    margin: 0 0 4px 0;
}

.preview-card-sub[b-x49cnaib7x] {
    color: var(--brand-muted);
    font-size: 13px;
    margin: 0 0 20px 0;
}

.preview-field[b-x49cnaib7x] {
    margin-bottom: 12px;
}

    .preview-field label[b-x49cnaib7x] {
        display: block;
        font-size: 10px;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 5px;
    }

.preview-input[b-x49cnaib7x] {
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #94a3b8;
    font-size: 13px;
}

.preview-options[b-x49cnaib7x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--brand-muted);
    margin: 12px 0 16px 0;
}

.preview-link[b-x49cnaib7x] {
    color: var(--brand-primary, #0052CC);
    font-weight: 600;
}

.preview-submit-btn[b-x49cnaib7x] {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-primary, #0052CC) 25%, transparent);
}

.preview-card-foot[b-x49cnaib7x] {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 16px;
}

/* Right info panel — eyebrow + headline + sub + stats */
.preview-eyebrow[b-x49cnaib7x] {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.preview-headline[b-x49cnaib7x] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-primary, #0052CC) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.preview-sub-headline[b-x49cnaib7x] {
    font-size: 13px;
    color: var(--brand-muted);
    line-height: 1.55;
    margin: 0;
}

.preview-stats[b-x49cnaib7x] {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 24px;
    margin-top: 6px;
}

.preview-stat-n[b-x49cnaib7x] {
    font-size: 20px;
    font-weight: 800;
    color: var(--brand-ink);
    letter-spacing: -0.02em;
}

.preview-stat-l[b-x49cnaib7x] {
    font-size: 9px;
    color: var(--brand-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Responsive */
@media (max-width: 1200px) {
    .branding-container[b-x49cnaib7x] {
        grid-template-columns: 1fr;
    }

    .preview-grid[b-x49cnaib7x] {
        grid-template-columns: 1fr;
    }

    .preview-right[b-x49cnaib7x] {
        display: none;
    }
}
/* /Pages/Admin/DashboardDesigner.razor.rz.scp.css */
/* =============================================================================
   Dashboard Designer — Scoped CSS
   Location: Pages/Admin/DashboardDesigner.razor.css
   ============================================================================= */

/* ── Layouts Grid (list mode) ─────────────────────────────────────────────── */
.layouts-grid[b-cikqgb3cw4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.layout-card[b-cikqgb3cw4] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

    .layout-card:hover[b-cikqgb3cw4] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border-color: var(--primary, #2563eb);
    }

.layout-card-header[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.layout-card-title[b-cikqgb3cw4] {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary, #111827);
}

.layout-card-meta[b-cikqgb3cw4] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.meta-item[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

    .meta-item i[b-cikqgb3cw4] {
        font-size: 14px;
    }

.layout-card-footer[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.updated[b-cikqgb3cw4] {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
}

.layout-card-actions[b-cikqgb3cw4] {
    display: flex;
    gap: 4px;
}

/* ── Icon Buttons ─────────────────────────────────────────────────────────── */
.icon-btn[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .icon-btn:hover[b-cikqgb3cw4] {
        background: var(--surface-hover, #f3f4f6);
        color: var(--text-primary, #111827);
    }

    .icon-btn.sm[b-cikqgb3cw4] {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .icon-btn.danger:hover[b-cikqgb3cw4] {
        background: var(--color-danger-light, #fef2f2);
        color: var(--color-danger, #dc2626);
    }

/* ── Designer Workspace ───────────────────────────────────────────────────── */
.designer-workspace[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-row[b-cikqgb3cw4] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

    .settings-row .field-group[b-cikqgb3cw4] {
        flex: 1;
        min-width: 180px;
    }

    .settings-row .checkbox-group[b-cikqgb3cw4] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 8px;
    }

        .settings-row .checkbox-group label[b-cikqgb3cw4] {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            cursor: pointer;
        }

.field-hint[b-cikqgb3cw4] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
    margin-top: 2px;
    padding-left: 20px;
}

.field-label[b-cikqgb3cw4] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

/* ── Designer Layout (sidebar + canvas) ───────────────────────────────────── */
.designer-layout[b-cikqgb3cw4] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    min-height: 500px;
}

    .designer-layout.preview-mode[b-cikqgb3cw4] {
        grid-template-columns: 1fr;
    }

        .designer-layout.preview-mode .designer-card.preview[b-cikqgb3cw4] {
            cursor: default;
            border-style: solid;
        }

            .designer-layout.preview-mode .designer-card.preview:hover[b-cikqgb3cw4] {
                box-shadow: none;
            }

@media (max-width: 1024px) {
    .designer-layout[b-cikqgb3cw4] {
        grid-template-columns: 1fr;
    }

    .kpi-palette[b-cikqgb3cw4] {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* ── KPI Palette ──────────────────────────────────────────────────────────── */
.kpi-palette[b-cikqgb3cw4] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    position: sticky;
    top: 16px;
}

.palette-header[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.palette-title[b-cikqgb3cw4] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.palette-count[b-cikqgb3cw4] {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    background: var(--surface-secondary, #f3f4f6);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Palette Tabs ── */
.palette-tabs[b-cikqgb3cw4] {
    display: flex;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.palette-tab[b-cikqgb3cw4] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

    .palette-tab:hover[b-cikqgb3cw4] {
        color: var(--text-primary, #111827);
        background: var(--surface-secondary, #f9fafb);
    }

    .palette-tab.active[b-cikqgb3cw4] {
        color: var(--primary, #6366f1);
        border-bottom-color: var(--primary, #6366f1);
        font-weight: 600;
    }

    .palette-tab i[b-cikqgb3cw4] {
        font-size: 14px;
    }

.palette-empty[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-tertiary, #9ca3af);
    font-size: 12px;
    text-align: center;
}

    .palette-empty i[b-cikqgb3cw4] {
        font-size: 24px;
    }

.palette-category[b-cikqgb3cw4] {
    padding: 8px 0;
}

.palette-placed[b-cikqgb3cw4] {
    padding: 8px 0;
    opacity: 0.6;
}

.category-label[b-cikqgb3cw4] {
    display: block;
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #9ca3af);
}

.palette-item[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: grab;
    transition: background 0.1s;
}

    .palette-item:hover[b-cikqgb3cw4] {
        background: var(--surface-hover, #f3f4f6);
    }

    .palette-item.placed[b-cikqgb3cw4] {
        cursor: default;
    }

        .palette-item.placed:hover[b-cikqgb3cw4] {
            background: transparent;
        }

.palette-item-icon[b-cikqgb3cw4] {
    font-size: 16px;
    flex-shrink: 0;
}

.palette-item-name[b-cikqgb3cw4] {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-add-btn[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.palette-item:hover .palette-add-btn[b-cikqgb3cw4] {
    opacity: 1;
}

.palette-add-btn:hover[b-cikqgb3cw4] {
    background: var(--primary, #2563eb);
    color: white;
    border-color: var(--primary, #2563eb);
}

/* ── Palette Search & Filters ────────────────────────────────────────────── */
.palette-search-area[b-cikqgb3cw4] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.palette-search[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--surface-hover, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
}

    .palette-search i[b-cikqgb3cw4] {
        font-size: 14px;
        color: var(--text-secondary, #6b7280);
        flex-shrink: 0;
    }

    .palette-search input[b-cikqgb3cw4] {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 12px;
        outline: none;
        min-width: 0;
    }

.palette-search-clear[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
}

    .palette-search-clear:hover[b-cikqgb3cw4] {
        background: var(--border, #e5e7eb);
    }

.palette-filters[b-cikqgb3cw4] {
    display: flex;
    gap: 4px;
}

.palette-filter-select[b-cikqgb3cw4] {
    flex: 1;
    padding: 3px 4px;
    font-size: 11px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    background: white;
    color: var(--text-primary, #111827);
    min-width: 0;
}

.palette-clear-filters[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    font-size: 11px;
    color: var(--primary, #2563eb);
    cursor: pointer;
    padding: 2px 0;
}

    .palette-clear-filters:hover[b-cikqgb3cw4] {
        text-decoration: underline;
    }

/* ── Palette item info (name + badges) ── */
.palette-item-info[b-cikqgb3cw4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .palette-item-info .palette-item-name[b-cikqgb3cw4] {
        flex: none;
    }

.palette-item-badges[b-cikqgb3cw4] {
    display: flex;
    gap: 4px;
}

.palette-badge[b-cikqgb3cw4] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
}

.palette-badge-report[b-cikqgb3cw4] {
    color: var(--primary, #2563eb);
}

/* ── Designer Canvas ──────────────────────────────────────────────────────── */
.designer-canvas[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.designer-section[b-cikqgb3cw4] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    overflow: visible;
    transition: box-shadow 0.15s;
}

    .designer-section.section-dragging[b-cikqgb3cw4] {
        opacity: 0.5;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.section-header[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface-secondary, #f9fafb);
    border-radius: 8px 8px 0 0;
}

.section-header-left[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-drag-handle[b-cikqgb3cw4] {
    cursor: grab;
    color: var(--text-tertiary, #9ca3af);
    display: flex;
    align-items: center;
    padding: 2px;
}

    .section-drag-handle:hover[b-cikqgb3cw4] {
        color: var(--text-secondary, #6b7280);
    }

.section-title[b-cikqgb3cw4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: text;
}

    .section-title i[b-cikqgb3cw4] {
        font-size: 16px;
    }

.section-title-input[b-cikqgb3cw4] {
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--primary, #2563eb);
    border-radius: 4px;
    padding: 2px 8px;
    outline: none;
    width: 200px;
}

.section-header-right[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-option[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
}

    .section-option input[type="checkbox"][b-cikqgb3cw4] {
        width: 14px;
        height: 14px;
    }

/* ── Designer Grid (card placement) ───────────────────────────────────────── */
.designer-grid[b-cikqgb3cw4] {
    display: grid;
    gap: 12px;
    padding: 14px;
    min-height: 80px;
    grid-auto-rows: minmax(100px, auto);
}

    .designer-grid.drop-zone-active[b-cikqgb3cw4] {
        background: color-mix(in srgb, var(--primary, #2563eb) 3%, transparent);
        outline: 2px dashed color-mix(in srgb, var(--primary, #2563eb) 30%, transparent);
        outline-offset: -2px;
        border-radius: 0 0 8px 8px;
    }

.grid-empty-hint[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 2px dashed var(--border, #e5e7eb);
    border-radius: 6px;
    color: var(--text-tertiary, #9ca3af);
    font-size: 13px;
}

    .grid-empty-hint i[b-cikqgb3cw4] {
        font-size: 28px;
    }

/* ── Designer Card (KPI placement) ────────────────────────────────────────── */
.designer-card[b-cikqgb3cw4] {
    position: relative;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 10px 10px 16px 10px;
    cursor: grab;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    align-items: stretch;
    overflow: visible;
}

    .designer-card:hover[b-cikqgb3cw4] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: var(--primary-light, #93c5fd);
    }

    .designer-card.dragging[b-cikqgb3cw4] {
        opacity: 0.4;
    }

    .designer-card.chart-card[b-cikqgb3cw4] {
        border-color: color-mix(in srgb, #6366f1 30%, transparent);
        background: color-mix(in srgb, #6366f1 3%, var(--surface, #fff));
    }

        .designer-card.chart-card:hover[b-cikqgb3cw4] {
            border-color: var(--color-primary, #6366f1);
        }

.card-type-badge[b-cikqgb3cw4] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

    .card-type-badge.chart[b-cikqgb3cw4] {
        color: var(--color-primary, #6366f1);
        background: color-mix(in srgb, #6366f1 12%, transparent);
    }

    .card-type-badge.table[b-cikqgb3cw4] {
        color: var(--color-info, #0891b2);
        background: color-mix(in srgb, #0891b2 12%, transparent);
    }

.designer-card.table-card[b-cikqgb3cw4] {
    border-color: color-mix(in srgb, #0891b2 30%, transparent);
    background: color-mix(in srgb, #0891b2 3%, var(--surface, #fff));
}

    .designer-card.table-card:hover[b-cikqgb3cw4] {
        border-color: var(--color-info, #0891b2);
    }

.designer-card-placeholder[b-cikqgb3cw4] {
    border: 2px dashed var(--primary, #2563eb);
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary, #2563eb) 5%, transparent);
    min-height: 60px;
}

.card-content[b-cikqgb3cw4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-header-row[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-icon[b-cikqgb3cw4] {
    font-size: 18px;
    flex-shrink: 0;
}

.card-name[b-cikqgb3cw4] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-remove-btn[b-cikqgb3cw4] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 3;
}

.designer-card:hover .card-remove-btn[b-cikqgb3cw4] {
    opacity: 1;
}

.card-remove-btn:hover[b-cikqgb3cw4] {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
}

.card-size-controls[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.size-label[b-cikqgb3cw4] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary, #9ca3af);
    min-width: 20px;
}

.size-buttons[b-cikqgb3cw4] {
    display: flex;
    gap: 2px;
}

.size-btn[b-cikqgb3cw4] {
    width: 22px;
    height: 20px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 3px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s;
}

    .size-btn:hover[b-cikqgb3cw4] {
        border-color: var(--primary, #2563eb);
        color: var(--primary, #2563eb);
    }

    .size-btn.active[b-cikqgb3cw4] {
        background: var(--primary, #2563eb);
        border-color: var(--primary, #2563eb);
        color: white;
    }

/* Resize handle (right edge — width) */
.resize-handle[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    padding: 0 2px;
    cursor: col-resize;
    color: var(--text-tertiary, #d1d5db);
    opacity: 0;
    transition: opacity 0.15s;
    user-select: none;
}

    .resize-handle i[b-cikqgb3cw4] {
        pointer-events: none;
    }

.designer-card:hover .resize-handle[b-cikqgb3cw4] {
    opacity: 1;
}

.resize-handle:hover[b-cikqgb3cw4] {
    color: var(--primary, #2563eb);
}

/* Bottom resize handle (height) */
.resize-handle-bottom[b-cikqgb3cw4] {
    position: absolute;
    bottom: -2px;
    left: 12px;
    right: 12px;
    height: 14px;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--text-tertiary, #d1d5db);
    z-index: 2;
    user-select: none;
}

    .resize-handle-bottom i[b-cikqgb3cw4] {
        pointer-events: none;
    }

    .resize-handle-bottom[b-cikqgb3cw4]::before {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0.4;
        transition: opacity 0.15s;
    }

.designer-card:hover .resize-handle-bottom[b-cikqgb3cw4] {
    opacity: 1;
}

.resize-handle-bottom:hover[b-cikqgb3cw4] {
    color: var(--primary, #2563eb);
}

    .resize-handle-bottom:hover[b-cikqgb3cw4]::before {
        opacity: 0.8;
    }

/* Settings button (opens height popover) */
.card-settings-btn[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 5px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

    .card-settings-btn:hover[b-cikqgb3cw4] {
        border-color: var(--primary, #2563eb);
        color: var(--primary, #2563eb);
        background: color-mix(in srgb, var(--primary, #2563eb) 5%, transparent);
    }

.height-badge[b-cikqgb3cw4] {
    font-size: 9px;
    font-weight: 700;
    background: var(--primary, #2563eb);
    color: white;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 15px;
}

/* Height popover — opens UPWARD from the settings button */
.height-popover[b-cikqgb3cw4] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 500;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0;
    min-width: 170px;
    animation: popoverIn-b-cikqgb3cw4 0.12s ease;
}

@keyframes popoverIn-b-cikqgb3cw4 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.height-popover-header[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.popover-close[b-cikqgb3cw4] {
    background: none;
    border: none;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    padding: 2px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.1s;
}

    .popover-close:hover[b-cikqgb3cw4] {
        color: var(--text-primary, #1f2937);
        background: var(--surface-hover, #f3f4f6);
    }

.height-popover-body[b-cikqgb3cw4] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.height-popover-input[b-cikqgb3cw4] {
    width: 100%;
    height: 32px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary, #1f2937);
    background: var(--surface, #fff);
    outline: none;
    transition: border-color 0.15s;
}

    .height-popover-input:focus[b-cikqgb3cw4] {
        border-color: var(--primary, #2563eb);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 15%, transparent);
    }

.height-popover-hint[b-cikqgb3cw4] {
    font-size: 10px;
    color: var(--text-tertiary, #9ca3af);
    text-align: center;
}

/* Resize preview overlay (created by JS during drag) */
.resize-preview[b-cikqgb3cw4] {
    position: fixed;
    background: color-mix(in srgb, var(--primary, #2563eb) 8%, transparent);
    border: 2px dashed color-mix(in srgb, var(--primary, #2563eb) 50%, transparent);
    border-radius: 6px;
    pointer-events: none;
    z-index: 10000;
}

.resize-preview-label[b-cikqgb3cw4] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary, #2563eb);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Add Section Button ───────────────────────────────────────────────────── */
.add-section-btn[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    .add-section-btn:hover[b-cikqgb3cw4] {
        border-color: var(--primary, #2563eb);
        color: var(--primary, #2563eb);
        background: color-mix(in srgb, var(--primary, #2563eb) 3%, transparent);
    }

/* ── Action Bar ───────────────────────────────────────────────────────────── */
.action-bar[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.action-bar-left[b-cikqgb3cw4], .action-bar-right[b-cikqgb3cw4] {
    display: flex;
    gap: 8px;
}

/* ── Icon Grid (section icon picker) ──────────────────────────────────────── */
.icon-grid[b-cikqgb3cw4] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.icon-option[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    background: transparent;
    font-size: 20px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

    .icon-option:hover[b-cikqgb3cw4] {
        border-color: var(--primary, #2563eb);
        color: var(--primary, #2563eb);
    }

    .icon-option.selected[b-cikqgb3cw4] {
        background: var(--primary, #2563eb);
        border-color: var(--primary, #2563eb);
        color: white;
    }

.icon-custom[b-cikqgb3cw4] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

    .icon-custom .form-input[b-cikqgb3cw4] {
        flex: 1;
    }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  Drop Indicator & Drag Feedback                                          */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Sortable placeholder for reorder within grid */
[b-cikqgb3cw4] .designer-card-placeholder {
    height: 60px;
    border: 2px dashed var(--color-primary-light, #93c5fd);
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.04);
    transition: all 0.15s ease;
}

/* Dragging card state */
.designer-card.dragging[b-cikqgb3cw4] {
    opacity: 0.4;
    outline: 2px dashed var(--color-primary-light, #93c5fd);
}

/* Drop zone highlight */
.designer-grid.drop-zone-active[b-cikqgb3cw4] {
    outline: 2px dashed var(--color-primary, #2563eb);
    outline-offset: 4px;
    background: rgba(37, 99, 235, 0.02);
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  Preview Mode — live data rendering                                      */
/* ══════════════════════════════════════════════════════════════════════════ */

.preview-widget[b-cikqgb3cw4] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    min-height: 80px;
}

.preview-widget-inner[b-cikqgb3cw4] {
    width: 100%;
    height: 100%;
}

    .preview-widget-inner.chart[b-cikqgb3cw4] {
        padding: 8px;
    }

.preview-widget-loading[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
}

    .preview-widget-loading i[b-cikqgb3cw4] {
        font-size: 24px;
    }

.preview-widget-empty[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 12px;
}

    .preview-widget-empty i[b-cikqgb3cw4] {
        font-size: 28px;
        opacity: 0.5;
    }

/* ── Preview Table ── */
.preview-table-header[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-gray-100, #f9fafb);
}

.preview-table-title[b-cikqgb3cw4] {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-primary, #1f2937);
    flex: 1;
}

.preview-table-meta[b-cikqgb3cw4] {
    font-size: 11px;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-gray-100, #f3f4f6);
    padding: 2px 8px;
    border-radius: 10px;
}

.preview-table-scroll[b-cikqgb3cw4] {
    overflow: auto;
    max-height: 360px;
}

.preview-table-grid[b-cikqgb3cw4] {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

    .preview-table-grid thead[b-cikqgb3cw4] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .preview-table-grid th[b-cikqgb3cw4] {
        background: var(--color-gray-100, #f3f4f6);
        padding: 7px 10px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-secondary, #6b7280);
        border-bottom: 2px solid var(--color-border, #e5e7eb);
        white-space: nowrap;
    }

    .preview-table-grid td[b-cikqgb3cw4] {
        padding: 7px 10px;
        border-bottom: 1px solid var(--color-border-light, #f3f4f6);
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-text-secondary, #374151);
    }

    .preview-table-grid tbody tr:hover td[b-cikqgb3cw4] {
        background: var(--color-gray-100, #f9fafb);
    }

/* Spinning loader */
@keyframes loading-spin-b-cikqgb3cw4 {
    to {
        transform: rotate(360deg);
    }
}

.loading-spin[b-cikqgb3cw4] {
    animation: loading-spin-b-cikqgb3cw4 1s linear infinite;
}

.preview-loading-banner[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--color-primary-light, #eff6ff);
    border: 1px solid var(--color-primary-light, #bfdbfe);
    border-radius: 8px;
    color: var(--color-primary, #2563eb);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* ── Preview Table Widget ────────────────────────────────────────────────── */
.preview-widget-inner.table[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.preview-table-header[b-cikqgb3cw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #f9fafb);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.preview-table-title[b-cikqgb3cw4] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #111827);
}

.preview-table-meta[b-cikqgb3cw4] {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.preview-table-scroll[b-cikqgb3cw4] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 350px;
    flex: 1;
    min-height: 0;
}

.preview-table-grid[b-cikqgb3cw4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}

    .preview-table-grid thead[b-cikqgb3cw4] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .preview-table-grid th[b-cikqgb3cw4] {
        background: var(--surface, #f3f4f6);
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-secondary, #374151);
        border-bottom: 2px solid var(--border, #e5e7eb);
        white-space: nowrap;
    }

    .preview-table-grid td[b-cikqgb3cw4] {
        padding: 7px 12px;
        border-bottom: 1px solid var(--border-light, #f3f4f6);
        color: var(--text-primary, #111827);
        white-space: nowrap;
    }

    .preview-table-grid tbody tr:hover[b-cikqgb3cw4] {
        background: var(--hover, #f9fafb);
    }

/* ── Preview Widget States ───────────────────────────────────────────────── */
.preview-widget-loading[b-cikqgb3cw4],
.preview-widget-empty[b-cikqgb3cw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--text-secondary, #9ca3af);
    font-size: 13px;
}

.preview-widget-inner.chart[b-cikqgb3cw4] {
    padding: 8px;
}
/* /Pages/Admin/EmailTemplateEditor.razor.rz.scp.css */
/* Editor Header */
.editor-header[b-4gj5xgu9dq] {
    background: var(--color-surface, white);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    padding: 16px 24px;
    margin: -24px -24px 24px -24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.editor-header-left[b-4gj5xgu9dq] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn[b-4gj5xgu9dq] {
    padding: 8px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    transition: background 0.2s;
}

    .back-btn:hover[b-4gj5xgu9dq] {
        background: var(--color-bg-secondary, #f6f8fa);
    }

.editor-title[b-4gj5xgu9dq] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.editor-meta[b-4gj5xgu9dq] {
    font-size: 12px;
    color: var(--color-text-muted, #586069);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-divider[b-4gj5xgu9dq] {
    color: var(--color-border-light, #d1d5db);
}

.meta-date[b-4gj5xgu9dq] {
    color: var(--color-text-muted, #6b7280);
    font-size: 11px;
}

.trigger-code[b-4gj5xgu9dq] {
    background: var(--color-bg-secondary, #f6f8fa);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.editor-header-actions[b-4gj5xgu9dq] {
    display: flex;
    gap: 8px;
}

/* Tabs */
.tab-bar[b-4gj5xgu9dq] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.tab-btn[b-4gj5xgu9dq] {
    padding: 8px 16px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    color: var(--color-text-secondary, #586069);
}

    .tab-btn.active[b-4gj5xgu9dq] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #0366d6);
    }

    .tab-btn:hover:not(.active)[b-4gj5xgu9dq] {
        background: var(--color-bg-secondary, #f6f8fa);
    }

/* Editor Content */
.editor-content[b-4gj5xgu9dq] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Mode Toggle */
.mode-toggle[b-4gj5xgu9dq] {
    display: inline-flex;
    background: var(--color-bg-secondary, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 20px;
    padding: 2px;
}

.mode-btn[b-4gj5xgu9dq] {
    padding: 6px 16px;
    background: transparent;
    color: var(--color-text-muted, #586069);
    border: none;
    border-radius: 18px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .mode-btn.active[b-4gj5xgu9dq] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
    }

/* Code Editor */
.code-header[b-4gj5xgu9dq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .code-header .form-label[b-4gj5xgu9dq] {
        margin: 0;
    }

.variables-dropdown-wrapper[b-4gj5xgu9dq] {
    position: relative;
}

.variables-dropdown[b-4gj5xgu9dq] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.dropdown-header[b-4gj5xgu9dq] {
    padding: 8px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-bg-secondary, #f6f8fa);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.variable-item[b-4gj5xgu9dq] {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-secondary, #f6f8fa);
    transition: background 0.15s;
}

    .variable-item:hover[b-4gj5xgu9dq] {
        background: var(--color-bg-secondary, #f6f8fa);
    }

.variable-code[b-4gj5xgu9dq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #0366d6);
    display: block;
}

.variable-desc[b-4gj5xgu9dq] {
    font-size: 10px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}

.code-textarea[b-4gj5xgu9dq] {
    font-family: Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.tip-box[b-4gj5xgu9dq] {
    padding: 12px;
    background: var(--color-warning-light, #fff5e6);
    border: 1px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
}

    .tip-box i[b-4gj5xgu9dq] {
        margin-right: 4px;
    }

/* Preview */
.subject-preview[b-4gj5xgu9dq] {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--color-bg-secondary, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.preview-label[b-4gj5xgu9dq] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.preview-text[b-4gj5xgu9dq] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.email-preview-frame[b-4gj5xgu9dq] {
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 20px;
    background: var(--color-bg-secondary, #f9fafb);
    min-height: 600px;
}

.email-preview-content[b-4gj5xgu9dq] {
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-surface, white);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-bar[b-4gj5xgu9dq] {
    margin-top: 12px;
    padding: 10px;
    background: var(--color-primary-light, #e8f4fd);
    border: 1px solid var(--color-primary, #0366d6);
    border-radius: var(--radius-md, 6px);
    font-size: 12px;
    text-align: center;
    color: var(--color-info, #0c4a6e);
}

    .info-bar i[b-4gj5xgu9dq] {
        margin-right: 4px;
    }

/* Settings Tab */
.settings-content[b-4gj5xgu9dq] {
    max-width: 800px;
}

.form-hint[b-4gj5xgu9dq] {
    font-size: 12px;
    color: var(--color-text-muted, #586069);
    margin-top: 4px;
}

.checkbox-label[b-4gj5xgu9dq] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Analytics Tab */
.analytics-content[b-4gj5xgu9dq] {
    max-width: 1200px;
}

.analytics-stats[b-4gj5xgu9dq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.empty-activity[b-4gj5xgu9dq] {
    color: var(--color-text-muted, #586069);
    text-align: center;
    padding: 40px;
}

/* Versions Tab */
.versions-content[b-4gj5xgu9dq] {
    max-width: 800px;
}

.version-item[b-4gj5xgu9dq] {
    padding: 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    margin-bottom: 12px;
    background: var(--color-surface, white);
}

    .version-item.active[b-4gj5xgu9dq] {
        border: 2px solid var(--color-primary, #0366d6);
        background: var(--color-primary-light, #f0f7ff);
    }

.version-header[b-4gj5xgu9dq] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
}

.version-title[b-4gj5xgu9dq] {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.version-date[b-4gj5xgu9dq] {
    font-size: 12px;
    color: var(--color-text-muted, #586069);
    margin-top: 4px;
}

.version-notes[b-4gj5xgu9dq] {
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
}

/* ── Layout-shell editor sections ──────────────────────────────────── */

/* Section wrapper that groups the structured fields appearing when a
   non-Plain layout style is selected. Subtle tinted bg so it visually
   reads as a related cluster, separate from the surrounding free-form
   subject + body fields. */
.layout-fields[b-4gj5xgu9dq] {
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
}

/* Multi-column row inside .layout-fields (e.g. Kicker + Kicker Color
   side by side). Stacks at narrow viewports. */
.layout-fields-row[b-4gj5xgu9dq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.required[b-4gj5xgu9dq] {
    color: var(--color-danger, #dc2626);
    font-weight: 700;
}

/* Detail-row editor — color swatch + label input + value input + delete */
.detail-row-editor[b-4gj5xgu9dq] {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 36px;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.btn-remove-row[b-4gj5xgu9dq] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-surface, white);
    color: var(--color-text-secondary, #6e7681);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

    .btn-remove-row:hover[b-4gj5xgu9dq] {
        color: var(--color-danger, #dc2626);
        border-color: var(--color-danger, #dc2626);
        background: var(--color-danger-light, #fef2f2);
    }

.empty-rows[b-4gj5xgu9dq] {
    margin-top: 8px;
    padding: 12px;
    background: var(--color-surface, #ffffff);
    border: 1px dashed var(--color-border, #d0d7de);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary, #6e7681);
    text-align: center;
}

/* Two-column next-steps editor */
.next-steps-editor[b-4gj5xgu9dq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .next-steps-editor[b-4gj5xgu9dq] {
        grid-template-columns: 1fr;
    }
}

.next-step-col[b-4gj5xgu9dq] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ns-label[b-4gj5xgu9dq] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary, #586069);
}

/* Native color picker tweak — stops it being absurdly tall */
.form-color[b-4gj5xgu9dq] {
    height: 36px;
    padding: 4px;
    width: 100%;
    cursor: pointer;
}
/* /Pages/Admin/EmailTemplates.razor.rz.scp.css */
/* FilterBar - Option C: full-width search top, filters + actions bottom row */
[b-xlelszqp64] .templates-filter-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

    [b-xlelszqp64] .templates-filter-bar .filter-bar-search {
        grid-column: 1 / -1;
    }

    [b-xlelszqp64] .templates-filter-bar .filter-bar-filters {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    [b-xlelszqp64] .templates-filter-bar .filter-bar-actions {
        display: flex;
        align-items: center;
    }

/* View Toggle */
.view-toggle[b-xlelszqp64] {
    display: flex;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}

.toggle-btn[b-xlelszqp64] {
    padding: 8px 12px;
    background: var(--color-surface, white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-text-secondary, #586069);
    transition: all 0.2s;
}

    .toggle-btn:hover[b-xlelszqp64] {
        background: var(--color-bg-secondary, #f6f8fa);
    }

    .toggle-btn.active[b-xlelszqp64] {
        background: var(--color-bg-secondary, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

    .toggle-btn + .toggle-btn[b-xlelszqp64] {
        border-left: 1px solid var(--color-border, #e1e4e8);
    }

/* Template Grid */
.templates-grid[b-xlelszqp64] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.template-card[b-xlelszqp64] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

    .template-card:hover[b-xlelszqp64] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.template-header[b-xlelszqp64] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}

.template-info[b-xlelszqp64] {
    flex: 1;
}

.template-name[b-xlelszqp64] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-category[b-xlelszqp64] {
    font-size: 12px;
    color: var(--color-text-muted, #586069);
}

.template-status-row[b-xlelszqp64] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot[b-xlelszqp64] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-text-muted, #6b7280);
}

    .status-dot.active[b-xlelszqp64] {
        background: var(--color-success, #10b981);
    }

    .status-dot.centered[b-xlelszqp64] {
        margin: 0 auto;
    }

.template-trigger[b-xlelszqp64] {
    font-size: 12px;
    color: var(--color-text-muted, #586069);
    margin-bottom: 12px;
}

.template-stats[b-xlelszqp64] {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    font-size: 12px;
}

.stat-label[b-xlelszqp64] {
    color: var(--color-text-muted, #586069);
}

.stat-value[b-xlelszqp64] {
    font-weight: 600;
}

.text-success[b-xlelszqp64] {
    color: var(--color-success, #10b981);
}

.text-primary[b-xlelszqp64] {
    color: var(--color-primary, #0366d6);
}

.template-updated[b-xlelszqp64] {
    font-size: 11px;
    color: var(--color-text-muted, #586069);
    margin-top: 8px;
}

.template-actions[b-xlelszqp64] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.flex-1[b-xlelszqp64] {
    flex: 1;
}

/* List View */
.col-status[b-xlelszqp64] {
    width: 40px;
}

.col-center[b-xlelszqp64] {
    text-align: center;
}

.col-actions[b-xlelszqp64] {
    width: 120px;
}

.cell-name[b-xlelszqp64] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cell-bold[b-xlelszqp64] {
    font-weight: 600;
}

.cell-muted[b-xlelszqp64] {
    font-size: 13px;
    color: var(--color-text-muted, #586069);
}

.trigger-code[b-xlelszqp64] {
    font-size: 12px;
    color: var(--color-primary, #0366d6);
    background: var(--color-bg-secondary, #f6f8fa);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Delete Modal */
.delete-template-info[b-xlelszqp64] {
    background: var(--color-danger-light, #fee2e2);
    padding: 12px;
    border-radius: var(--radius-md, 6px);
    margin-bottom: 16px;
}

.delete-detail[b-xlelszqp64] {
    font-size: 13px;
    color: var(--color-text-muted, #6b7280);
}

.delete-warning[b-xlelszqp64] {
    background: var(--color-warning-light, #fff5e6);
    padding: 12px;
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
}

    .delete-warning i[b-xlelszqp64] {
        margin-right: 4px;
    }
/* /Pages/Admin/EmailTemplateVisualBuilder.razor.rz.scp.css */
/* Builder Header */
.builder-header[b-hqjehvzc81] {
    background: var(--color-surface, white);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    padding: 16px 24px;
    margin: -24px -24px 24px -24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.builder-header-left[b-hqjehvzc81] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn[b-hqjehvzc81] {
    padding: 8px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    transition: background 0.2s;
}

    .back-btn:hover[b-hqjehvzc81] {
        background: var(--color-bg-secondary, #f6f8fa);
    }

.builder-title[b-hqjehvzc81] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.builder-subtitle[b-hqjehvzc81] {
    font-size: 13px;
    color: var(--color-text-muted, #586069);
    margin-top: 4px;
}

.builder-header-actions[b-hqjehvzc81] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.save-success[b-hqjehvzc81] {
    padding: 8px 16px;
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-text, #166534);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
}

.save-error[b-hqjehvzc81] {
    padding: 8px 16px;
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-text, #991b1b);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    max-width: 300px;
}

/* Mode Toggle */
.mode-bar[b-hqjehvzc81] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.mode-btn[b-hqjehvzc81] {
    padding: 8px 16px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    color: var(--color-text-secondary, #586069);
}

    .mode-btn.active[b-hqjehvzc81] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #0366d6);
    }

/* Three-column layout */
.builder-layout[b-hqjehvzc81] {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 24px;
}

/* Left Sidebar */
.sidebar-heading[b-hqjehvzc81] {
    font-size: 12px;
    font-weight: 600;
}

.block-grid[b-hqjehvzc81] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.block-type-btn[b-hqjehvzc81] {
    padding: 8px 4px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    transition: all 0.2s;
}

    .block-type-btn:hover[b-hqjehvzc81] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-bg-secondary, #f6f8fa);
    }

.block-type-icon[b-hqjehvzc81] {
    font-size: 16px;
}

/* Variables panel */
.variables-hint[b-hqjehvzc81] {
    font-size: 10px;
    color: var(--color-text-muted, #586069);
    margin-bottom: 8px;
}

.variables-list[b-hqjehvzc81] {
    max-height: 400px;
    overflow-y: auto;
}

.variable-item[b-hqjehvzc81] {
    padding: 6px 8px;
    background: var(--color-bg-secondary, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 4px;
    cursor: pointer;
}

    .variable-item.disabled[b-hqjehvzc81] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.variable-code[b-hqjehvzc81] {
    color: var(--color-primary, #0366d6);
    font-size: 11px;
}

.variable-label[b-hqjehvzc81] {
    font-size: 9px;
    color: var(--color-text-muted, #586069);
}

/* Canvas */
.canvas-empty[b-hqjehvzc81] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted, #9ca3af);
}

.canvas-empty-icon[b-hqjehvzc81] {
    font-size: 48px;
}

.canvas-empty-title[b-hqjehvzc81] {
    font-size: 16px;
    margin-top: 16px;
}

.canvas-empty-subtitle[b-hqjehvzc81] {
    font-size: 14px;
}

.block-wrapper[b-hqjehvzc81] {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface, white);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
}

    .block-wrapper.selected[b-hqjehvzc81] {
        border: 2px solid var(--color-primary, #0366d6);
        background: var(--color-primary-light, #f0f7ff);
    }

.block-type-label[b-hqjehvzc81] {
    font-size: 10px;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-weight: 600;
}

.block-actions[b-hqjehvzc81] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

/* Code view */
.code-view-textarea[b-hqjehvzc81] {
    width: 100%;
    min-height: 600px;
    padding: 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    font-family: monospace;
    font-size: 12px;
    background: #1f2937;
    color: #f3f4f6;
}

.code-info[b-hqjehvzc81] {
    margin-top: 12px;
    padding: 12px;
    background: var(--color-primary-light, #e8f4fd);
    border: 1px solid var(--color-primary, #0366d6);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
}

/* Right sidebar - Preview */
.preview-toggle[b-hqjehvzc81] {
    display: flex;
    gap: 6px;
}

.preview-toggle-btn[b-hqjehvzc81] {
    padding: 6px 12px;
    background: var(--color-surface, white);
    color: var(--color-text-muted, #586069);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

    .preview-toggle-btn.active[b-hqjehvzc81] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #0366d6);
    }

.preview-frame[b-hqjehvzc81] {
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 16px;
    background: var(--color-bg-secondary, #f9fafb);
    max-height: 600px;
    overflow-y: auto;
}

.preview-inner[b-hqjehvzc81] {
    background: var(--color-surface, white);
    padding: 20px;
    border-radius: var(--radius-sm, 4px);
    font-family: Arial;
    margin: 0 auto;
    transition: max-width 0.3s ease;
}

.preview-empty[b-hqjehvzc81] {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted, #9ca3af);
}

.preview-empty-icon[b-hqjehvzc81] {
    font-size: 32px;
    margin-bottom: 12px;
}

.preview-device-label[b-hqjehvzc81] {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--color-text-muted, #586069);
}

/* Block Info Card */
.block-info-text[b-hqjehvzc81] {
    font-size: 12px;
}

.block-info-empty[b-hqjehvzc81] {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
}

/* Image Picker */
.image-picker-item:hover[b-hqjehvzc81] {
    border-color: var(--color-primary, #0366d6);
    box-shadow: 0 2px 8px rgba(3, 102, 214, 0.2);
    transform: translateY(-2px);
}

.upload-section[b-hqjehvzc81] {
    background: var(--color-bg-secondary, #f6f8fa);
    padding: 16px;
    border-radius: var(--radius-md, 6px);
    margin-bottom: 16px;
}

    .upload-section h3[b-hqjehvzc81] {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 12px 0;
    }

.upload-status[b-hqjehvzc81] {
    padding: 8px;
    border-radius: var(--radius-sm, 4px);
    font-size: 13px;
}

    .upload-status.uploading[b-hqjehvzc81] {
        background: var(--color-primary-light, #e8f4fd);
    }

    .upload-status.error[b-hqjehvzc81] {
        background: var(--color-danger-light, #fee2e2);
        color: var(--color-danger-text, #991b1b);
    }

.upload-size-hint[b-hqjehvzc81] {
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
}

.image-grid[b-hqjehvzc81] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

/* Template Info (new templates) */
.template-info-panel[b-hqjehvzc81] {
    padding: 12px;
}

.template-info-field[b-hqjehvzc81] {
    margin-bottom: 12px;
}

    .template-info-field:last-child[b-hqjehvzc81] {
        margin-bottom: 0;
    }

.field-label[b-hqjehvzc81] {
    font-size: 11px;
    margin-bottom: 4px;
}

.field-hint[b-hqjehvzc81] {
    font-size: 10px;
    color: var(--color-text-muted, #586069);
    margin-top: 4px;
}
/* /Pages/Admin/FormBuilder.razor.rz.scp.css */
/* ── Form Builder Page Layout ──────────────────────── */
.fb-page[b-kiu59jw4ji] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px);
    overflow: hidden;
    background: var(--background-secondary, #f8fafc);
}

/* ── Top Bar ──────────────────────────────────────── */
.fb-topbar[b-kiu59jw4ji] {
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    gap: 8px;
    flex-shrink: 0;
    z-index: 100;
}
.fb-topbar-left[b-kiu59jw4ji] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fb-topbar-tabs[b-kiu59jw4ji] {
    display: flex;
    gap: 0;
    margin-left: 8px;
}
.fb-topbar-right[b-kiu59jw4ji] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.fb-sep[b-kiu59jw4ji] {
    width: 1px;
    height: 24px;
    background: var(--border-color, #e8ecf1);
    margin: 0 4px;
}
.fb-btn-back[b-kiu59jw4ji] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}
.fb-btn-back i[b-kiu59jw4ji] { font-size: 16px; }
.fb-btn-back:hover[b-kiu59jw4ji] {
    background: var(--background-secondary, #f8fafc);
    color: var(--text-primary, #0f172a);
}
.fb-back-text[b-kiu59jw4ji] { display: inline; }
.fb-form-name-input[b-kiu59jw4ji] {
    font-size: 15px;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary, #0f172a);
    outline: none;
    padding: 6px 10px;
    border-radius: 8px;
    width: 250px;
    letter-spacing: -0.01em;
    transition: all 0.2s;
}
.fb-form-name-input:hover[b-kiu59jw4ji] {
    border-color: var(--border-color, #e8ecf1);
}
.fb-form-name-input:focus[b-kiu59jw4ji] {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    background: var(--background-primary, #fff);
}

/* ── Top Tabs ────────────────────────────────────── */
.fb-top-tab[b-kiu59jw4ji] {
    padding: 16px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    letter-spacing: -0.01em;
}
.fb-top-tab:hover[b-kiu59jw4ji] { color: var(--text-secondary, #475569); }
.fb-top-tab.active[b-kiu59jw4ji] {
    color: var(--accent-color, #6366f1);
    border-bottom-color: var(--accent-color, #6366f1);
    font-weight: 600;
}

/* ── Tab Placeholder (Conditions/Mappings) ───────── */
.fb-tab-placeholder[b-kiu59jw4ji] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--text-tertiary, #94a3b8);
    text-align: center;
    gap: 8px;
}
.fb-tab-placeholder i[b-kiu59jw4ji] { font-size: 52px; color: var(--border-hover, #cbd5e1); margin-bottom: 8px; }
.fb-tab-placeholder h3[b-kiu59jw4ji] { font-size: 16px; font-weight: 700; color: var(--text-secondary, #475569); letter-spacing: -0.02em; }
.fb-tab-placeholder p[b-kiu59jw4ji] { font-size: 13px; color: var(--text-tertiary, #94a3b8); max-width: 360px; line-height: 1.6; }

/* ── Properties Panel Tabs ───────────────────────── */
[b-kiu59jw4ji] .fb-ptabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
}
[b-kiu59jw4ji] .fb-ptab {
    flex: 1;
    padding: 13px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    color: var(--text-tertiary, #94a3b8);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    letter-spacing: -0.01em;
}
[b-kiu59jw4ji] .fb-ptab:hover { color: var(--text-secondary, #475569); }
[b-kiu59jw4ji] .fb-ptab.active { color: var(--accent-color, #6366f1); border-bottom-color: var(--accent-color, #6366f1); }

/* ── Buttons ──────────────────────────────────────── */
.fb-btn-primary[b-kiu59jw4ji] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
    transition: all 0.15s;
}
.fb-btn-primary:hover[b-kiu59jw4ji] { background: var(--accent-hover, #4f46e5); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.fb-btn-primary:active[b-kiu59jw4ji] { transform: translateY(0); }
.fb-btn-primary:disabled[b-kiu59jw4ji] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.fb-btn-primary.has-changes[b-kiu59jw4ji] { position: relative; }
.fb-btn-primary.has-changes[b-kiu59jw4ji]::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    background: var(--color-warning, #f59e0b);
    border-radius: 50%;
    border: 2px solid var(--background-primary, #fff);
    animation: fb-change-pulse-b-kiu59jw4ji 2s ease infinite;
}
@keyframes fb-change-pulse-b-kiu59jw4ji { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.fb-btn-secondary[b-kiu59jw4ji] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border-color, #e8ecf1);
    cursor: pointer;
    background: var(--background-primary, #fff);
    color: var(--text-secondary, #475569);
    transition: all 0.15s;
}
.fb-btn-secondary:hover[b-kiu59jw4ji] { background: var(--background-secondary, #f8fafc); border-color: var(--border-hover, #cbd5e1); color: var(--text-primary, #0f172a); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.fb-btn-secondary:active[b-kiu59jw4ji] { transform: translateY(0); }

.fb-btn-sm[b-kiu59jw4ji] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color, #e8ecf1);
    cursor: pointer;
    background: var(--background-primary, #fff);
    color: var(--text-secondary, #475569);
}

[b-kiu59jw4ji] .fb-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    font-size: 15px;
}
[b-kiu59jw4ji] .fb-btn-icon:hover { background: var(--background-secondary, #f8fafc); color: var(--text-secondary, #475569); }

[b-kiu59jw4ji] .fb-btn-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    font-size: 13px;
}
[b-kiu59jw4ji] .fb-btn-icon-sm:hover { background: var(--color-danger-light, #fef2f2); color: var(--color-danger, #ef4444); }

/* Conditions icon on field */
[b-kiu59jw4ji] .fb-btn-cond {
    color: var(--border-hover, #cbd5e1);
    position: relative;
}
[b-kiu59jw4ji] .fb-btn-cond:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--accent-color, #6366f1) !important;
}
[b-kiu59jw4ji] .fb-btn-cond.has-rules {
    color: var(--accent-color, #6366f1);
}
[b-kiu59jw4ji] .fb-cond-count {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 8px;
    font-weight: 700;
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
    width: 13px;
    height: 13px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Three-Panel Layout ───────────────────────────── */
.fb-layout[b-kiu59jw4ji] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Left Palette Panel ───────────────────────────── */
.fb-panel-left[b-kiu59jw4ji] {
    width: 104px;
    border-right: 1px solid var(--border-color, #e8ecf1);
    background: var(--background-primary, #fff);
    overflow-y: auto;
    flex-shrink: 0;
}
[b-kiu59jw4ji] .fb-palette { padding: 8px; }
[b-kiu59jw4ji] .fb-pal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
[b-kiu59jw4ji] .fb-pal-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--background-secondary, #f8fafc);
    cursor: grab;
    transition: all 0.15s;
    user-select: none;
}
[b-kiu59jw4ji] .fb-pal-item i { font-size: 18px; color: var(--text-secondary, #475569); }
[b-kiu59jw4ji] .fb-pal-item:hover {
    border-color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.06);
}
[b-kiu59jw4ji] .fb-pal-item:hover i { color: var(--accent-color, #6366f1); }
[b-kiu59jw4ji] .fb-pal-sep {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--border-color, #e8ecf1);
    margin: 4px 0;
}

/* ── Center Canvas ────────────────────────────────── */
.fb-panel-center[b-kiu59jw4ji] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.fb-canvas[b-kiu59jw4ji] { max-width: 800px; margin: 0 auto; }
.fb-loading[b-kiu59jw4ji] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 8px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 14px;
}
.fb-empty-canvas[b-kiu59jw4ji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 60px 24px;
    border: 2px dashed var(--border-color, #e8ecf1);
    border-radius: 14px;
    color: var(--text-tertiary, #94a3b8);
    text-align: center;
}
.fb-empty-canvas i[b-kiu59jw4ji] { font-size: 40px; }
.fb-empty-canvas h3[b-kiu59jw4ji] { font-size: 16px; color: var(--text-primary, #0f172a); }
.fb-empty-canvas p[b-kiu59jw4ji] { font-size: 13px; }

.fb-btn-add-section[b-kiu59jw4ji] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    border: 2px dashed var(--border-color, #e8ecf1);
    border-radius: 10px;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.fb-btn-add-section:hover[b-kiu59jw4ji] {
    border-color: var(--accent-color, #6366f1);
    color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.04);
}

/* ── Section ──────────────────────────────────────── */
[b-kiu59jw4ji] .fb-section {
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s;
}
[b-kiu59jw4ji] .fb-section-selected { border-color: var(--accent-color, #6366f1); }
[b-kiu59jw4ji] .fb-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    background: var(--background-secondary, #f8fafc);
    border-radius: 12px 12px 0 0;
}
[b-kiu59jw4ji] .fb-section-title-row { display: flex; align-items: center; gap: 8px; }
[b-kiu59jw4ji] .fb-section-grip { color: var(--text-tertiary, #94a3b8); cursor: grab; font-size: 16px; }
[b-kiu59jw4ji] .fb-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #0f172a); cursor: pointer; }
[b-kiu59jw4ji] .fb-section-title-input {
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--accent-color, #6366f1);
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
}
[b-kiu59jw4ji] .fb-section-actions { display: flex; align-items: center; gap: 8px; }
[b-kiu59jw4ji] .fb-field-count { font-size: 11px; font-weight: 600; color: var(--text-tertiary, #94a3b8); }
[b-kiu59jw4ji] .fb-step-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    border: 1px solid transparent; cursor: pointer; transition: all 0.15s;
}
[b-kiu59jw4ji] .fb-step-active {
    background: rgba(99,102,241,0.08); color: var(--accent-color, #6366f1);
    border-color: rgba(99,102,241,0.2);
}
[b-kiu59jw4ji] .fb-step-active:hover { background: rgba(99,102,241,0.14); }
[b-kiu59jw4ji] .fb-step-inactive {
    background: var(--background-secondary, #f8fafc); color: var(--text-tertiary, #94a3b8);
    border-color: var(--border-color, #e8ecf1);
}
[b-kiu59jw4ji] .fb-step-inactive:hover { color: var(--text-secondary, #64748b); border-color: var(--text-tertiary, #94a3b8); }
[b-kiu59jw4ji] .fb-section-body { padding: 12px; min-height: 50px; }
[b-kiu59jw4ji] .fb-empty-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px;
    border: 2px dashed var(--border-color, #e8ecf1);
    border-radius: 8px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
}
[b-kiu59jw4ji] .fb-empty-section i { font-size: 24px; }

/* ── Field Grid ───────────────────────────────────── */
[b-kiu59jw4ji] .fb-fields-grid { display: flex; flex-wrap: wrap; gap: 8px; }
[b-kiu59jw4ji] .fb-field-full { width: 100%; }
[b-kiu59jw4ji] .fb-field-half { width: calc(50% - 4px); }
[b-kiu59jw4ji] .fb-field-third { width: calc(33.333% - 6px); }

/* ── Field Card ───────────────────────────────────── */
[b-kiu59jw4ji] .fb-field {
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
[b-kiu59jw4ji] .fb-field:hover { border-color: var(--border-hover, #cbd5e1); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
[b-kiu59jw4ji] .fb-field-selected { border-color: var(--accent-color, #6366f1) !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
[b-kiu59jw4ji] .fb-field-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    background: var(--background-secondary, #f8fafc);
    border-radius: 8px 8px 0 0;
    font-size: 11px;
}
[b-kiu59jw4ji] .fb-field-grip { color: var(--text-tertiary, #94a3b8); cursor: grab; font-size: 14px; }
[b-kiu59jw4ji] .fb-field-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(99,102,241,0.08);
    color: var(--accent-color, #6366f1);
    font-size: 10px;
    font-weight: 700;
}
[b-kiu59jw4ji] .fb-required-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-danger, #ef4444);
    background: var(--color-danger-light, #fef2f2);
    padding: 1px 6px;
    border-radius: 4px;
}
[b-kiu59jw4ji] .fb-field-actions { margin-left: auto; display: flex; gap: 2px; }
[b-kiu59jw4ji] .fb-field-body { padding: 8px 10px; }
[b-kiu59jw4ji] .fb-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin-bottom: 4px;
}
[b-kiu59jw4ji] .fb-asterisk { color: var(--color-danger, #ef4444); }
[b-kiu59jw4ji] .fb-field-help {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    margin-top: 4px;
}

/* ── Faux Inputs (preview) ────────────────────────── */
[b-kiu59jw4ji] .fb-faux-input {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    display: flex;
    align-items: center;
    gap: 6px;
}
[b-kiu59jw4ji] .fb-faux-textarea {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    min-height: 50px;
}
[b-kiu59jw4ji] .fb-faux-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
[b-kiu59jw4ji] .fb-faux-options { display: flex; flex-direction: column; gap: 4px; }
[b-kiu59jw4ji] .fb-faux-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #475569);
}
[b-kiu59jw4ji] .fb-radio-circle {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color, #e8ecf1);
    border-radius: 50%;
}
[b-kiu59jw4ji] .fb-faux-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #475569);
}
[b-kiu59jw4ji] .fb-check-box {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color, #e8ecf1);
    border-radius: 3px;
}
[b-kiu59jw4ji] .fb-faux-yesno { display: flex; gap: 4px; }
[b-kiu59jw4ji] .fb-yn-yes, [b-kiu59jw4ji] .fb-yn-no {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}
[b-kiu59jw4ji] .fb-faux-file {
    padding: 6px 10px;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
}
[b-kiu59jw4ji] .fb-faux-rating { display: flex; gap: 2px; color: var(--text-tertiary, #94a3b8); font-size: 16px; }
[b-kiu59jw4ji] .fb-faux-signature {
    padding: 12px;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}
[b-kiu59jw4ji] .fb-faux-hidden {
    padding: 6px 10px;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.02) 4px, rgba(0,0,0,0.02) 8px);
}
[b-kiu59jw4ji] .fb-faux-divider { border: none; border-top: 1px solid var(--border-color, #e8ecf1); margin: 4px 0; }
[b-kiu59jw4ji] .fb-faux-section-header { font-size: 14px; font-weight: 700; color: var(--text-primary, #0f172a); }

/* ── Field Indicators ────────────────────────────── */
[b-kiu59jw4ji] .fb-field-indicators {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}
[b-kiu59jw4ji] .fb-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
[b-kiu59jw4ji] .fb-indicator i { font-size: 10px; }
[b-kiu59jw4ji] .fb-indicator-validation {
    background: rgba(16,185,129,0.08);
    color: var(--color-success, #10b981);
}
[b-kiu59jw4ji] .fb-indicator-rule {
    background: rgba(245,158,11,0.08);
    color: var(--color-warning, #f59e0b);
}
[b-kiu59jw4ji] .fb-indicator-mapped {
    background: rgba(99,102,241,0.08);
    color: var(--accent-color, #6366f1);
}

/* ── Right Properties Panel ───────────────────────── */
.fb-panel-right[b-kiu59jw4ji] {
    width: 300px;
    border-left: 1px solid var(--border-color, #e8ecf1);
    background: var(--background-primary, #fff);
    overflow-y: auto;
    flex-shrink: 0;
}
[b-kiu59jw4ji] .fb-props { padding: 0; }
[b-kiu59jw4ji] .fb-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    background: var(--background-secondary, #f8fafc);
}
[b-kiu59jw4ji] .fb-props-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #0f172a); }
[b-kiu59jw4ji] .fb-props-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.08);
    padding: 2px 8px;
    border-radius: 4px;
}
[b-kiu59jw4ji] .fb-props-body { padding: 16px; }
[b-kiu59jw4ji] .fb-props-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-tertiary, #94a3b8);
    gap: 8px;
    text-align: center;
}
[b-kiu59jw4ji] .fb-props-empty i { font-size: 32px; }
[b-kiu59jw4ji] .fb-props-empty p { font-size: 13px; }

/* ── Property Inputs ──────────────────────────────── */
[b-kiu59jw4ji] .fb-prop-group { margin-bottom: 14px; }
[b-kiu59jw4ji] .fb-prop-row { display: flex; align-items: center; justify-content: space-between; }
[b-kiu59jw4ji] .fb-prop-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-kiu59jw4ji] .fb-prop-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    background: var(--background-primary, #fff);
    outline: none;
    transition: border-color 0.15s;
}
[b-kiu59jw4ji] .fb-prop-input:focus { border-color: var(--accent-color, #6366f1); }
[b-kiu59jw4ji] .fb-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }

/* ── Toggle Switch ────────────────────────────────── */
[b-kiu59jw4ji] .fb-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
[b-kiu59jw4ji] .fb-toggle input { opacity: 0; width: 0; height: 0; }
[b-kiu59jw4ji] .fb-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--border-color, #e8ecf1);
    transition: .2s;
    border-radius: 20px;
}
[b-kiu59jw4ji] .fb-toggle-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: white;
    transition: .2s;
    border-radius: 50%;
}
[b-kiu59jw4ji] .fb-toggle input:checked + .fb-toggle-slider { background: var(--accent-color, #6366f1); }
[b-kiu59jw4ji] .fb-toggle input:checked + .fb-toggle-slider::before { transform: translateX(16px); }

/* ── Width Selector ───────────────────────────────── */
[b-kiu59jw4ji] .fb-width-selector { display: flex; gap: 4px; }
[b-kiu59jw4ji] .fb-width-btn {
    flex: 1;
    padding: 5px 0;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    background: var(--background-primary, #fff);
    color: var(--text-secondary, #475569);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
[b-kiu59jw4ji] .fb-width-btn:hover { background: var(--background-secondary, #f8fafc); }
[b-kiu59jw4ji] .fb-width-btn.active {
    background: var(--accent-color, #6366f1);
    color: white;
    border-color: var(--accent-color, #6366f1);
}

/* ── Options Editor ───────────────────────────────── */
[b-kiu59jw4ji] .fb-options-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
[b-kiu59jw4ji] .fb-option-row { display: flex; align-items: center; gap: 4px; }
[b-kiu59jw4ji] .fb-option-grip { color: var(--text-tertiary, #94a3b8); cursor: grab; font-size: 14px; flex-shrink: 0; }
[b-kiu59jw4ji] .fb-btn-add-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}
[b-kiu59jw4ji] .fb-btn-add-option:hover { border-color: var(--accent-color, #6366f1); color: var(--accent-color, #6366f1); }
[b-kiu59jw4ji] .fb-list-preview { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; }
[b-kiu59jw4ji] .fb-list-preview-item {
    padding: 2px 8px;
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary, #475569);
}
[b-kiu59jw4ji] .fb-list-preview-more { font-size: 11px; color: var(--text-tertiary, #94a3b8); padding: 2px 4px; }

/* ── List Manager ─────────────────────────────────── */
[b-kiu59jw4ji] .fb-list-manager { display: flex; min-height: 350px; }
[b-kiu59jw4ji] .fb-list-sidebar {
    width: 200px;
    border-right: 1px solid var(--border-color, #e8ecf1);
    overflow-y: auto;
}
[b-kiu59jw4ji] .fb-list-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
}
[b-kiu59jw4ji] .fb-list-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    transition: background 0.1s;
}
[b-kiu59jw4ji] .fb-list-sidebar-item:hover { background: var(--background-secondary, #f8fafc); }
[b-kiu59jw4ji] .fb-list-sidebar-item.active { background: rgba(99,102,241,0.06); color: var(--accent-color, #6366f1); }
[b-kiu59jw4ji] .fb-list-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    padding: 1px 6px;
    border-radius: 4px;
}
[b-kiu59jw4ji] .fb-list-detail { flex: 1; padding: 12px; }
[b-kiu59jw4ji] .fb-list-detail-header { display: flex; gap: 8px; margin-bottom: 12px; }
[b-kiu59jw4ji] .fb-list-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
[b-kiu59jw4ji] .fb-list-item-row { display: flex; align-items: center; gap: 4px; }
[b-kiu59jw4ji] .fb-list-item-num {
    width: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    flex-shrink: 0;
}
[b-kiu59jw4ji] .fb-list-empty, [b-kiu59jw4ji] .fb-list-empty-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
    gap: 8px;
}
[b-kiu59jw4ji] .fb-list-empty-detail i { font-size: 28px; }

/* ── Drag & Drop Indicators ───────────────────────── */
[b-kiu59jw4ji] .fb-drop-active {
    background: rgba(99,102,241,0.04) !important;
    border-color: var(--accent-color, #6366f1) !important;
}
[b-kiu59jw4ji] .fb-drop-before { border-top: 2px solid var(--accent-color, #6366f1) !important; }
[b-kiu59jw4ji] .fb-drop-after { border-bottom: 2px solid var(--accent-color, #6366f1) !important; }
[b-kiu59jw4ji] .fb-dragging { opacity: 0.4; }

/* ── Tab Badge ────────────────────────────────────── */
.fb-tab-badge[b-kiu59jw4ji] {
    font-size: 10px;
    font-weight: 700;
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

/* ── Chaining Tab Layout ──────────────────────────── */
.fb-chaining-layout[b-kiu59jw4ji] {
    flex: 1;
    overflow: hidden;
}

/* ── Toast Notification ───────────────────────────── */
.fb-toast[b-kiu59jw4ji] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    animation: fb-toast-in-b-kiu59jw4ji 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.fb-toast-success[b-kiu59jw4ji] { background: var(--color-success, #10b981); color: var(--color-text-inverse, white); }
.fb-toast-error[b-kiu59jw4ji] { background: var(--color-danger, #ef4444); color: var(--color-text-inverse, white); }

@keyframes fb-toast-in-b-kiu59jw4ji {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Spinner Animation ────────────────────────────── */
[b-kiu59jw4ji] .ph-spin { animation: fb-spin-b-kiu59jw4ji 1s linear infinite; }
@keyframes fb-spin-b-kiu59jw4ji { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* /Pages/Admin/Forms.razor.rz.scp.css */
/* Forms Admin Page Styles */
/* Uses design tokens from design-tokens.css */
/* Most styles inherited from AdminLayout.razor.css */

.required[b-ktpyn13hlm] {
    color: var(--color-danger);
}

.form-hint[b-ktpyn13hlm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
}

/* Toggle Switch */
.toggle-container[b-ktpyn13hlm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
}

.toggle-checkbox[b-ktpyn13hlm] {
    display: none;
}

.toggle-slider[b-ktpyn13hlm] {
    width: 44px;
    height: 24px;
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-normal);
}

    .toggle-slider[b-ktpyn13hlm]::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: var(--color-surface);
        border-radius: var(--radius-full);
        top: 2px;
        left: 2px;
        transition: transform var(--transition-normal);
        box-shadow: var(--shadow-sm);
    }

.toggle-checkbox:checked + .toggle-slider[b-ktpyn13hlm] {
    background: var(--color-primary);
}

    .toggle-checkbox:checked + .toggle-slider[b-ktpyn13hlm]::before {
        transform: translateX(20px);
    }

.toggle-label[b-ktpyn13hlm] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Action buttons alignment */
.action-buttons[b-ktpyn13hlm] {
    display: flex;
    gap: var(--spacing-1);
    align-items: center;
}

/* Loading state */
.loading[b-ktpyn13hlm] {
    text-align: center;
    padding: var(--spacing-10);
    color: var(--color-text-secondary);
}
/* /Pages/Admin/Import/FieldSettings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   FIELD SETTINGS PAGE STYLES
   ═══════════════════════════════════════════════════════════ */

/* Page Container */
.page-container[b-w54iwjsf4n] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

/* Page Header */
.page-header[b-w54iwjsf4n] {
    margin-bottom: var(--spacing-6);
}

    .page-header .back-link[b-w54iwjsf4n] {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-3);
        transition: color var(--transition-fast);
    }

        .page-header .back-link:hover[b-w54iwjsf4n] {
            color: var(--color-primary);
        }

    .page-header h1[b-w54iwjsf4n] {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-2) 0;
    }

        .page-header h1 i[b-w54iwjsf4n] {
            color: var(--color-primary);
        }

    .page-header p[b-w54iwjsf4n] {
        color: var(--color-text-secondary);
        margin: 0;
    }

/* Loading State */
.loading-state[b-w54iwjsf4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    color: var(--color-text-secondary);
}

    .loading-state .spinner[b-w54iwjsf4n] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--color-gray-200);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-w54iwjsf4n 1s linear infinite;
        margin-bottom: var(--spacing-4);
    }

/* Empty State */
.empty-state-inline[b-w54iwjsf4n] {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--color-text-muted);
}

/* Settings Sections */
.settings-sections[b-w54iwjsf4n] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Settings Card */
.settings-card[b-w54iwjsf4n] {
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

    .settings-card .card-header[b-w54iwjsf4n] {
        padding: var(--spacing-4) var(--spacing-6);
        background: var(--color-gray-50);
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

        .settings-card .card-header h2[b-w54iwjsf4n] {
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin: 0 0 var(--spacing-1) 0;
        }

            .settings-card .card-header h2 i[b-w54iwjsf4n] {
                color: var(--color-primary);
            }

        .settings-card .card-header p[b-w54iwjsf4n] {
            color: var(--color-text-secondary);
            font-size: var(--font-size-sm);
            margin: 0;
        }

    .settings-card .card-body[b-w54iwjsf4n] {
        padding: 0;
    }

/* Fields Table */
.fields-table[b-w54iwjsf4n] {
    width: 100%;
    border-collapse: collapse;
}

    .fields-table th[b-w54iwjsf4n],
    .fields-table td[b-w54iwjsf4n] {
        padding: var(--spacing-3) var(--spacing-4);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .fields-table th[b-w54iwjsf4n] {
        background: var(--color-gray-50);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .fields-table td[b-w54iwjsf4n] {
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
    }

    .fields-table tr:last-child td[b-w54iwjsf4n] {
        border-bottom: none;
    }

    .fields-table tr:hover td[b-w54iwjsf4n] {
        background: var(--color-gray-50);
    }

    .fields-table .field-name[b-w54iwjsf4n] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-weight: var(--font-weight-medium);
    }

        .fields-table .field-name i[b-w54iwjsf4n] {
            color: var(--color-text-secondary);
        }

    .fields-table .transform-hint code[b-w54iwjsf4n] {
        background: var(--color-gray-100);
        padding: var(--spacing-1) var(--spacing-2);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-family: var(--font-mono);
    }

/* Helper Classes */
.text-success[b-w54iwjsf4n] {
    color: var(--color-success);
}

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

/* Type Badges */
.type-badge[b-w54iwjsf4n] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    text-transform: lowercase;
}

    .type-badge.type-text[b-w54iwjsf4n],
    .type-badge.type-string[b-w54iwjsf4n] {
        background: var(--color-gray-100);
        color: var(--color-gray-700);
    }

    .type-badge.type-number[b-w54iwjsf4n],
    .type-badge.type-int[b-w54iwjsf4n],
    .type-badge.type-decimal[b-w54iwjsf4n] {
        background: rgba(59, 130, 246, 0.1);
        color: var(--color-primary);
    }

    .type-badge.type-date[b-w54iwjsf4n],
    .type-badge.type-datetime[b-w54iwjsf4n] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--color-warning);
    }

    .type-badge.type-boolean[b-w54iwjsf4n],
    .type-badge.type-bool[b-w54iwjsf4n] {
        background: rgba(34, 197, 94, 0.1);
        color: var(--color-success);
    }

    .type-badge.type-lookup[b-w54iwjsf4n] {
        background: rgba(139, 92, 246, 0.1);
        color: var(--color-accent-ai, #7c3aed);
    }

/* Match Keys */
.match-key-list[b-w54iwjsf4n] {
    display: flex;
    flex-direction: column;
}

.match-key-item[b-w54iwjsf4n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

    .match-key-item:last-child[b-w54iwjsf4n] {
        border-bottom: none;
    }

    .match-key-item:hover[b-w54iwjsf4n] {
        background: var(--color-gray-50);
    }

    .match-key-item .key-info[b-w54iwjsf4n] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .match-key-item .key-name[b-w54iwjsf4n] {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
    }

    .match-key-item .key-field[b-w54iwjsf4n] {
        font-size: var(--font-size-xs);
        font-family: var(--font-mono);
        color: var(--color-text-secondary);
        background: var(--color-gray-100);
        padding: var(--spacing-1) var(--spacing-2);
        border-radius: var(--radius-sm);
    }

    .match-key-item .key-options[b-w54iwjsf4n] {
        display: flex;
        gap: var(--spacing-2);
    }

.option-badge[b-w54iwjsf4n] {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-w54iwjsf4n] {
        padding: var(--spacing-4);
    }

    .fields-table[b-w54iwjsf4n] {
        display: block;
        overflow-x: auto;
        min-width: 600px;
    }

    .match-key-item[b-w54iwjsf4n] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
}

@keyframes spin-b-w54iwjsf4n {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Admin/Import/ImportHistory.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   IMPORT HISTORY PAGE STYLES
   ═══════════════════════════════════════════════════════════ */

/* Page Container */
.page-container[b-lmbbubnpau] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

/* Page Header */
.page-header[b-lmbbubnpau] {
    margin-bottom: var(--spacing-6);
}

    .page-header .back-link[b-lmbbubnpau] {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-3);
        transition: color var(--transition-fast);
    }

        .page-header .back-link:hover[b-lmbbubnpau] {
            color: var(--color-primary);
        }

    .page-header h1[b-lmbbubnpau] {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-2) 0;
    }

        .page-header h1 i[b-lmbbubnpau] {
            color: var(--color-primary);
        }

    .page-header p[b-lmbbubnpau] {
        color: var(--color-text-secondary);
        margin: 0;
    }

/* ═══════ Layout ═══════ */
.history-layout[b-lmbbubnpau] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    transition: grid-template-columns 0.3s ease;
}

    .history-layout.detail-open[b-lmbbubnpau] {
        grid-template-columns: minmax(320px, 420px) 1fr;
    }

/* ═══════ Loading & Empty States ═══════ */
.loading-state[b-lmbbubnpau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    color: var(--color-text-secondary);
}

    .loading-state.small[b-lmbbubnpau] {
        padding: var(--spacing-6);
    }

    .loading-state .spinner[b-lmbbubnpau] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--color-gray-200);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-lmbbubnpau 1s linear infinite;
        margin-bottom: var(--spacing-4);
    }

    .loading-state.small .spinner[b-lmbbubnpau] {
        width: 24px;
        height: 24px;
        border-width: 2px;
        margin-bottom: var(--spacing-2);
    }

.loading-inline[b-lmbbubnpau] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-2) 0;
}

.spinner-sm[b-lmbbubnpau] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-lmbbubnpau 1s linear infinite;
    flex-shrink: 0;
}

.empty-state[b-lmbbubnpau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

    .empty-state i[b-lmbbubnpau] {
        font-size: 3rem;
        color: var(--color-gray-300);
        margin-bottom: var(--spacing-4);
    }

    .empty-state h3[b-lmbbubnpau] {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-2) 0;
    }

    .empty-state p[b-lmbbubnpau] {
        color: var(--color-text-secondary);
        margin: 0 0 var(--spacing-6) 0;
        max-width: 400px;
    }

/* ═══════ Batch List Panel ═══════ */
.batch-list-panel[b-lmbbubnpau] {
    min-width: 0;
}

.history-table-wrapper[b-lmbbubnpau] {
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.history-table[b-lmbbubnpau] {
    width: 100%;
    border-collapse: collapse;
}

    .history-table th[b-lmbbubnpau],
    .history-table td[b-lmbbubnpau] {
        padding: var(--spacing-3) var(--spacing-4);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .history-table th[b-lmbbubnpau] {
        background: var(--color-gray-50);
        font-size: 11px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .history-table td[b-lmbbubnpau] {
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
    }

    .history-table tr:last-child td[b-lmbbubnpau] {
        border-bottom: none;
    }

    .history-table tbody tr[b-lmbbubnpau] {
        cursor: pointer;
        transition: background var(--transition-fast);
    }

        .history-table tbody tr:hover td[b-lmbbubnpau] {
            background: var(--color-gray-50);
        }

        .history-table tbody tr.selected td[b-lmbbubnpau] {
            background: rgba(3, 102, 214, 0.06);
        }

            .history-table tbody tr.selected td:first-child[b-lmbbubnpau] {
                box-shadow: inset 3px 0 0 var(--color-primary);
            }

    .history-table .batch-id[b-lmbbubnpau] {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .history-table .file-name[b-lmbbubnpau] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .history-table .file-name i[b-lmbbubnpau] {
            color: var(--color-success);
            flex-shrink: 0;
        }

        .history-table .file-name span[b-lmbbubnpau] {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
        }

    .history-table .date[b-lmbbubnpau] {
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    .history-table .success[b-lmbbubnpau] {
        color: var(--color-success);
        font-weight: var(--font-weight-medium);
    }

    .history-table .error[b-lmbbubnpau] {
        color: var(--color-danger);
        font-weight: var(--font-weight-medium);
    }

/* Hide Rows/Date cols when detail panel is open */
.history-layout.detail-open .col-hide-detail[b-lmbbubnpau] {
    display: none;
}

/* ═══════ Detail Panel ═══════ */
.detail-panel[b-lmbbubnpau] {
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.detail-header[b-lmbbubnpau] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 1;
}

.detail-title[b-lmbbubnpau] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    min-width: 0;
}

    .detail-title h2[b-lmbbubnpau] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .detail-title h2 i[b-lmbbubnpau] {
            color: var(--color-success);
            flex-shrink: 0;
        }

.close-detail[b-lmbbubnpau] {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    line-height: 1;
}

    .close-detail:hover[b-lmbbubnpau] {
        background: var(--color-gray-100);
        color: var(--color-text-primary);
    }

/* ═══════ Detail Stats ═══════ */
.detail-stats[b-lmbbubnpau] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 0;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-border);
}

.stat-item[b-lmbbubnpau] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
}

    .stat-item.full-width[b-lmbbubnpau] {
        grid-column: 1 / -1;
    }

.stat-label[b-lmbbubnpau] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
}

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

    .stat-value.success[b-lmbbubnpau] {
        color: var(--color-success);
    }

    .stat-value.error[b-lmbbubnpau] {
        color: var(--color-danger);
    }

/* ═══════ Rollback Section ═══════ */
.rollback-section[b-lmbbubnpau] {
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

    .rollback-section h3[b-lmbbubnpau] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-3) 0;
    }

        .rollback-section h3 i[b-lmbbubnpau] {
            color: var(--color-warning);
        }

.rollback-actions[b-lmbbubnpau] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.rollback-history[b-lmbbubnpau] {
    margin-bottom: var(--spacing-3);
}

.section-note[b-lmbbubnpau] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2) 0;
}

    .section-note i[b-lmbbubnpau] {
        color: var(--color-primary);
    }

.rollback-history-item[b-lmbbubnpau] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding: var(--spacing-1) 0;
}

    .rollback-history-item i[b-lmbbubnpau] {
        color: var(--color-warning);
        font-size: 14px;
    }

.rollback-unavailable[b-lmbbubnpau] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

    .rollback-unavailable i[b-lmbbubnpau] {
        color: var(--color-success);
        margin-top: 2px;
        flex-shrink: 0;
    }

        .rollback-unavailable i.ph-duotone.ph-warning[b-lmbbubnpau] {
            color: var(--color-warning);
        }

/* ═══════ Records Section ═══════ */
.records-section[b-lmbbubnpau] {
    padding: var(--spacing-4) var(--spacing-5);
}

.records-header[b-lmbbubnpau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-3);
}

    .records-header h3[b-lmbbubnpau] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0;
    }

.record-count[b-lmbbubnpau] {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.records-table-wrapper[b-lmbbubnpau] {
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.records-table[b-lmbbubnpau] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

    .records-table th[b-lmbbubnpau],
    .records-table td[b-lmbbubnpau] {
        padding: var(--spacing-2) var(--spacing-3);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        white-space: nowrap;
    }

    .records-table th[b-lmbbubnpau] {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 10px;
    }

    .records-table tr:last-child td[b-lmbbubnpau] {
        border-bottom: none;
    }

    .records-table tr.rolled-back td[b-lmbbubnpau] {
        opacity: 0.5;
        text-decoration: line-through;
    }

    .records-table tr.selected td[b-lmbbubnpau] {
        background: rgba(245, 158, 11, 0.06);
    }

    .records-table .col-check[b-lmbbubnpau] {
        width: 32px;
        text-align: center;
    }

    .records-table .row-num[b-lmbbubnpau] {
        font-family: var(--font-family-mono);
        color: var(--color-text-secondary);
    }

    .records-table .entity-id[b-lmbbubnpau] {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-xs);
    }

    .records-table .match-key[b-lmbbubnpau] {
        color: var(--color-text-secondary);
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .records-table .text-muted[b-lmbbubnpau] {
        color: var(--color-gray-300);
    }

/* ═══════ Status Badges ═══════ */
.status-badge[b-lmbbubnpau] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

    .status-badge.status-completed[b-lmbbubnpau] {
        background: var(--color-success-light);
        color: var(--color-success-text);
    }

    .status-badge.status-failed[b-lmbbubnpau] {
        background: var(--color-danger-light);
        color: var(--color-danger-text);
    }

    .status-badge.status-pending[b-lmbbubnpau] {
        background: var(--color-warning-light);
        color: var(--color-warning-text);
    }

    .status-badge.status-processing[b-lmbbubnpau] {
        background: var(--color-info-light);
        color: var(--color-info-text);
    }

    .status-badge.status-cancelled[b-lmbbubnpau] {
        background: var(--color-gray-100);
        color: var(--color-text-secondary);
    }

    .status-badge.status-dryrun[b-lmbbubnpau] {
        background: var(--color-accent-ai-light, #f3e8ff);
        color: var(--color-accent-ai, #7c3aed);
    }

    .status-badge.status-rolledback[b-lmbbubnpau] {
        background: var(--color-warning-light);
        color: var(--color-warning-text);
    }

    .status-badge.status-warning[b-lmbbubnpau] {
        background: var(--color-warning-light);
        color: var(--color-warning-text);
    }

/* Action Badges */
.action-badge[b-lmbbubnpau] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
}

    .action-badge.action-created[b-lmbbubnpau] {
        background: var(--color-success-light);
        color: var(--color-success-text);
    }

    .action-badge.action-updated[b-lmbbubnpau] {
        background: var(--color-info-light);
        color: var(--color-info-text);
    }

    .action-badge.action-skipped[b-lmbbubnpau] {
        background: var(--color-gray-100);
        color: var(--color-text-secondary);
    }

    .action-badge.action-failed[b-lmbbubnpau] {
        background: var(--color-danger-light);
        color: var(--color-danger-text);
    }

/* ═══════ Responsive ═══════ */
@media (max-width: 1024px) {
    .history-layout.detail-open[b-lmbbubnpau] {
        grid-template-columns: 1fr;
    }

        .history-layout.detail-open .batch-list-panel[b-lmbbubnpau] {
            display: none;
        }

    .detail-panel[b-lmbbubnpau] {
        max-height: none;
    }

    .col-hide-detail[b-lmbbubnpau] {
        display: table-cell !important;
    }
}

@media (max-width: 768px) {
    .page-container[b-lmbbubnpau] {
        padding: var(--spacing-4);
    }

    .history-table-wrapper[b-lmbbubnpau] {
        overflow-x: auto;
    }

    .detail-stats[b-lmbbubnpau] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rollback-actions[b-lmbbubnpau] {
        flex-direction: column;
    }
}

@keyframes spin-b-lmbbubnpau {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Admin/Import/ImportWizard.razor.rz.scp.css */
/* ============================================
   IMPORT WIZARD - VERTICAL TIMELINE LAYOUT
   Uses design-tokens.css variables
   Uses ::deep for child component styles
   ============================================ */

/* ============================================
   LOADING & UNAUTHORIZED STATES
   ============================================ */

.loading-container[b-s4yty887sk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: var(--spacing-4);
    color: var(--color-text-secondary);
}

.spinner[b-s4yty887sk] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin-b-s4yty887sk 0.8s linear infinite;
}

@keyframes spin-b-s4yty887sk {
    to {
        transform: rotate(360deg);
    }
}

.unauthorized-container[b-s4yty887sk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-8);
    background: var(--color-background);
}

.unauthorized-card[b-s4yty887sk] {
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-12);
    text-align: center;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}

    .unauthorized-card i[b-s4yty887sk] {
        font-size: 4rem;
        color: var(--color-danger);
        margin-bottom: var(--spacing-4);
    }

    .unauthorized-card h2[b-s4yty887sk] {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin-bottom: var(--spacing-2);
    }

    .unauthorized-card p[b-s4yty887sk] {
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-6);
    }

/* ============================================
   MAIN LAYOUT - SIDEBAR + CONTENT
   ============================================ */

.import-wizard-layout[b-s4yty887sk] {
    display: flex;
    min-height: 100vh;
    background: var(--color-background);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal, 1000);
}

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

.wizard-sidebar[b-s4yty887sk] {
    width: 280px;
    min-width: 280px;
    background: var(--color-surface);
    border-right: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
}

/* Sidebar + main headers share a fixed height so their bottom dividers line up across the split. */
.sidebar-header[b-s4yty887sk] {
    padding: var(--spacing-3) var(--spacing-6);
    min-height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

    .sidebar-header h2[b-s4yty887sk] {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        margin: 0;
    }

        .sidebar-header h2 i[b-s4yty887sk] {
            color: var(--color-primary);
        }

    .sidebar-header p[b-s4yty887sk] {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: var(--spacing-1) 0 0 0;
    }

/* ============================================
   VERTICAL TIMELINE
   ============================================ */

.timeline[b-s4yty887sk] {
    flex: 1;
    padding: var(--spacing-6);
    overflow-y: auto;
}

.timeline-step[b-s4yty887sk] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-2);
    margin-bottom: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    position: relative;
}

    /* Vertical connector line */
    .timeline-step:not(:last-child)[b-s4yty887sk]::after {
        content: '';
        position: absolute;
        left: 22px;
        top: 44px;
        width: 2px;
        height: calc(100% - 8px);
        background: var(--color-border);
    }

    .timeline-step.completed:not(:last-child)[b-s4yty887sk]::after {
        background: var(--color-success);
    }

    .timeline-step.clickable[b-s4yty887sk] {
        cursor: pointer;
    }

        .timeline-step.clickable:hover[b-s4yty887sk] {
            background: var(--color-gray-50);
        }

.timeline-dot[b-s4yty887sk] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    border: var(--border-width-2) var(--border-style) var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    transition: var(--transition-normal);
    position: relative;
    z-index: 1;
}

.timeline-step.active .timeline-dot[b-s4yty887sk] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: 0 0 0 4px var(--color-primary-light, rgba(59, 130, 246, 0.2));
}

.timeline-step.completed .timeline-dot[b-s4yty887sk] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}

.timeline-info[b-s4yty887sk] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0-5, 2px);
    padding-top: var(--spacing-1);
}

.step-title[b-s4yty887sk] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    transition: var(--transition-normal);
}

.timeline-step.active .step-title[b-s4yty887sk] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.timeline-step.completed .step-title[b-s4yty887sk] {
    color: var(--color-success);
}

.step-subtitle[b-s4yty887sk] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ============================================
   SIDEBAR FOOTER
   ============================================ */

/* Compact icon-only bar, height-matched to the data-preview dock handle (44px) so the footer's
   top border lines up with the dock's across the split. Labels move to hover tooltips. */
.sidebar-footer[b-s4yty887sk] {
    height: 44px;
    padding: 0 var(--spacing-4);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    box-sizing: border-box;
}

.footer-link[b-s4yty887sk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

    .footer-link:hover[b-s4yty887sk] {
        background: var(--color-gray-50);
        color: var(--color-primary);
    }

    .footer-link i[b-s4yty887sk] {
        font-size: var(--font-size-xl);
    }

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.wizard-main[b-s4yty887sk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-header[b-s4yty887sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-6);
    min-height: 80px;
    box-sizing: border-box;
    background: var(--color-surface);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

.header-left h1[b-s4yty887sk] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.step-indicator[b-s4yty887sk] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.header-actions[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.fieldmeta-badge[b-s4yty887sk] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Toggle Switch */
.dry-run-toggle[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.toggle-switch[b-s4yty887sk] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

    .toggle-switch input[b-s4yty887sk] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-s4yty887sk] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    transition: var(--transition-normal);
}

    .toggle-slider[b-s4yty887sk]::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background: var(--color-surface);
        border-radius: var(--radius-full);
        transition: var(--transition-normal);
        box-shadow: var(--shadow-sm);
    }

.toggle-switch input:checked + .toggle-slider[b-s4yty887sk] {
    background: var(--color-primary);
}

    .toggle-switch input:checked + .toggle-slider[b-s4yty887sk]::before {
        transform: translateX(18px);
    }

.toggle-label[b-s4yty887sk] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   MAIN BODY (Step Content + Navigation)
   ============================================ */

.main-body[b-s4yty887sk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* the scroll lives in .step-content (below) so the .step-navigation bar stays
                           pinned to the panel bottom — its divider then lines up with the sidebar footer
                           regardless of how tall the content is */
    background: var(--color-background);
}

    /* Reserve a strip equal to the dock handle's height so the fixed
       Data Preview dock never sits on top of the footer's Continue button. */
    .main-body.has-dock[b-s4yty887sk] {
        padding-bottom: 44px;
    }

.step-content[b-s4yty887sk] {
    flex: 1;
    padding: var(--spacing-6);
}

    /* The wizard's scroll area (direct child of main-body). Scrolling here keeps the nav bar pinned. */
    .main-body > .step-content[b-s4yty887sk] {
        overflow-y: auto;
        min-height: 0;
    }

/* ============================================
   STEP NAVIGATION BAR
   ============================================ */

.step-navigation[b-s4yty887sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;                 /* match .sidebar-footer + the data-preview dock handle so the
                                     footer dividers line up across the split */
    box-sizing: border-box;
    padding: 0 var(--spacing-6);
    background: var(--color-surface);
    border-top: var(--border-width) var(--border-style) var(--color-border);
}
    /* Keep the Back/Continue buttons inside the 44px bar (Bootstrap's .btn-lg is ~48px). */
    .step-navigation .btn[b-s4yty887sk] {
        padding: 6px 16px;
        font-size: 14px;
        line-height: 1.3;
    }

.nav-left[b-s4yty887sk], .nav-center[b-s4yty887sk], .nav-right[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.nav-center[b-s4yty887sk] {
    flex: 1;
    justify-content: center;
}

.progress-text[b-s4yty887sk] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   PREVIEW DRAWER
   ============================================ */

/* Bottom dock — a full-width strip pinned to the viewport bottom (clearing
   the 280px sidebar). The handle is always visible; the panel slides up
   above it. The footer's Back/Continue sit above the dock because .main-body
   reserves a strip via .has-dock, so the dock never covers the nav buttons. */
.preview-dock[b-s4yty887sk] {
    position: fixed;
    bottom: 0;
    left: 280px;
    right: 0;
    z-index: var(--z-fixed, 100);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;   /* only the bar + open panel catch clicks */
}

    .preview-dock > *[b-s4yty887sk] {
        pointer-events: auto;
    }

/* Always-visible full-width handle at the very bottom */
.preview-dock-handle[b-s4yty887sk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 var(--spacing-6);
    background: var(--color-surface);
    border: none;
    border-top: var(--border-width) var(--border-style) var(--color-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

    .preview-dock-handle:hover[b-s4yty887sk] {
        background: var(--color-gray-50);
    }

.dock-handle-label[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.dock-handle-count[b-s4yty887sk] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.dock-handle-toggle[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
}

/* Expanding panel — sits ABOVE the handle, slides up like a terminal */
.preview-drawer-panel[b-s4yty887sk] {
    height: 0;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transition: height var(--transition-slow);
}

    .preview-drawer-panel.open[b-s4yty887sk] {
        height: 400px;
        max-height: 60vh;
        border-top: var(--border-width) var(--border-style) var(--color-border);
    }

.drawer-body[b-s4yty887sk] {
    flex: 1;
    padding: var(--spacing-4) var(--spacing-6);
    overflow: auto;
}

.drawer-tabs[b-s4yty887sk] {
    display: flex;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-6);
    background: var(--color-gray-50);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

    .drawer-tabs .tab[b-s4yty887sk],
    .drawer-tabs .preview-tab[b-s4yty887sk] {
        padding: var(--spacing-2) var(--spacing-4);
        border: var(--border-width) var(--border-style) var(--color-border);
        background: var(--color-surface);
        cursor: pointer;
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        border-radius: var(--radius-md);
        transition: var(--transition-normal);
    }

        .drawer-tabs .tab:hover[b-s4yty887sk],
        .drawer-tabs .preview-tab:hover[b-s4yty887sk] {
            color: var(--color-text-primary);
            background: var(--color-gray-100);
        }

        .drawer-tabs .tab.active[b-s4yty887sk],
        .drawer-tabs .preview-tab.active[b-s4yty887sk] {
            color: var(--color-primary);
            background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
            border-color: var(--color-primary);
        }

/* Spinner variants */
.spinner-sm[b-s4yty887sk] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: spin-b-s4yty887sk 0.6s linear infinite;
    display: inline-block;
}

/* ============================================
   CHILD COMPONENT STYLES (::deep required)
   ============================================ */

/* Step Content Common */
[b-s4yty887sk] .step-header {
    margin-bottom: var(--spacing-6);
}

    [b-s4yty887sk] .step-header h2 {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0;
    }

    [b-s4yty887sk] .step-header p {
        color: var(--color-text-secondary);
        margin-top: var(--spacing-1);
    }

/* ============================================
   STEP 1: FILE UPLOAD
   ============================================ */

/* Upload Zone */
[b-s4yty887sk] .upload-zone {
    border: var(--border-width-2) dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    text-align: center;
    transition: var(--transition-normal);
    background: var(--color-gray-50);
}

    [b-s4yty887sk] .upload-zone.dragging {
        border-color: var(--color-primary);
        background: var(--color-primary-light, rgba(59, 130, 246, 0.05));
    }

    [b-s4yty887sk] .upload-zone.has-file {
        border-style: solid;
        border-color: var(--color-success);
        background: var(--color-success-light, rgba(34, 197, 94, 0.05));
        padding: var(--spacing-4);
    }

/* Upload States */
[b-s4yty887sk] .upload-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    color: var(--color-text-secondary);
}

    [b-s4yty887sk] .upload-loading .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-primary);
        border-radius: var(--radius-full);
        animation: spin-b-s4yty887sk 0.8s linear infinite;
    }

[b-s4yty887sk] .upload-success {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

    [b-s4yty887sk] .upload-success > i {
        font-size: 2.5rem;
        color: var(--color-success);
    }

[b-s4yty887sk] .upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

    [b-s4yty887sk] .upload-prompt > i {
        font-size: 3rem;
        color: var(--color-text-muted);
    }

[b-s4yty887sk] .upload-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
}

[b-s4yty887sk] .upload-or {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

[b-s4yty887sk] .upload-formats {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-2) 0 0 0;
}

[b-s4yty887sk] .file-input {
    display: none;
}

/* File Info (inside upload-success) */
[b-s4yty887sk] .file-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
}

[b-s4yty887sk] .file-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

[b-s4yty887sk] .file-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Import Mode Section */
[b-s4yty887sk] .import-mode-section {
    margin-top: var(--spacing-8);
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .import-mode-section h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-1) 0;
    }

        [b-s4yty887sk] .import-mode-section h3 i {
            color: var(--color-primary);
        }

[b-s4yty887sk] .section-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-4) 0;
}

/* Mode Cards */
[b-s4yty887sk] .mode-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

[b-s4yty887sk] .mode-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border: var(--border-width-2) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
}

    [b-s4yty887sk] .mode-card:hover {
        border-color: var(--color-primary);
        background: var(--color-surface);
    }

    [b-s4yty887sk] .mode-card.selected {
        border-color: var(--color-primary);
        background: var(--color-primary-light, rgba(59, 130, 246, 0.05));
    }

[b-s4yty887sk] .mode-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

    [b-s4yty887sk] .mode-icon i {
        font-size: 1.5rem;
        color: var(--color-text-muted);
    }

[b-s4yty887sk] .mode-card.selected .mode-icon {
    background: var(--color-primary);
}

    [b-s4yty887sk] .mode-card.selected .mode-icon i {
        color: var(--color-text-inverse);
    }

[b-s4yty887sk] .mode-content {
    flex: 1;
}

    [b-s4yty887sk] .mode-content h4 {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-1) 0;
    }

    [b-s4yty887sk] .mode-content p {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: 0;
        line-height: 1.4;
    }

[b-s4yty887sk] .mode-check {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* Match Key Section */
[b-s4yty887sk] .match-key-section {
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: var(--border-width) var(--border-style) var(--color-border);
}

    [b-s4yty887sk] .match-key-section h4 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-1) 0;
    }

        [b-s4yty887sk] .match-key-section h4 i {
            color: var(--color-warning);
        }

[b-s4yty887sk] .help-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-3) 0;
}

[b-s4yty887sk] .match-key-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

[b-s4yty887sk] .match-key-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
}

    [b-s4yty887sk] .match-key-option:hover {
        border-color: var(--color-primary);
    }

    [b-s4yty887sk] .match-key-option.selected {
        border-color: var(--color-primary);
        background: var(--color-primary-light, rgba(59, 130, 246, 0.05));
    }

    [b-s4yty887sk] .match-key-option input[type="radio"] {
        accent-color: var(--color-primary);
    }

[b-s4yty887sk] .option-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

[b-s4yty887sk] .recommended-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0-5, 2px) var(--spacing-2);
    background: var(--color-success-light, rgba(34, 197, 94, 0.1));
    color: var(--color-success);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
}

[b-s4yty887sk] .match-key-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-info-light, rgba(59, 130, 246, 0.05));
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

    [b-s4yty887sk] .match-key-info i {
        color: var(--color-info);
        flex-shrink: 0;
        margin-top: 2px;
    }

    [b-s4yty887sk] .match-key-info strong {
        color: var(--color-text-primary);
    }

/* File Preview Section */
[b-s4yty887sk] .file-preview {
    margin-top: var(--spacing-8);
}

    [b-s4yty887sk] .file-preview h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-4) 0;
    }

        [b-s4yty887sk] .file-preview h3 i {
            color: var(--color-primary);
        }

[b-s4yty887sk] .preview-table-wrapper {
    overflow-x: auto;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

[b-s4yty887sk] .preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

    [b-s4yty887sk] .preview-table th,
    [b-s4yty887sk] .preview-table td {
        padding: var(--spacing-3);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        white-space: nowrap;
    }

    [b-s4yty887sk] .preview-table th {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        position: sticky;
        top: 0;
    }

    [b-s4yty887sk] .preview-table td {
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .preview-table tr:hover td {
        background: var(--color-gray-50);
    }

    [b-s4yty887sk] .preview-table tr:last-child td {
        border-bottom: none;
    }

    [b-s4yty887sk] .preview-table .row-num {
        width: 40px;
        text-align: center;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        background: var(--color-gray-50);
    }

/* Column Analysis Section */
[b-s4yty887sk] .column-analysis {
    margin-top: var(--spacing-8);
}

    [b-s4yty887sk] .column-analysis h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-4) 0;
    }

        [b-s4yty887sk] .column-analysis h3 i {
            color: var(--color-primary);
        }

[b-s4yty887sk] .analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

[b-s4yty887sk] .analysis-card {
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

[b-s4yty887sk] .col-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

[b-s4yty887sk] .col-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

[b-s4yty887sk] .data-type {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0-5, 2px) var(--spacing-2);
    background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

[b-s4yty887sk] .fill-rate {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

[b-s4yty887sk] .sample-values {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   STEP 2: COLUMN MAPPING
   ============================================ */

/* Mapping Stats */
[b-s4yty887sk] .mapping-stats {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .mapping-stats .stat {
        flex: 1;
        text-align: center;
        padding: var(--spacing-3);
    }

    [b-s4yty887sk] .mapping-stats .stat-value {
        display: block;
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
    }

        [b-s4yty887sk] .mapping-stats .stat-value.mapped {
            color: var(--color-success);
        }

        [b-s4yty887sk] .mapping-stats .stat-value.skipped {
            color: var(--color-text-muted);
        }

        [b-s4yty887sk] .mapping-stats .stat-value.required {
            color: var(--color-danger);
        }

    [b-s4yty887sk] .mapping-stats .stat-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

/* Mapping List */
[b-s4yty887sk] .mapping-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* The mapping rows are individually bordered, draggable cards, so the enclosing Card box
   (its left/right edges + top-of-first / bottom-of-last) is redundant visual noise — strip it
   and let the rows stand on their own. */
[b-s4yty887sk] .card.mapping-card-bare {
    border: none;
    background: transparent;
    box-shadow: none;
}

[b-s4yty887sk] .mapping-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

    [b-s4yty887sk] .mapping-row.mapped {
        border-left: 3px solid var(--color-success);
    }

    [b-s4yty887sk] .mapping-row.unmapped {
        border-left: 3px solid var(--color-gray-300);
        background: var(--color-gray-50);
    }

    [b-s4yty887sk] .mapping-row .source-column {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        min-width: 200px;
    }

        [b-s4yty887sk] .mapping-row .source-column i {
            color: var(--color-text-muted);
        }

        [b-s4yty887sk] .mapping-row .source-column .column-name {
            font-family: var(--font-family-mono);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-primary);
        }

[b-s4yty887sk] .mapping-arrow {
    color: var(--color-text-muted);
}

[b-s4yty887sk] .mapping-row .target-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

[b-s4yty887sk] .field-select {
    flex: 1;
    max-width: 300px;
    padding: var(--spacing-2) var(--spacing-3);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
}

    [b-s4yty887sk] .field-select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light, rgba(59, 130, 246, 0.2));
    }

[b-s4yty887sk] .field-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

[b-s4yty887sk] .data-type {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0-5, 2px) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

    [b-s4yty887sk] .data-type.badge-text,
    [b-s4yty887sk] .badge-text {
        background: var(--color-gray-100);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .data-type.badge-number,
    [b-s4yty887sk] .badge-number {
        background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
        color: var(--color-primary);
    }

    [b-s4yty887sk] .data-type.badge-date,
    [b-s4yty887sk] .badge-date {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
        color: var(--color-warning);
    }

    [b-s4yty887sk] .data-type.badge-boolean,
    [b-s4yty887sk] .badge-boolean {
        background: var(--color-success-light, rgba(34, 197, 94, 0.1));
        color: var(--color-success);
    }

[b-s4yty887sk] .required-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0-5, 2px) var(--spacing-2);
    background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
    color: var(--color-danger);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

[b-s4yty887sk] .transform-badge {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

[b-s4yty887sk] .mapping-actions {
    display: flex;
    gap: var(--spacing-1);
    align-items: center;
}

/* Drag-reorder + combine-columns (Step 2) */
[b-s4yty887sk] .mapping-row .drag-grip {
    cursor: grab;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1;
    user-select: none;
    letter-spacing: -2px;
    margin-right: 2px;
}
[b-s4yty887sk] .mapping-row.dragging { opacity: 0.45; }
/* SortableJS placeholder for the row being dragged. */
[b-s4yty887sk] .mapping-row-ghost {
    opacity: 0.4;
    background: var(--color-primary-bg, #eff5ff);
    border-style: dashed;
}

/* The ＋ sits in the SEAM between two mapping rows (the "combine these two" affordance). */
[b-s4yty887sk] .mapping-seam {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
}
[b-s4yty887sk] .mapping-seam::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 10px;
    top: 50%;
    height: 1px;
    background: transparent;
    transition: background .12s;
}
[b-s4yty887sk] .mapping-seam:hover::before { background: var(--color-primary-light, #dbeafe); }

[b-s4yty887sk] .seam-btn {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1.5px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    transition: transform .1s, background .12s, color .12s;
    padding: 0;
}
    /* Phosphor plus icon — geometrically centered, unlike the fullwidth ＋ glyph. */
    [b-s4yty887sk] .seam-btn i {
        font-size: 14px;
        line-height: 1;
        display: block;
    }
[b-s4yty887sk] .seam-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.12);
}
[b-s4yty887sk] .seam-btn.on { background: var(--color-primary); color: #fff; }
[b-s4yty887sk] .seam-btn.disabled,
[b-s4yty887sk] .seam-btn:disabled {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
}

/* A row whose column has been folded into another field: dimmed, with a chip explaining where it went. */
[b-s4yty887sk] .mapping-row.folded { opacity: .6; }
[b-s4yty887sk] .folded-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--color-primary-light, #ede9fe);
    color: var(--color-primary, #6d28d9);
}
[b-s4yty887sk] .folded-chip i { font-size: 0.95rem; }

[b-s4yty887sk] .combine-close {
    border: 1px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 12px;
    border-radius: 7px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
    [b-s4yty887sk] .combine-close:hover {
        background: var(--color-primary);
        color: #fff;
    }

/* Full-width expander flush with the mapping rows — it belongs to the row above, so it spans the
   same width rather than floating in a narrow left-indented box. A tinted fill + full border read
   as one deliberate section; a small connector notch points up to the parent row (replaces the old
   lopsided left accent bar). */
[b-s4yty887sk] .combine-panel {
    position: relative;
    margin: 4px 0 8px;
    border: 1px solid var(--color-primary-light, #dbedff);
    border-radius: 10px;
    background: var(--color-primary-bg, #eff5ff);
    padding: 14px 16px;
}
    [b-s4yty887sk] .combine-panel::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 26px;
        width: 11px;
        height: 11px;
        background: var(--color-primary-bg, #eff5ff);
        border-left: 1px solid var(--color-primary-light, #dbedff);
        border-top: 1px solid var(--color-primary-light, #dbedff);
        transform: rotate(45deg);
    }
[b-s4yty887sk] .combine-ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}
[b-s4yty887sk] .combine-part {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
[b-s4yty887sk] .combine-sel,
[b-s4yty887sk] .combine-head {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 13px;
    background: var(--color-surface);
}
[b-s4yty887sk] .combine-head { flex: 1; min-width: 150px; }
[b-s4yty887sk] .combine-chk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
[b-s4yty887sk] .combine-x {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 13px;
}
[b-s4yty887sk] .combine-add {
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    padding: 2px 0;
}
[b-s4yty887sk] .combine-hint {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* Per-import Related/Parent link-type choice (Step 2, the "Link to Ticket" target) */
[b-s4yty887sk] .link-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
[b-s4yty887sk] .link-type-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
[b-s4yty887sk] .link-type-sel { max-width: 340px; }

[b-s4yty887sk] .btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
}

    [b-s4yty887sk] .btn-icon:hover {
        background: var(--color-gray-100);
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .btn-icon.remove:hover {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
        color: var(--color-danger);
    }

/* Mapping Legend */
[b-s4yty887sk] .mapping-legend {
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .mapping-legend h4 {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        margin: 0 0 var(--spacing-3) 0;
    }

[b-s4yty887sk] .legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

[b-s4yty887sk] .legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

    [b-s4yty887sk] .legend-item span {
        white-space: nowrap;
    }

/* Preview Header Row */
[b-s4yty887sk] .preview-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    [b-s4yty887sk] .preview-header-row .preview-title h3 {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
    }

    [b-s4yty887sk] .preview-header-row .preview-subtitle {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

/* Mapping Legend */
[b-s4yty887sk] .mapping-legend h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-3) 0;
}

/* ============================================
   STEP 3: TRANSFORMS
   ============================================ */

[b-s4yty887sk] .transform-section {
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .transform-section h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-1) 0;
    }

        [b-s4yty887sk] .transform-section h3 i {
            color: var(--color-primary);
        }

    [b-s4yty887sk] .transform-section .section-desc {
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        margin: 0 0 var(--spacing-4) 0;
    }

[b-s4yty887sk] .auto-transforms,
[b-s4yty887sk] .custom-transforms {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

[b-s4yty887sk] .transform-card {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .transform-card.auto {
        border-left: 3px solid var(--color-primary);
    }

    [b-s4yty887sk] .transform-card.custom {
        border-left: 3px solid var(--color-warning);
    }

[b-s4yty887sk] .transform-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

    [b-s4yty887sk] .transform-header .checkbox-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        cursor: pointer;
        flex: 1;
    }

        [b-s4yty887sk] .transform-header .checkbox-label input[type="checkbox"] {
            accent-color: var(--color-primary);
        }

    [b-s4yty887sk] .transform-header .column-name {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .transform-header .arrow {
        color: var(--color-text-muted);
    }

    [b-s4yty887sk] .transform-header .field-name {
        color: var(--color-text-secondary);
    }

[b-s4yty887sk] .transform-type,
[b-s4yty887sk] .transform-details {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding-left: var(--spacing-6);
}

[b-s4yty887sk] .rule-badge {
    display: inline-flex;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
    color: var(--color-warning);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
}

/* Add Rule Form */
[b-s4yty887sk] .add-rule-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

[b-s4yty887sk] .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

    [b-s4yty887sk] .form-row label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .form-row input,
    [b-s4yty887sk] .form-row select,
    [b-s4yty887sk] .form-row textarea {
        padding: var(--spacing-2) var(--spacing-3);
        border: var(--border-width) var(--border-style) var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        background: var(--color-surface);
    }

        [b-s4yty887sk] .form-row input:focus,
        [b-s4yty887sk] .form-row select:focus,
        [b-s4yty887sk] .form-row textarea:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-light, rgba(59, 130, 246, 0.2));
        }

[b-s4yty887sk] .rule-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

[b-s4yty887sk] .pill {
    padding: var(--spacing-2) var(--spacing-4);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-normal);
}

    [b-s4yty887sk] .pill:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    [b-s4yty887sk] .pill.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

[b-s4yty887sk] .rule-config {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

[b-s4yty887sk] .value-map-editor textarea {
    width: 100%;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

[b-s4yty887sk] .value-map-editor .help-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2);
}

/* Cleanup Options */
[b-s4yty887sk] .cleanup-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

[b-s4yty887sk] .checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
}

    [b-s4yty887sk] .checkbox-option input[type="checkbox"] {
        margin-top: 2px;
        accent-color: var(--color-primary);
    }

    [b-s4yty887sk] .checkbox-option span:first-of-type {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .checkbox-option .help {
        display: block;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        margin-left: auto;
    }

/* ============================================
   STEP 4: LOOKUP RESOLUTION
   ============================================ */

[b-s4yty887sk] .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    color: var(--color-text-secondary);
}

    [b-s4yty887sk] .loading-state .spinner {
        width: 48px;
        height: 48px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-primary);
        border-radius: var(--radius-full);
        animation: spin-b-s4yty887sk 0.8s linear infinite;
        margin-bottom: var(--spacing-4);
    }

[b-s4yty887sk] .lookup-stats {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

    [b-s4yty887sk] .lookup-stats .stat {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
        background: var(--color-surface);
        border: var(--border-width) var(--border-style) var(--color-border);
        border-radius: var(--radius-md);
    }

        [b-s4yty887sk] .lookup-stats .stat i {
            font-size: 1.5rem;
        }

        [b-s4yty887sk] .lookup-stats .stat.success i {
            color: var(--color-success);
        }

        [b-s4yty887sk] .lookup-stats .stat.warning i {
            color: var(--color-warning);
        }

        [b-s4yty887sk] .lookup-stats .stat.error i {
            color: var(--color-danger);
        }

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

    [b-s4yty887sk] .lookup-stats .stat-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

[b-s4yty887sk] .lookup-section {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .lookup-section.errors {
        border-color: var(--color-danger);
        border-left: 3px solid var(--color-danger);
    }

    [b-s4yty887sk] .lookup-section.warnings {
        border-color: var(--color-warning);
        border-left: 3px solid var(--color-warning);
    }

    [b-s4yty887sk] .lookup-section h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-1) 0;
    }

    [b-s4yty887sk] .lookup-section.errors h3 {
        color: var(--color-danger);
    }

    [b-s4yty887sk] .lookup-section.warnings h3 {
        color: var(--color-warning);
    }

[b-s4yty887sk] .lookup-issues {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

[b-s4yty887sk] .lookup-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: var(--border-width) var(--border-style) var(--color-border);
}

    [b-s4yty887sk] .lookup-pager .pager-status {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

[b-s4yty887sk] .issue-card {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: var(--border-width) var(--border-style) var(--color-border);
}

    [b-s4yty887sk] .issue-card.error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
        border-color: var(--color-danger);
    }

    [b-s4yty887sk] .issue-card.warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
        border-color: var(--color-warning);
    }

[b-s4yty887sk] .issue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

    [b-s4yty887sk] .issue-header .field-name {
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .issue-header .occurrence-count {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

[b-s4yty887sk] .issue-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

    [b-s4yty887sk] .issue-value .value {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-sm);
        padding: var(--spacing-1) var(--spacing-2);
        background: var(--color-surface);
        border-radius: var(--radius-sm);
    }

        [b-s4yty887sk] .issue-value .value.original {
            text-decoration: line-through;
            color: var(--color-text-muted);
        }

        [b-s4yty887sk] .issue-value .value.matched {
            color: var(--color-success);
            font-weight: var(--font-weight-medium);
        }

    [b-s4yty887sk] .issue-value .status {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

[b-s4yty887sk] .issue-actions {
    display: flex;
    gap: var(--spacing-2);
}

[b-s4yty887sk] .success-state {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-success-light, rgba(34, 197, 94, 0.05));
    border: var(--border-width) var(--border-style) var(--color-success);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .success-state i {
        font-size: 3rem;
        color: var(--color-success);
        margin-bottom: var(--spacing-4);
    }

    [b-s4yty887sk] .success-state h3 {
        color: var(--color-success);
        margin: 0 0 var(--spacing-2) 0;
    }

    [b-s4yty887sk] .success-state p {
        color: var(--color-text-secondary);
        margin: 0;
    }

[b-s4yty887sk] .lookup-preview {
    margin-top: var(--spacing-6);
}

    [b-s4yty887sk] .lookup-preview h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-4) 0;
    }

[b-s4yty887sk] .resolved-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-success);
}

[b-s4yty887sk] .error-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-danger);
}

/* ============================================
   STEP 5: VALIDATION
   ============================================ */

[b-s4yty887sk] .validating-state {
    text-align: center;
    padding: var(--spacing-12);
}

    [b-s4yty887sk] .validating-state h3 {
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-2) 0;
    }

    [b-s4yty887sk] .validating-state p {
        color: var(--color-text-secondary);
        margin: 0;
    }

[b-s4yty887sk] .validation-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

[b-s4yty887sk] .summary-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .summary-card .card-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        font-size: 1.5rem;
    }

    [b-s4yty887sk] .summary-card.total .card-icon {
        background: var(--color-gray-100);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .summary-card.valid .card-icon {
        background: var(--color-success-light, rgba(34, 197, 94, 0.1));
        color: var(--color-success);
    }

    [b-s4yty887sk] .summary-card.warning .card-icon {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
        color: var(--color-warning);
    }

    [b-s4yty887sk] .summary-card.error .card-icon {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
        color: var(--color-danger);
    }

    [b-s4yty887sk] .summary-card .card-content {
        display: flex;
        flex-direction: column;
    }

    [b-s4yty887sk] .summary-card .card-value {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .summary-card .card-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

/* Progress Bar */
[b-s4yty887sk] .validation-progress {
    margin-bottom: var(--spacing-6);
}

[b-s4yty887sk] .progress-bar {
    display: flex;
    height: 8px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-gray-100);
}

[b-s4yty887sk] .progress-segment {
    height: 100%;
    transition: width var(--transition-slow);
}

    [b-s4yty887sk] .progress-segment.valid {
        background: var(--color-success);
    }

    [b-s4yty887sk] .progress-segment.warning {
        background: var(--color-warning);
    }

    [b-s4yty887sk] .progress-segment.error {
        background: var(--color-danger);
    }

[b-s4yty887sk] .progress-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    margin-top: var(--spacing-3);
}

    [b-s4yty887sk] .progress-legend .legend-item {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

        [b-s4yty887sk] .progress-legend .legend-item.valid::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            background: var(--color-success);
            border-radius: var(--radius-full);
            margin-right: var(--spacing-2);
        }

        [b-s4yty887sk] .progress-legend .legend-item.warning::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            background: var(--color-warning);
            border-radius: var(--radius-full);
            margin-right: var(--spacing-2);
        }

        [b-s4yty887sk] .progress-legend .legend-item.error::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            background: var(--color-danger);
            border-radius: var(--radius-full);
            margin-right: var(--spacing-2);
        }

/* Validation Sections */
[b-s4yty887sk] .validation-section {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .validation-section h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-4) 0;
    }

    [b-s4yty887sk] .validation-section.errors h3 {
        color: var(--color-danger);
    }

    [b-s4yty887sk] .validation-section.warnings h3 {
        color: var(--color-warning);
    }

[b-s4yty887sk] .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

[b-s4yty887sk] .filter-tabs {
    display: flex;
    gap: var(--spacing-1);
}

    [b-s4yty887sk] .filter-tabs .tab {
        padding: var(--spacing-2) var(--spacing-3);
        border: none;
        background: var(--color-gray-100);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: var(--transition-normal);
    }

        [b-s4yty887sk] .filter-tabs .tab:hover {
            background: var(--color-gray-200);
        }

        [b-s4yty887sk] .filter-tabs .tab.active {
            background: var(--color-primary);
            color: var(--color-text-inverse);
        }

/* Issue List */
[b-s4yty887sk] .issue-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

[b-s4yty887sk] .issue-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--spacing-3);
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .issue-item.error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    }

    [b-s4yty887sk] .issue-item.warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
    }

[b-s4yty887sk] .issue-type .type-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

[b-s4yty887sk] .issue-item.error .type-badge {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

[b-s4yty887sk] .issue-item.warning .type-badge {
    background: var(--color-warning);
    color: var(--color-text-inverse);
}

[b-s4yty887sk] .issue-message {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

[b-s4yty887sk] .issue-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

[b-s4yty887sk] .issue-rows {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
}

/* Row Table */
[b-s4yty887sk] .row-table-wrapper {
    overflow-x: auto;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

[b-s4yty887sk] .row-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

    [b-s4yty887sk] .row-table th,
    [b-s4yty887sk] .row-table td {
        padding: var(--spacing-3);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    [b-s4yty887sk] .row-table th {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .row-table tr.status-error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    }

    [b-s4yty887sk] .row-table tr.status-warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
    }

[b-s4yty887sk] .status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

    [b-s4yty887sk] .status-badge.valid {
        background: var(--color-success-light, rgba(34, 197, 94, 0.1));
        color: var(--color-success);
    }

    [b-s4yty887sk] .status-badge.warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
        color: var(--color-warning);
    }

    [b-s4yty887sk] .status-badge.error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
        color: var(--color-danger);
    }

[b-s4yty887sk] .issues-cell .issue {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) 0;
}

    [b-s4yty887sk] .issues-cell .issue.error {
        color: var(--color-danger);
    }

    [b-s4yty887sk] .issues-cell .issue.warning {
        color: var(--color-warning);
    }

    [b-s4yty887sk] .issues-cell .issue.duplicate {
        color: var(--color-text-muted);
    }

[b-s4yty887sk] .issues-cell .more-issues {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

[b-s4yty887sk] .data-cell .data-preview {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
}

/* Ready/Error States */
[b-s4yty887sk] .ready-state,
[b-s4yty887sk] .error-state {
    text-align: center;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-6);
}

[b-s4yty887sk] .ready-state {
    background: var(--color-success-light, rgba(34, 197, 94, 0.05));
    border: var(--border-width) var(--border-style) var(--color-success);
}

[b-s4yty887sk] .error-state {
    background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    border: var(--border-width) var(--border-style) var(--color-danger);
}

[b-s4yty887sk] .ready-state i {
    font-size: 3rem;
    color: var(--color-success);
    margin-bottom: var(--spacing-4);
}

[b-s4yty887sk] .error-state i {
    font-size: 3rem;
    color: var(--color-danger);
    margin-bottom: var(--spacing-4);
}

[b-s4yty887sk] .ready-state h3 {
    color: var(--color-success);
    margin: 0 0 var(--spacing-2) 0;
}

[b-s4yty887sk] .error-state h3 {
    color: var(--color-danger);
    margin: 0 0 var(--spacing-2) 0;
}

[b-s4yty887sk] .ready-state p,
[b-s4yty887sk] .error-state p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-4) 0;
}

/* ============================================
   STEP 6: IMPORT
   ============================================ */

/* Import Summary */
[b-s4yty887sk] .import-summary {
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    overflow: hidden;
}

    [b-s4yty887sk] .import-summary .summary-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        padding: var(--spacing-4) var(--spacing-6);
        background: var(--color-gray-50);
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

        [b-s4yty887sk] .import-summary .summary-header i {
            color: var(--color-primary);
            font-size: 1.25rem;
        }

        [b-s4yty887sk] .import-summary .summary-header h3 {
            margin: 0;
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-semibold);
        }

[b-s4yty887sk] .summary-details {
    padding: var(--spacing-4) var(--spacing-6);
}

[b-s4yty887sk] .detail-row {
    display: flex;
    padding: var(--spacing-2) 0;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

    [b-s4yty887sk] .detail-row:last-child {
        border-bottom: none;
    }

    [b-s4yty887sk] .detail-row .label {
        width: 150px;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .detail-row .value {
        flex: 1;
        color: var(--color-text-primary);
    }

        [b-s4yty887sk] .detail-row .value i {
            margin-right: var(--spacing-1);
        }

/* Import Options */
[b-s4yty887sk] .import-options {
    margin-bottom: var(--spacing-6);
}

    [b-s4yty887sk] .import-options h3 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-4) 0;
    }

        [b-s4yty887sk] .import-options h3 i {
            color: var(--color-primary);
        }

[b-s4yty887sk] .option-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

[b-s4yty887sk] .option-card {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--color-surface);
    border: var(--border-width-2) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
}

    [b-s4yty887sk] .option-card:hover {
        border-color: var(--color-primary);
    }

    [b-s4yty887sk] .option-card.selected {
        border-color: var(--color-primary);
        background: var(--color-primary-light, rgba(59, 130, 246, 0.05));
    }

[b-s4yty887sk] .option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

[b-s4yty887sk] .option-card.selected .option-icon {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

[b-s4yty887sk] .option-content {
    flex: 1;
}

    [b-s4yty887sk] .option-content h4 {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-1) 0;
    }

    [b-s4yty887sk] .option-content p {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: 0;
        line-height: 1.5;
    }

[b-s4yty887sk] .option-check {
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* Warning Banner */
[b-s4yty887sk] .warning-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
    border: var(--border-width) var(--border-style) var(--color-warning);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

    [b-s4yty887sk] .warning-banner i {
        color: var(--color-warning);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    [b-s4yty887sk] .warning-banner strong {
        color: var(--color-warning);
    }

/* Importing State */
[b-s4yty887sk] .importing-state {
    text-align: center;
    padding: var(--spacing-12);
}

    [b-s4yty887sk] .importing-state h3 {
        margin: 0 0 var(--spacing-2) 0;
    }

    [b-s4yty887sk] .importing-state p {
        color: var(--color-text-secondary);
        margin: 0;
    }

/* Import Results */
[b-s4yty887sk] .import-results {
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    [b-s4yty887sk] .import-results.success {
        border-color: var(--color-success);
    }

    [b-s4yty887sk] .import-results.partial {
        border-color: var(--color-warning);
    }

[b-s4yty887sk] .result-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    text-align: center;
    justify-content: center;
}

    [b-s4yty887sk] .result-header i {
        font-size: 2.5rem;
    }

[b-s4yty887sk] .import-results.success .result-header i {
    color: var(--color-success);
}

[b-s4yty887sk] .import-results.partial .result-header i {
    color: var(--color-warning);
}

[b-s4yty887sk] .result-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
}

[b-s4yty887sk] .result-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

[b-s4yty887sk] .stat-card {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .stat-card .stat-value {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
    }

    [b-s4yty887sk] .stat-card.success .stat-value,
    [b-s4yty887sk] .stat-card.created .stat-value {
        color: var(--color-success);
    }

    [b-s4yty887sk] .stat-card.updated .stat-value {
        color: var(--color-info);
    }

    [b-s4yty887sk] .stat-card.error .stat-value {
        color: var(--color-danger);
    }

    [b-s4yty887sk] .stat-card.skipped .stat-value {
        color: var(--color-text-muted);
    }

    [b-s4yty887sk] .stat-card.time .stat-value {
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .stat-card .stat-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

[b-s4yty887sk] .dry-run-notice {
    text-align: center;
    padding: var(--spacing-6);
    background: var(--color-info-light, rgba(59, 130, 246, 0.05));
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

    [b-s4yty887sk] .dry-run-notice i {
        color: var(--color-info);
        font-size: var(--font-size-xl);
    }

    [b-s4yty887sk] .dry-run-notice p {
        margin: var(--spacing-2) 0 var(--spacing-4);
    }

/* Upsert Results Table */
[b-s4yty887sk] .upsert-results {
    margin-top: var(--spacing-6);
}

    [b-s4yty887sk] .upsert-results h4 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-4) 0;
    }

[b-s4yty887sk] .upsert-table-wrapper {
    overflow-x: auto;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

[b-s4yty887sk] .upsert-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

    [b-s4yty887sk] .upsert-table th,
    [b-s4yty887sk] .upsert-table td {
        padding: var(--spacing-3);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    [b-s4yty887sk] .upsert-table th {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
    }

    [b-s4yty887sk] .upsert-table tr.action-created {
        background: var(--color-success-light, rgba(34, 197, 94, 0.05));
    }

    [b-s4yty887sk] .upsert-table tr.action-updated {
        background: var(--color-info-light, rgba(59, 130, 246, 0.05));
    }

    [b-s4yty887sk] .upsert-table tr.action-skipped {
        background: var(--color-gray-50);
    }

    [b-s4yty887sk] .upsert-table tr.action-failed {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    }

    [b-s4yty887sk] .upsert-table .match-key {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-xs);
    }

[b-s4yty887sk] .action-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

    [b-s4yty887sk] .action-badge.created {
        background: var(--color-success-light, rgba(34, 197, 94, 0.1));
        color: var(--color-success);
    }

    [b-s4yty887sk] .action-badge.updated {
        background: var(--color-info-light, rgba(59, 130, 246, 0.1));
        color: var(--color-info);
    }

    [b-s4yty887sk] .action-badge.skipped {
        background: var(--color-gray-100);
        color: var(--color-text-muted);
    }

    [b-s4yty887sk] .action-badge.failed {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
        color: var(--color-danger);
    }

[b-s4yty887sk] .changes-cell {
    max-width: 300px;
}

[b-s4yty887sk] .change-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

[b-s4yty887sk] .change-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
}

    [b-s4yty887sk] .change-item .field {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .change-item .old {
        color: var(--color-danger);
        text-decoration: line-through;
    }

    [b-s4yty887sk] .change-item .new {
        color: var(--color-success);
        font-weight: var(--font-weight-medium);
    }

    [b-s4yty887sk] .change-item i {
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
    }

[b-s4yty887sk] .no-changes,
[b-s4yty887sk] .new-record {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

[b-s4yty887sk] .error-msg {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

[b-s4yty887sk] .more-changes {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

[b-s4yty887sk] .table-footer {
    text-align: center;
    padding: var(--spacing-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    background: var(--color-gray-50);
}

/* Imported Tickets */
[b-s4yty887sk] .imported-tickets {
    margin-top: var(--spacing-6);
}

    [b-s4yty887sk] .imported-tickets h4 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-4) 0;
    }

[b-s4yty887sk] .ticket-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

[b-s4yty887sk] .ticket-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-success-light, rgba(34, 197, 94, 0.1));
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .ticket-item .ticket-id {
        font-weight: var(--font-weight-medium);
        color: var(--color-success);
    }

    [b-s4yty887sk] .ticket-item .row-ref {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

[b-s4yty887sk] .more-tickets {
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Import Errors */
[b-s4yty887sk] .import-errors {
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    border: var(--border-width) var(--border-style) var(--color-danger);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .import-errors h4 {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--color-danger);
        margin: 0 0 var(--spacing-3) 0;
    }

    [b-s4yty887sk] .import-errors .error-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
    }

    [b-s4yty887sk] .import-errors .error-item {
        display: flex;
        gap: var(--spacing-2);
        font-size: var(--font-size-sm);
    }

    [b-s4yty887sk] .import-errors .row-ref {
        font-weight: var(--font-weight-medium);
        color: var(--color-danger);
    }

[b-s4yty887sk] .result-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

/* ============================================
   HELPER COMPONENTS: DataPreviewTable
   ============================================ */

[b-s4yty887sk] .data-preview-table {
    overflow-x: auto;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .data-preview-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--font-size-sm);
    }

    [b-s4yty887sk] .data-preview-table th,
    [b-s4yty887sk] .data-preview-table td {
        padding: var(--spacing-2) var(--spacing-3);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        white-space: nowrap;
    }

    [b-s4yty887sk] .data-preview-table th {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        position: sticky;
        top: 0;
    }

    [b-s4yty887sk] .data-preview-table tr.status-valid {
        background: transparent;
    }

    [b-s4yty887sk] .data-preview-table tr.status-warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
    }

    [b-s4yty887sk] .data-preview-table tr.status-error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    }

    [b-s4yty887sk] .data-preview-table .row-num {
        width: 40px;
        text-align: center;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        background: var(--color-gray-50);
    }

/* ============================================
   HELPER COMPONENTS: SideBySidePreview
   ============================================ */

[b-s4yty887sk] .side-by-side-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

[b-s4yty887sk] .row-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

    [b-s4yty887sk] .row-selector label {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .row-selector select {
        padding: var(--spacing-2) var(--spacing-3);
        border: var(--border-width) var(--border-style) var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        font-size: var(--font-size-sm);
        min-width: 200px;
    }

[b-s4yty887sk] .comparison-table {
    overflow-x: auto;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
}

    [b-s4yty887sk] .comparison-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--font-size-sm);
    }

    [b-s4yty887sk] .comparison-table th,
    [b-s4yty887sk] .comparison-table td {
        padding: var(--spacing-3);
        text-align: left;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    [b-s4yty887sk] .comparison-table th {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
    }

    [b-s4yty887sk] .comparison-table tr.row-error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    }

    [b-s4yty887sk] .comparison-table tr.row-warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
    }

    [b-s4yty887sk] .comparison-table .field-name {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .comparison-table .original-value {
        color: var(--color-text-secondary);
    }

        [b-s4yty887sk] .comparison-table .original-value.changed {
            color: var(--color-text-muted);
        }

    [b-s4yty887sk] .comparison-table .arrow {
        width: 30px;
        text-align: center;
        color: var(--color-text-muted);
    }

    [b-s4yty887sk] .comparison-table .transformed-value {
        color: var(--color-text-primary);
    }

        [b-s4yty887sk] .comparison-table .transformed-value.changed {
            color: var(--color-success);
        }

    [b-s4yty887sk] .comparison-table .strikethrough {
        text-decoration: line-through;
    }

    [b-s4yty887sk] .comparison-table .highlight {
        font-weight: var(--font-weight-medium);
        background: var(--color-success-light, rgba(34, 197, 94, 0.1));
        padding: var(--spacing-0-5, 2px) var(--spacing-1);
        border-radius: var(--radius-sm);
    }

    [b-s4yty887sk] .comparison-table .status-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-1);
        padding: var(--spacing-1) var(--spacing-2);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
    }

        [b-s4yty887sk] .comparison-table .status-badge.error {
            background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
            color: var(--color-danger);
        }

        [b-s4yty887sk] .comparison-table .status-badge.warning {
            background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
            color: var(--color-warning);
        }

        [b-s4yty887sk] .comparison-table .status-badge.changed {
            background: var(--color-success-light, rgba(34, 197, 94, 0.1));
            color: var(--color-success);
        }

        [b-s4yty887sk] .comparison-table .status-badge.unchanged {
            background: var(--color-gray-100);
            color: var(--color-text-muted);
        }

/* ============================================
   UTILITIES (::deep)
   ============================================ */

[b-s4yty887sk] .spinner-large {
    width: 60px;
    height: 60px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin-b-s4yty887sk 1s linear infinite;
    margin: 0 auto var(--spacing-4);
}

[b-s4yty887sk] .alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

[b-s4yty887sk] .alert-error {
    background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
    border: var(--border-width) var(--border-style) var(--color-danger);
    color: var(--color-danger);
}

[b-s4yty887sk] .alert-warning {
    background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
    border: var(--border-width) var(--border-style) var(--color-warning);
    color: var(--color-warning);
}

[b-s4yty887sk] .alert-success {
    background: var(--color-success-light, rgba(34, 197, 94, 0.05));
    border: var(--border-width) var(--border-style) var(--color-success);
    color: var(--color-success);
}

[b-s4yty887sk] .empty-state {
    text-align: center;
    padding: var(--spacing-12);
    color: var(--color-text-secondary);
}

    [b-s4yty887sk] .empty-state i {
        font-size: 3rem;
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-4);
    }

    [b-s4yty887sk] .empty-state h3 {
        margin: 0 0 var(--spacing-2) 0;
        color: var(--color-text-primary);
    }

    [b-s4yty887sk] .empty-state p {
        margin: 0 0 var(--spacing-4) 0;
    }

[b-s4yty887sk] .action-bar {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    gap: var(--spacing-3);
}

/* Cell states */
[b-s4yty887sk] .cell-error {
    background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
}

[b-s4yty887sk] .cell-warning {
    background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
}

[b-s4yty887sk] .cell-changed {
    background: var(--color-info-light, rgba(59, 130, 246, 0.1));
}

[b-s4yty887sk] .cell-resolved {
    background: var(--color-success-light, rgba(34, 197, 94, 0.1));
}

/* Badge */
[b-s4yty887sk] .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
}

    [b-s4yty887sk] .badge.success {
        background: var(--color-success-light, rgba(34, 197, 94, 0.1));
        color: var(--color-success);
    }

    [b-s4yty887sk] .badge.warning {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
        color: var(--color-warning);
    }

    [b-s4yty887sk] .badge.error {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
        color: var(--color-danger);
    }

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

@media (max-width: 1024px) {
    .import-wizard-layout[b-s4yty887sk] {
        flex-direction: column;
    }

    .wizard-sidebar[b-s4yty887sk] {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .sidebar-header[b-s4yty887sk] {
        display: none;
    }

    .sidebar-footer[b-s4yty887sk] {
        display: none;
    }

    .timeline[b-s4yty887sk] {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        padding: var(--spacing-3) var(--spacing-4);
        flex: 1;
        justify-content: center;
        align-items: center;
    }

    .timeline-step[b-s4yty887sk] {
        flex: 0 0 auto;
        margin-bottom: 0;
        padding: var(--spacing-2);
        gap: var(--spacing-2);
        align-items: center;
    }

        /* Hide vertical connector lines */
        .timeline-step[b-s4yty887sk]::after {
            display: none;
        }

        /* Add horizontal connector between steps */
        .timeline-step:not(:last-child)[b-s4yty887sk] {
            margin-right: var(--spacing-1);
        }

            .timeline-step:not(:last-child) .timeline-dot[b-s4yty887sk]::after {
                content: '';
                position: absolute;
                right: -14px;
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 2px;
                background: var(--color-border);
            }

        .timeline-step.completed:not(:last-child) .timeline-dot[b-s4yty887sk]::after {
            background: var(--color-success);
        }

    .timeline-dot[b-s4yty887sk] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: var(--font-size-xs);
    }

    .timeline-info[b-s4yty887sk] {
        display: none;
    }

    .preview-dock[b-s4yty887sk] {
        left: 0;
    }

    [b-s4yty887sk] .option-cards {
        grid-template-columns: 1fr;
    }

    [b-s4yty887sk] .result-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-s4yty887sk] .validation-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    [b-s4yty887sk] .mode-cards {
        grid-template-columns: 1fr;
    }

    [b-s4yty887sk] .validation-summary {
        grid-template-columns: 1fr;
    }

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

    [b-s4yty887sk] .lookup-stats {
        flex-direction: column;
    }

    [b-s4yty887sk] .mapping-row {
        flex-direction: column;
        align-items: stretch;
    }

        [b-s4yty887sk] .mapping-row .source-column {
            min-width: auto;
        }

    [b-s4yty887sk] .mapping-arrow {
        transform: rotate(90deg);
        text-align: center;
        padding: var(--spacing-2) 0;
    }

    [b-s4yty887sk] .mapping-row .target-field {
        flex-direction: column;
        align-items: stretch;
    }

    [b-s4yty887sk] .field-select {
        max-width: none;
    }

    [b-s4yty887sk] .analysis-grid {
        grid-template-columns: 1fr;
    }

    [b-s4yty887sk] .issue-item {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    [b-s4yty887sk] .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }

    [b-s4yty887sk] .filter-tabs {
        overflow-x: auto;
    }

    [b-s4yty887sk] .rule-type-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-2);
    }

    [b-s4yty887sk] .pill {
        flex-shrink: 0;
    }
}

/* ── Phase 6 — Migration-plan banner in the wizard header ───────── */
.plan-banner[b-s4yty887sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px 0;
    padding: 12px 18px;
    background: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid var(--color-primary-light, #c7d2fe);
    border-radius: 10px;
    color: var(--color-primary, #3730a3);
}

.plan-banner-text[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.plan-banner-text i[b-s4yty887sk] {
    font-size: 1.2rem;
    color: var(--color-primary, #6366f1);
}

.plan-banner-text strong[b-s4yty887sk] {
    color: var(--color-primary, #1e1b4b);
}

.plan-banner-link[b-s4yty887sk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary, #4f46e5);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
}

.plan-banner-link:hover[b-s4yty887sk] {
    background: var(--color-surface, #fff);
    color: var(--color-primary, #3730a3);
}

.plan-attach-warning[b-s4yty887sk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: var(--color-warning-light, #fef3c7);
    border: 1px solid var(--color-warning, #fde68a);
    border-radius: 8px;
    color: var(--color-warning-text, #854d0e);
    font-size: 0.88rem;
}
/* /Pages/Admin/Import/RollbackModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ROLLBACK MODAL STYLES
   ═══════════════════════════════════════════════════════════ */

/* Loading State */
.loading-state[b-xbkmdhmpe1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    color: var(--color-text-secondary);
}

    .loading-state .spinner[b-xbkmdhmpe1] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--color-gray-200);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-xbkmdhmpe1 1s linear infinite;
        margin-bottom: var(--spacing-4);
    }

/* Rollback Preview Container */
.rollback-preview[b-xbkmdhmpe1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Batch Info */
.batch-info[b-xbkmdhmpe1] {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4) var(--spacing-6);
}

    .batch-info .info-row[b-xbkmdhmpe1] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

    .batch-info .label[b-xbkmdhmpe1] {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

    .batch-info .value[b-xbkmdhmpe1] {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
    }

/* Warnings Section */
.warnings-section[b-xbkmdhmpe1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Rollback Stats */
.rollback-stats[b-xbkmdhmpe1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3);
}

@media (max-width: 768px) {
    .rollback-stats[b-xbkmdhmpe1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Records Section */
.records-section[b-xbkmdhmpe1] {
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

    .records-section h4[b-xbkmdhmpe1] {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        padding: var(--spacing-3) var(--spacing-4);
        background: var(--color-gray-50);
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        margin: 0;
    }

/* Records Table */
.records-table-wrapper[b-xbkmdhmpe1] {
    max-height: 300px;
    overflow-y: auto;
}

.records-table[b-xbkmdhmpe1] {
    width: 100%;
    border-collapse: collapse;
}

    .records-table th[b-xbkmdhmpe1],
    .records-table td[b-xbkmdhmpe1] {
        padding: var(--spacing-2) var(--spacing-3);
        text-align: left;
        font-size: var(--font-size-sm);
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .records-table th[b-xbkmdhmpe1] {
        background: var(--color-gray-50);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
    }

    .records-table tr:last-child td[b-xbkmdhmpe1] {
        border-bottom: none;
    }

    .records-table tr:hover td[b-xbkmdhmpe1] {
        background: var(--color-gray-50);
    }

    .records-table tr.disabled[b-xbkmdhmpe1] {
        opacity: 0.5;
    }

        .records-table tr.disabled td[b-xbkmdhmpe1] {
            background: var(--color-gray-50);
        }

    .records-table .entity-cell[b-xbkmdhmpe1] {
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
    }

    .records-table .entity-id[b-xbkmdhmpe1] {
        color: var(--color-text-muted);
    }

    .records-table .no-entity[b-xbkmdhmpe1] {
        color: var(--color-text-muted);
    }

/* Table Footer */
.table-footer[b-xbkmdhmpe1] {
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-gray-50);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: center;
}

/* Reason Section */
.reason-section[b-xbkmdhmpe1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

    .reason-section .form-label[b-xbkmdhmpe1] {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
    }

    .reason-section .form-input[b-xbkmdhmpe1] {
        width: 100%;
        padding: var(--spacing-2) var(--spacing-3);
        border: var(--border-width) var(--border-style) var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        font-family: inherit;
        resize: vertical;
    }

        .reason-section .form-input:focus[b-xbkmdhmpe1] {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

/* Helper Classes */
.text-success[b-xbkmdhmpe1] {
    color: var(--color-success);
}

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

@keyframes spin-b-xbkmdhmpe1 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Admin/Import/RollbackResultView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ROLLBACK RESULT VIEW STYLES
   ═══════════════════════════════════════════════════════════ */

.rollback-result[b-y36sh1n88o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

/* Result Header */
.result-header[b-y36sh1n88o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-2);
}

    .result-header i[b-y36sh1n88o] {
        font-size: 3rem;
    }

.rollback-result.success .result-header i[b-y36sh1n88o] {
    color: var(--color-success);
}

.rollback-result.error .result-header i[b-y36sh1n88o] {
    color: var(--color-warning);
}

.result-header h3[b-y36sh1n88o] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

/* Result Stats */
.result-stats[b-y36sh1n88o] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3);
}

@media (max-width: 768px) {
    .result-stats[b-y36sh1n88o] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Result Meta */
.result-meta[b-y36sh1n88o] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

    .result-meta .meta-item[b-y36sh1n88o] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

        .result-meta .meta-item i[b-y36sh1n88o] {
            font-size: var(--font-size-base);
        }

/* Errors Section */
.errors-section[b-y36sh1n88o] {
    border: var(--border-width) var(--border-style) var(--color-error);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(239, 68, 68, 0.05);
}

    .errors-section h4[b-y36sh1n88o] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-error);
        padding: var(--spacing-3) var(--spacing-4);
        background: rgba(239, 68, 68, 0.1);
        border-bottom: var(--border-width) var(--border-style) var(--color-error);
        margin: 0;
    }

.errors-list[b-y36sh1n88o] {
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.error-item[b-y36sh1n88o] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
}

    .error-item .row-ref[b-y36sh1n88o] {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        min-width: 60px;
    }

    .error-item .error-message[b-y36sh1n88o] {
        color: var(--color-text-primary);
        flex: 1;
    }

.more-errors[b-y36sh1n88o] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--spacing-2);
}

/* Result Actions */
.result-actions[b-y36sh1n88o] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-3);
    padding-top: var(--spacing-4);
    border-top: var(--border-width) var(--border-style) var(--color-border);
}
/* /Pages/Admin/Import/Step4_LookupResolution.razor.rz.scp.css */
/* Bulk-accept controls for the fuzzy-match section. */
.bulk-actions[b-htguvxmqke] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--surface-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.bulk-check[b-htguvxmqke] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    cursor: pointer;
    user-select: none;
}

.bulk-check input[b-htguvxmqke],
.card-check input[b-htguvxmqke] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary, #6366f1);
}

.bulk-note[b-htguvxmqke] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
    margin-left: auto;
}

.issue-header .card-check[b-htguvxmqke] {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

/* Highlight a checked card. */
.issue-card.warning.selected[b-htguvxmqke] {
    box-shadow: 0 0 0 2px var(--primary, #6366f1) inset;
    background: color-mix(in srgb, var(--primary, #6366f1) 6%, transparent);
}

/* Floating bulk-action bar, like the ticket list's. */
.lookup-bulk-bar[b-htguvxmqke] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem 0.55rem 0.9rem;
    background: #1e293b;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 34px rgba(2, 6, 23, 0.35);
}

.lookup-bulk-bar .bulk-count[b-htguvxmqke] {
    background: var(--primary, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.lookup-bulk-bar .bulk-close[b-htguvxmqke] {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem;
    border-radius: 6px;
}

.lookup-bulk-bar .bulk-close:hover[b-htguvxmqke] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   Lookup-resolution styles copied from ImportWizard.razor.css ::deep so
   they apply wherever THIS component renders — the wizard AND the re-sync
   page's embedded resolver (::deep rules only reach it inside the wizard).
   ============================================ */
/* ============================================
   STEP 4: LOOKUP RESOLUTION
   ============================================ */

.loading-state[b-htguvxmqke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    color: var(--color-text-secondary);
}

    .loading-state .spinner[b-htguvxmqke] {
        width: 48px;
        height: 48px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-primary);
        border-radius: var(--radius-full);
        animation: spin 0.8s linear infinite;
        margin-bottom: var(--spacing-4);
    }

.lookup-stats[b-htguvxmqke] {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

    .lookup-stats .stat[b-htguvxmqke] {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
        background: var(--color-surface);
        border: var(--border-width) var(--border-style) var(--color-border);
        border-radius: var(--radius-md);
    }

        .lookup-stats .stat i[b-htguvxmqke] {
            font-size: 1.5rem;
        }

        .lookup-stats .stat.success i[b-htguvxmqke] {
            color: var(--color-success);
        }

        .lookup-stats .stat.warning i[b-htguvxmqke] {
            color: var(--color-warning);
        }

        .lookup-stats .stat.error i[b-htguvxmqke] {
            color: var(--color-danger);
        }

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

    .lookup-stats .stat-label[b-htguvxmqke] {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

.lookup-section[b-htguvxmqke] {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-6);
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
}

    .lookup-section.errors[b-htguvxmqke] {
        border-color: var(--color-danger);
        border-left: 3px solid var(--color-danger);
    }

    .lookup-section.warnings[b-htguvxmqke] {
        border-color: var(--color-warning);
        border-left: 3px solid var(--color-warning);
    }

    .lookup-section h3[b-htguvxmqke] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--spacing-1) 0;
    }

    .lookup-section.errors h3[b-htguvxmqke] {
        color: var(--color-danger);
    }

    .lookup-section.warnings h3[b-htguvxmqke] {
        color: var(--color-warning);
    }

.lookup-issues[b-htguvxmqke] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.issue-card[b-htguvxmqke] {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: var(--border-width) var(--border-style) var(--color-border);
}

    .issue-card.error[b-htguvxmqke] {
        background: var(--color-danger-light, rgba(239, 68, 68, 0.05));
        border-color: var(--color-danger);
    }

    .issue-card.warning[b-htguvxmqke] {
        background: var(--color-warning-light, rgba(245, 158, 11, 0.05));
        border-color: var(--color-warning);
    }

.issue-header[b-htguvxmqke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

    .issue-header .field-name[b-htguvxmqke] {
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
    }

    .issue-header .occurrence-count[b-htguvxmqke] {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

.issue-value[b-htguvxmqke] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

    .issue-value .value[b-htguvxmqke] {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-sm);
        padding: var(--spacing-1) var(--spacing-2);
        background: var(--color-surface);
        border-radius: var(--radius-sm);
    }

        .issue-value .value.original[b-htguvxmqke] {
            text-decoration: line-through;
            color: var(--color-text-muted);
        }

        .issue-value .value.matched[b-htguvxmqke] {
            color: var(--color-success);
            font-weight: var(--font-weight-medium);
        }

    .issue-value .status[b-htguvxmqke] {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

.issue-actions[b-htguvxmqke] {
    display: flex;
    gap: var(--spacing-2);
}

.success-state[b-htguvxmqke] {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-success-light, rgba(34, 197, 94, 0.05));
    border: var(--border-width) var(--border-style) var(--color-success);
    border-radius: var(--radius-lg);
}

    .success-state i[b-htguvxmqke] {
        font-size: 3rem;
        color: var(--color-success);
        margin-bottom: var(--spacing-4);
    }

    .success-state h3[b-htguvxmqke] {
        color: var(--color-success);
        margin: 0 0 var(--spacing-2) 0;
    }

    .success-state p[b-htguvxmqke] {
        color: var(--color-text-secondary);
        margin: 0;
    }

.lookup-preview[b-htguvxmqke] {
    margin-top: var(--spacing-6);
}

    .lookup-preview h3[b-htguvxmqke] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0 0 var(--spacing-4) 0;
    }

.resolved-value[b-htguvxmqke] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-success);
}

.error-value[b-htguvxmqke] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-danger);
}
/* /Pages/Admin/Import/Step6_Import.razor.rz.scp.css */
/* Upsert Results */
.upsert-results[b-xrqczeqhw3] {
    margin-top: 1.5rem;
}

    .upsert-results h4[b-xrqczeqhw3] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

.upsert-table-wrapper[b-xrqczeqhw3] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.upsert-table[b-xrqczeqhw3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .upsert-table th[b-xrqczeqhw3],
    .upsert-table td[b-xrqczeqhw3] {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .upsert-table th[b-xrqczeqhw3] {
        background: var(--surface-raised);
        font-weight: 600;
    }

    .upsert-table .match-key[b-xrqczeqhw3] {
        font-family: monospace;
        font-size: 0.8125rem;
    }

.action-badge[b-xrqczeqhw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

    .action-badge.created[b-xrqczeqhw3] {
        background: var(--success-light);
        color: var(--success);
    }

    .action-badge.updated[b-xrqczeqhw3] {
        background: var(--info-light);
        color: var(--info);
    }

    .action-badge.skipped[b-xrqczeqhw3] {
        background: var(--surface-raised);
        color: var(--text-tertiary);
    }

    .action-badge.failed[b-xrqczeqhw3] {
        background: var(--danger-light);
        color: var(--danger);
    }

.stat-card.created .stat-value[b-xrqczeqhw3] {
    color: var(--success);
}

.stat-card.updated .stat-value[b-xrqczeqhw3] {
    color: var(--info);
}

.change-list[b-xrqczeqhw3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.change-item[b-xrqczeqhw3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

    .change-item .field[b-xrqczeqhw3] {
        font-weight: 500;
        color: var(--text-secondary);
    }

    .change-item .old[b-xrqczeqhw3] {
        color: var(--danger);
        text-decoration: line-through;
    }

    .change-item .new[b-xrqczeqhw3] {
        color: var(--success);
        font-weight: 500;
    }

    .change-item i[b-xrqczeqhw3] {
        color: var(--text-tertiary);
        font-size: 0.625rem;
    }

.no-changes[b-xrqczeqhw3],
.new-record[b-xrqczeqhw3] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.error-msg[b-xrqczeqhw3] {
    font-size: 0.75rem;
    color: var(--danger);
}

.more-changes[b-xrqczeqhw3] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* Execute Actions */
.execute-actions[b-xrqczeqhw3] {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

/* ── Resumable background import ───────────────────────────── */
.bg-import-config[b-xrqczeqhw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.config-field[b-xrqczeqhw3] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
    flex: 1 1 180px;
}

.config-field label[b-xrqczeqhw3] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.config-field .hint[b-xrqczeqhw3] {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.config-field .form-select[b-xrqczeqhw3],
.config-field .form-input[b-xrqczeqhw3] {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.bg-import-actions[b-xrqczeqhw3] {
    margin: 0.5rem 0 0.75rem;
}

.progress-bar-wrap[b-xrqczeqhw3] {
    margin: 1.25rem 0;
}

.progress-bar-track[b-xrqczeqhw3] {
    width: 100%;
    height: 14px;
    background: var(--surface-secondary, #eef0f3);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill[b-xrqczeqhw3] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #6366f1), var(--success, #22c55e));
    border-radius: 999px;
    transition: width 0.4s ease;
}

.progress-bar-fill.animated[b-xrqczeqhw3] {
    background-size: 200% 100%;
    animation: bg-import-stripe-b-xrqczeqhw3 1.4s linear infinite;
}

@keyframes bg-import-stripe-b-xrqczeqhw3 {
    0% { background-position: 0 0; }
    100% { background-position: 200% 0; }
}

.progress-bar-label[b-xrqczeqhw3] {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bg-import-progress .result-header[b-xrqczeqhw3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.anomaly-note[b-xrqczeqhw3] {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--warning, #b45309);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* /Pages/Admin/KpiManagement.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   KPI MANAGEMENT - ADMIN PAGE
   Scoped styles for Pages/Admin/KpiManagement.razor
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Loading / Empty ────────────────────────────────────────────────────── */

.loading-state[b-aqq8cqwvro] {
    padding: 48px;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 14px;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.table-responsive[b-aqq8cqwvro] {
    overflow-x: auto;
}

.data-table[b-aqq8cqwvro] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .data-table th[b-aqq8cqwvro] {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-text-muted, #6b7280);
        background: var(--color-background-subtle, #f9fafb);
        border-bottom: 2px solid var(--color-border, #e5e7eb);
        white-space: nowrap;
    }

    .data-table td[b-aqq8cqwvro] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--color-border, #f3f4f6);
        vertical-align: middle;
    }

    .data-table tbody tr:hover[b-aqq8cqwvro] {
        background: var(--color-background-hover, #f9fafb);
    }

.row-inactive[b-aqq8cqwvro] {
    opacity: 0.55;
}

    .row-inactive:hover[b-aqq8cqwvro] {
        opacity: 0.8;
    }

.col-order[b-aqq8cqwvro] {
    width: 40px;
    text-align: center;
    color: var(--color-text-muted, #9ca3af);
}

.col-name[b-aqq8cqwvro] {
    min-width: 220px;
}

.col-category[b-aqq8cqwvro] {
    width: 110px;
}

.col-source[b-aqq8cqwvro] {
    width: 100px;
}

.col-format[b-aqq8cqwvro] {
    width: 85px;
    color: var(--color-text-muted, #6b7280);
}

.col-scope[b-aqq8cqwvro] {
    width: 100px;
}

.col-roles[b-aqq8cqwvro] {
    min-width: 160px;
}

.col-status[b-aqq8cqwvro] {
    width: 90px;
    white-space: nowrap;
}

.col-actions[b-aqq8cqwvro] {
    width: 140px;
}

/* KPI name cell with icon + title + description */
.kpi-name-cell[b-aqq8cqwvro] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kpi-icon[b-aqq8cqwvro] {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.kpi-title[b-aqq8cqwvro] {
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    display: block;
    line-height: 1.3;
}

.kpi-desc[b-aqq8cqwvro] {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    display: block;
    line-height: 1.3;
}

/* Source badges */
.source-badge[b-aqq8cqwvro] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.source-builtin[b-aqq8cqwvro] {
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #2563eb);
}

.source-report[b-aqq8cqwvro] {
    background: var(--color-accent-ai-light, #faf5ff);
    color: var(--color-accent-ai, #7c3aed);
}

.source-manual[b-aqq8cqwvro] {
    background: var(--color-warning-light, #fefce8);
    color: var(--color-warning-text, #a16207);
}

/* Scope badges */
.scope-badge[b-aqq8cqwvro] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.scope-dynamic[b-aqq8cqwvro] {
    background: var(--color-success-light, #ecfdf5);
    color: var(--color-success, #059669);
}

.scope-global[b-aqq8cqwvro] {
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #2563eb);
}

.scope-organization[b-aqq8cqwvro] {
    background: var(--color-warning-light, #fff7ed);
    color: var(--color-warning-text, #c2410c);
}

/* Role chips in table */
.role-chip[b-aqq8cqwvro] {
    display: inline-block;
    padding: 1px 6px;
    margin: 1px 2px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    background: var(--color-background-subtle, #f3f4f6);
    color: var(--color-text-secondary, #4b5563);
    border: 1px solid var(--color-border, #e5e7eb);
}

.role-more[b-aqq8cqwvro] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary-hover, #4338ca);
    border-color: var(--color-primary-light, #c7d2fe);
}

.role-all[b-aqq8cqwvro] {
    background: var(--color-success-light, #ecfdf5);
    color: var(--color-success, #059669);
    border-color: var(--color-success-light, #a7f3d0);
}

/* Status dot */
.status-dot[b-aqq8cqwvro] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

    .status-dot.active[b-aqq8cqwvro] {
        background: var(--color-success, #16a34a);
    }

    .status-dot.inactive[b-aqq8cqwvro] {
        background: var(--color-border, #d1d5db);
    }

/* Action buttons */
.action-buttons[b-aqq8cqwvro] {
    display: flex;
    gap: 4px;
}

.btn-icon[b-aqq8cqwvro] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s;
}

    .btn-icon:hover[b-aqq8cqwvro] {
        background: var(--color-background-hover, #f3f4f6);
        color: var(--color-text-primary, #111827);
    }

.btn-icon-danger:hover[b-aqq8cqwvro] {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODAL LAYOUT (custom for KPI form + preview)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal layout: form left, preview right */
.modal-layout[b-aqq8cqwvro] {
    display: flex;
    gap: 24px;
}

.modal-form[b-aqq8cqwvro] {
    flex: 1;
    min-width: 0;
}

.modal-preview[b-aqq8cqwvro] {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORM SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.form-section[b-aqq8cqwvro] {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
}

    .form-section:last-child[b-aqq8cqwvro] {
        border-bottom: none;
        margin-bottom: 0;
    }

.section-title[b-aqq8cqwvro] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #374151);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .section-title i[b-aqq8cqwvro] {
        font-size: 15px;
        color: var(--color-primary, #6366f1);
    }

.form-group[b-aqq8cqwvro] {
    margin-bottom: 12px;
}

    .form-group label[b-aqq8cqwvro] {
        display: block;
        margin-bottom: 4px;
        font-weight: 500;
        font-size: 12px;
        color: var(--color-text-secondary, #374151);
    }

.required[b-aqq8cqwvro] {
    color: var(--color-danger, #dc2626);
}

.form-control[b-aqq8cqwvro] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 5px;
    font-size: 13px;
    color: var(--color-text-primary, #111827);
    background: var(--color-surface, white);
    transition: border-color 0.15s;
}

    .form-control:focus[b-aqq8cqwvro] {
        outline: none;
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

textarea.form-control[b-aqq8cqwvro] {
    resize: vertical;
    min-height: 60px;
}

.form-hint[b-aqq8cqwvro] {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

/* Row layouts */
.form-row-2[b-aqq8cqwvro] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-row-3[b-aqq8cqwvro] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.form-row-4[b-aqq8cqwvro] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SOURCE TYPE TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.source-type-tabs[b-aqq8cqwvro] {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.source-tab[b-aqq8cqwvro] {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s;
}

    .source-tab:hover[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #f5f3ff);
    }

    .source-tab.active[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #f5f3ff);
        color: var(--color-primary, #6366f1);
    }

    .source-tab i[b-aqq8cqwvro] {
        font-size: 14px;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   THRESHOLDS
   ═══════════════════════════════════════════════════════════════════════════ */

.threshold-row[b-aqq8cqwvro] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.threshold-dot[b-aqq8cqwvro] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.threshold-label[b-aqq8cqwvro] {
    font-size: 12px;
    font-weight: 600;
    width: 56px;
    flex-shrink: 0;
}

.threshold-op[b-aqq8cqwvro] {
    width: 90px !important;
    flex-shrink: 0;
}

.threshold-val[b-aqq8cqwvro] {
    width: 100px !important;
    flex-shrink: 0;
}

.threshold-and[b-aqq8cqwvro] {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════════════════════ */

.toggle-switch[b-aqq8cqwvro] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: auto;
}

    .toggle-switch input[b-aqq8cqwvro] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-slider[b-aqq8cqwvro] {
    width: 36px;
    height: 20px;
    background: var(--color-border, #d1d5db);
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
}

    .toggle-slider[b-aqq8cqwvro]::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: var(--color-surface, white);
        border-radius: 50%;
        transition: transform 0.2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

.toggle-switch input:checked + .toggle-slider[b-aqq8cqwvro] {
    background: var(--color-primary, #6366f1);
}

    .toggle-switch input:checked + .toggle-slider[b-aqq8cqwvro]::after {
        transform: translateX(16px);
    }


/* ═══════════════════════════════════════════════════════════════════════════
   ROLE VISIBILITY CHIPS
   ═══════════════════════════════════════════════════════════════════════════ */

.role-chips[b-aqq8cqwvro] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-chip-toggle[b-aqq8cqwvro] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #4b5563);
    transition: all 0.15s;
}

    .role-chip-toggle:hover[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #faf8ff);
    }

    .role-chip-toggle.selected[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #f5f3ff);
        color: var(--color-primary, #6366f1);
    }

    .role-chip-toggle i[b-aqq8cqwvro] {
        font-size: 14px;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   DATA SCOPING OPTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.scope-options[b-aqq8cqwvro] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scope-option[b-aqq8cqwvro] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

    .scope-option:hover[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #faf8ff);
    }

    .scope-option.selected[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #f5f3ff);
    }

    .scope-option input[type="radio"][b-aqq8cqwvro] {
        margin-top: 2px;
        accent-color: var(--color-primary, #6366f1);
        flex-shrink: 0;
    }

    .scope-option strong[b-aqq8cqwvro] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text-primary, #111827);
        margin-bottom: 2px;
    }

    .scope-option span[b-aqq8cqwvro] {
        font-size: 12px;
        color: var(--color-text-muted, #6b7280);
        line-height: 1.4;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   USED IN LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.used-in-list[b-aqq8cqwvro] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.used-in-item[b-aqq8cqwvro] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-background-subtle, #f9fafb);
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

    .used-in-item i[b-aqq8cqwvro] {
        color: var(--color-primary, #6366f1);
    }


/* ═══════════════════════════════════════════════════════════════════════════
   LIVE PREVIEW CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.preview-label[b-aqq8cqwvro] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-muted, #9ca3af);
    margin-bottom: 10px;
}

.preview-card[b-aqq8cqwvro] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.preview-icon[b-aqq8cqwvro] {
    font-size: 28px;
    margin-bottom: 8px;
}

.preview-value[b-aqq8cqwvro] {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    line-height: 1.1;
}

.preview-name[b-aqq8cqwvro] {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
    font-weight: 500;
}

.preview-delta[b-aqq8cqwvro] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 4px;
}

    .preview-delta.up[b-aqq8cqwvro] {
        color: var(--color-success, #16a34a);
        background: var(--color-success-light, #f0fdf4);
    }

    .preview-delta.down[b-aqq8cqwvro] {
        color: var(--color-danger, #dc2626);
        background: var(--color-danger-light, #fef2f2);
    }

.preview-period[b-aqq8cqwvro] {
    font-weight: 400;
    color: var(--color-text-muted, #9ca3af);
    margin-left: 4px;
}

.preview-thresholds[b-aqq8cqwvro] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--color-text-muted, #9ca3af);
    font-weight: 500;
}

.preview-th-dot[b-aqq8cqwvro] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.preview-meta[b-aqq8cqwvro] {
    margin-top: 14px;
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.8;
}

    .preview-meta strong[b-aqq8cqwvro] {
        color: var(--color-text-secondary, #4b5563);
    }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .modal-layout[b-aqq8cqwvro] {
        flex-direction: column;
    }

    .modal-preview[b-aqq8cqwvro] {
        width: 100%;
        position: static;
        order: -1; /* preview on top on mobile */
    }

    .form-row-3[b-aqq8cqwvro],
    .form-row-4[b-aqq8cqwvro] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .form-row-2[b-aqq8cqwvro],
    .form-row-3[b-aqq8cqwvro],
    .form-row-4[b-aqq8cqwvro] {
        grid-template-columns: 1fr;
    }

    .source-type-tabs[b-aqq8cqwvro] {
        flex-direction: column;
    }

    .threshold-row[b-aqq8cqwvro] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════
   Phase 4 — Visualization Type Picker & Badge
   ═══════════════════════════════════════════════ */

.viz-type-picker[b-aqq8cqwvro] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.viz-type-option[b-aqq8cqwvro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    text-align: center;
}

    .viz-type-option i[b-aqq8cqwvro] {
        font-size: 20px;
    }

    .viz-type-option:hover[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-text-primary, #24292e);
        background: var(--color-surface-hover, #f6f8fa);
    }

    .viz-type-option.selected[b-aqq8cqwvro] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #eef2ff);
        color: var(--color-primary, #6366f1);
        font-weight: 600;
    }

        .viz-type-option.selected i[b-aqq8cqwvro] {
            color: var(--color-primary, #6366f1);
        }

.viz-type-badge[b-aqq8cqwvro] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

    .viz-type-badge i[b-aqq8cqwvro] {
        font-size: 14px;
    }

.col-viz[b-aqq8cqwvro] {
    width: 100px;
}
/* /Pages/Admin/ModuleManagement.razor.rz.scp.css */
/* Shared styles for admin CRUD management pages */

.loading[b-o1ticxf7s4] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-o1ticxf7s4] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-o1ticxf7s4] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-o1ticxf7s4] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-o1ticxf7s4] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-o1ticxf7s4] {
    display: flex;
    gap: 6px;
}

.color-swatch[b-o1ticxf7s4] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-o1ticxf7s4] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.text-muted[b-o1ticxf7s4] {
    color: var(--color-text-secondary, #586069);
}

.checkbox-wrapper[b-o1ticxf7s4] {
    padding: 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.checkbox-label[b-o1ticxf7s4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

    .checkbox-label input[type="checkbox"][b-o1ticxf7s4] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
/* /Pages/Admin/NotificationLog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Notification Log — Scoped CSS
   ═══════════════════════════════════════════════ */

/* ── Stats Row grid ────────────────────────────── */
.stats-row[b-2jk0pguvkp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* ── Filter tweaks ─────────────────────────────── */
.filter-date[b-2jk0pguvkp] {
    padding: 5px 8px !important;
    font-size: 13px !important;
    width: 130px !important;
}

.date-sep[b-2jk0pguvkp] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

/* ── Table tweaks ──────────────────────────────── */
.row-failed[b-2jk0pguvkp] {
    background: var(--color-danger-light, #fef2f2);
}

    .row-failed:hover[b-2jk0pguvkp] {
        background: var(--color-danger-light, #fee2e2) !important;
    }

.status-sent[b-2jk0pguvkp] {
    color: var(--color-success, #059669);
    font-size: 16px;
}

.status-failed[b-2jk0pguvkp] {
    color: var(--color-danger, #dc2626);
    font-size: 16px;
}

.date-primary[b-2jk0pguvkp] {
    display: block;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.date-secondary[b-2jk0pguvkp] {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
}

.email-text[b-2jk0pguvkp],
.subject-text[b-2jk0pguvkp] {
    display: block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-link[b-2jk0pguvkp] {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    cursor: pointer;
    font-weight: 600;
}

    .context-link:hover[b-2jk0pguvkp] {
        text-decoration: underline;
    }

.attach-icon[b-2jk0pguvkp] {
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
}

/* ── Detail Modal ──────────────────────────────── */
.detail-grid[b-2jk0pguvkp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.detail-row[b-2jk0pguvkp] {
    display: flex;
    gap: 16px;
    align-items: baseline;
}

.detail-label[b-2jk0pguvkp] {
    width: 100px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value[b-2jk0pguvkp] {
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    word-break: break-word;
}

.source-detail-text[b-2jk0pguvkp] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.error-text[b-2jk0pguvkp] {
    color: var(--color-danger, #dc2626);
}

/* ── Email Preview ─────────────────────────────── */
.email-preview-section[b-2jk0pguvkp] {
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}

.preview-header[b-2jk0pguvkp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-gray-50, #fafbfc);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
}

.email-iframe[b-2jk0pguvkp] {
    width: 100%;
    min-height: 300px;
    border: none;
    display: block;
}

.raw-html[b-2jk0pguvkp] {
    padding: 14px;
    margin: 0;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    background: #1e1e2e;
    color: #cdd6f4;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Pages/Admin/OrganizationManagement.razor.rz.scp.css */
.loading[b-nuex1btiux] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* ============================================
   ORGANIZATIONS NAME SEARCH
   ============================================ */
.org-search-bar[b-nuex1btiux] {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

    .org-search-bar .form-input[b-nuex1btiux] {
        max-width: 360px;
    }

.data-table[b-nuex1btiux] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-nuex1btiux] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-nuex1btiux] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-nuex1btiux] {
        background: var(--color-gray-50, #f6f8fa);
    }

/* ============================================
   VIEW USERS MODAL — ROSTER TABLE
   ============================================ */
.roster-count[b-nuex1btiux] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 10px;
}

.roster-table[b-nuex1btiux] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .roster-table th[b-nuex1btiux] {
        text-align: left;
        padding: 8px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-secondary, #586069);
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .roster-table td[b-nuex1btiux] {
        padding: 9px 10px;
        border-bottom: 1px solid var(--color-border, #eef0f2);
        color: var(--color-text-primary, #24292e);
        vertical-align: middle;
    }

    .roster-table tbody tr:last-child td[b-nuex1btiux] {
        border-bottom: none;
    }

.roster-email[b-nuex1btiux] {
    color: var(--color-text-secondary, #586069);
}

.roster-contact-star[b-nuex1btiux] {
    color: var(--color-warning, #f59e0b);
    margin-left: 6px;
    font-size: 12px;
}

.roster-state[b-nuex1btiux] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 8px;
    color: var(--color-text-secondary, #586069);
}

    .roster-state i[b-nuex1btiux] {
        font-size: 20px;
    }

/* ============================================
   ORG NAME CELL WITH LOGO THUMBNAIL
   ============================================ */
.org-name-cell[b-nuex1btiux] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.org-logo-thumb[b-nuex1btiux] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    border: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-surface, white);
    flex-shrink: 0;
}

.org-logo-placeholder[b-nuex1btiux] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-inverse, white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================
   ACTION BUTTONS + DANGER ICON FIX
   ============================================ */
.action-buttons[b-nuex1btiux] {
    display: flex;
    gap: 6px;
}

    /* Ensure danger button icons render white like primary does */
    .action-buttons[b-nuex1btiux]  .btn-danger,
    .action-buttons[b-nuex1btiux]  .btn-danger i,
    .action-buttons[b-nuex1btiux]  .btn-danger i::before {
        color: white;
    }

.ml-2[b-nuex1btiux] {
    margin-left: 8px;
}

/* ============================================
   TYPE BADGES
   ============================================ */
.type-badge[b-nuex1btiux] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.type-internal[b-nuex1btiux] {
    background: var(--color-primary-light, #e3f2fd);
    color: var(--color-primary, #1976d2);
    border: 1px solid var(--color-primary-light, #90caf9);
}

.type-client[b-nuex1btiux] {
    background: var(--color-gray-100, #f5f5f5);
    color: var(--color-text-secondary, #616161);
    border: 1px solid var(--color-border, #e0e0e0);
}

/* ============================================
   MODAL FORM ELEMENTS
   ============================================ */
.checkbox-wrapper[b-nuex1btiux] {
    padding: 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.checkbox-label[b-nuex1btiux] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

    .checkbox-label input[type="checkbox"][b-nuex1btiux] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.warning-message[b-nuex1btiux] {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-danger-light, #fff5f5);
    border: 1px solid var(--color-danger-light, #feb2b2);
    border-radius: var(--radius-md, 6px);
    color: var(--color-danger, #c53030);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-message[b-nuex1btiux] {
    padding: 8px 12px;
    background: var(--color-gray-100, #f5f5f5);
    border-left: 4px solid var(--color-text-secondary, #9e9e9e);
    border-radius: 4px;
    font-size: 13px;
    color: var(--color-text-primary, #424242);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-internal[b-nuex1btiux] {
    background: var(--color-primary-light, #e3f2fd);
    border-left-color: var(--color-primary, #1976d2);
}

/* ============================================
   LOGO UPLOAD IN MODAL
   ============================================ */
.logo-upload-section[b-nuex1btiux] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.logo-preview-wrapper[b-nuex1btiux] {
    position: relative;
    flex-shrink: 0;
}

.logo-preview-img[b-nuex1btiux] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-surface, white);
}

.logo-remove-btn[b-nuex1btiux] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-danger, #d73a49);
    color: var(--color-text-inverse, white);
    border: 2px solid var(--color-text-inverse, white);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

    .logo-remove-btn:hover[b-nuex1btiux] {
        background: var(--color-danger-hover, #cb2431);
        transform: scale(1.1);
    }

.logo-placeholder-large[b-nuex1btiux] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: var(--color-gray-100, #f6f8fa);
    border: 2px dashed var(--color-border, #d1d5da);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #959da5);
    font-size: 28px;
    flex-shrink: 0;
}

.logo-upload-controls[b-nuex1btiux] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.photo-upload-label[b-nuex1btiux] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    background: var(--color-surface, white);
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content;
}

    .photo-upload-label:hover[b-nuex1btiux] {
        background: var(--color-gray-100, #f6f8fa);
        border-color: var(--color-border, #d1d5da);
    }

.photo-error[b-nuex1btiux] {
    padding: 6px 10px;
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-text, #991b1b);
    border-radius: 4px;
    font-size: 12px;
}

.photo-hint[b-nuex1btiux] {
    font-size: 11px;
    color: var(--color-text-secondary, #6b7280);
}
/* /Pages/Admin/Overview.razor.rz.scp.css */
.loading[b-pd10zitwkl] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.stats-grid[b-pd10zitwkl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.stat-card[b-pd10zitwkl] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 20px;
}

.stat-icon[b-pd10zitwkl] {
    font-size: 24px;
    color: var(--color-primary, #0366d6);
    margin-bottom: 8px;
}

.stat-label[b-pd10zitwkl] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-value[b-pd10zitwkl] {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
}

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

@media (max-width: 640px) {
    .stats-grid[b-pd10zitwkl] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/PermissionManagement.razor.rz.scp.css */
.loading[b-w885s9adg9] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.permissions-layout[b-w885s9adg9] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.role-selector[b-w885s9adg9]  .card {
    position: sticky;
    top: 24px;
}

.role-item[b-w885s9adg9] {
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    transition: all 0.2s;
}

    .role-item:hover[b-w885s9adg9] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .role-item.active[b-w885s9adg9] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
    }

        .role-item.active .role-users[b-w885s9adg9] {
            color: rgba(255, 255, 255, 0.8);
        }

    .role-item:last-child[b-w885s9adg9] {
        border-bottom: none;
    }

.role-name[b-w885s9adg9] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.role-users[b-w885s9adg9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.header-title[b-w885s9adg9] {
    flex: 1;
    margin-right: auto;
}

.card-title-text[b-w885s9adg9] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    margin: 0;
}

.card-subtitle-text[b-w885s9adg9] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-top: 4px;
}

.header-buttons[b-w885s9adg9] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.permission-group[b-w885s9adg9] {
    margin-bottom: 32px;
}

    .permission-group:last-child[b-w885s9adg9] {
        margin-bottom: 0;
    }

.group-title[b-w885s9adg9] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary, #0366d6);
    display: flex;
    align-items: center;
    gap: 8px;
}

.permissions-grid[b-w885s9adg9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.permission-item[b-w885s9adg9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-surface, white);
    position: relative;
}

    .permission-item:hover[b-w885s9adg9] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-gray-50, #f6f8fa);
    }

    .permission-item.checked[b-w885s9adg9] {
        border-color: color-mix(in srgb, var(--color-primary, #0366d6) 40%, transparent);
        background: color-mix(in srgb, var(--color-primary, #0366d6) 5%, transparent);
    }

    .permission-item input[type="checkbox"][b-w885s9adg9] {
        margin-top: 2px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        flex-shrink: 0;
    }

.permission-details[b-w885s9adg9] {
    flex: 1;
}

.permission-name[b-w885s9adg9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.permission-description[b-w885s9adg9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    line-height: 1.4;
}

/* AssignTickets: Configure button */
.configure-btn[b-w885s9adg9] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-primary, #0366d6);
    border-radius: 4px;
    background: var(--color-surface, white);
    color: var(--color-primary, #0366d6);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

    .configure-btn:hover[b-w885s9adg9] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
    }

/* Role count badge */
.role-count-badge[b-w885s9adg9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--color-primary, #0366d6) 10%, transparent);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary, #0366d6);
}

/* Popover overlay */
[b-w885s9adg9] .popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

/* Popover dropdown */
.popover[b-w885s9adg9] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 340px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 100;
    animation: popIn-b-w885s9adg9 0.15s ease-out;
}

@keyframes popIn-b-w885s9adg9 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.popover-header[b-w885s9adg9] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popover-title[b-w885s9adg9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
}

.popover-close[b-w885s9adg9] {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #586069);
    font-size: 18px;
    line-height: 1;
}

    .popover-close:hover[b-w885s9adg9] {
        background: var(--color-gray-50, #f6f8fa);
    }

.popover-body[b-w885s9adg9] {
    padding: 12px 16px;
}

.popover-hint[b-w885s9adg9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 12px;
    line-height: 1.4;
}

.role-check-list[b-w885s9adg9] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.role-check-item[b-w885s9adg9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: background 0.1s;
}

    .role-check-item:hover[b-w885s9adg9] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .role-check-item input[type="checkbox"][b-w885s9adg9] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary, #0366d6);
        cursor: pointer;
    }

.role-check-label[b-w885s9adg9] {
    font-size: 13px;
    font-weight: 500;
}

.role-check-count[b-w885s9adg9] {
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    margin-left: auto;
}

/* Panel Tabs */
.panel-tabs[b-w885s9adg9] {
    display: flex;
    border-bottom: 2px solid var(--color-border, #e1e4e8);
    margin: 0 -24px 24px -24px;
    padding: 0 24px;
    background: var(--color-gray-50, #f6f8fa);
}

.panel-tab[b-w885s9adg9] {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .panel-tab:hover[b-w885s9adg9] {
        color: var(--color-text-primary, #24292e);
    }

    .panel-tab.active[b-w885s9adg9] {
        color: var(--color-primary, #0366d6);
        border-bottom-color: var(--color-primary, #0366d6);
    }

.tab-badge[b-w885s9adg9] {
    background: color-mix(in srgb, var(--color-primary, #0366d6) 12%, transparent);
    color: var(--color-primary, #0366d6);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
}

/* Page sub-tabs (pills) */
.page-tabs[b-w885s9adg9] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.page-tab[b-w885s9adg9] {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 20px;
    background: var(--color-surface, white);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--color-text-secondary, #586069);
}

    .page-tab:hover[b-w885s9adg9] {
        border-color: var(--color-primary, #0366d6);
        color: var(--color-text-primary, #24292e);
    }

    .page-tab.active[b-w885s9adg9] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #0366d6);
    }

/* Visibility sections */
.visibility-section[b-w885s9adg9] {
    margin-bottom: 24px;
}

    .visibility-section:last-child[b-w885s9adg9] {
        margin-bottom: 0;
    }

.visibility-section-header[b-w885s9adg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.visibility-section-title[b-w885s9adg9] {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .visibility-section-title i[b-w885s9adg9] {
        color: var(--color-primary, #0366d6);
    }

.visibility-count[b-w885s9adg9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-weight: 500;
}

.quick-actions[b-w885s9adg9] {
    display: flex;
    gap: 8px;
}

.quick-btn[b-w885s9adg9] {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 4px;
    background: var(--color-surface, white);
    cursor: pointer;
    color: var(--color-text-secondary, #586069);
    transition: all 0.15s;
}

    .quick-btn:hover[b-w885s9adg9] {
        border-color: var(--color-primary, #0366d6);
        color: var(--color-primary, #0366d6);
    }

.visibility-grid[b-w885s9adg9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.visibility-item[b-w885s9adg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    transition: all 0.15s;
    background: var(--color-surface, white);
}

    .visibility-item:hover[b-w885s9adg9] {
        border-color: var(--color-primary-light, #b3d4fc);
    }

    .visibility-item.hidden-item[b-w885s9adg9] {
        background: var(--color-gray-50, #f6f8fa);
        opacity: 0.6;
    }

.visibility-item-info[b-w885s9adg9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.visibility-item-icon[b-w885s9adg9] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

    .visibility-item-icon.column-icon[b-w885s9adg9] {
        background: color-mix(in srgb, var(--color-primary, #0366d6) 10%, transparent);
        color: var(--color-primary, #0366d6);
    }

    .visibility-item-icon.filter-icon[b-w885s9adg9] {
        background: var(--color-warning-light, #fff3e0);
        color: var(--color-warning, #e65100);
    }

.visibility-item-name[b-w885s9adg9] {
    font-size: 13px;
    font-weight: 600;
}

.visibility-item-key[b-w885s9adg9] {
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
}

/* Toggle switch */
.toggle-switch[b-w885s9adg9] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

    .toggle-switch input[b-w885s9adg9] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-w885s9adg9] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border, #ccc);
    border-radius: 22px;
    transition: 0.2s;
}

    .toggle-slider[b-w885s9adg9]:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: var(--color-surface, white);
        border-radius: 50%;
        transition: 0.2s;
    }

.toggle-switch input:checked + .toggle-slider[b-w885s9adg9] {
    background-color: var(--color-primary, #0366d6);
}

    .toggle-switch input:checked + .toggle-slider[b-w885s9adg9]:before {
        transform: translateX(18px);
    }

/* ════════════════════════════════════════════════════════
   Field Visibility (Phase 4)
   ────────────────────────────────────────────────────────
   Replaces the two-grid Columns/Filters block above. One row
   per field with three toggles. Filter and Sortable toggles
   visually grey when ShowColumn is off — affordance gating.
   ════════════════════════════════════════════════════════ */
.field-search[b-w885s9adg9] {
    width: 100%;
    max-width: 380px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    margin-bottom: 12px;
}

    .field-search:focus[b-w885s9adg9] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #0366d6) 12%, transparent);
    }

.field-list[b-w885s9adg9] {
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--color-surface, white);
}

.field-row[b-w885s9adg9] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #f1f5f9);
    transition: background 0.1s;
}

    .field-row:last-child[b-w885s9adg9] {
        border-bottom: none;
    }

    .field-row:hover[b-w885s9adg9] {
        background: color-mix(in srgb, var(--color-primary, #0366d6) 4%, transparent);
    }

    .field-row.greyed .field-name[b-w885s9adg9],
    .field-row.greyed .field-meta[b-w885s9adg9] {
        opacity: 0.45;
    }

.field-icon[b-w885s9adg9] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.field-info[b-w885s9adg9] {
    flex: 1;
    min-width: 0;
}

.field-name[b-w885s9adg9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-global[b-w885s9adg9] {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary-hover, #4338ca);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.field-meta[b-w885s9adg9] {
    font-size: 11px;
    color: var(--color-text-secondary, #64748b);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.field-type[b-w885s9adg9] {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-weight: 600;
    padding: 1px 6px;
    background: var(--color-gray-50, #f1f5f9);
    border-radius: 4px;
    font-size: 10px;
    flex-shrink: 0;
}

.field-toggles[b-w885s9adg9] {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-shrink: 0;
}

.ft-cell[b-w885s9adg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
}

.ft-label[b-w885s9adg9] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ft-na[b-w885s9adg9] {
    font-size: 16px;
    color: var(--color-text-muted, #cbd5e1);
    font-weight: 700;
    cursor: help;
    line-height: 22px;
}

/* Disabled state for toggle switches when the column is off */
.toggle-switch.ts-disabled[b-w885s9adg9] {
    cursor: not-allowed;
    opacity: 0.4;
}

    .toggle-switch.ts-disabled .toggle-slider[b-w885s9adg9] {
        cursor: not-allowed;
    }

.field-empty[b-w885s9adg9] {
    padding: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
}

@media (max-width: 1024px) {
    .permissions-layout[b-w885s9adg9] {
        grid-template-columns: 1fr;
    }

    .role-selector[b-w885s9adg9]  .card {
        position: static;
    }

    .field-row[b-w885s9adg9] {
        flex-wrap: wrap;
    }

    .field-toggles[b-w885s9adg9] {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
}
/* /Pages/Admin/PriorityManagement.razor.rz.scp.css */
/* Shared styles for admin CRUD management pages */

.loading[b-1b8xx44bk2] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-1b8xx44bk2] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-1b8xx44bk2] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-1b8xx44bk2] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-1b8xx44bk2] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-1b8xx44bk2] {
    display: flex;
    gap: 6px;
}

.color-swatch[b-1b8xx44bk2] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-1b8xx44bk2] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.text-muted[b-1b8xx44bk2] {
    color: var(--color-text-secondary, #586069);
}
/* /Pages/Admin/ReleaseDetails.razor.rz.scp.css */
.loading[b-w6vx3767u9] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* Page Header (custom layout for this page) */
.page-header-custom[b-w6vx3767u9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-title-row[b-w6vx3767u9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.page-title[b-w6vx3767u9] {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin: 0;
}

.page-subtitle[b-w6vx3767u9] {
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    margin: 0;
}

/* Content Grid */
.content-grid[b-w6vx3767u9] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

.main-content[b-w6vx3767u9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-panel[b-w6vx3767u9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Status Badge */
.status-badge[b-w6vx3767u9] {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-draft[b-w6vx3767u9] {
    background: var(--color-gray-100, #f0f0f0);
    color: var(--color-text-secondary, #666);
}

.status-published[b-w6vx3767u9] {
    background: var(--color-success-light, #d4edda);
    color: var(--color-success-text, #155724);
}

.status-recalled[b-w6vx3767u9] {
    background: var(--color-danger-light, #f8d7da);
    color: var(--color-danger-text, #721c24);
}

.status-superseded[b-w6vx3767u9] {
    background: var(--color-warning-light, #fff3cd);
    color: var(--color-warning-text, #856404);
}

/* Form */
.form-hint[b-w6vx3767u9] {
    font-size: 12px;
    color: var(--color-text-secondary, #6c757d);
    margin-top: 4px;
    display: block;
}

/* Tabs */
.ticket-tabs[b-w6vx3767u9] {
    display: flex;
    border-bottom: 2px solid var(--color-border, #e1e4e8);
    margin-bottom: 20px;
}

.tab-button[b-w6vx3767u9] {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-secondary, #586069);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .tab-button:hover[b-w6vx3767u9] {
        color: var(--color-text-primary, #24292e);
        background: var(--color-gray-50, #f6f8fa);
    }

    .tab-button.active[b-w6vx3767u9] {
        color: var(--color-primary, #0366d6);
        border-bottom-color: var(--color-primary, #0366d6);
    }

/* Ticket Items */
.ticket-content[b-w6vx3767u9] {
    padding: 10px 0;
}

.ticket-item[b-w6vx3767u9] {
    padding: 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    margin-bottom: 12px;
    background: var(--color-gray-50, #fafbfc);
}

.ticket-number[b-w6vx3767u9] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

.ticket-title[b-w6vx3767u9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 8px;
}

.ticket-notes[b-w6vx3767u9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-style: italic;
    padding: 8px 12px;
    background: var(--color-surface, white);
    border-left: 3px solid var(--color-primary, #0366d6);
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.empty-message[b-w6vx3767u9] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #6c757d);
    font-style: italic;
}

/* Upload Zone */
.upload-zone[b-w6vx3767u9] {
    border: 2px dashed var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-gray-50, #fafbfc);
}

    .upload-zone:hover[b-w6vx3767u9] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-primary-light, #f0f7ff);
    }

.upload-icon[b-w6vx3767u9] {
    font-size: 40px;
    margin-bottom: 10px;
    color: var(--color-text-secondary, #586069);
}

.upload-text[b-w6vx3767u9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.upload-hint[b-w6vx3767u9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.file-uploaded[b-w6vx3767u9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--color-success-light, #d4edda);
    border: 1px solid #c3e6cb;
    border-radius: var(--radius-md, 6px);
}

.file-icon[b-w6vx3767u9] {
    font-size: 32px;
    color: var(--color-success-text, #155724);
}

.file-info[b-w6vx3767u9] {
    flex: 1;
}

.file-name[b-w6vx3767u9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-success-text, #155724);
}

.file-size[b-w6vx3767u9] {
    font-size: 12px;
    color: var(--color-success-text, #155724);
    margin-top: 2px;
}

.btn-icon-remove[b-w6vx3767u9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #c82333;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon-remove:hover[b-w6vx3767u9] {
        background: #bd2130;
    }

.upload-progress[b-w6vx3767u9] {
    margin-top: 8px;
    text-align: center;
    color: var(--color-primary, #0366d6);
    font-size: 13px;
    font-weight: 600;
}

/* Buttons */
.btn-block[b-w6vx3767u9] {
    width: 100%;
    margin-top: 12px;
}

    .btn-block:first-child[b-w6vx3767u9] {
        margin-top: 0;
    }

/* Download Links */
.download-link[b-w6vx3767u9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-primary, #0366d6);
    color: var(--color-text-inverse, white);
    border-radius: var(--radius-md, 6px);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

    .download-link:hover[b-w6vx3767u9] {
        opacity: 0.9;
    }

.download-secondary[b-w6vx3767u9] {
    background: var(--color-surface, white);
    color: var(--color-text-primary, #24292e);
    border: 1px solid var(--color-border, #e1e4e8);
    margin-top: 12px;
}

    .download-secondary:hover[b-w6vx3767u9] {
        background: var(--color-gray-50, #f6f8fa);
    }

/* Validation */
.validation-message[b-w6vx3767u9] {
    margin-top: 12px;
    padding: 12px;
    background: var(--color-warning-light, #fff3cd);
    border: 1px solid #ffc107;
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    color: var(--color-warning-text, #856404);
}

    .validation-message div[b-w6vx3767u9] {
        margin: 4px 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

/* Summary */
.summary-item[b-w6vx3767u9] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .summary-item:last-child[b-w6vx3767u9] {
        border-bottom: none;
    }

.summary-label[b-w6vx3767u9] {
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    font-size: 13px;
}

.summary-value[b-w6vx3767u9] {
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    font-size: 16px;
}

/* Info Section (read-only view) */
.info-section[b-w6vx3767u9] {
    margin-bottom: 16px;
}

    .info-section strong[b-w6vx3767u9] {
        display: block;
        margin-bottom: 6px;
        color: var(--color-text-secondary, #586069);
        font-size: 13px;
    }

    .info-section p[b-w6vx3767u9] {
        margin: 0;
        color: var(--color-text-primary, #24292e);
        font-size: 14px;
    }

/* Alert details */
.alert-detail[b-w6vx3767u9] {
    margin-top: 8px;
    margin-bottom: 0;
}

.alert-meta[b-w6vx3767u9] {
    margin-top: 4px;
    font-size: 12px;
    margin-bottom: 0;
}

/* Publish Summary */
.publish-summary[b-w6vx3767u9] {
    margin-top: 20px;
}

.summary-list[b-w6vx3767u9] {
    background: var(--color-gray-50, #f6f8fa);
    padding: 16px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
}

    .summary-list div[b-w6vx3767u9] {
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .summary-list div:last-child[b-w6vx3767u9] {
            border-bottom: none;
        }

/* Utility classes */
.divider[b-w6vx3767u9] {
    margin: 20px 0;
    border: none;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.mt-12[b-w6vx3767u9] {
    margin-top: 12px;
}

.mt-16[b-w6vx3767u9] {
    margin-top: 16px;
}

.mt-20[b-w6vx3767u9] {
    margin-top: 20px;
}

@media (max-width: 1024px) {
    .content-grid[b-w6vx3767u9] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/Releases.razor.rz.scp.css */
.loading[b-kxeywna139] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.section-title[b-kxeywna139] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin: 0;
}

.filter-group[b-kxeywna139] {
    display: flex;
    gap: 12px;
}

.data-table[b-kxeywna139] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-kxeywna139] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-kxeywna139] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-kxeywna139] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-kxeywna139] {
    display: flex;
    gap: 6px;
}

.version-badge[b-kxeywna139] {
    background: var(--color-primary-light, #f0f7ff);
    color: var(--color-primary, #0969da);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Consolas', monospace;
}

.status-badge[b-kxeywna139] {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-draft[b-kxeywna139] {
    background: var(--color-gray-100, #f0f0f0);
    color: var(--color-text-secondary, #666);
}

.status-published[b-kxeywna139] {
    background: var(--color-success-light, #d4edda);
    color: var(--color-success-text, #155724);
}

.status-recalled[b-kxeywna139] {
    background: var(--color-danger-light, #f8d7da);
    color: var(--color-danger-text, #721c24);
}

.status-superseded[b-kxeywna139] {
    background: var(--color-warning-light, #fff3cd);
    color: var(--color-warning-text, #856404);
}

.count-badge[b-kxeywna139] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.bug-count[b-kxeywna139] {
    background: var(--color-danger-light, #ffe0e0);
    color: var(--color-danger, #c00);
}

.enhancement-count[b-kxeywna139] {
    background: var(--color-success-light, #e0f7e0);
    color: var(--color-success, #0a0);
}

.text-muted[b-kxeywna139] {
    color: var(--color-text-secondary, #6c757d);
}
/* /Pages/Admin/RoleManagement.razor.rz.scp.css */
/* Shared styles for admin CRUD management pages */

.loading[b-q4wh0h2078] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-q4wh0h2078] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-q4wh0h2078] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-q4wh0h2078] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-q4wh0h2078] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-q4wh0h2078] {
    display: flex;
    gap: 6px;
}

.color-swatch[b-q4wh0h2078] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-q4wh0h2078] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.text-muted[b-q4wh0h2078] {
    color: var(--color-text-secondary, #586069);
}
/* /Pages/Admin/ScheduleManagement.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   SCHEDULE MANAGEMENT — Admin Page Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stats Bar ─────────────────────────────────── */

.schedule-stats[b-ojetefqltw] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card[b-ojetefqltw] {
    flex: 1;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 16px 20px;
    text-align: center;
}

    .stat-card.active[b-ojetefqltw] {
        border-color: var(--color-success, #34d399);
        background: var(--color-success-light, #f0fdf4);
    }

    .stat-card.paused[b-ojetefqltw] {
        border-color: var(--color-warning, #fbbf24);
        background: var(--color-warning-light, #fffbeb);
    }

.stat-value[b-ojetefqltw] {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    line-height: 1;
}

.stat-card.active .stat-value[b-ojetefqltw] {
    color: var(--color-success, #16a34a);
}

.stat-card.paused .stat-value[b-ojetefqltw] {
    color: var(--color-warning, #d97706);
}

.stat-label[b-ojetefqltw] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Filters ───────────────────────────────────── */

.schedule-filters[b-ojetefqltw] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.filter-group[b-ojetefqltw] {
    min-width: 130px;
}

    .filter-group.search-group[b-ojetefqltw] {
        flex: 1;
    }

    .filter-group .form-label[b-ojetefqltw] {
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .filter-group .form-select[b-ojetefqltw],
    .filter-group .form-input[b-ojetefqltw] {
        padding: 6px 10px;
        font-size: 13px;
    }

/* ── Table Enhancements ────────────────────────── */

.row-paused[b-ojetefqltw] {
    opacity: 0.6;
}

    .row-paused:hover[b-ojetefqltw] {
        opacity: 0.85;
    }

/* Status Badges */
.status-badge[b-ojetefqltw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-active[b-ojetefqltw] {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-text, #166534);
}

.status-paused[b-ojetefqltw] {
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning-text, #92400e);
}

.status-badge i[b-ojetefqltw] {
    font-size: 13px;
}

/* Type Badges */
.type-badge[b-ojetefqltw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-gray-50, #f6f8fa);
    color: var(--color-text-secondary, #586069);
    border: 1px solid var(--color-border, #e1e4e8);
    white-space: nowrap;
}

    .type-badge i[b-ojetefqltw] {
        font-size: 13px;
    }

.type-report[b-ojetefqltw] {
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #1d4ed8);
    border-color: var(--color-primary-light, #bfdbfe);
}

.type-alert[b-ojetefqltw] {
    background: var(--color-warning-light, #fefce8);
    color: var(--color-warning-text, #a16207);
    border-color: var(--color-warning-light, #fde68a);
}

.type-datasync[b-ojetefqltw] {
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success-text, #15803d);
    border-color: var(--color-success-light, #bbf7d0);
}

/* Name Cell */
.schedule-name-cell[b-ojetefqltw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-ref[b-ojetefqltw] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

/* Frequency */
.frequency-label[b-ojetefqltw] {
    font-size: 13px;
    white-space: nowrap;
}

/* Last Run */
.last-run-cell[b-ojetefqltw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.run-success[b-ojetefqltw] {
    color: var(--color-success, #16a34a);
    font-size: 15px;
}

.run-failed[b-ojetefqltw] {
    color: var(--color-danger, #dc2626);
    font-size: 15px;
}

/* Shared */
.text-muted[b-ojetefqltw] {
    color: var(--color-text-secondary, #586069);
}

.loading[b-ojetefqltw] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-ojetefqltw] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-ojetefqltw] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        white-space: nowrap;
    }

    .data-table tbody td[b-ojetefqltw] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-ojetefqltw] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-ojetefqltw] {
    display: flex;
    gap: 6px;
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 768px) {
    .schedule-stats[b-ojetefqltw] {
        flex-wrap: wrap;
    }

    .stat-card[b-ojetefqltw] {
        min-width: calc(50% - 8px);
    }

    .schedule-filters[b-ojetefqltw] {
        flex-wrap: wrap;
    }

    .filter-group[b-ojetefqltw] {
        min-width: calc(50% - 8px);
    }

        .filter-group.search-group[b-ojetefqltw] {
            min-width: 100%;
        }
}
/* /Pages/Admin/SchemaDiscovery.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   SCHEMA DISCOVERY PAGE - Scoped Styles
   Uses CSS variables from design system
   ═══════════════════════════════════════════════════════════ */

/* ═══ Option 2: Summary Stats ═══ */
.summary-row[b-cdy19xmsud] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.stat-card[b-cdy19xmsud] {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.stat-icon[b-cdy19xmsud] {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon-blue[b-cdy19xmsud] {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.stat-icon-green[b-cdy19xmsud] {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.stat-icon-orange[b-cdy19xmsud] {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.stat-icon-purple[b-cdy19xmsud] {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.stat-content[b-cdy19xmsud] {
    display: flex;
    flex-direction: column;
}

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

.stat-label[b-cdy19xmsud] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Overall Coverage Bar */
.overall-coverage[b-cdy19xmsud] {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-5);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.overall-label[b-cdy19xmsud] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.overall-bar[b-cdy19xmsud] {
    flex: 1;
    height: 10px;
    background: var(--color-gray-200);
    border-radius: 99px;
    overflow: hidden;
}

.overall-bar-fill[b-cdy19xmsud] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-green-500), var(--color-green-400));
    transition: width var(--transition-normal);
}

.overall-pct[b-cdy19xmsud] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-green-700);
    min-width: 48px;
    text-align: right;
}

/* ═══ Option 3: Toggle Switch ═══ */
.toggle-group[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.toggle-switch[b-cdy19xmsud] {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--color-gray-300);
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

    .toggle-switch.active[b-cdy19xmsud] {
        background: var(--color-primary);
    }

.toggle-track[b-cdy19xmsud] {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.toggle-thumb[b-cdy19xmsud] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-fast);
}

.toggle-switch.active .toggle-thumb[b-cdy19xmsud] {
    transform: translateX(16px);
}

.toggle-label[b-cdy19xmsud] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ═══ Filter Group in Card Header ═══ */
.filter-group[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

    .filter-group .form-label[b-cdy19xmsud] {
        margin: 0;
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }

    .filter-group .form-select[b-cdy19xmsud] {
        min-width: 200px;
    }

/* ═══ Option 1: Per-table Coverage Badges ═══ */
.table-stats[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: var(--spacing-1);
}

.coverage-bar-wrapper[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.coverage-bar[b-cdy19xmsud] {
    width: 72px;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 99px;
    overflow: hidden;
}

.coverage-bar-fill[b-cdy19xmsud] {
    height: 100%;
    border-radius: 99px;
    transition: width var(--transition-normal);
}

    .coverage-bar-fill.coverage-high[b-cdy19xmsud] {
        background: var(--color-green-500);
    }

    .coverage-bar-fill.coverage-mid[b-cdy19xmsud] {
        background: var(--color-orange-400);
    }

    .coverage-bar-fill.coverage-low[b-cdy19xmsud] {
        background: var(--color-red-500);
    }

.coverage-pct[b-cdy19xmsud] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    min-width: 30px;
}

/* ═══ Table Groups ═══ */
.discovered-columns[b-cdy19xmsud] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.table-group[b-cdy19xmsud] {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table-header[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
}

    .table-header:hover[b-cdy19xmsud] {
        background: var(--color-gray-100);
    }

    .table-header i:first-child[b-cdy19xmsud] {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

.table-name[b-cdy19xmsud] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.table-actions[b-cdy19xmsud] {
    margin-left: auto;
    display: flex;
    gap: var(--spacing-2);
}

/* ═══ Section Dividers ═══ */
.section-divider[b-cdy19xmsud] {
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-bottom: var(--border-width) solid var(--color-border);
}

    .section-divider.section-new[b-cdy19xmsud] {
        color: var(--color-orange-600);
        background: var(--color-orange-50);
        border-top: var(--border-width) solid var(--color-border);
    }

    .section-divider.section-registered[b-cdy19xmsud] {
        color: var(--color-green-700);
        background: var(--color-green-50);
        border-top: var(--border-width) solid var(--color-border);
    }

/* ═══ Column List ═══ */
.column-list[b-cdy19xmsud] {
    border-top: var(--border-width) solid var(--color-border);
}

.column-item[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-8);
    border-bottom: var(--border-width) solid var(--color-border);
    transition: background-color var(--transition-fast);
}

    .column-item:last-child[b-cdy19xmsud] {
        border-bottom: none;
    }

    .column-item:hover[b-cdy19xmsud] {
        background: var(--color-gray-50);
    }

    .column-item.primary-key[b-cdy19xmsud] {
        background: rgba(59, 130, 246, 0.05);
    }

    .column-item.foreign-key[b-cdy19xmsud] {
        background: rgba(139, 92, 246, 0.05);
    }

    /* ═══ Option 3: Registered Column Rows ═══ */
    .column-item.registered[b-cdy19xmsud] {
        background: var(--color-gray-50);
        opacity: 0.75;
    }

        .column-item.registered:hover[b-cdy19xmsud] {
            opacity: 1;
            background: var(--color-gray-100);
        }

        .column-item.registered .column-name[b-cdy19xmsud] {
            color: var(--color-text-secondary);
        }

.registered-display-name[b-cdy19xmsud] {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.import-tag[b-cdy19xmsud] {
    color: var(--color-blue-600);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.lookup-tag[b-cdy19xmsud] {
    color: var(--color-green-600);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.roles-tag[b-cdy19xmsud] {
    color: var(--color-orange-600);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.no-columns-text[b-cdy19xmsud] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* ═══ Column Info ═══ */
.column-info[b-cdy19xmsud] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.column-name[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

    .column-name i[b-cdy19xmsud] {
        font-size: var(--font-size-sm);
    }

        .column-name i.ph-key[b-cdy19xmsud] {
            color: var(--color-primary);
        }

        .column-name i.ph-link[b-cdy19xmsud] {
            color: var(--color-purple-500);
        }

        .column-name i.ph-shield-check[b-cdy19xmsud] {
            color: var(--color-orange-500);
        }

.column-meta[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-xs);
}

    .column-meta .data-type[b-cdy19xmsud] {
        font-family: var(--font-mono);
        color: var(--color-text-secondary);
        background: var(--color-gray-100);
        padding: 2px 6px;
        border-radius: var(--radius-sm);
    }

    .column-meta .nullable[b-cdy19xmsud] {
        color: var(--color-text-muted);
        font-style: italic;
    }

    .column-meta .fk-ref[b-cdy19xmsud] {
        color: var(--color-purple-600);
    }

.action-buttons[b-cdy19xmsud] {
    display: flex;
    gap: var(--spacing-2);
}

/* ═══ Form Sections in Modal ═══ */
.form-sections[b-cdy19xmsud] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form-section[b-cdy19xmsud] {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
}

.section-title[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-4) 0;
    padding-bottom: var(--spacing-3);
    border-bottom: var(--border-width) solid var(--color-border);
}

.form-section.fk-section[b-cdy19xmsud] {
    background: rgba(139, 92, 246, 0.05);
    border-color: var(--color-purple-200);
}

    .form-section.fk-section .section-title[b-cdy19xmsud] {
        color: var(--color-purple-600);
        border-color: var(--color-purple-200);
    }

    .form-section.fk-section p[b-cdy19xmsud] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: var(--font-size-sm);
    }

.form-grid[b-cdy19xmsud] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

/* Role Options */
.role-options[b-cdy19xmsud] {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}

.radio-option[b-cdy19xmsud],
.checkbox-option[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

    .radio-option input[b-cdy19xmsud],
    .checkbox-option input[b-cdy19xmsud] {
        cursor: pointer;
        accent-color: var(--color-primary);
    }

.role-checkboxes[b-cdy19xmsud] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.checkbox-grid[b-cdy19xmsud] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-3);
}

.checkbox-row[b-cdy19xmsud] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* Loading */
.loading[b-cdy19xmsud] {
    padding: var(--spacing-8);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.loading-hint[b-cdy19xmsud] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--spacing-2) 0;
}

.warning-hint[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-orange-600);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-2);
}

/* ═══ Responsive ═══ */
@media (max-width: 768px) {
    .summary-row[b-cdy19xmsud] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-group[b-cdy19xmsud] {
        flex-direction: column;
        align-items: stretch;
    }

        .filter-group .form-select[b-cdy19xmsud] {
            min-width: auto;
            width: 100%;
        }

    .form-grid[b-cdy19xmsud] {
        grid-template-columns: 1fr;
    }

    .column-item[b-cdy19xmsud] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    .action-buttons[b-cdy19xmsud] {
        width: 100%;
        display: flex;
        gap: var(--spacing-2);
    }

    .table-stats[b-cdy19xmsud] {
        display: none;
    }
}

@media (max-width: 480px) {
    .summary-row[b-cdy19xmsud] {
        grid-template-columns: 1fr;
    }
}

/* ═══ Table Filter Dropdown ═══ */
.table-filter-select[b-cdy19xmsud] {
    min-width: 280px;
}

[b-cdy19xmsud] .table-filter-select .search-select-trigger {
    min-width: 280px;
}

/* ═══ Multi-Lookup Associations ═══ */
.m2m-card[b-cdy19xmsud] {
    margin-bottom: var(--spacing-4);
}

.m2m-intro[b-cdy19xmsud] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.m2m-intro code[b-cdy19xmsud] {
    background: var(--color-surface-alt, var(--color-blue-50));
    color: var(--color-text-primary);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

.m2m-table[b-cdy19xmsud] {
    width: 100%;
    border-collapse: collapse;
}

.m2m-table th[b-cdy19xmsud] {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary, var(--color-text-secondary));
    border-bottom: var(--border-width) solid var(--color-border);
}

.m2m-table td[b-cdy19xmsud] {
    padding: var(--spacing-3);
    border-bottom: var(--border-width) solid var(--color-border-subtle, var(--color-border));
    vertical-align: top;
}

.m2m-table .m2m-check[b-cdy19xmsud] {
    width: 36px;
    text-align: center;
}

.m2m-row-done[b-cdy19xmsud] {
    opacity: 0.65;
}

.m2m-join[b-cdy19xmsud] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.m2m-rel[b-cdy19xmsud] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.m2m-table code[b-cdy19xmsud] {
    background: var(--color-surface-alt, var(--color-blue-50));
    color: var(--color-text-primary);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

.m2m-dash[b-cdy19xmsud] {
    color: var(--color-text-tertiary, var(--color-text-secondary));
}

.m2m-note[b-cdy19xmsud] {
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-orange-600);
}

.m2m-actions[b-cdy19xmsud] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

.m2m-count[b-cdy19xmsud] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Self-contained status badges so the section renders without global badge CSS */
.m2m-table .badge[b-cdy19xmsud] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.m2m-table .badge-success[b-cdy19xmsud] {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.m2m-table .badge-info[b-cdy19xmsud] {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.m2m-table .badge-warning[b-cdy19xmsud] {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}
/* /Pages/Admin/StatusManagement.razor.rz.scp.css */
/* Shared styles for admin CRUD management pages */

.loading[b-okkoeson4i] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-okkoeson4i] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-okkoeson4i] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-okkoeson4i] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-okkoeson4i] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-okkoeson4i] {
    display: flex;
    gap: 6px;
}

.color-swatch[b-okkoeson4i] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-okkoeson4i] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.text-muted[b-okkoeson4i] {
    color: var(--color-text-secondary, #586069);
}
/* /Pages/Admin/SystemSettings.razor.rz.scp.css */
/* ============================================
   System Settings - Sidebar Nav Layout
   ============================================ */

.system-settings-layout[b-iimy28hoao] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* ===== Sidebar Navigation ===== */
.settings-nav[b-iimy28hoao] {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 8px;
    position: sticky;
    top: 16px;
}

.settings-nav-item[b-iimy28hoao] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--color-text-secondary, #586069);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
    border-left: 3px solid transparent;
}

    .settings-nav-item i[b-iimy28hoao] {
        font-size: 18px;
        flex-shrink: 0;
    }

    .settings-nav-item:hover[b-iimy28hoao] {
        background: var(--color-gray-50, #f6f8fa);
        color: var(--color-text-primary, #24292f);
    }

    .settings-nav-item.active[b-iimy28hoao] {
        background: var(--color-primary-subtle, #dbeafe);
        color: var(--color-primary, #0969da);
        font-weight: 600;
        border-left-color: var(--color-primary, #0969da);
    }

.coming-soon-badge[b-iimy28hoao] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--color-gray-100, #eef1f5);
    color: var(--color-text-secondary, #586069);
}

/* ===== Content Area ===== */
.settings-content[b-iimy28hoao] {
    flex: 1;
    min-width: 0;
}

/* Section Header */
.section-header[b-iimy28hoao] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.section-header-icon[b-iimy28hoao] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 6px);
    background: var(--color-primary-subtle, #dbeafe);
    color: var(--color-primary, #0969da);
    font-size: 20px;
    flex-shrink: 0;
}

.section-title[b-iimy28hoao] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary, #24292f);
}

.section-subtitle[b-iimy28hoao] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

/* ===== Setting Cards ===== */
.setting-card[b-iimy28hoao] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.setting-row[b-iimy28hoao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.setting-row-vertical[b-iimy28hoao] {
    flex-direction: column;
    align-items: flex-start;
}

.setting-info[b-iimy28hoao] {
    flex: 1;
    min-width: 0;
}

.setting-label[b-iimy28hoao] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292f);
}

.setting-description[b-iimy28hoao] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-top: 2px;
}

/* Select */
.setting-select[b-iimy28hoao] {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #d0d7de);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    color: var(--color-text-primary, #24292f);
    background: var(--color-surface, #fff);
    cursor: pointer;
    min-width: 140px;
}

    .setting-select:focus[b-iimy28hoao] {
        outline: none;
        border-color: var(--color-primary, #0969da);
        box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
    }

/* ===== Toggle Switch ===== */
.toggle-switch[b-iimy28hoao] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle-switch input[b-iimy28hoao] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-iimy28hoao] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-gray-300, #d0d7de);
    border-radius: 24px;
    transition: 0.2s;
}

    .toggle-slider[b-iimy28hoao]::before {
        content: '';
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 18px;
        height: 18px;
        background: var(--color-surface, white);
        border-radius: 50%;
        transition: 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

.toggle-switch input:checked + .toggle-slider[b-iimy28hoao] {
    background: var(--color-primary, #0969da);
}

    .toggle-switch input:checked + .toggle-slider[b-iimy28hoao]::before {
        transform: translateX(20px);
    }

/* ===== Alert Type Chips ===== */
.type-chips[b-iimy28hoao] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.type-chip-label[b-iimy28hoao] {
    cursor: pointer;
}

    .type-chip-label input[b-iimy28hoao] {
        display: none;
    }

.type-chip[b-iimy28hoao] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 2px solid var(--color-border, #e1e4e8);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #586069);
    transition: all 0.15s ease;
    user-select: none;
}

    .type-chip i[b-iimy28hoao] {
        font-size: 16px;
    }

    .type-chip:hover[b-iimy28hoao] {
        border-color: var(--color-gray-400, #afb8c1);
    }

.type-chip-label input:checked + .type-chip-success[b-iimy28hoao] {
    background: var(--color-success-light, #f0fdf4);
    border-color: var(--color-success-light, #86efac);
    color: var(--color-success, #16a34a);
}

.type-chip-label input:checked + .type-chip-info[b-iimy28hoao] {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary-light, #93c5fd);
    color: var(--color-primary, #2563eb);
}

.type-chip-label input:checked + .type-chip-warning[b-iimy28hoao] {
    background: var(--color-warning-light, #fffbeb);
    border-color: var(--color-warning-light, #fcd34d);
    color: var(--color-warning, #d97706);
}

.type-chip-label input:checked + .type-chip-error[b-iimy28hoao] {
    background: var(--color-danger-light, #fef2f2);
    border-color: var(--color-danger-light, #fca5a5);
    color: var(--color-danger, #dc2626);
}

/* ===== Preview Button ===== */
.btn-preview[b-iimy28hoao] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #d0d7de);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #24292f);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .btn-preview:hover[b-iimy28hoao] {
        background: var(--color-gray-50, #f6f8fa);
        border-color: var(--color-gray-400, #afb8c1);
    }

    .btn-preview i[b-iimy28hoao] {
        font-size: 16px;
        color: var(--color-primary, #0969da);
    }

/* ===== Coming Soon State ===== */
.coming-soon-card[b-iimy28hoao] {
    background: var(--color-surface, #fff);
    border: 2px dashed var(--color-border, #d0d7de);
    border-radius: var(--radius-lg, 8px);
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-secondary, #586069);
}

    .coming-soon-card h3[b-iimy28hoao] {
        margin: 12px 0 6px;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text-primary, #24292f);
    }

    .coming-soon-card p[b-iimy28hoao] {
        margin: 0;
        font-size: 14px;
        max-width: 360px;
        margin: 0 auto;
        line-height: 1.5;
    }

.coming-soon-icon[b-iimy28hoao] {
    font-size: 36px;
    color: var(--color-gray-400, #afb8c1);
}

/* ===== Loading State ===== */
.loading-state[b-iimy28hoao] {
    padding: 40px;
    text-align: center;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
}

    .loading-state i[b-iimy28hoao] {
        font-size: 18px;
        margin-right: 6px;
        animation: spin-b-iimy28hoao 1s linear infinite;
    }

@keyframes spin-b-iimy28hoao {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .system-settings-layout[b-iimy28hoao] {
        flex-direction: column;
    }

    .settings-nav[b-iimy28hoao] {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        position: static;
        padding: 6px;
        gap: 4px;
    }

    .settings-nav-item[b-iimy28hoao] {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 8px 12px;
    }

        .settings-nav-item.active[b-iimy28hoao] {
            border-left-color: transparent;
            border-bottom-color: var(--color-primary, #0969da);
        }

    .coming-soon-badge[b-iimy28hoao] {
        display: none;
    }
}
/* /Pages/Admin/Themebuilder.razor.rz.scp.css */
/* ==========================================
   THEME BUILDER - Scoped CSS
   ========================================== */

/* ── Loading State ──────────────────────── */
.loading-state[b-mqgzdnka3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-text-muted, #6a737d);
}

.loading-spinner[b-mqgzdnka3t] {
    font-size: 32px;
    animation: spin-b-mqgzdnka3t 1s linear infinite;
}

@keyframes spin-b-mqgzdnka3t {
    to {
        transform: rotate(360deg);
    }
}

/* ── Preset Grid ────────────────────────── */
.preset-grid[b-mqgzdnka3t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.preset-card-wrapper[b-mqgzdnka3t] {
    position: relative;
}

.preset-card[b-mqgzdnka3t] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--color-surface, white);
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left;
    font-family: inherit;
    width: 100%;
}

    .preset-card:hover[b-mqgzdnka3t] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .preset-card.active[b-mqgzdnka3t] {
        border-color: var(--color-primary, #0366d6);
        background: rgba(3, 102, 214, 0.06);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.15), 0 2px 8px rgba(0,0,0,0.06);
    }

        .preset-card.active .preset-name[b-mqgzdnka3t] {
            color: var(--color-primary, #0366d6);
        }

    .preset-card.base[b-mqgzdnka3t] {
        border-color: var(--color-warning, #f59e0b);
        background: rgba(245, 158, 11, 0.04);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12), 0 2px 8px rgba(0,0,0,0.04);
    }

        .preset-card.base .preset-name[b-mqgzdnka3t] {
            color: var(--color-warning-text, #92400e);
        }

    .preset-card.custom[b-mqgzdnka3t] {
        border-style: dashed;
    }

        .preset-card.custom.active[b-mqgzdnka3t] {
            border-style: solid;
        }

.preset-delete-btn[b-mqgzdnka3t] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: var(--color-danger, #d73a49);
    color: var(--color-text-inverse, white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

.preset-card-wrapper:hover .preset-delete-btn[b-mqgzdnka3t] {
    opacity: 1;
}

.preset-delete-btn:hover[b-mqgzdnka3t] {
    background: var(--color-danger-hover, #b92f3e);
}

.preset-custom-badge[b-mqgzdnka3t] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    background: var(--color-info, #0ea5e9);
    color: var(--color-text-inverse, white);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.preset-swatches[b-mqgzdnka3t] {
    display: flex;
    gap: 4px;
}

.swatch[b-mqgzdnka3t] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.preset-name[b-mqgzdnka3t] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.preset-desc[b-mqgzdnka3t] {
    font-size: 12px;
    color: var(--color-text-muted, #6a737d);
    line-height: 1.4;
}

.preset-check[b-mqgzdnka3t] {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 18px;
    color: var(--color-primary, #0366d6);
}

.preset-active-badge[b-mqgzdnka3t] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    background: var(--color-primary, #0366d6);
    color: var(--color-text-inverse, white);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .preset-active-badge i[b-mqgzdnka3t] {
        font-size: 11px;
    }

    .preset-active-badge.base[b-mqgzdnka3t] {
        background: var(--color-warning, #f59e0b);
    }

/* ── Builder Layout ─────────────────────── */
.builder-layout[b-mqgzdnka3t] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    margin-top: 24px;
}

.builder-controls[b-mqgzdnka3t] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Card overrides for builder ─────────── */
.card-subtitle[b-mqgzdnka3t] {
    font-size: 13px;
    color: var(--color-text-muted, #6a737d);
    font-weight: 400;
}

.current-preset-badge[b-mqgzdnka3t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(3, 102, 214, 0.08);
    color: var(--color-primary, #0366d6);
    border: 1px solid rgba(3, 102, 214, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

    .current-preset-badge i[b-mqgzdnka3t] {
        font-size: 15px;
    }

    .current-preset-badge.custom[b-mqgzdnka3t] {
        background: rgba(245, 158, 11, 0.08);
        color: var(--color-warning-text, #b45309);
        border-color: rgba(245, 158, 11, 0.25);
    }

.card-header .card-title i[b-mqgzdnka3t] {
    margin-right: 6px;
    font-size: 18px;
}

/* ── Color Grid ─────────────────────────── */
.color-grid[b-mqgzdnka3t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.color-grid-3[b-mqgzdnka3t] {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Color Field (component styles) ─────── */
[b-mqgzdnka3t] .color-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-mqgzdnka3t] .color-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[b-mqgzdnka3t] .color-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

    [b-mqgzdnka3t] .color-input-group input[type="color"] {
        width: 36px;
        height: 36px;
        border: 1px solid var(--color-border, #e1e4e8);
        border-radius: 6px;
        cursor: pointer;
        padding: 2px;
        background: none;
    }

[b-mqgzdnka3t] .hex-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--color-text-primary, #24292e);
}

    [b-mqgzdnka3t] .hex-input:focus {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

/* ── Icon Style Picker ──────────────────── */
.icon-style-picker[b-mqgzdnka3t] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.icon-style-option[b-mqgzdnka3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}

    .icon-style-option:hover[b-mqgzdnka3t] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-gray-100, #f6f8fa);
    }

    .icon-style-option.active[b-mqgzdnka3t] {
        border-color: var(--color-primary, #0366d6);
        background: rgba(3, 102, 214, 0.06);
    }

.icon-preview-lg[b-mqgzdnka3t] {
    font-size: 24px;
    color: var(--color-text-primary, #24292e);
}

.icon-style-option span[b-mqgzdnka3t] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
}

.icon-style-option.active span[b-mqgzdnka3t] {
    color: var(--color-primary, #0366d6);
    font-weight: 600;
}

/* ── Form Rows ──────────────────────────── */
.form-row[b-mqgzdnka3t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

    .form-row:last-child[b-mqgzdnka3t] {
        margin-bottom: 0;
    }

.mode-select[b-mqgzdnka3t] {
    max-width: 240px;
}

.section-label[b-mqgzdnka3t] {
    margin-bottom: 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-muted, #6a737d);
}

.divider[b-mqgzdnka3t] {
    height: 1px;
    background: var(--color-border, #e1e4e8);
    margin: 16px 0;
}

/* ── Slider Field ───────────────────────── */
.slider-field[b-mqgzdnka3t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .slider-field input[type="range"][b-mqgzdnka3t] {
        flex: 1;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--color-border, #e1e4e8);
        border-radius: 3px;
        outline: none;
    }

        .slider-field input[type="range"][b-mqgzdnka3t]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--color-primary, #0366d6);
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

.slider-value[b-mqgzdnka3t] {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--color-text-primary, #24292e);
    min-width: 40px;
    text-align: right;
}

/* ── Toggle Rows ────────────────────────── */
.toggle-row[b-mqgzdnka3t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .toggle-row:last-child[b-mqgzdnka3t] {
        border-bottom: none;
    }

.toggle-info[b-mqgzdnka3t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label[b-mqgzdnka3t] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.toggle-desc[b-mqgzdnka3t] {
    font-size: 13px;
    color: var(--color-text-muted, #6a737d);
}

.toggle-switch[b-mqgzdnka3t] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle-switch input[b-mqgzdnka3t] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-mqgzdnka3t] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-border, #d1d5da);
    border-radius: 24px;
    transition: background-color 0.2s;
}

    .toggle-slider[b-mqgzdnka3t]::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: var(--color-surface, white);
        border-radius: 50%;
        transition: transform 0.2s;
    }

.toggle-switch input:checked + .toggle-slider[b-mqgzdnka3t] {
    background: var(--color-primary, #0366d6);
}

    .toggle-switch input:checked + .toggle-slider[b-mqgzdnka3t]::before {
        transform: translateX(20px);
    }

/* ── Preview Panel ──────────────────────── */
.preview-panel[b-mqgzdnka3t] {
    position: relative;
}

.preview-sticky[b-mqgzdnka3t] {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-body[b-mqgzdnka3t] {
    padding: 0 !important;
}

.preview-frame[b-mqgzdnka3t] {
    font-family: var(--preview-font);
    font-size: var(--preview-font-size);
    overflow: hidden;
    border-radius: 0 0 6px 6px;
}

/* Mini navbar preview */
.preview-navbar[b-mqgzdnka3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--color-surface, white);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.preview-nav-brand[b-mqgzdnka3t] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

    .preview-nav-brand i[b-mqgzdnka3t] {
        font-size: 16px;
    }

.preview-nav-links[b-mqgzdnka3t] {
    display: flex;
    gap: 4px;
}

.preview-nav-link[b-mqgzdnka3t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    border-radius: var(--preview-radius, 6px);
}

    .preview-nav-link i[b-mqgzdnka3t] {
        font-size: 12px;
    }

    .preview-nav-link.active[b-mqgzdnka3t] {
        color: var(--color-text-primary, #24292e);
        background: var(--color-gray-100, #f6f8fa);
    }

/* Mini content preview */
.preview-content[b-mqgzdnka3t] {
    padding: 16px;
    background: var(--color-gray-100, #fafbfc);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-stat-row[b-mqgzdnka3t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.preview-stat[b-mqgzdnka3t] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--preview-radius, 6px);
    padding: 10px;
    text-align: center;
}

.preview-stat-value[b-mqgzdnka3t] {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.preview-stat-label[b-mqgzdnka3t] {
    font-size: 10px;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.preview-buttons[b-mqgzdnka3t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preview-btn[b-mqgzdnka3t] {
    padding: 4px 10px;
    border-radius: var(--preview-radius, 6px);
    color: var(--color-text-inverse, white);
    font-size: 11px;
    font-weight: 600;
}

    .preview-btn.primary[b-mqgzdnka3t] {
        background: var(--preview-primary);
    }

    .preview-btn.success[b-mqgzdnka3t] {
        background: var(--preview-success);
    }

    .preview-btn.danger[b-mqgzdnka3t] {
        background: var(--preview-danger);
    }

    .preview-btn.warning[b-mqgzdnka3t] {
        background: var(--preview-warning);
    }

    .preview-btn.info[b-mqgzdnka3t] {
        background: var(--preview-info);
    }

.preview-badges[b-mqgzdnka3t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preview-badge[b-mqgzdnka3t] {
    padding: 2px 8px;
    border-radius: 9999px;
    color: var(--color-text-inverse, white);
    font-size: 10px;
    font-weight: 600;
}

.preview-card-mini[b-mqgzdnka3t] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--preview-radius, 6px);
    overflow: hidden;
}

.preview-card-header[b-mqgzdnka3t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.preview-card-body-mini[b-mqgzdnka3t] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-text-muted[b-mqgzdnka3t] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
}

    .preview-text-muted i[b-mqgzdnka3t] {
        font-size: 13px;
    }

/* ── Token List ─────────────────────────── */
[b-mqgzdnka3t] .token-list {
    display: flex;
    flex-direction: column;
}

[b-mqgzdnka3t] .token-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    [b-mqgzdnka3t] .token-row:last-child {
        border-bottom: none;
    }

[b-mqgzdnka3t] .token-label {
    font-size: 12px;
    color: var(--color-text-muted, #6a737d);
}

[b-mqgzdnka3t] .token-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--color-text-primary, #24292e);
}

[b-mqgzdnka3t] .token-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    display: inline-block;
}

/* ── Unsaved Banner ─────────────────────── */
.unsaved-banner[b-mqgzdnka3t] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--color-text-primary, #24292e);
    color: var(--color-text-inverse, white);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 14px;
    font-weight: 500;
}

    .unsaved-banner i[b-mqgzdnka3t] {
        font-size: 18px;
        color: var(--color-warning, #f59e0b);
    }

/* ── Toast ──────────────────────────────── */
.toast[b-mqgzdnka3t] {
    position: fixed;
    top: 80px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn-b-mqgzdnka3t 0.2s ease-out;
}

.toast-success[b-mqgzdnka3t] {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-text, #166534);
    border: 1px solid var(--color-success-light, #bbf7d0);
}

.toast-error[b-mqgzdnka3t] {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger-text, #991b1b);
    border: 1px solid var(--color-danger-light, #fecaca);
}

@keyframes slideIn-b-mqgzdnka3t {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* ── Modals ─────────────────────────────── */
.modal-backdrop[b-mqgzdnka3t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-mqgzdnka3t 0.15s ease-out;
}

@keyframes fadeIn-b-mqgzdnka3t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-mqgzdnka3t] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-mqgzdnka3t 0.2s ease-out;
}

.modal-sm[b-mqgzdnka3t] {
    max-width: 400px;
}

@keyframes slideUp-b-mqgzdnka3t {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.modal-header[b-mqgzdnka3t] {
    display: flex;
    align-items: center;
    padding: 20px 48px 20px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.modal-header-danger[b-mqgzdnka3t] {
    background: var(--color-danger-light, #fef2f2);
    border-bottom-color: var(--color-danger-light, #fecaca);
}

    .modal-header-danger .modal-title[b-mqgzdnka3t] {
        color: var(--color-danger-text, #991b1b);
    }

.modal-title[b-mqgzdnka3t] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

    .modal-title i[b-mqgzdnka3t] {
        font-size: 22px;
    }

.modal-close[b-mqgzdnka3t] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 1;
}

    .modal-close:hover[b-mqgzdnka3t] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-body[b-mqgzdnka3t] {
    padding: 24px;
}

    .modal-body p[b-mqgzdnka3t] {
        margin: 0 0 12px 0;
        color: var(--color-text-primary, #24292e);
    }

    .modal-body .text-muted[b-mqgzdnka3t] {
        color: var(--color-text-muted, #6a737d);
        font-size: 13px;
    }

.modal-footer[b-mqgzdnka3t] {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Preset Preview in Modal */
.preset-preview[b-mqgzdnka3t] {
    margin-top: 20px;
    padding: 16px;
    background: var(--color-gray-50, #f6f8fa);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preset-preview-swatches[b-mqgzdnka3t] {
    display: flex;
    gap: 4px;
}

    .preset-preview-swatches .swatch[b-mqgzdnka3t] {
        width: 28px;
        height: 28px;
    }

.preset-preview-label[b-mqgzdnka3t] {
    font-size: 13px;
    color: var(--color-text-muted, #6a737d);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
    .builder-layout[b-mqgzdnka3t] {
        grid-template-columns: 1fr;
    }

    .preview-sticky[b-mqgzdnka3t] {
        position: static;
    }

    .icon-style-picker[b-mqgzdnka3t] {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .color-grid[b-mqgzdnka3t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row[b-mqgzdnka3t] {
        grid-template-columns: 1fr;
    }

    .icon-style-picker[b-mqgzdnka3t] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/Admin/TypeManagement.razor.rz.scp.css */
/* Shared styles for admin CRUD management pages */

.loading[b-q6m99p9rpr] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-q6m99p9rpr] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-q6m99p9rpr] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-q6m99p9rpr] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-q6m99p9rpr] {
        background: var(--color-gray-50, #f6f8fa);
    }

.action-buttons[b-q6m99p9rpr] {
    display: flex;
    gap: 6px;
}

.color-swatch[b-q6m99p9rpr] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-q6m99p9rpr] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.text-muted[b-q6m99p9rpr] {
    color: var(--color-text-secondary, #586069);
}
/* /Pages/Admin/UserManagement.razor.rz.scp.css */
.checkbox-wrapper[b-babpdk8czv] {
    padding: 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.checkbox-label[b-babpdk8czv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

    .checkbox-label input[type="checkbox"][b-babpdk8czv] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.filters-section[b-babpdk8czv] {
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
}

.filters-bar[b-babpdk8czv] {
    padding: 16px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-group[b-babpdk8czv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label[b-babpdk8czv] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select[b-babpdk8czv],
.filter-input[b-babpdk8czv] {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    background: var(--color-surface, white);
    font-family: inherit;
}

    .filter-select:focus[b-babpdk8czv],
    .filter-input:focus[b-babpdk8czv] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

.action-buttons[b-babpdk8czv] {
    display: flex;
    gap: 6px;
}

.loading[b-babpdk8czv] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-babpdk8czv] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-babpdk8czv] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-babpdk8czv] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-babpdk8czv] {
        background: var(--color-gray-50, #f6f8fa);
    }

@media (max-width: 768px) {
    .filters-bar[b-babpdk8czv] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/VersionManagement.razor.rz.scp.css */
/* Shared styles for admin CRUD management pages */

.loading[b-ez3ac5eyk7] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.data-table[b-ez3ac5eyk7] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-ez3ac5eyk7] {
        background: var(--color-gray-50, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-ez3ac5eyk7] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-ez3ac5eyk7] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .data-table thead th.sortable[b-ez3ac5eyk7] {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }

        .data-table thead th.sortable:hover[b-ez3ac5eyk7] {
            color: var(--color-text-primary, #24292e);
        }

.sort-icon[b-ez3ac5eyk7] {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: var(--color-text-muted, #959da5);
}

    .sort-icon.active[b-ez3ac5eyk7] {
        color: var(--color-primary, #0366d6);
    }

.action-buttons[b-ez3ac5eyk7] {
    display: flex;
    gap: 6px;
}

.search-group[b-ez3ac5eyk7] {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

    .search-group .form-input[b-ez3ac5eyk7] {
        max-width: 320px;
    }

.color-swatch[b-ez3ac5eyk7] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-ez3ac5eyk7] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.text-muted[b-ez3ac5eyk7] {
    color: var(--color-text-secondary, #586069);
}

.checkbox-wrapper[b-ez3ac5eyk7] {
    padding: 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

.checkbox-label[b-ez3ac5eyk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

    .checkbox-label input[type="checkbox"][b-ez3ac5eyk7] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.warning-message[b-ez3ac5eyk7] {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-danger-light, #fff5f5);
    border: 1px solid var(--color-danger-light, #feb2b2);
    border-radius: var(--radius-md, 6px);
    color: var(--color-danger, #c53030);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-hint[b-ez3ac5eyk7] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-top: 4px;
}
/* /Pages/Announcements.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Announcements — User-facing Page
   Read-only cards coloured by type via the shared Alert.
   ═══════════════════════════════════════════════ */

.announcements-page[b-yjj5fx6wsl] {
    max-width: 800px;
    margin: 0 auto;
}

.announcements-stack[b-yjj5fx6wsl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.announcement-card-title[b-yjj5fx6wsl] {
    font-weight: 700;
    margin-bottom: 2px;
}

/* The body is sanitized Quill HTML. Keep block spacing tight so a one-line
   announcement doesn't get extra leading from a wrapping <p>. ::deep reaches
   into the Alert child component's rendered content. */
.announcement-card-body[b-yjj5fx6wsl] (p) {
    margin: 0 0 6px 0;
}

.announcement-card-body[b-yjj5fx6wsl] (p:last-child) {
    margin-bottom: 0;
}

.announcement-card-body[b-yjj5fx6wsl] (img) {
    max-width: 100%;
    height: auto;
}

.loading[b-yjj5fx6wsl] {
    padding: 24px;
    text-align: center;
    color: var(--color-text-secondary, #586069);
}
/* /Pages/BookmarkedTickets.razor.rz.scp.css */
.container[b-mpjgetqlph] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
}

.content-section[b-mpjgetqlph] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
}

.section-header[b-mpjgetqlph] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-mpjgetqlph] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.bookmarks-grid[b-mpjgetqlph] {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}

.bookmark-card[b-mpjgetqlph] {
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    padding: 16px;
    background: var(--color-gray-100, #fafbfc);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

    .bookmark-card:hover[b-mpjgetqlph] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.bookmark-header[b-mpjgetqlph] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.bookmark-id[b-mpjgetqlph] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-id[b-mpjgetqlph] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
}

.bookmark-remove[b-mpjgetqlph] {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s;
    color: var(--color-danger, #d73a49);
    display: flex;
    align-items: center;
}

    .bookmark-remove:hover[b-mpjgetqlph] {
        opacity: 1;
        background: var(--color-danger-light, #ffeef0);
    }

.bookmark-badges[b-mpjgetqlph] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dynamic-badge[b-mpjgetqlph] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.bookmark-title[b-mpjgetqlph] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 12px;
    line-height: 1.4;
}

.bookmark-meta[b-mpjgetqlph] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--color-surface, white);
    border-radius: 4px;
}

.meta-row[b-mpjgetqlph] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.meta-label[b-mpjgetqlph] {
    color: var(--color-text-secondary, #586069);
    font-weight: 500;
    min-width: 105px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-value[b-mpjgetqlph] {
    color: var(--color-text-primary, #24292e);
    font-weight: 500;
}

.bookmark-footer[b-mpjgetqlph] {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.count-badge[b-mpjgetqlph] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading[b-mpjgetqlph] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}

.loading-icon[b-mpjgetqlph] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--color-primary, #0366d6);
}

@media (max-width: 768px) {
    .bookmarks-grid[b-mpjgetqlph] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/BugReporter.razor.rz.scp.css */
.container[b-8p04inbzxt] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.content-grid[b-8p04inbzxt] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.capture-options[b-8p04inbzxt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.capture-btn[b-8p04inbzxt] {
    padding: 20px;
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    background: var(--color-surface, white);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

    .capture-btn:hover[b-8p04inbzxt] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-gray-100, #f6f8fa);
    }

.capture-icon[b-8p04inbzxt] {
    font-size: 32px;
    margin-bottom: 8px;
    color: var(--color-text-secondary, #586069);
}

    .capture-icon i[b-8p04inbzxt] {
        font-size: 32px;
    }

.capture-label[b-8p04inbzxt] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.capture-count[b-8p04inbzxt] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.recording-indicator[b-8p04inbzxt] {
    padding: 12px;
    background: var(--color-danger-light, #ffeef0);
    border: 1px solid var(--color-danger, #d73a49);
    border-radius: 6px;
    color: var(--color-danger, #d73a49);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    display: none;
}

    .recording-indicator.active[b-8p04inbzxt] {
        display: block;
        animation: pulse-b-8p04inbzxt 1.5s infinite;
    }

.recording-icon[b-8p04inbzxt] {
    color: var(--color-danger, #d73a49);
}

.recording-pulse[b-8p04inbzxt] {
    color: var(--color-danger, #d73a49);
}

@keyframes pulse-b-8p04inbzxt {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.preview-grid[b-8p04inbzxt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.preview-item[b-8p04inbzxt] {
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.preview-img[b-8p04inbzxt] {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100, #f6f8fa);
    font-size: 32px;
    color: var(--color-text-secondary, #586069);
}

    .preview-img i[b-8p04inbzxt] {
        font-size: 32px;
    }

.preview-label[b-8p04inbzxt] {
    padding: 6px;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    text-align: center;
    background: var(--color-gray-100, #f6f8fa);
    border-top: 1px solid var(--color-border, #e1e4e8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-size[b-8p04inbzxt] {
    padding: 4px 6px;
    font-size: 10px;
    color: var(--color-text-muted, #959da5);
    text-align: center;
    background: var(--color-gray-100, #fafbfc);
}

.preview-delete[b-8p04inbzxt] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--color-danger, #d73a49);
    color: var(--color-text-inverse, white);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

    .preview-delete:hover[b-8p04inbzxt] {
        background: var(--color-danger, #cb2431);
    }

.info-box[b-8p04inbzxt] {
    padding: 16px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    margin-bottom: 20px;
}

.info-box-title[b-8p04inbzxt] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-box-text[b-8p04inbzxt] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    line-height: 1.5;
}

.stat-value[b-8p04inbzxt] {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary, #0366d6);
}

.required[b-8p04inbzxt] {
    color: var(--color-danger, #d73a49);
}

@media (max-width: 1024px) {
    .content-grid[b-8p04inbzxt] {
        grid-template-columns: 1fr;
    }

    .capture-options[b-8p04inbzxt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Visibility toggle (ported from TicketDetails so the create panel matches) ── */
.visibility-toggle[b-8p04inbzxt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-gray-100, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.visibility-toggle.is-internal[b-8p04inbzxt] {
    background: var(--color-warning-light, #fffbeb);
    border-color: var(--color-warning, #fcd34d);
}

.visibility-toggle-text[b-8p04inbzxt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.visibility-toggle-label[b-8p04inbzxt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
}

.visibility-toggle.is-internal .visibility-toggle-label[b-8p04inbzxt] {
    color: var(--color-warning-text, #78350f);
}

.visibility-toggle-label i[b-8p04inbzxt] {
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-secondary, #64748b);
}

.visibility-toggle.is-internal .visibility-toggle-label i[b-8p04inbzxt] {
    color: var(--color-warning, #d97706);
}

.visibility-toggle-sub[b-8p04inbzxt] {
    font-size: 11px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.4;
}

.visibility-toggle-sub strong[b-8p04inbzxt] {
    color: var(--color-text-primary, #0f172a);
    font-weight: 600;
}

.visibility-toggle.is-internal .visibility-toggle-sub strong[b-8p04inbzxt] {
    color: var(--color-warning-text, #422006);
}

.visibility-switch[b-8p04inbzxt] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.visibility-switch input[b-8p04inbzxt] {
    opacity: 0;
    width: 0;
    height: 0;
}

.visibility-switch-slider[b-8p04inbzxt] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border, #cbd5e1);
    border-radius: 999px;
    transition: background-color 0.15s;
}

.visibility-switch-slider[b-8p04inbzxt]::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.visibility-switch input:checked + .visibility-switch-slider[b-8p04inbzxt] {
    background-color: var(--color-warning, #d97706);
}

.visibility-switch input:checked + .visibility-switch-slider[b-8p04inbzxt]::before {
    transform: translateX(16px);
}
/* /Pages/CalculatedFieldModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   CALCULATED FIELD MODAL - Scoped Styles
   Override parent modal styles to ensure proper layout
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Modal Container */
.calc-field-modal.modal.active[b-xhaua6wbam] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    padding: 20px !important;
}

/* Modal Content - CRITICAL: Set fixed width */
.calc-field-modal .modal-content.modal-large[b-xhaua6wbam] {
    position: relative;
    width: 900px !important;
    min-width: 850px !important;
    max-width: 95vw !important;
    background: var(--color-surface, white) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

/* Modal Header */
.calc-field-modal .modal-header[b-xhaua6wbam] {
    padding: 16px 48px 16px 20px !important;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
    display: flex !important;
    align-items: center !important;
    background: var(--color-gray-100, #f9fafb) !important;
    flex-shrink: 0 !important;
}

    .calc-field-modal .modal-header h3[b-xhaua6wbam] {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--color-text-primary, #1f2937) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

        .calc-field-modal .modal-header h3 i[b-xhaua6wbam] {
            color: var(--color-primary, #3b82f6) !important;
        }

.calc-field-modal .modal-close[b-xhaua6wbam] {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    color: var(--color-text-secondary, #6b7280) !important;
    z-index: 1 !important;
}

    .calc-field-modal .modal-close:hover[b-xhaua6wbam] {
        background: var(--color-border, #e5e7eb) !important;
        color: var(--color-text-primary, #1f2937) !important;
    }

/* Modal Footer */
.calc-field-modal .modal-footer[b-xhaua6wbam] {
    padding: 16px 20px !important;
    border-top: 1px solid var(--color-border, #e5e7eb) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    background: var(--color-gray-100, #f9fafb) !important;
    flex-shrink: 0 !important;
}

    .calc-field-modal .modal-footer .btn-danger[b-xhaua6wbam] {
        margin-right: auto !important;
    }

/* ═══════════════════════════════════════════════════════════════════════════════
   SPLIT LAYOUT - CRITICAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.calc-field-modal .modal-body-split[b-xhaua6wbam] {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 400px !important;
    max-height: calc(90vh - 140px) !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEFT PANEL - FIELD PICKER (Fixed Width)
   ═══════════════════════════════════════════════════════════════════════════════ */

.calc-field-modal .field-picker[b-xhaua6wbam] {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    border-right: 1px solid var(--color-border, #e5e7eb) !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--color-gray-100, #f9fafb) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.calc-field-modal .field-picker-header[b-xhaua6wbam] {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
    background: var(--color-surface, white) !important;
    flex-shrink: 0 !important;
}

    .calc-field-modal .field-picker-header h4[b-xhaua6wbam] {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--color-text-secondary, #374151) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 0 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

.calc-field-modal .field-search[b-xhaua6wbam] {
    position: relative !important;
}

    .calc-field-modal .field-search input[b-xhaua6wbam] {
        width: 100% !important;
        padding: 8px 12px 8px 32px !important;
        border: 1px solid var(--color-border, #d1d5db) !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

        .calc-field-modal .field-search input:focus[b-xhaua6wbam] {
            outline: none !important;
            border-color: var(--color-primary, #3b82f6) !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }

    .calc-field-modal .field-search > i[b-xhaua6wbam] {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--color-text-muted, #9ca3af) !important;
        font-size: 14px !important;
    }

.calc-field-modal .field-list[b-xhaua6wbam] {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px !important;
}

/* Table Groups */
.calc-field-modal .table-group[b-xhaua6wbam] {
    margin-bottom: 8px !important;
}

.calc-field-modal .table-header[b-xhaua6wbam] {
    padding: 8px 12px !important;
    background: var(--color-surface, white) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary, #374151) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.calc-field-modal .table-group.expanded .table-header[b-xhaua6wbam] {
    border-radius: 6px 6px 0 0 !important;
}

.calc-field-modal .table-header:hover[b-xhaua6wbam] {
    background: var(--color-gray-100, #f3f4f6) !important;
}

.calc-field-modal .table-header i.table-icon[b-xhaua6wbam] {
    color: var(--color-primary, #3b82f6) !important;
}

.calc-field-modal .table-header .field-count[b-xhaua6wbam] {
    font-size: 11px !important;
    color: var(--color-text-muted, #9ca3af) !important;
    font-weight: 400 !important;
}

.calc-field-modal .table-header i.chevron[b-xhaua6wbam] {
    margin-left: auto !important;
    font-size: 14px !important;
    color: var(--color-text-muted, #9ca3af) !important;
    transition: transform 0.2s !important;
}

.calc-field-modal .table-group.expanded .table-header i.chevron[b-xhaua6wbam] {
    transform: rotate(180deg) !important;
}

.calc-field-modal .table-fields[b-xhaua6wbam] {
    display: none !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    background: var(--color-surface, white) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.calc-field-modal .table-group.expanded .table-fields[b-xhaua6wbam] {
    display: block !important;
}

.calc-field-modal .field-item[b-xhaua6wbam] {
    padding: 8px 12px 8px 24px !important;
    font-size: 13px !important;
    color: var(--color-text-secondary, #4b5563) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--color-border, #f3f4f6) !important;
}

    .calc-field-modal .field-item:last-child[b-xhaua6wbam] {
        border-bottom: none !important;
    }

    .calc-field-modal .field-item:hover[b-xhaua6wbam] {
        background: var(--color-primary-light, #eff6ff) !important;
        color: var(--color-primary, #1d4ed8) !important;
    }

    .calc-field-modal .field-item i[b-xhaua6wbam] {
        font-size: 14px !important;
        color: var(--color-text-muted, #9ca3af) !important;
    }

    .calc-field-modal .field-item:hover i[b-xhaua6wbam] {
        color: var(--color-primary, #3b82f6) !important;
    }

.calc-field-modal .field-type[b-xhaua6wbam] {
    margin-left: auto !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: var(--color-gray-100, #f3f4f6) !important;
    color: var(--color-text-secondary, #6b7280) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RIGHT PANEL - FORMULA EDITOR (Flex Grow)
   ═══════════════════════════════════════════════════════════════════════════════ */

.calc-field-modal .formula-editor[b-xhaua6wbam] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--color-surface, white) !important;
}

/* Info Callout */
.calc-field-modal .info-callout[b-xhaua6wbam] {
    background: var(--color-primary-light, #eff6ff) !important;
    border: 1px solid var(--color-primary-light, #bfdbfe) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

    .calc-field-modal .info-callout > i[b-xhaua6wbam] {
        color: var(--color-primary, #3b82f6) !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }

.calc-field-modal .info-callout-content[b-xhaua6wbam] {
    font-size: 13px !important;
    color: var(--color-primary-hover, #1e40af) !important;
    line-height: 1.5 !important;
}

    .calc-field-modal .info-callout-content strong[b-xhaua6wbam] {
        color: var(--color-primary-hover, #1e3a8a) !important;
    }

    .calc-field-modal .info-callout-content code[b-xhaua6wbam] {
        background: rgba(59, 130, 246, 0.15) !important;
        padding: 2px 6px !important;
        border-radius: 3px !important;
        font-family: 'Monaco', 'Menlo', monospace !important;
        font-size: 11px !important;
    }

/* Form Row - Side by Side */
.calc-field-modal .form-row[b-xhaua6wbam] {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}

.calc-field-modal .form-group[b-xhaua6wbam] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

    .calc-field-modal .form-group.form-group-sm[b-xhaua6wbam] {
        flex: 0 0 150px !important;
        min-width: 150px !important;
    }

    .calc-field-modal .form-group label[b-xhaua6wbam] {
        display: block !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--color-text-secondary, #374151) !important;
        margin-bottom: 6px !important;
    }

    .calc-field-modal .form-group input[b-xhaua6wbam],
    .calc-field-modal .form-group select[b-xhaua6wbam] {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1px solid var(--color-border, #d1d5db) !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

        .calc-field-modal .form-group input:focus[b-xhaua6wbam],
        .calc-field-modal .form-group select:focus[b-xhaua6wbam] {
            outline: none !important;
            border-color: var(--color-primary, #3b82f6) !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }

/* Formula Group */
.calc-field-modal .formula-group[b-xhaua6wbam] {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 12px !important;
    flex: 1 !important;
}

    .calc-field-modal .formula-group > label[b-xhaua6wbam] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--color-text-secondary, #374151) !important;
        margin-bottom: 6px !important;
    }

.calc-field-modal .validate-btn[b-xhaua6wbam] {
    padding: 4px 12px !important;
    font-size: 12px !important;
    background: var(--color-success-light, #f0fdf4) !important;
    color: var(--color-success-text, #15803d) !important;
    border: 1px solid var(--color-success-light, #bbf7d0) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

    .calc-field-modal .validate-btn:hover[b-xhaua6wbam] {
        background: var(--color-success-light, #dcfce7) !important;
    }

.calc-field-modal .formula-textarea[b-xhaua6wbam] {
    flex: 1 !important;
    min-height: 100px !important;
    padding: 12px !important;
    border: 1px solid var(--color-border, #d1d5db) !important;
    border-radius: 6px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 13px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    .calc-field-modal .formula-textarea:focus[b-xhaua6wbam] {
        outline: none !important;
        border-color: var(--color-primary, #3b82f6) !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }

.calc-field-modal .formula-hint[b-xhaua6wbam] {
    font-size: 11px !important;
    color: var(--color-text-secondary, #6b7280) !important;
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

    .calc-field-modal .formula-hint i[b-xhaua6wbam] {
        color: var(--color-warning, #f59e0b) !important;
    }

/* Validation Result */
.calc-field-modal .validation-result[b-xhaua6wbam] {
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
}

    .calc-field-modal .validation-result.success[b-xhaua6wbam] {
        background: var(--color-success-light, #f0fdf4) !important;
        border: 1px solid var(--color-success-light, #bbf7d0) !important;
        color: var(--color-success-text, #166534) !important;
    }

    .calc-field-modal .validation-result.error[b-xhaua6wbam] {
        background: var(--color-danger-light, #fef2f2) !important;
        border: 1px solid var(--color-danger-light, #fecaca) !important;
        color: var(--color-danger-text, #991b1b) !important;
    }

    .calc-field-modal .validation-result i[b-xhaua6wbam] {
        font-size: 16px !important;
    }

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK REFERENCE
   ═══════════════════════════════════════════════════════════════════════════════ */

.calc-field-modal .quick-reference[b-xhaua6wbam] {
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.calc-field-modal .quick-reference-header[b-xhaua6wbam] {
    padding: 10px 12px !important;
    background: var(--color-gray-100, #f9fafb) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary, #374151) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

    .calc-field-modal .quick-reference-header:hover[b-xhaua6wbam] {
        background: var(--color-gray-100, #f3f4f6) !important;
    }

    .calc-field-modal .quick-reference-header i.chevron[b-xhaua6wbam] {
        margin-left: auto !important;
        transition: transform 0.2s !important;
    }

.calc-field-modal .quick-reference.expanded .quick-reference-header i.chevron[b-xhaua6wbam] {
    transform: rotate(180deg) !important;
}

.calc-field-modal .quick-reference-content[b-xhaua6wbam] {
    display: none !important;
    padding: 12px !important;
    background: var(--color-surface, white) !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    border-top: 1px solid var(--color-border, #e5e7eb) !important;
}

.calc-field-modal .quick-reference.expanded .quick-reference-content[b-xhaua6wbam] {
    display: block !important;
}

.calc-field-modal .ref-section[b-xhaua6wbam] {
    margin-bottom: 12px !important;
}

    .calc-field-modal .ref-section:last-child[b-xhaua6wbam] {
        margin-bottom: 0 !important;
    }

.calc-field-modal .ref-section-title[b-xhaua6wbam] {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary, #6b7280) !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.calc-field-modal .ref-items[b-xhaua6wbam] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.calc-field-modal .ref-item[b-xhaua6wbam] {
    padding: 4px 8px !important;
    background: var(--color-gray-100, #f3f4f6) !important;
    border-radius: 4px !important;
    font-family: 'Monaco', 'Menlo', monospace !important;
    font-size: 11px !important;
    color: var(--color-text-secondary, #374151) !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
}

    .calc-field-modal .ref-item:hover[b-xhaua6wbam] {
        background: var(--color-primary, #3b82f6) !important;
        color: var(--color-text-inverse, white) !important;
    }

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.calc-field-modal .btn[b-xhaua6wbam] {
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
}

    .calc-field-modal .btn:disabled[b-xhaua6wbam] {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }

.calc-field-modal .btn-secondary[b-xhaua6wbam] {
    background: var(--color-surface, white) !important;
    border-color: var(--color-border, #d1d5db) !important;
    color: var(--color-text-secondary, #374151) !important;
}

    .calc-field-modal .btn-secondary:hover:not(:disabled)[b-xhaua6wbam] {
        background: var(--color-gray-100, #f3f4f6) !important;
    }

.calc-field-modal .btn-primary[b-xhaua6wbam] {
    background: var(--color-primary, #3b82f6) !important;
    border-color: var(--color-primary, #3b82f6) !important;
    color: var(--color-text-inverse, white) !important;
}

    .calc-field-modal .btn-primary:hover:not(:disabled)[b-xhaua6wbam] {
        background: var(--color-primary, #2563eb) !important;
        border-color: var(--color-primary, #2563eb) !important;
    }

.calc-field-modal .btn-danger[b-xhaua6wbam] {
    background: var(--color-surface, white) !important;
    border-color: var(--color-danger-light, #fecaca) !important;
    color: var(--color-danger, #dc2626) !important;
}

    .calc-field-modal .btn-danger:hover:not(:disabled)[b-xhaua6wbam] {
        background: var(--color-danger-light, #fef2f2) !important;
    }
/* /Pages/CustomerReleases.razor.rz.scp.css */
.container[b-sogotd3ur8] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}

.loading[b-sogotd3ur8] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}

.loading-icon[b-sogotd3ur8] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--color-primary, #0366d6);
}

.releases-grid[b-sogotd3ur8] {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.release-card[b-sogotd3ur8] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.2s;
}

    .release-card:hover[b-sogotd3ur8] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

.release-header[b-sogotd3ur8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .release-header h3[b-sogotd3ur8] {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: var(--color-text-primary, #24292e);
    }

.release-description[b-sogotd3ur8] {
    color: var(--color-text-secondary, #586069);
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 14px;
}

.release-meta[b-sogotd3ur8] {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--color-border, #e1e4e8);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    margin-bottom: 16px;
}

.meta-item[b-sogotd3ur8] {
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .meta-item strong[b-sogotd3ur8] {
        color: var(--color-text-primary, #24292e);
    }

.release-actions[b-sogotd3ur8] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.download-btn[b-sogotd3ur8] {
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

    .download-btn.primary[b-sogotd3ur8] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
    }

        .download-btn.primary:hover[b-sogotd3ur8] {
            background: var(--color-primary-hover, #0256c7);
        }

    .download-btn.secondary[b-sogotd3ur8] {
        background: var(--color-surface, white);
        color: var(--color-text-primary, #24292e);
        border: 1px solid var(--color-border, #e1e4e8);
    }

        .download-btn.secondary:hover[b-sogotd3ur8] {
            background: var(--color-gray-100, #f6f8fa);
        }

@media (max-width: 600px) {
    .release-actions[b-sogotd3ur8] {
        flex-direction: column;
    }

    .release-meta[b-sogotd3ur8] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Dashboard — Scoped CSS
   Updated: Layout-driven sections + flat grid fallback
   ═══════════════════════════════════════════════ */

/* ── Flat fallback grid (no layout configured) ─── */
.stats-grid[b-wvfks31io8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ── Layout-driven sections ──────────────────────── */
.dashboard-section[b-wvfks31io8] {
    margin-bottom: 24px;
}

.section-header[b-wvfks31io8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    user-select: none;
}

    .section-header.collapsible[b-wvfks31io8] {
        cursor: pointer;
    }

        .section-header.collapsible:hover[b-wvfks31io8] {
            border-bottom-color: var(--color-primary, #6366f1);
        }

.section-header-left[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon[b-wvfks31io8] {
    font-size: 18px;
    color: var(--color-primary, #6366f1);
}

.section-title[b-wvfks31io8] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin: 0;
}

.section-kpi-count[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-gray-100, #eef0f2);
    color: var(--color-text-secondary, #586069);
    font-size: 11px;
    font-weight: 600;
}

.section-chevron[b-wvfks31io8] {
    font-size: 16px;
    color: var(--color-text-secondary, #586069);
    transition: transform 0.2s ease;
}

    .section-chevron.rotated[b-wvfks31io8] {
        transform: rotate(-90deg);
    }

/* Section grid — columns come from inline style */
.section-grid[b-wvfks31io8] {
    display: grid;
    gap: 16px;
    grid-auto-rows: minmax(100px, auto);
    animation: sectionExpand-b-wvfks31io8 0.2s ease;
}

.grid-item[b-wvfks31io8] {
    min-width: 0; /* prevent grid blowout */
}

    /* KPI components inside grid items should fill the cell */
    .grid-item > :first-child[b-wvfks31io8] {
        width: 100%;
        height: 100%;
    }

/* Collapsed section hides the grid */
.dashboard-section.collapsed .section-grid[b-wvfks31io8] {
    display: none;
}

@keyframes sectionExpand-b-wvfks31io8 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* ── Edit mode banner ────────────────────────── */
.edit-mode-banner[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: var(--color-primary-50, #eef2ff);
    border: 1px solid var(--color-primary-200, #c7d2fe);
    border-radius: 8px;
    color: var(--color-primary-700, #4338ca);
    font-size: 13px;
}

    .edit-mode-banner i[b-wvfks31io8] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* ── Edit mode section styling ───────────────── */
.dashboard-section.edit-mode[b-wvfks31io8] {
    border: 2px dashed var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 12px;
}

.section-edit-actions[b-wvfks31io8] {
    display: flex;
    gap: 4px;
}

/* ── Edit buttons ────────────────────────────── */
.edit-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    background: var(--color-surface, white);
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    padding: 0;
}

    .edit-btn:hover:not(:disabled)[b-wvfks31io8] {
        background: var(--color-gray-50, #f6f8fa);
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
    }

    .edit-btn:disabled[b-wvfks31io8] {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .edit-btn.sm[b-wvfks31io8] {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .edit-btn.danger:hover:not(:disabled)[b-wvfks31io8] {
        border-color: var(--color-danger, #ef4444);
        color: var(--color-danger, #ef4444);
        background: var(--color-danger-light, #fef2f2);
    }

/* ── Grid item in edit mode ──────────────────── */
.grid-item.editable[b-wvfks31io8] {
    position: relative;
    border: 2px dashed transparent;
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

    .grid-item.editable:hover[b-wvfks31io8] {
        border-color: var(--color-primary, #6366f1);
    }

        .grid-item.editable:hover .edit-overlay[b-wvfks31io8] {
            opacity: 1;
        }

.edit-overlay[b-wvfks31io8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.grid-item.editable:hover .edit-overlay[b-wvfks31io8] {
    pointer-events: auto;
}

.edit-controls-top[b-wvfks31io8] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    padding: 6px 6px 0;
}

.edit-controls-bottom[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    justify-content: center;
}

.width-label[b-wvfks31io8] {
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    font-weight: 600;
}

.width-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 4px;
    background: var(--color-surface, white);
    color: var(--color-text-secondary, #586069);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

    .width-btn:hover[b-wvfks31io8] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
    }

    .width-btn.active[b-wvfks31io8] {
        background: var(--color-primary, #6366f1);
        border-color: var(--color-primary, #6366f1);
        color: var(--color-text-inverse, white);
    }

/* ── Hidden KPIs panel ───────────────────────── */
.hidden-kpis-panel[b-wvfks31io8] {
    margin-top: 8px;
    margin-bottom: 24px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    background: var(--color-gray-50, #f6f8fa);
    overflow: hidden;
}

.hidden-kpis-header[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.hidden-kpis-list[b-wvfks31io8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}

.hidden-kpi-item[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

    .hidden-kpi-item i:first-child[b-wvfks31io8] {
        font-size: 14px;
    }

    .hidden-kpi-item span[b-wvfks31io8] {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.data-table[b-wvfks31io8] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-wvfks31io8] {
        background: var(--color-gray-50, #fafbfc);
        padding: 0;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        /* position:relative — keeps the column resize-handle
           (.col-resize-handle is position:absolute; right:0) anchored
           to its parent th. We previously tried position:sticky here
           to pin the header during vertical page scroll, but the
           wrapping .data-table-scroll element has overflow-x:auto
           which classifies it as a scroll container even though
           overflow-y is clip. Sticky pins to that wrapper instead of
           the viewport, leaving a visible gap between the toolbar and
           the natural header position. Reverted until we can refactor
           the wrapper architecture. */
        position: relative;
        overflow: visible;
        vertical-align: top;
    }

    .data-table tbody td[b-wvfks31io8] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-wvfks31io8] {
        background: var(--color-gray-50, #f6f8fa);
    }

.ticket-id[b-wvfks31io8] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
}

.count-badge[b-wvfks31io8] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.count-badge-unread[b-wvfks31io8] {
    color: var(--color-danger, #ef4444);
    font-weight: 600;
}

.unread-indicator[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-danger, #ef4444);
    color: var(--color-text-inverse, white);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.loading[b-wvfks31io8] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* ── Table Toolbar ───────────────────────────── */
.table-toolbar[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--color-gray-50, #f6f8fa);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-wrap: wrap;
}

.toolbar-left[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.toolbar-right[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    width: 220px;
}

    .search-box i[b-wvfks31io8] {
        color: var(--color-text-secondary, #9ca3af);
        font-size: 14px;
        flex-shrink: 0;
    }

    .search-box input[b-wvfks31io8] {
        border: none;
        outline: none;
        font-size: 13px;
        width: 100%;
        color: var(--color-text-primary, #24292e);
        background: transparent;
    }

.active-filter-count[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    font-size: 11px;
    font-weight: 600;
}

.clear-all-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
}

    .clear-all-btn:hover[b-wvfks31io8] {
        color: var(--color-danger, #d32f2f);
        border-color: var(--color-danger, #d32f2f);
        background: var(--color-danger-light, #fef2f2);
    }

.filter-result-count[b-wvfks31io8] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    white-space: nowrap;
}

/* ── Inline Column Filters & Sort ───────────── */
.th-content[b-wvfks31io8] {
    display: flex;
    flex-direction: column;
}

.th-label-row[b-wvfks31io8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 4px;
    cursor: pointer;
    user-select: none;
    gap: 4px;
    white-space: nowrap;
}

    .th-label-row:hover[b-wvfks31io8] {
        color: var(--color-primary, #6366f1);
    }

    .th-label-row:hover .sort-icon[b-wvfks31io8] {
        opacity: 1;
    }

.th-filter-row[b-wvfks31io8] {
    padding: 0 8px 8px;
}

    .th-filter-row select[b-wvfks31io8],
    .th-filter-row input[b-wvfks31io8] {
        width: 100%;
        padding: 4px 6px;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 4px;
        font-size: 11px;
        color: var(--color-text-primary, #24292e);
        background: var(--color-surface, #fff);
        outline: none;
        transition: border-color 0.15s;
    }

    .th-filter-row select:focus[b-wvfks31io8],
    .th-filter-row input:focus[b-wvfks31io8] {
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
    }

    .th-filter-row select.has-value[b-wvfks31io8],
    .th-filter-row input.has-value[b-wvfks31io8] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #f5f3ff);
    }

.sort-icon[b-wvfks31io8] {
    font-size: 14px;
    opacity: 0.35;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

    .sort-icon.active[b-wvfks31io8] {
        opacity: 1;
        color: var(--color-primary, #6366f1);
    }

/* ── Column Resize Handles ────────────────────── */
.col-resize-handle[b-wvfks31io8] {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    transition: background-color 0.15s ease;
}

    .col-resize-handle:hover[b-wvfks31io8],
    .col-resize-handle.active[b-wvfks31io8] {
        background-color: var(--color-primary, #6366f1);
    }

/* ── Column Picker ───────────────────────────── */
.column-picker-container[b-wvfks31io8] {
    position: relative;
    display: inline-block;
}

.column-picker-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .column-picker-btn:hover[b-wvfks31io8] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
        background: var(--color-gray-50, #f6f8fa);
    }

    .column-picker-btn i.rotated[b-wvfks31io8] {
        transform: rotate(180deg);
    }

    .column-picker-btn i[b-wvfks31io8] {
        font-size: 14px;
        transition: transform 0.2s ease;
    }

.column-picker-overlay[b-wvfks31io8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
}

.column-picker-dropdown[b-wvfks31io8] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 99;
    /* Cap height + scroll so a long column list never runs off the bottom of the
       viewport with no way to reach the columns below the fold (Reported By, dates, …). */
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Flipped above the button — toggled by tableColumnInterop.placeColumnMenu when there's
   no room below. (The JS also caps max-height to the space available on that side.) */
.column-picker-dropdown.drop-up[b-wvfks31io8] {
    top: auto;
    bottom: calc(100% + 4px);
}

.column-picker-header[b-wvfks31io8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
}

.column-picker-reset[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

    .column-picker-reset:hover[b-wvfks31io8] {
        background: var(--color-gray-100, #eef0f2);
        color: var(--color-primary, #6366f1);
    }

.column-picker-item[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
    transition: background-color 0.1s ease;
    margin: 0;
}

    .column-picker-item:hover[b-wvfks31io8] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .column-picker-item input[type="checkbox"][b-wvfks31io8] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary, #6366f1);
        cursor: pointer;
        margin: 0;
    }

/* Picker footer with secondary actions — currently houses a single
   "Reset column widths" link, separated from the checkbox list by a
   thin divider so it doesn't look like another toggle. The header
   icon (counter-clockwise arrow) still does a full reset; this one
   is scoped to widths so a user can recover from a botched resize
   without losing their column-visibility curation. */
.column-picker-footer[b-wvfks31io8] {
    border-top: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
    padding: 4px;
}

.column-picker-footer-btn[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #586069);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: all 0.15s ease;
}

.column-picker-footer-btn i[b-wvfks31io8] {
    font-size: 14px;
    flex-shrink: 0;
}

.column-picker-footer-btn:hover[b-wvfks31io8] {
    background: var(--color-gray-100, #eef0f2);
    color: var(--color-primary, #6366f1);
}

/* ── Group By Bar ───────────────────────────── */
.group-by-bar[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-gray-50, #f6f8fa);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-wrap: wrap;
}

.group-by-label[b-wvfks31io8] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-pill[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #d0d7de);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.pill-order[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, white);
    font-size: 10px;
    font-weight: 700;
}

.pill-remove[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}

    .pill-remove:hover[b-wvfks31io8] {
        background: var(--color-danger-light, #fee2e2);
        color: var(--color-danger, #dc2626);
    }

.group-pill-arrow[b-wvfks31io8] {
    color: var(--color-text-secondary, #586069);
    font-size: 12px;
}

.group-add-container[b-wvfks31io8] {
    position: relative;
    display: inline-block;
}

.group-add-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: transparent;
    border: 1px dashed var(--color-border, #d0d7de);
    border-radius: 20px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
}

    .group-add-btn:hover[b-wvfks31io8] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #eef2ff);
    }

.group-add-overlay[b-wvfks31io8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
}

.group-add-dropdown[b-wvfks31io8] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 99;
    overflow: hidden;
}

.group-add-option[b-wvfks31io8] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
    cursor: pointer;
    transition: background-color 0.1s;
}

    .group-add-option:hover[b-wvfks31io8] {
        background: var(--color-gray-50, #f6f8fa);
    }

.group-clear-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
    margin-left: auto;
}

    .group-clear-btn:hover[b-wvfks31io8] {
        color: var(--color-danger, #dc2626);
        background: var(--color-danger-light, #fef2f2);
        border-color: var(--color-danger-light, #fecaca);
    }

    .group-clear-btn i[b-wvfks31io8] {
        font-size: 12px;
    }

/* ── Group Headers ──────────────────────────── */
.group-header-l1[b-wvfks31io8] {
    background: var(--color-gray-50, #f6f8fa);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

    .group-header-l1:hover[b-wvfks31io8] {
        background: var(--color-border, #eef0f2);
    }

    .group-header-l1 td[b-wvfks31io8] {
        padding: 10px 20px;
        font-weight: 600;
        font-size: 13px;
        color: var(--color-text-primary, #24292e);
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

.group-header-l2[b-wvfks31io8] {
    background: var(--color-gray-100, #fbfcfd);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

    .group-header-l2:hover[b-wvfks31io8] {
        background: var(--color-gray-100, #f0f2f5);
    }

    .group-header-l2 td[b-wvfks31io8] {
        padding: 8px 20px;
        font-weight: 600;
        font-size: 12px;
        color: var(--color-text-secondary, #4b5563);
        border-bottom: 1px solid var(--color-border, #f0f2f5);
    }
    /* indent only the name cell; the aligned total cells keep normal padding
       so they line up under their data columns */
    .group-header-l2 td:first-child[b-wvfks31io8] { padding-left: 48px; }

.group-header-content[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-chevron[b-wvfks31io8] {
    display: inline-flex;
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    transition: transform 0.2s;
    width: 16px;
}

    .group-chevron.collapsed[b-wvfks31io8] {
        transform: rotate(-90deg);
    }

.group-name[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-label-text[b-wvfks31io8] {
    font-weight: 600;
    font-size: 13px;
}

.group-count[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--color-border, #eef0f2);
    color: var(--color-text-secondary, #586069);
    font-size: 11px;
    font-weight: 600;
}

.group-count-sm[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-border, #eef0f2);
    color: var(--color-text-secondary, #586069);
    font-size: 10px;
    font-weight: 600;
}

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

    .section-grid[b-wvfks31io8] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-item[b-wvfks31io8] {
        grid-column: span 1 !important;
    }
}

@media (max-width: 768px) {
    .stats-grid[b-wvfks31io8] {
        grid-template-columns: 1fr;
    }

    .section-grid[b-wvfks31io8] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Table Widget ─────────────────────────────────────────────────────────── */
.table-widget[b-wvfks31io8] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface, white);
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
    overflow: hidden;
    height: 100%;
}

.table-widget-header[b-wvfks31io8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #f9fafb);
    flex-shrink: 0;
}

.table-widget-title[b-wvfks31io8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #111827);
}

    .table-widget-title i[b-wvfks31io8] {
        color: var(--color-info, #0891b2);
    }

.table-widget-meta[b-wvfks31io8] {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.table-widget-scroll[b-wvfks31io8] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 400px;
    flex: 1;
    min-height: 0;
}

.table-widget-grid[b-wvfks31io8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}

    .table-widget-grid thead[b-wvfks31io8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table-widget-grid th[b-wvfks31io8] {
        background: var(--surface, #f3f4f6);
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-secondary, #374151);
        border-bottom: 2px solid var(--border, #e5e7eb);
        white-space: nowrap;
    }

    .table-widget-grid td[b-wvfks31io8] {
        padding: 7px 12px;
        border-bottom: 1px solid var(--border-light, #f3f4f6);
        color: var(--text-primary, #111827);
        white-space: nowrap;
    }

    .table-widget-grid tbody tr:hover[b-wvfks31io8] {
        background: var(--hover, #f9fafb);
    }

.table-widget-footer[b-wvfks31io8] {
    padding: 8px 14px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    border-top: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #f9fafb);
    text-align: center;
}

.table-widget-loading[b-wvfks31io8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--text-secondary, #9ca3af);
    font-size: 13px;
}

.table-grid-item[b-wvfks31io8] {
    min-width: 0;
}

/* ── "Include closed" toggle in header + count strip ──────── */
.closed-toggle[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary, #475569);
    user-select: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}

    .closed-toggle:hover[b-wvfks31io8] {
        background: var(--color-gray-50, #f1f5f9);
    }

    .closed-toggle.active[b-wvfks31io8] {
        background: var(--color-primary-light, #eef2ff);
        color: var(--color-primary-hover, #4338ca);
        border-color: var(--color-primary-light, #c7d2fe);
        font-weight: 600;
    }

    .closed-toggle.disabled[b-wvfks31io8] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .closed-toggle input[b-wvfks31io8] {
        width: 14px;
        height: 14px;
        accent-color: var(--color-primary, #6366f1);
        cursor: pointer;
        flex-shrink: 0;
    }

.closed-toggle-hint[b-wvfks31io8] {
    color: var(--color-text-muted, #94a3b8);
    cursor: help;
    font-size: 13px;
}

.closed-hidden-line[b-wvfks31io8] {
    padding: 8px 16px;
    background: var(--color-gray-50, #fafbff);
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .closed-hidden-line strong[b-wvfks31io8] {
        color: var(--color-text-primary, #0f172a);
        font-weight: 700;
    }

.closed-hidden-pill[b-wvfks31io8] {
    color: var(--color-warning-text, #92400e);
    background: var(--color-warning-light, #fef3c7);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}

.closed-hidden-link[b-wvfks31io8] {
    background: none;
    border: none;
    color: var(--color-primary, #6366f1);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    padding: 0;
}

    .closed-hidden-link:hover[b-wvfks31io8] {
        color: var(--color-primary-hover, #4338ca);
    }

.closed-hidden-sep[b-wvfks31io8] {
    color: var(--color-text-muted, #cbd5e1);
}

/* ── Bulk select column (Phase 5) ─────────────────────── */
.data-table .bulk-select-col[b-wvfks31io8] {
    width: 36px;
    padding: 0 8px;
    text-align: center;
}

.bulk-select-checkbox[b-wvfks31io8] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary, #6366f1);
}

.data-table tbody tr.bulk-selected td[b-wvfks31io8] {
    background: color-mix(in srgb, #6366f1 8%, transparent);
}

    .data-table tbody tr.bulk-selected td:first-child[b-wvfks31io8] {
        box-shadow: inset 3px 0 0 var(--color-primary, #6366f1);
    }

/* ─────────────────────────────────────────────────────────────────────
   Internal-ticket row treatment (Dashboard scope).
   Lock-only — no gradient. The earlier gradient-on-td approach
   restarted at each cell boundary, producing a striped artifact
   instead of a clean wash. Same rule lives in Tickets.razor.css
   (duplicated because Blazor scoped CSS won't cross components).
   ─────────────────────────────────────────────────────────────────── */
.internal-lock[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    color: var(--color-warning-text, #b45309);
    vertical-align: middle;
}

.internal-lock i[b-wvfks31io8] {
    font-size: 12px;
    line-height: 1;
}

/* ── Collapsible KPI row: header bar + compact strip ──────────────── */
.kpi-bar[b-wvfks31io8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.kpi-bar-toggle[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--color-text-secondary, #586069);
}

.kpi-chevron[b-wvfks31io8] {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.kpi-bar.collapsed .kpi-chevron[b-wvfks31io8] {
    transform: rotate(-90deg);
}

.kpi-bar-title[b-wvfks31io8] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-bar-hint[b-wvfks31io8] {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}

.kpi-bar-actions[b-wvfks31io8] {
    display: inline-flex;
    gap: 4px;
    background: var(--color-gray-100, #f1f3f5);
    border-radius: 8px;
    padding: 3px;
}

.kpi-view-btn[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    font-size: 15px;
}

.kpi-view-btn:hover[b-wvfks31io8] {
    color: var(--color-text-primary, #24292e);
}

.kpi-view-btn.on[b-wvfks31io8] {
    background: var(--color-surface, #fff);
    color: var(--color-primary, #0366d6);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Compact strip: one thin row of value + label, colored per KPI. */
.kpi-strip[b-wvfks31io8] {
    display: flex;
    flex-wrap: wrap;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.kpi-strip-cell[b-wvfks31io8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 16px;
    border-right: 1px solid var(--color-border, #e1e4e8);
    cursor: pointer;
}

.kpi-strip-cell:last-child[b-wvfks31io8] {
    border-right: 0;
}

.kpi-strip-cell:hover[b-wvfks31io8] {
    background: var(--color-gray-50, #f9fafb);
}

.kpi-strip-cell .ksv[b-wvfks31io8] {
    font-weight: 800;
    font-size: 16px;
    color: var(--kc, var(--color-primary, #0366d6));
    letter-spacing: -0.01em;
}

.kpi-strip-cell .ksk[b-wvfks31io8] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

/* "Show all N" row shown when an expanded group's rows are capped (perf).
   Clicking it lifts the cap for that one group. */
.group-more-row[b-wvfks31io8] {
    cursor: pointer;
    background: var(--color-background, #fafbfc);
}
.group-more-row:hover[b-wvfks31io8] {
    background: var(--color-gray-100, #f6f8fa);
}
.group-more-row td[b-wvfks31io8] {
    padding: 10px 20px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    text-align: center;
}
.group-more-row .group-more-link[b-wvfks31io8] {
    color: var(--color-primary, #0366d6);
    font-weight: 600;
}
.group-more-row .ph[b-wvfks31io8] {
    margin-right: 4px;
    vertical-align: middle;
}

/* ── Grouped headers: field chip + per-level colour (cards + chips) ──
   Each level has a colour (--grp-lvl-N, site.css, user-overridable). It drives
   a left spine (the card edge that runs down the whole subgroup — header + its
   rows), the field chip, and the count badge for that level. */
.group-header-l1[b-wvfks31io8] { --grp-c: var(--grp-lvl-1, #0072b2); }
.group-header-l2[b-wvfks31io8] { --grp-c: var(--grp-lvl-2, #d55e00); }

.group-header-l1 td:first-child[b-wvfks31io8] { border-left: 3px solid var(--grp-c); }
.group-header-l2 td:first-child[b-wvfks31io8] { border-left: 3px solid var(--grp-c); }

/* the field this level groups by, e.g. ORGANIZATION / MODULE */
.group-field-chip[b-wvfks31io8] {
    display: inline-flex;
    align-items: center;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--grp-c) 15%, var(--color-surface, #fff));
    color: var(--grp-c);
}

.group-header-l1 .group-count[b-wvfks31io8],
.group-header-l2 .group-count-sm[b-wvfks31io8] {
    background: color-mix(in srgb, var(--grp-c) 16%, var(--color-surface, #fff));
    color: var(--grp-c);
}

/* "show all N" tail row keeps the spine so the card edge stays continuous */
.group-more-row td[b-wvfks31io8] { border-left: 3px solid var(--grp-lvl-2, #d55e00); }


/* Drag to reorder the GROUP BY pills (highlight class toggled in JS) */
.group-pill[b-wvfks31io8] { cursor: grab; }
.group-pill:active[b-wvfks31io8] { cursor: grabbing; }
.group-pill.group-pill-over[b-wvfks31io8] {
    outline: 2px dashed var(--color-primary, #0366d6);
    outline-offset: 2px;
}


/* ── Group totals / aggregations ─────────────────────────── */
/* header chips (mode: header / both) */
.total-chips[b-wvfks31io8] { display:inline-flex; gap:6px; margin-left:8px; }
.total-chip[b-wvfks31io8] {
    font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px;
    background: color-mix(in srgb, var(--color-text-secondary, #586069) 12%, var(--color-surface, #fff));
    color: var(--color-text-primary, #24292e);
    white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* footer subtotal rows (mode: footer / both) + grand total */
.totals-row td[b-wvfks31io8] {
    padding:8px 14px; font-size:12.5px; font-weight:700;
    border-bottom:1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #f8fafc);
    font-variant-numeric:tabular-nums;
}
.totals-row .totals-label[b-wvfks31io8] {
    text-transform:uppercase; font-size:10.5px; letter-spacing:.5px;
    color: var(--color-text-secondary, #586069); font-weight:700;
}
.totals-l1 td[b-wvfks31io8] { background: color-mix(in srgb, var(--grp-lvl-1, #0072b2) 7%, var(--color-surface, #fff)); }
.totals-l1 td:first-child[b-wvfks31io8] { border-left:3px solid var(--grp-lvl-1, #0072b2); }
.totals-l2 td[b-wvfks31io8] { background: color-mix(in srgb, var(--grp-lvl-2, #c2410c) 7%, var(--color-surface, #fff)); }
.totals-l2 td:first-child[b-wvfks31io8] { border-left:3px solid var(--grp-lvl-2, #c2410c); }
.totals-grand td[b-wvfks31io8] {
    background: color-mix(in srgb, var(--color-text-secondary, #334155) 9%, var(--color-surface, #fff));
    border-top:2px solid var(--color-text-secondary, #334155); font-weight:800;
}
.totals-grand .totals-label[b-wvfks31io8] { color: var(--color-text-primary, #24292e); }

/* config panel (the "Σ Totals" button in the group-by bar) */
.totals-config-container[b-wvfks31io8] { position:relative; display:inline-block; }
.totals-config-btn[b-wvfks31io8] {
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--color-border, #e1e4e8); background:var(--color-surface, #fff);
    color:var(--color-text-secondary, #586069); padding:6px 12px; border-radius:999px;
    font-size:13px; font-weight:600; cursor:pointer;
}
.totals-config-btn:hover[b-wvfks31io8] { border-color:var(--color-primary, #0366d6); color:var(--color-primary, #0366d6); }
.totals-config-btn.active[b-wvfks31io8] { border-color:var(--color-primary, #0366d6); color:var(--color-primary, #0366d6); background:color-mix(in srgb, var(--color-primary, #0366d6) 8%, var(--color-surface, #fff)); }
.totals-sigma[b-wvfks31io8] { font-weight:800; }
.totals-panel[b-wvfks31io8] {
    position:absolute; z-index:1000; top:calc(100% + 6px); left:0; width:232px;
    background:var(--color-surface, #fff); border:1px solid var(--color-border, #e1e4e8);
    border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.14); padding:12px;
}
.totals-panel-title[b-wvfks31io8] { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted, #8b949e); margin-bottom:8px; }
.totals-panel-title.tp-mt[b-wvfks31io8] { margin-top:12px; }
.totals-panel-row[b-wvfks31io8] { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.tp-col[b-wvfks31io8] { font-size:13px; font-weight:600; }
.tp-select[b-wvfks31io8] { font-size:13px; padding:4px 8px; border:1px solid var(--color-border, #e1e4e8); border-radius:6px; background:var(--color-surface, #fff); color:var(--color-text-primary, #24292e); }
.tp-mode[b-wvfks31io8] { width:100%; }


/* ── Per-column aggregation (Σ on the column header) ─────────── */
.col-agg-circle[b-wvfks31io8] {
    margin-left: 4px; flex: none;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--color-border, #e1e4e8); background: var(--color-surface, #fff);
    color: var(--color-text-muted, #8b949e); font-weight: 800; font-size: 10px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s, background .12s, color .12s, border-color .12s;
}
.data-table th:hover .col-agg-circle[b-wvfks31io8] { opacity: 1; }
.col-agg-circle:hover[b-wvfks31io8] { border-color: var(--agg, #7c3aed); color: var(--agg, #7c3aed); }
.col-agg-circle.aggd[b-wvfks31io8] { opacity: 1; background: var(--agg, #7c3aed); border-color: var(--agg, #7c3aed); color: #fff; }

.agg-dropdown-overlay[b-wvfks31io8] { position: fixed; inset: 0; z-index: 1400; }
.agg-dropdown-floating[b-wvfks31io8] {
    position: fixed; z-index: 1401; width: 190px;
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16); overflow: hidden; padding: 4px 0;
}
.agg-dd-title[b-wvfks31io8] { font-size: 13px; font-weight: 700; padding: 8px 14px 6px; color: var(--color-text-primary, #24292e); }
.agg-dropdown-floating button[b-wvfks31io8] {
    display: block; width: 100%; text-align: left; border: none; background: transparent;
    padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--color-text-primary, #24292e);
}
.agg-dropdown-floating button:hover[b-wvfks31io8] { background: var(--color-gray-100, #f3f5f7); }
.agg-dropdown-floating button.selected[b-wvfks31io8] { background: color-mix(in srgb, var(--color-primary, #0366d6) 12%, var(--color-surface, #fff)); color: var(--color-primary, #0366d6); font-weight: 600; }

/* display-mode toggle in the group-by bar */
.totals-mode-toggle[b-wvfks31io8] { display: inline-flex; border: 1px solid var(--color-border, #e1e4e8); border-radius: 999px; overflow: hidden; }
.totals-mode-toggle button[b-wvfks31io8] { border: none; background: var(--color-surface, #fff); color: var(--color-text-secondary, #586069); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.totals-mode-toggle button.on[b-wvfks31io8] { background: var(--color-primary, #0366d6); color: #fff; }

/* header chip = column label + value; footer cell shows a small function tag */
.total-chip .tc-col[b-wvfks31io8] { color: var(--color-text-secondary, #586069); font-weight: 600; margin-right: 2px; }
.totals-fn[b-wvfks31io8] { font-size: 9px; color: var(--color-text-muted, #8b949e); margin-left: 5px; font-weight: 700; }


/* ── Click-to-aggregate: title trigger + Σ chip ──────────────── */
.th-sort-btn[b-wvfks31io8] { cursor: pointer; display: inline-flex; margin-left: 2px; }
.th-label-clickable[b-wvfks31io8] { cursor: pointer; border-radius: 5px; padding: 1px 4px; }
.th-label-clickable:hover[b-wvfks31io8] { background: color-mix(in srgb, var(--agg, #7c3aed) 14%, var(--color-surface, #fff)); color: var(--agg, #7c3aed); }
.th-label-aggd[b-wvfks31io8] {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--agg, #7c3aed); color: #fff;
    border-radius: 6px; padding: 3px 9px; cursor: pointer; font-weight: 800;
}
.th-label-aggd .agg-sig[b-wvfks31io8] { font-weight: 800; }
.th-label-aggd .agg-fn[b-wvfks31io8] { font-size: 9px; opacity: .85; }

/* aggregate cells rendered ON the group header rows + grand total, aligned
   (left, to match the left-aligned data cells) under their columns */
.group-header-l1 .totals-cell[b-wvfks31io8],
.group-header-l2 .totals-cell[b-wvfks31io8],
.totals-grand .totals-cell[b-wvfks31io8] {
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--color-text-primary, #24292e);
}
/* grand-total row cells: 20px horizontal padding so they align with data columns */
.totals-row td[b-wvfks31io8] { padding: 8px 20px; }

/* /Pages/ForgotPassword.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Forgot Password Page — matches Login + Verify2FA design language
   Single-column, centered card. Aurora + glassy logo + glass card.
   ═══════════════════════════════════════════════════════════════ */

.login-page[b-u8sp804d45] {
    --brand-ink: #0a1929;
    --brand-muted: #5b6b80;
    --brand-primary-dark: color-mix(in srgb, var(--brand-primary, #0052CC) 78%, #000);
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary, #0052CC) 12%, #fff);

    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    color: var(--brand-ink);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ───────────────── Aurora blobs ───────────────── */
.aurora[b-u8sp804d45] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
}

.aurora-1[b-u8sp804d45] {
    width: 500px;
    height: 500px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 55%, transparent);
    top: -120px;
    right: -120px;
    animation: aurora-drift-1-b-u8sp804d45 28s ease-in-out infinite alternate;
}

.aurora-2[b-u8sp804d45] {
    width: 460px;
    height: 460px;
    background: color-mix(in srgb, var(--brand-accent, #1A8AC4) 50%, transparent);
    bottom: -120px;
    left: -100px;
    animation: aurora-drift-2-b-u8sp804d45 34s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1-b-u8sp804d45 {
    0%   { transform: translate(0, 0)         scale(1); }
    50%  { transform: translate(-120px, 80px) scale(1.15); }
    100% { transform: translate(60px, 140px)  scale(0.9); }
}

@keyframes aurora-drift-2-b-u8sp804d45 {
    0%   { transform: translate(0, 0)          scale(1); }
    50%  { transform: translate(140px, -80px)  scale(1.1); }
    100% { transform: translate(-80px, -140px) scale(0.95); }
}

/* ───────────────── Centered wrap ───────────────── */
.auth-wrap[b-u8sp804d45] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    overflow-y: auto;
}

/* ───────────────── Card ───────────────── */
.login-card[b-u8sp804d45] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 12px 32px -8px rgba(15, 23, 42, 0.18),
        0 30px 60px -20px rgba(15, 23, 42, 0.25);
    animation: card-in-b-u8sp804d45 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .login-card[b-u8sp804d45]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-primary, #0052CC) 40%, transparent) 0%,
            color-mix(in srgb, var(--brand-accent, #1A8AC4) 15%, transparent) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }

@keyframes card-in-b-u8sp804d45 {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───────────────── Floating logo + shimmer ───────────────── */
.brand-tile[b-u8sp804d45] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0 auto 20px;
    filter:
        drop-shadow(0 4px 6px rgba(15, 23, 42, 0.10))
        drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18));
}

    .brand-tile[b-u8sp804d45]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.75) 50%,
            transparent 70%);
        background-size: 220% 100%;
        background-position: -120% 0;
        mix-blend-mode: screen;
        animation: brand-shimmer-b-u8sp804d45 7s ease-in-out infinite;
        animation-delay: 2s;
        pointer-events: none;
    }

.brand-tile-text[b-u8sp804d45] {
    font-weight: 800;
    font-size: 42px;
    letter-spacing: 0.5px;
    color: var(--brand-primary, #0052CC);
    line-height: 1;
}

.brand-tile-img[b-u8sp804d45] {
    display: block;
    max-width: 200px;
    max-height: 90px;
    object-fit: contain;
}

@keyframes brand-shimmer-b-u8sp804d45 {
    0%   { background-position: -120% 0; }
    50%  { background-position:  120% 0; }
    100% { background-position:  120% 0; }
}

/* ───────────────── Lead icon (above title) ───────────────── */
.lead-icon[b-u8sp804d45] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 4px auto 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 12%, white);
    color: var(--brand-primary, #0052CC);
    font-size: 22px;
}

/* ───────────────── Card text ───────────────── */
.card-title[b-u8sp804d45] {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--brand-ink);
}

.card-sub[b-u8sp804d45] {
    color: var(--brand-muted);
    font-size: 14px;
    margin: 0 0 26px;
    line-height: 1.55;
}

    .card-sub strong[b-u8sp804d45] {
        color: var(--brand-ink);
        font-weight: 700;
    }

/* ───────────────── Form ───────────────── */
.login-form[b-u8sp804d45] {
    margin: 0;
    text-align: left;
}

.field[b-u8sp804d45] {
    margin-bottom: 18px;
}

.field-label[b-u8sp804d45] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.field-input[b-u8sp804d45] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    color: var(--brand-ink);
    background: var(--color-surface, #fff);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .field-input[b-u8sp804d45]::placeholder {
        color: var(--color-text-muted, #94a3b8);
    }

    .field-input:focus[b-u8sp804d45] {
        outline: 0;
        border-color: var(--brand-primary, #0052CC);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #0052CC) 12%, transparent);
    }

    .field-input:disabled[b-u8sp804d45] {
        background: var(--color-gray-100, #f8fafc);
        cursor: not-allowed;
        opacity: 0.7;
    }

/* ───────────────── Submit ───────────────── */
.submit-btn[b-u8sp804d45] {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary, #0052CC), var(--brand-primary-dark));
    color: var(--color-text-inverse, #fff);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary, #0052CC) 25%, transparent);
}

    .submit-btn:hover:not(:disabled)[b-u8sp804d45] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px color-mix(in srgb, var(--brand-primary, #0052CC) 35%, transparent);
    }

    .submit-btn:active:not(:disabled)[b-u8sp804d45] {
        transform: translateY(0);
    }

    .submit-btn:disabled[b-u8sp804d45] {
        cursor: not-allowed;
        filter: saturate(0.7);
        opacity: 0.85;
    }

    .submit-btn i[b-u8sp804d45] {
        font-size: 16px;
    }

    .submit-btn .spinning[b-u8sp804d45] {
        animation: spin-b-u8sp804d45 0.9s linear infinite;
    }

@keyframes spin-b-u8sp804d45 {
    to { transform: rotate(360deg); }
}

/* ───────────────── Alert ───────────────── */
.login-alert[b-u8sp804d45] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 10px;
    color: var(--color-danger-text, #991b1b);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

    .login-alert > i[b-u8sp804d45] {
        font-size: 18px;
        flex-shrink: 0;
        color: var(--color-danger, #dc2626);
        margin-top: 1px;
    }

    .login-alert span[b-u8sp804d45] {
        flex: 1;
    }

.alert-close[b-u8sp804d45] {
    background: transparent;
    border: 0;
    color: var(--color-danger-text, #991b1b);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}

    .alert-close:hover[b-u8sp804d45] {
        background: rgba(153, 27, 27, 0.1);
    }

/* ───────────────── Success state ───────────────── */
.success-state .success-icon[b-u8sp804d45] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: color-mix(in srgb, #10b981 14%, white);
    color: var(--color-success, #10b981);
    font-size: 32px;
    animation: pop-in-b-u8sp804d45 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.success-state .hint[b-u8sp804d45] {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--color-gray-100, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    font-size: 12px;
    color: var(--brand-muted);
    line-height: 1.5;
}

@keyframes pop-in-b-u8sp804d45 {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* ───────────────── Foot ───────────────── */
.card-foot[b-u8sp804d45] {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    font-size: 13px;
}

.link[b-u8sp804d45] {
    color: var(--brand-primary, #0052CC);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .link:hover[b-u8sp804d45] {
        text-decoration: underline;
    }

    .link i[b-u8sp804d45] {
        font-size: 14px;
    }

/* ───────────────── Responsive ───────────────── */
@media (max-width: 600px) {
    .auth-wrap[b-u8sp804d45] {
        padding: 20px 16px;
    }

    .login-card[b-u8sp804d45] {
        padding: 28px 22px;
    }

    .card-title[b-u8sp804d45] {
        font-size: 22px;
    }

    .aurora-1[b-u8sp804d45] {
        width: 320px;
        height: 320px;
    }

    .aurora-2[b-u8sp804d45] {
        width: 300px;
        height: 300px;
    }
}

/* ───────────────── Reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .aurora-1[b-u8sp804d45],
    .aurora-2[b-u8sp804d45],
    .brand-tile[b-u8sp804d45]::after,
    .login-card[b-u8sp804d45],
    .submit-btn .spinning[b-u8sp804d45],
    .success-state .success-icon[b-u8sp804d45] {
        animation: none !important;
    }
}
/* /Pages/KBApprovals.razor.rz.scp.css */
.container[b-9z4j601cbc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.loading-icon[b-9z4j601cbc] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--color-primary, #0366d6);
}

.drafts-list[b-9z4j601cbc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.draft-card[b-9z4j601cbc] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.2s;
}

    .draft-card:hover[b-9z4j601cbc] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.draft-header[b-9z4j601cbc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.draft-meta[b-9z4j601cbc] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.draft-number[b-9z4j601cbc] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 12px;
    background: var(--color-primary-light, #f0f7ff);
    padding: 4px 10px;
    border-radius: 4px;
}

.draft-date[b-9z4j601cbc] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.draft-title[b-9z4j601cbc] {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 12px;
}

.draft-info[b-9z4j601cbc] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 16px;
}

    .draft-info i[b-9z4j601cbc] {
        margin-right: 4px;
    }

.draft-actions[b-9z4j601cbc] {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

/* Modal styles */
.modal[b-9z4j601cbc] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    .modal.active[b-9z4j601cbc] {
        display: flex;
    }

.modal-content[b-9z4j601cbc] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    /* Flex column so the footer (Approve/Reject/Close) stays pinned and only
       the body scrolls — previously the whole modal scrolled, pushing the
       buttons below the fold on tall content. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-large[b-9z4j601cbc] {
    max-width: 900px;
}

.modal-header[b-9z4j601cbc] {
    padding: 18px 20px 18px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.modal-title[b-9z4j601cbc] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close[b-9z4j601cbc] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    font-size: 20px;
    line-height: 1;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

    .modal-close:hover[b-9z4j601cbc] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-body[b-9z4j601cbc] {
    padding: 24px;
    /* The only scroll region — keeps the pinned footer always visible. */
    overflow-y: auto;
    flex: 1 1 auto;
}

.modal-footer[b-9z4j601cbc] {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.review-meta[b-9z4j601cbc] {
    background: var(--color-gray-100, #f6f8fa);
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

    .review-meta > div[b-9z4j601cbc] {
        margin-bottom: 8px;
    }

        .review-meta > div:last-child[b-9z4j601cbc] {
            margin-bottom: 0;
        }

.review-content[b-9z4j601cbc] {
    margin-bottom: 20px;
}

    .review-content h4[b-9z4j601cbc] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--color-text-primary, #24292e);
    }

.content-preview[b-9z4j601cbc] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    padding: 20px;
    /* Trimmed from 400px so the review modal stays compact and the footer
       buttons are reachable without scrolling on shorter screens. */
    max-height: 260px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}

.review-attachments[b-9z4j601cbc],
.review-history[b-9z4j601cbc] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

    .review-attachments h4[b-9z4j601cbc],
    .review-history h4[b-9z4j601cbc] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
    }

.attachment-item[b-9z4j601cbc] {
    padding: 8px 12px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.attachment-file-icon[b-9z4j601cbc] {
    font-size: 16px;
    color: var(--color-text-secondary, #586069);
}

.history-item[b-9z4j601cbc] {
    padding: 12px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
}

    .history-item .success[b-9z4j601cbc] {
        color: var(--color-success, #10b981);
        font-weight: 600;
    }

    .history-item .danger[b-9z4j601cbc] {
        color: var(--color-danger, #d73a49);
        font-weight: 600;
    }

.history-comments[b-9z4j601cbc] {
    margin-top: 8px;
    padding: 8px;
    background: var(--color-surface, white);
    border-left: 3px solid var(--color-primary, #0366d6);
    font-style: italic;
    color: var(--color-text-secondary, #586069);
}

.confirm-info[b-9z4j601cbc] {
    background: var(--color-gray-100, #f6f8fa);
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

    .confirm-info strong[b-9z4j601cbc] {
        display: block;
        margin-bottom: 4px;
    }

.form-group[b-9z4j601cbc] {
    margin-bottom: 16px;
}

.form-label[b-9z4j601cbc] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.form-input[b-9z4j601cbc] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

    .form-input:focus[b-9z4j601cbc] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

.loading[b-9z4j601cbc] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}
/* /Pages/KBArticleView.razor.rz.scp.css */
.container[b-klmnfx2n0s] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.loading-icon[b-klmnfx2n0s] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--color-primary, #0366d6);
}

.back-link[b-klmnfx2n0s] {
    background: none;
    border: none;
    color: var(--color-primary, #0366d6);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .back-link:hover[b-klmnfx2n0s] {
        text-decoration: underline;
    }

/* Slim sticky toolbar (Option C) */
.article-toolbar[b-klmnfx2n0s] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    margin-bottom: 14px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
}

.tb-back[b-klmnfx2n0s], .tb-btn[b-klmnfx2n0s] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #d0d7de);
    color: var(--color-text-primary, #24292e);
    border-radius: 6px;
    cursor: pointer;
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

    .tb-back[b-klmnfx2n0s] {
        border: none;
        background: transparent;
        color: var(--color-text-secondary, #586069);
        font-size: 16px;
    }

    .tb-back:hover[b-klmnfx2n0s], .tb-btn:hover[b-klmnfx2n0s] {
        background: var(--color-gray-100, #eaeef2);
    }

.tb-title[b-klmnfx2n0s] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.tb-num[b-klmnfx2n0s] {
    font-family: 'Consolas', monospace;
    font-size: 12px;
    color: var(--color-text-muted, #8b949e);
}

.tb-spacer[b-klmnfx2n0s] {
    flex: 1;
}

.tb-more[b-klmnfx2n0s] {
    position: relative;
    display: inline-flex;
}

.tb-menu-backdrop[b-klmnfx2n0s] {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}

.tb-menu[b-klmnfx2n0s] {
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 30;
    min-width: 168px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(27, 31, 35, 0.12);
    padding: 4px;
}

.tb-menu-item[b-klmnfx2n0s] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
}

    .tb-menu-item:hover[b-klmnfx2n0s] {
        background: var(--color-gray-100, #f6f8fa);
    }

.tb-menu-danger[b-klmnfx2n0s] {
    color: var(--color-danger, #d73a49);
}

    .tb-menu-danger:hover[b-klmnfx2n0s] {
        background: var(--color-danger-light, #ffeef0);
    }

.article-header-section[b-klmnfx2n0s] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.article-meta-bar[b-klmnfx2n0s] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.article-number[b-klmnfx2n0s] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
    background: var(--color-primary-light, #f0f7ff);
    padding: 4px 10px;
    border-radius: 4px;
}

.view-count[b-klmnfx2n0s] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-main-title[b-klmnfx2n0s] {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 8px;
    line-height: 1.3;
}

.article-meta-info[b-klmnfx2n0s] {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    padding-top: 0;
    flex-wrap: wrap;
}

    .article-meta-info i[b-klmnfx2n0s] {
        margin-right: 4px;
    }

.source-ticket-link[b-klmnfx2n0s] {
    color: var(--color-primary, #0366d6);
    text-decoration: none;
    font-weight: 500;
}

    .source-ticket-link:hover[b-klmnfx2n0s] {
        text-decoration: underline;
    }

.article-actions[b-klmnfx2n0s] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.article-content-section[b-klmnfx2n0s] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 24px;
}

.article-body[b-klmnfx2n0s] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-primary, #24292e);
}

    .article-body h1[b-klmnfx2n0s] {
        font-size: 28px;
        font-weight: 700;
        margin: 32px 0 16px;
        color: var(--color-text-primary, #24292e);
    }

    .article-body h2[b-klmnfx2n0s] {
        font-size: 24px;
        font-weight: 600;
        margin: 28px 0 14px;
        color: var(--color-text-primary, #24292e);
    }

    .article-body h3[b-klmnfx2n0s] {
        font-size: 20px;
        font-weight: 600;
        margin: 24px 0 12px;
        color: var(--color-text-primary, #24292e);
    }

    .article-body p[b-klmnfx2n0s] {
        margin-bottom: 16px;
    }

    .article-body ul[b-klmnfx2n0s],
    .article-body ol[b-klmnfx2n0s] {
        margin: 16px 0;
        padding-left: 32px;
    }

    .article-body li[b-klmnfx2n0s] {
        margin-bottom: 8px;
    }

    .article-body code[b-klmnfx2n0s] {
        background: var(--color-gray-100, #f6f8fa);
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Consolas', monospace;
        font-size: 14px;
    }

    .article-body pre[b-klmnfx2n0s] {
        background: var(--color-gray-100, #f6f8fa);
        padding: 16px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 16px 0;
    }

        .article-body pre code[b-klmnfx2n0s] {
            background: none;
            padding: 0;
        }

.card-icon[b-klmnfx2n0s] {
    font-size: 18px;
    color: var(--color-text-secondary, #586069);
}

.attachments-list[b-klmnfx2n0s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attachment-item[b-klmnfx2n0s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    background: var(--color-gray-100, #fafbfc);
}

.attachment-icon[b-klmnfx2n0s] {
    font-size: 28px;
    flex-shrink: 0;
    color: var(--color-text-secondary, #586069);
}

.attachment-info[b-klmnfx2n0s] {
    flex: 1;
}

.attachment-name[b-klmnfx2n0s] {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.attachment-meta[b-klmnfx2n0s] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.download-link[b-klmnfx2n0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    background: var(--color-surface, white);
    text-decoration: none;
    transition: all 0.2s;
}

    .download-link:hover[b-klmnfx2n0s] {
        background: var(--color-gray-100, #f6f8fa);
    }

.rating-summary[b-klmnfx2n0s] {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}

.avg-rating[b-klmnfx2n0s] {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary, #0366d6);
}

.rating-count[b-klmnfx2n0s] {
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    margin-top: 8px;
}

.rating-stars[b-klmnfx2n0s] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.star[b-klmnfx2n0s] {
    font-size: 40px;
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s;
    color: var(--color-warning, #f59e0b);
}

    .star:hover[b-klmnfx2n0s],
    .star.selected[b-klmnfx2n0s] {
        opacity: 1;
        transform: scale(1.2);
    }

.rating-form[b-klmnfx2n0s] {
    margin-top: 20px;
}

    .rating-form .form-input[b-klmnfx2n0s] {
        margin-bottom: 12px;
    }

.form-input[b-klmnfx2n0s] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-klmnfx2n0s] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

.loading[b-klmnfx2n0s] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}
/* /Pages/KBCreateDraft.razor.rz.scp.css */
.container[b-g8siry19we] {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.page-header-area[b-g8siry19we] {
}

.alert-area[b-g8siry19we] {
}

.back-link[b-g8siry19we] {
    background: none;
    border: none;
    color: var(--color-primary, #0366d6);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .back-link:hover[b-g8siry19we] {
        text-decoration: underline;
    }

.form-container[b-g8siry19we] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 32px;
}

.form-section[b-g8siry19we] {
    margin-bottom: 32px;
}

.form-group[b-g8siry19we] {
    margin-bottom: 20px;
}

.form-row[b-g8siry19we] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label[b-g8siry19we] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.form-input[b-g8siry19we],
.form-select[b-g8siry19we] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-g8siry19we],
    .form-select:focus[b-g8siry19we] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

/* ===== Content Header with Toggle ===== */
.content-header[b-g8siry19we] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

    .content-header .mode-toggle[b-g8siry19we] {
        margin-left: auto;
    }

    .content-header .form-label[b-g8siry19we] {
        margin-bottom: 0;
    }

.mode-toggle[b-g8siry19we] {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.mode-label[b-g8siry19we] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted, #959da5);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

.active-label[b-g8siry19we] {
    color: var(--color-text-primary, #24292e);
}

.toggle-switch[b-g8siry19we] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    margin: 0;
}

    .toggle-switch input[b-g8siry19we] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-slider[b-g8siry19we] {
    position: absolute;
    inset: 0;
    background: var(--color-primary, #0366d6);
    border-radius: 24px;
    transition: background 0.2s;
}

    .toggle-slider[b-g8siry19we]::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background: var(--color-surface, white);
        border-radius: 50%;
        top: 3px;
        left: 3px;
        transition: transform 0.2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

.toggle-switch input:checked + .toggle-slider[b-g8siry19we]::before {
    transform: translateX(20px);
}

/* ===== Panel Animation ===== */
.panel-animate[b-g8siry19we] {
    animation: panelFadeIn-b-g8siry19we 0.2s ease;
}

@keyframes panelFadeIn-b-g8siry19we {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* ===== Editor Help ===== */
.editor-help[b-g8siry19we] {
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Preview Panel (inline) ===== */
.preview-panel[b-g8siry19we] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    overflow: hidden;
}

.preview-bar[b-g8siry19we] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-gray-100, #f6f8fa);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
}

.preview-content[b-g8siry19we] {
    padding: 24px;
    min-height: 300px;
}

.preview-title[b-g8siry19we] {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 16px;
}

.preview-placeholder[b-g8siry19we] {
    color: var(--color-text-secondary, #586069);
    font-style: italic;
}

.preview-body[b-g8siry19we] {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary, #24292e);
}

    .preview-body h1[b-g8siry19we],
    .preview-body h2[b-g8siry19we],
    .preview-body h3[b-g8siry19we] {
        margin-top: 20px;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .preview-body p[b-g8siry19we] {
        margin-bottom: 12px;
    }

    .preview-body code[b-g8siry19we] {
        background: var(--color-gray-100, #f6f8fa);
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Consolas', monospace;
        font-size: 13px;
    }

    .preview-body ul[b-g8siry19we],
    .preview-body ol[b-g8siry19we] {
        margin: 12px 0;
        padding-left: 24px;
    }

    .preview-body img[b-g8siry19we] {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin: 8px 0;
    }

    .preview-body blockquote[b-g8siry19we] {
        border-left: 4px solid var(--color-border, #e1e4e8);
        padding-left: 16px;
        margin: 12px 0;
        color: var(--color-text-secondary, #586069);
    }

/* ===== Attachments ===== */
.upload-zone[b-g8siry19we] {
    border: 2px dashed var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-gray-100, #fafbfc);
}

    .upload-zone:hover[b-g8siry19we] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-primary-light, #f0f7ff);
    }

.upload-icon[b-g8siry19we] {
    font-size: 40px;
    margin-bottom: 8px;
    color: var(--color-text-secondary, #586069);
}

.upload-text[b-g8siry19we] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.upload-hint[b-g8siry19we] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.pending-files[b-g8siry19we] {
    margin-top: 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    overflow: hidden;
}

.pending-files-header[b-g8siry19we] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-gray-100, #f6f8fa);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    font-size: 13px;
}

.pending-file-item[b-g8siry19we] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .pending-file-item:last-child[b-g8siry19we] {
        border-bottom: none;
    }

.pending-file-icon[b-g8siry19we] {
    font-size: 24px;
    flex-shrink: 0;
    color: var(--color-text-secondary, #586069);
}

.pending-file-info[b-g8siry19we] {
    flex: 1;
}

.pending-file-name[b-g8siry19we] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.pending-file-size[b-g8siry19we] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.btn-remove[b-g8siry19we] {
    width: 28px;
    height: 28px;
    background: var(--color-danger-light, #ffeef0);
    color: var(--color-danger, #d73a49);
    border: 1px solid var(--color-danger, #d73a49);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-remove:hover[b-g8siry19we] {
        background: var(--color-danger, #d73a49);
        color: var(--color-text-inverse, white);
    }

.btn-link[b-g8siry19we] {
    background: none;
    border: none;
    color: var(--color-primary, #0366d6);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.source-ticket-info[b-g8siry19we] {
    display: flex;
    align-items: center;
    padding: 12px;
}

.form-actions[b-g8siry19we] {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

/* ===== AI Draft Message ===== */
.ai-draft-message[b-g8siry19we] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    animation: panelFadeIn-b-g8siry19we 0.2s ease;
}

.ai-success[b-g8siry19we] {
    background: var(--color-success-light, #dcffe4);
    color: var(--color-success, #22863a);
    border: 1px solid var(--color-success-light, #bef5cb);
}

.ai-error[b-g8siry19we] {
    background: var(--color-danger-light, #ffeef0);
    color: var(--color-danger, #d73a49);
    border: 1px solid var(--color-danger-light, #fdaeb7);
}

/* ===== AI Refinement Bar ===== */
.refinement-bar[b-g8siry19we] {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--color-accent-ai-light, #f5f0ff);
    border: 1px solid var(--color-accent-ai-light, #e0d4f5);
    border-radius: 8px;
}

.refinement-bar-header[b-g8siry19we] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-ai, #6f42c1);
    margin-bottom: 10px;
}

.refinement-dismiss[b-g8siry19we] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-accent-ai, #6f42c1);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
}

    .refinement-dismiss:hover[b-g8siry19we] {
        opacity: 1;
    }

.refinement-bar-input[b-g8siry19we] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.refinement-input[b-g8siry19we] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-accent-ai-light, #e0d4f5);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--color-surface, white);
}

    .refinement-input:focus[b-g8siry19we] {
        outline: none;
        border-color: var(--color-accent-ai, #6f42c1);
        box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
    }

    .refinement-input:disabled[b-g8siry19we] {
        background: var(--color-gray-100, #f6f8fa);
        opacity: 0.7;
    }

    .refinement-input[b-g8siry19we]::placeholder {
        color: var(--color-text-muted, #959da5);
        font-style: italic;
    }
/* /Pages/KBDraftView.razor.rz.scp.css */
.container[b-ynxjl9jft8] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.loading-icon[b-ynxjl9jft8] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--color-primary, #0366d6);
}

.back-link[b-ynxjl9jft8] {
    background: none;
    border: none;
    color: var(--color-primary, #0366d6);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .back-link:hover[b-ynxjl9jft8] {
        text-decoration: underline;
    }

.draft-header-section[b-ynxjl9jft8] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 24px;
}

.draft-meta-bar[b-ynxjl9jft8] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.draft-number[b-ynxjl9jft8] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
    background: var(--color-primary-light, #f0f7ff);
    padding: 4px 10px;
    border-radius: 4px;
}

.draft-main-title[b-ynxjl9jft8] {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 16px;
    line-height: 1.3;
}

.draft-meta-info[b-ynxjl9jft8] {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    flex-wrap: wrap;
}

    .draft-meta-info i[b-ynxjl9jft8] {
        margin-right: 4px;
    }

.source-ticket-link[b-ynxjl9jft8] {
    color: var(--color-primary, #0366d6);
    text-decoration: none;
    font-weight: 500;
}

    .source-ticket-link:hover[b-ynxjl9jft8] {
        text-decoration: underline;
    }

.draft-actions[b-ynxjl9jft8] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.draft-content-section[b-ynxjl9jft8] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 24px;
}

.draft-body[b-ynxjl9jft8] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-primary, #24292e);
}

    .draft-body h1[b-ynxjl9jft8] {
        font-size: 28px;
        font-weight: 700;
        margin: 32px 0 16px;
        color: var(--color-text-primary, #24292e);
    }

    .draft-body h2[b-ynxjl9jft8] {
        font-size: 24px;
        font-weight: 600;
        margin: 28px 0 14px;
        color: var(--color-text-primary, #24292e);
    }

    .draft-body h3[b-ynxjl9jft8] {
        font-size: 20px;
        font-weight: 600;
        margin: 24px 0 12px;
        color: var(--color-text-primary, #24292e);
    }

    .draft-body p[b-ynxjl9jft8] {
        margin-bottom: 16px;
    }

    .draft-body ul[b-ynxjl9jft8], .draft-body ol[b-ynxjl9jft8] {
        margin: 16px 0;
        padding-left: 32px;
    }

    .draft-body li[b-ynxjl9jft8] {
        margin-bottom: 8px;
    }

    .draft-body code[b-ynxjl9jft8] {
        background: var(--color-gray-100, #f6f8fa);
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Consolas', monospace;
        font-size: 14px;
    }

    .draft-body pre[b-ynxjl9jft8] {
        background: var(--color-gray-100, #f6f8fa);
        padding: 16px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 16px 0;
    }

        .draft-body pre code[b-ynxjl9jft8] {
            background: none;
            padding: 0;
        }

.card-icon[b-ynxjl9jft8] {
    font-size: 18px;
    color: var(--color-text-secondary, #586069);
}

.attachments-list[b-ynxjl9jft8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attachment-item[b-ynxjl9jft8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    background: var(--color-gray-100, #fafbfc);
}

.attachment-icon[b-ynxjl9jft8] {
    font-size: 28px;
    flex-shrink: 0;
    color: var(--color-text-secondary, #586069);
}

.attachment-info[b-ynxjl9jft8] {
    flex: 1;
}

.attachment-name[b-ynxjl9jft8] {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.attachment-meta[b-ynxjl9jft8] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.download-link[b-ynxjl9jft8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    background: var(--color-surface, white);
    text-decoration: none;
    transition: all 0.2s;
}

    .download-link:hover[b-ynxjl9jft8] {
        background: var(--color-gray-100, #f6f8fa);
    }

.history-item[b-ynxjl9jft8] {
    padding: 16px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: 6px;
    margin-bottom: 12px;
}

    .history-item:last-child[b-ynxjl9jft8] {
        margin-bottom: 0;
    }

.history-header[b-ynxjl9jft8] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.history-reviewer[b-ynxjl9jft8] {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
}

.history-action[b-ynxjl9jft8] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .history-action.success[b-ynxjl9jft8] {
        background: var(--color-success-light, #d1fae5);
        color: var(--color-success-text, #065f46);
    }

    .history-action.rejected[b-ynxjl9jft8] {
        background: var(--color-danger-light, #ffeef0);
        color: var(--color-danger, #d73a49);
    }

.history-date[b-ynxjl9jft8] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-left: auto;
}

.history-comments[b-ynxjl9jft8] {
    padding: 12px;
    background: var(--color-surface, white);
    border-left: 3px solid var(--color-primary, #0366d6);
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    line-height: 1.5;
}

    .history-comments strong[b-ynxjl9jft8] {
        color: var(--color-primary, #0366d6);
        margin-right: 8px;
    }

.status-message[b-ynxjl9jft8] {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 2px solid;
    align-items: flex-start;
}

.status-icon[b-ynxjl9jft8] {
    font-size: 32px;
    flex-shrink: 0;
}

.status-text strong[b-ynxjl9jft8] {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

.status-text p[b-ynxjl9jft8] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.status-message.pending[b-ynxjl9jft8] {
    background: var(--color-warning-light, #fff9e6);
    border-color: var(--color-warning, #f59e0b);
    color: var(--color-warning-text, #92400e);
}

.status-message.rejected[b-ynxjl9jft8] {
    background: var(--color-danger-light, #ffeef0);
    border-color: var(--color-danger, #d73a49);
    color: var(--color-danger, #86181d);
}

.status-message.approved[b-ynxjl9jft8] {
    background: var(--color-success-light, #e6f9f0);
    border-color: var(--color-success, #10b981);
    color: var(--color-success-text, #065f46);
}

/* Modal */
.modal[b-ynxjl9jft8] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    .modal.active[b-ynxjl9jft8] {
        display: flex;
    }

.modal-content[b-ynxjl9jft8] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
}

.modal-header[b-ynxjl9jft8] {
    padding: 20px 48px 20px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    align-items: center;
}

.modal-title[b-ynxjl9jft8] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close[b-ynxjl9jft8] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 1;
}

    .modal-close:hover[b-ynxjl9jft8] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-body[b-ynxjl9jft8] {
    padding: 24px;
}

.modal-footer[b-ynxjl9jft8] {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirm-info[b-ynxjl9jft8] {
    background: var(--color-gray-100, #f6f8fa);
    padding: 16px;
    border-radius: 6px;
    margin-top: 16px;
}

    .confirm-info strong[b-ynxjl9jft8] {
        display: block;
        margin-bottom: 8px;
    }

.warning-text[b-ynxjl9jft8] {
    color: var(--color-danger, #d73a49);
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loading[b-ynxjl9jft8] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}
/* /Pages/KBMyDrafts.razor.rz.scp.css */
.container[b-2olylhf8m0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.loading-icon[b-2olylhf8m0] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--color-primary, #0366d6);
}

.filter-tabs[b-2olylhf8m0] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border, #e1e4e8);
    padding-bottom: 0;
}

.tab[b-2olylhf8m0] {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .tab:hover[b-2olylhf8m0] {
        color: var(--color-text-primary, #24292e);
        border-bottom-color: var(--color-border, #d1d5da);
    }

    .tab.active[b-2olylhf8m0] {
        color: var(--color-primary, #0366d6);
        border-bottom-color: var(--color-primary, #0366d6);
    }

.drafts-grid[b-2olylhf8m0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

.draft-card[b-2olylhf8m0] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

    .draft-card:hover[b-2olylhf8m0] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .draft-card.Draft[b-2olylhf8m0] {
        border-left: 4px solid var(--color-text-secondary, #6b7280);
    }

    .draft-card.Pending[b-2olylhf8m0] {
        border-left: 4px solid var(--color-warning, #f59e0b);
    }

    .draft-card.Approved[b-2olylhf8m0] {
        border-left: 4px solid var(--color-success, #10b981);
    }

    .draft-card.Rejected[b-2olylhf8m0] {
        border-left: 4px solid var(--color-danger, #d73a49);
    }

.draft-card-header[b-2olylhf8m0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.draft-meta[b-2olylhf8m0] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.draft-number[b-2olylhf8m0] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 11px;
    background: var(--color-primary-light, #f0f7ff);
    padding: 4px 8px;
    border-radius: 4px;
}

.draft-title[b-2olylhf8m0] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 12px;
    cursor: pointer;
    line-height: 1.4;
}

    .draft-title:hover[b-2olylhf8m0] {
        color: var(--color-primary, #0366d6);
    }

.draft-info[b-2olylhf8m0] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .draft-info i[b-2olylhf8m0] {
        margin-right: 2px;
    }

.draft-actions[b-2olylhf8m0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
}

.status-text[b-2olylhf8m0] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Modal */
.modal[b-2olylhf8m0] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    .modal.active[b-2olylhf8m0] {
        display: flex;
    }

.modal-content[b-2olylhf8m0] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
}

.modal-header[b-2olylhf8m0] {
    padding: 20px 48px 20px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    align-items: center;
}

.modal-title[b-2olylhf8m0] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close[b-2olylhf8m0] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 1;
}

    .modal-close:hover[b-2olylhf8m0] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-body[b-2olylhf8m0] {
    padding: 24px;
}

.modal-footer[b-2olylhf8m0] {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirm-info[b-2olylhf8m0] {
    background: var(--color-gray-100, #f6f8fa);
    padding: 16px;
    border-radius: 6px;
    margin-top: 16px;
}

    .confirm-info strong[b-2olylhf8m0] {
        display: block;
        margin-bottom: 8px;
    }

.warning-text[b-2olylhf8m0] {
    color: var(--color-danger, #d73a49);
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loading[b-2olylhf8m0] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}

@media (max-width: 768px) {
    .drafts-grid[b-2olylhf8m0] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/KnowledgeBase.razor.rz.scp.css */
/* Filters */
.filters-section[b-7s5rn5dt1k] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 20px;
    margin-bottom: 24px;
    margin-top: 8px;
}

.filters-bar[b-7s5rn5dt1k] {
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    gap: 16px;
    align-items: end;
}

.filter-group[b-7s5rn5dt1k] {
    display: flex;
    flex-direction: column;
}

.filter-label[b-7s5rn5dt1k] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 8px;
}

.filter-input[b-7s5rn5dt1k],
.filter-select[b-7s5rn5dt1k] {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface, white);
}

    .filter-input:focus[b-7s5rn5dt1k],
    .filter-select:focus[b-7s5rn5dt1k] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

/* View Toggle */
.view-toggle[b-7s5rn5dt1k] {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}

.view-btn[b-7s5rn5dt1k] {
    padding: 8px 16px;
    border: none;
    background: var(--color-surface, white);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    color: var(--color-text-secondary, #586069);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .view-btn:hover[b-7s5rn5dt1k] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .view-btn.active[b-7s5rn5dt1k] {
        background: var(--color-primary, #0366d6);
        color: white;
    }

/* Stats */
.stats-bar[b-7s5rn5dt1k] {
    padding: 12px 0;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.semantic-hint[b-7s5rn5dt1k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary, #6f42c1);
    font-size: 13px;
    font-weight: 500;
}

/* Module Groups */
.module-section[b-7s5rn5dt1k] {
    margin-bottom: 40px;
}

.module-header[b-7s5rn5dt1k] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border, #e1e4e8);
    display: flex;
    align-items: center;
    gap: 12px;
}

    .module-header i[b-7s5rn5dt1k] {
        font-size: 24px;
        color: var(--color-primary, #0366d6);
    }

.module-count[b-7s5rn5dt1k] {
    font-size: 16px;
    color: var(--color-text-secondary, #586069);
    font-weight: 500;
}

/* Grid View */
.articles-grid[b-7s5rn5dt1k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.article-card[b-7s5rn5dt1k] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

    .article-card:hover[b-7s5rn5dt1k] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.article-header[b-7s5rn5dt1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.article-number[b-7s5rn5dt1k] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 12px;
    background: var(--color-primary-bg, #f0f7ff);
    padding: 4px 8px;
    border-radius: 4px;
}

.article-title[b-7s5rn5dt1k] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta[b-7s5rn5dt1k] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

    .article-meta span[b-7s5rn5dt1k] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.article-footer[b-7s5rn5dt1k] {
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

    .article-footer span[b-7s5rn5dt1k] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

/* List View */
.articles-list[b-7s5rn5dt1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-list-item[b-7s5rn5dt1k] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
}

    .article-list-item:hover[b-7s5rn5dt1k] {
        border-color: var(--color-primary, #0366d6);
        background: var(--color-gray-50, #f6f8fa);
    }

.article-list-left[b-7s5rn5dt1k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-list-content[b-7s5rn5dt1k] {
    flex: 1;
    min-width: 0;
}

.article-list-title[b-7s5rn5dt1k] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-list-meta[b-7s5rn5dt1k] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

    .article-list-meta span[b-7s5rn5dt1k] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.article-list-right[b-7s5rn5dt1k] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

    .article-list-right span[b-7s5rn5dt1k] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

/* Loading */
.loading[b-7s5rn5dt1k] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
}

/* Responsive */
@media (max-width: 1024px) {
    .filters-bar[b-7s5rn5dt1k] {
        grid-template-columns: 1fr 1fr;
    }

    .articles-grid[b-7s5rn5dt1k] {
        grid-template-columns: 1fr;
    }

    .article-list-item[b-7s5rn5dt1k] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .article-list-right[b-7s5rn5dt1k] {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .filters-bar[b-7s5rn5dt1k] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Login Page — A1 + Aurora (V1)
   - Brand colors wired from BrandingService via inline custom props
   - Aurora drifting gradient blobs in the background
   - Stagger-fade reveal on mount
   - Brand-tile shimmer sweep
   - Respects prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */

.login-page[b-3a6sw3bk6x] {
    /* Local ink/muted tokens — these don't come from branding */
    --brand-ink: #0a1929;
    --brand-muted: #5b6b80;
    --brand-primary-dark: color-mix(in srgb, var(--brand-primary, #0052CC) 78%, #000);
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary, #0052CC) 12%, #fff);

    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    color: var(--brand-ink);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ───────────────── Aurora blobs ───────────────── */
.aurora[b-3a6sw3bk6x] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
}

.aurora-1[b-3a6sw3bk6x] {
    width: 500px;
    height: 500px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 55%, transparent);
    top: -120px;
    right: -120px;
    animation: aurora-drift-1-b-3a6sw3bk6x 28s ease-in-out infinite alternate;
}

.aurora-2[b-3a6sw3bk6x] {
    width: 460px;
    height: 460px;
    background: color-mix(in srgb, var(--brand-accent, #1A8AC4) 50%, transparent);
    bottom: -120px;
    left: -100px;
    animation: aurora-drift-2-b-3a6sw3bk6x 34s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1-b-3a6sw3bk6x {
    0%   { transform: translate(0, 0)         scale(1); }
    50%  { transform: translate(-120px, 80px) scale(1.15); }
    100% { transform: translate(60px, 140px)  scale(0.9); }
}

@keyframes aurora-drift-2-b-3a6sw3bk6x {
    0%   { transform: translate(0, 0)          scale(1); }
    50%  { transform: translate(140px, -80px)  scale(1.1); }
    100% { transform: translate(-80px, -140px) scale(0.95); }
}

/* ───────────────── Grid ───────────────── */
.login-grid[b-3a6sw3bk6x] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.login-page.form-only .login-grid[b-3a6sw3bk6x] {
    grid-template-columns: 1fr;
}

.login-left[b-3a6sw3bk6x],
.login-right[b-3a6sw3bk6x] {
    padding: 48px 56px;
    min-width: 0;
}

.login-left[b-3a6sw3bk6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ───────────── Login-page announcements ───────────── */
/* Read-only notices rendered above the sign-in card. Constrained to the card's
   width and coloured by type via the shared Alert (theme tokens, no hardcoded hex). */
.login-announcements[b-3a6sw3bk6x] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: card-in-b-3a6sw3bk6x 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-announcement-title[b-3a6sw3bk6x] {
    font-weight: 700;
    margin-bottom: 2px;
}

/* The body is sanitized Quill HTML; keep block spacing tight. ::deep reaches into
   the Alert child component's rendered content. */
.login-announcement-body[b-3a6sw3bk6x] (p) {
    margin: 0 0 6px 0;
}

.login-announcement-body[b-3a6sw3bk6x] (p:last-child) {
    margin-bottom: 0;
}

.login-announcement-body[b-3a6sw3bk6x] (img) {
    max-width: 100%;
    height: auto;
}

.login-right[b-3a6sw3bk6x] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

/* ───────────────── Card ───────────────── */
.login-card[b-3a6sw3bk6x] {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 12px 32px -8px rgba(15, 23, 42, 0.18),
        0 30px 60px -20px rgba(15, 23, 42, 0.25);
    animation: card-in-b-3a6sw3bk6x 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .login-card[b-3a6sw3bk6x]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-primary, #0052CC) 40%, transparent) 0%,
            color-mix(in srgb, var(--brand-accent, #1A8AC4) 15%, transparent) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }

@keyframes card-in-b-3a6sw3bk6x {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───────────────── Logo with glassy shimmer overlay ─────────────────
   No tile around the logo. The ::after pseudo-element lays a moving
   white gradient over the logo's bounding box and `mix-blend-mode: screen`
   ensures it only brightens pixels where the logo is opaque — so the
   shimmer follows the logo's silhouette, not a square.
   The drop-shadow filter gives the raised "floating" effect.
   ──────────────────────────────────────────────────────────────────── */
.brand-tile[b-3a6sw3bk6x] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-bottom: 26px;
    /* Stacked shadows = raised feel without a tile */
    filter:
        drop-shadow(0 4px 6px rgba(15, 23, 42, 0.10))
        drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18));
}

    /* Animated shimmer sweep — clipped to logo shape via blend mode */
    .brand-tile[b-3a6sw3bk6x]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.75) 50%,
            transparent 70%);
        background-size: 220% 100%;
        background-position: -120% 0;
        mix-blend-mode: screen;
        animation: brand-shimmer-b-3a6sw3bk6x 7s ease-in-out infinite;
        animation-delay: 2s;
        pointer-events: none;
    }

.brand-tile-text[b-3a6sw3bk6x] {
    font-weight: 800;
    font-size: 42px;
    letter-spacing: 0.5px;
    color: var(--brand-primary, #0052CC);
    line-height: 1;
}

.brand-tile-img[b-3a6sw3bk6x] {
    display: block;
    max-width: 200px;
    max-height: 90px;
    object-fit: contain;
}

@keyframes brand-shimmer-b-3a6sw3bk6x {
    0%   { background-position: -120% 0; }
    50%  { background-position:  120% 0; }
    100% { background-position:  120% 0; }
}

/* ───────────────── Card text ───────────────── */
.card-title[b-3a6sw3bk6x] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 6px;
    color: var(--brand-ink);
}

.card-sub[b-3a6sw3bk6x] {
    color: var(--brand-muted);
    font-size: 14px;
    margin: 0 0 26px;
}

/* Trademark / registered-mark superscript rendered next to the company
   name (card subtitle "Sign in to your <Brand>® account" and the right-
   panel eyebrow "<Brand>® Support Portal"). Tuned smaller and lighter
   so the mark doesn't dominate the logotype. */
.card-sub .brand-mark[b-3a6sw3bk6x],
.eyebrow .brand-mark[b-3a6sw3bk6x] {
    font-size: 0.6em;
    font-weight: 500;
    margin-left: 1px;
    opacity: 0.75;
    vertical-align: super;
    line-height: 0;
}

/* ───────────────── Form ───────────────── */
.login-form[b-3a6sw3bk6x] {
    margin: 0;
}

.field[b-3a6sw3bk6x] {
    margin-bottom: 14px;
}

.field-label[b-3a6sw3bk6x] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.field-input[b-3a6sw3bk6x] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    color: var(--brand-ink);
    background: var(--color-surface, #fff);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .field-input[b-3a6sw3bk6x]::placeholder {
        color: var(--color-text-muted, #94a3b8);
    }

    .field-input:focus[b-3a6sw3bk6x] {
        outline: 0;
        border-color: var(--brand-primary, #0052CC);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #0052CC) 12%, transparent);
    }

    .field-input:disabled[b-3a6sw3bk6x] {
        background: var(--color-gray-100, #f8fafc);
        cursor: not-allowed;
        opacity: 0.7;
    }

.options-row[b-3a6sw3bk6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin: 14px 0 22px;
    color: var(--brand-muted);
}

.remember[b-3a6sw3bk6x] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

    .remember input[b-3a6sw3bk6x] {
        cursor: pointer;
        accent-color: var(--brand-primary, #0052CC);
    }

.link[b-3a6sw3bk6x] {
    color: var(--brand-primary, #0052CC);
    text-decoration: none;
    font-weight: 600;
}

    .link:hover[b-3a6sw3bk6x] {
        text-decoration: underline;
    }

/* ───────────────── Submit ───────────────── */
.submit-btn[b-3a6sw3bk6x] {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary, #0052CC), var(--brand-primary-dark));
    color: var(--color-text-inverse, #fff);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary, #0052CC) 25%, transparent);
}

    .submit-btn:hover:not(:disabled)[b-3a6sw3bk6x] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px color-mix(in srgb, var(--brand-primary, #0052CC) 35%, transparent);
    }

    .submit-btn:active:not(:disabled)[b-3a6sw3bk6x] {
        transform: translateY(0);
    }

    .submit-btn:disabled[b-3a6sw3bk6x] {
        cursor: not-allowed;
        filter: saturate(0.7);
        opacity: 0.85;
    }

    .submit-btn i[b-3a6sw3bk6x] {
        font-size: 16px;
    }

    .submit-btn .spinning[b-3a6sw3bk6x] {
        animation: spin-b-3a6sw3bk6x 0.9s linear infinite;
    }

@keyframes spin-b-3a6sw3bk6x {
    to { transform: rotate(360deg); }
}

/* ───────────────── Alert ───────────────── */
.login-alert[b-3a6sw3bk6x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 10px;
    color: var(--color-danger-text, #991b1b);
    font-size: 13px;
    line-height: 1.45;
}

    .login-alert > i[b-3a6sw3bk6x] {
        font-size: 18px;
        flex-shrink: 0;
        color: var(--color-danger, #dc2626);
        margin-top: 1px;
    }

    .login-alert span[b-3a6sw3bk6x] {
        flex: 1;
    }

.alert-close[b-3a6sw3bk6x] {
    background: transparent;
    border: 0;
    color: var(--color-danger-text, #991b1b);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}

    .alert-close:hover[b-3a6sw3bk6x] {
        background: rgba(153, 27, 27, 0.1);
    }

/* ───────────────── Foot ───────────────── */
.card-foot[b-3a6sw3bk6x] {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 22px;
}

    .card-foot .link[b-3a6sw3bk6x] {
        font-size: 12px;
    }

/* ───────────────── Right panel ───────────────── */
.eyebrow[b-3a6sw3bk6x] {
    color: var(--brand-primary, #0052CC);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.headline[b-3a6sw3bk6x] {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
    background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-primary, #0052CC) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-headline[b-3a6sw3bk6x] {
    font-size: 15px;
    color: var(--brand-muted);
    line-height: 1.6;
    max-width: 460px;
    margin: 0;
}

.stats[b-3a6sw3bk6x] {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 36px;
    margin-top: 12px;
}

.stat-n[b-3a6sw3bk6x] {
    font-size: 26px;
    font-weight: 800;
    color: var(--brand-ink);
    letter-spacing: -0.02em;
}

.stat-l[b-3a6sw3bk6x] {
    font-size: 11px;
    color: var(--brand-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Stagger-fade reveal of right-panel content */
.login-right > *[b-3a6sw3bk6x] {
    opacity: 0;
    animation: fade-up-b-3a6sw3bk6x 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-right > *:nth-child(1)[b-3a6sw3bk6x] { animation-delay: 0.20s; }
.login-right > *:nth-child(2)[b-3a6sw3bk6x] { animation-delay: 0.32s; }
.login-right > *:nth-child(3)[b-3a6sw3bk6x] { animation-delay: 0.44s; }
.login-right > *:nth-child(4)[b-3a6sw3bk6x] { animation-delay: 0.56s; }

@keyframes fade-up-b-3a6sw3bk6x {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────── Responsive ───────────────── */
@media (max-width: 968px) {
    .login-grid[b-3a6sw3bk6x] {
        grid-template-columns: 1fr;
    }

    .login-right[b-3a6sw3bk6x] {
        display: none;
    }

    .login-left[b-3a6sw3bk6x],
    .login-right[b-3a6sw3bk6x] {
        padding: 32px 20px;
    }

    .login-card[b-3a6sw3bk6x] {
        padding: 32px 24px;
    }

    .headline[b-3a6sw3bk6x] {
        font-size: 32px;
    }

    .aurora-1[b-3a6sw3bk6x] {
        width: 320px;
        height: 320px;
    }

    .aurora-2[b-3a6sw3bk6x] {
        width: 300px;
        height: 300px;
    }
}

/* ───────────────── Reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .aurora-1[b-3a6sw3bk6x],
    .aurora-2[b-3a6sw3bk6x],
    .brand-tile[b-3a6sw3bk6x]::after,
    .login-card[b-3a6sw3bk6x],
    .login-right > *[b-3a6sw3bk6x],
    .submit-btn .spinning[b-3a6sw3bk6x] {
        animation: none !important;
    }

    .login-right > *[b-3a6sw3bk6x] {
        opacity: 1;
    }
}
/* /Pages/MediaGallery.razor.rz.scp.css */
/* ============================================
   Media Gallery Lightbox
   ============================================ */

.media-gallery-overlay[b-9ujxrfb10x] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.media-gallery-content[b-9ujxrfb10x] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 80px 110px;
}

/* Close button */
.media-gallery-close[b-9ujxrfb10x] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}

    .media-gallery-close:hover[b-9ujxrfb10x] {
        background: rgba(255, 255, 255, 0.2);
    }

/* Counter */
.media-gallery-counter[b-9ujxrfb10x] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 16px;
    border-radius: 20px;
    z-index: 10;
}

/* Navigation arrows */
.media-gallery-nav[b-9ujxrfb10x] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

    .media-gallery-nav:hover[b-9ujxrfb10x] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-50%) scale(1.05);
    }

.media-gallery-prev[b-9ujxrfb10x] {
    left: 16px;
}

.media-gallery-next[b-9ujxrfb10x] {
    right: 16px;
}

/* Main display */
.media-gallery-display[b-9ujxrfb10x] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
}

.media-gallery-image[b-9ujxrfb10x] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    user-select: none;
}

.media-gallery-video[b-9ujxrfb10x] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    background: black;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Info bar */
.media-gallery-info[b-9ujxrfb10x] {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: 10px;
    max-width: 80%;
    min-width: 300px;
    z-index: 10;
}

.media-gallery-title[b-9ujxrfb10x] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .media-gallery-title i[b-9ujxrfb10x] {
        font-size: 16px;
        opacity: 0.7;
    }

.media-gallery-meta[b-9ujxrfb10x] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    white-space: nowrap;
}

.media-gallery-download[b-9ujxrfb10x] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
    font-size: 13px;
}

    .media-gallery-download:hover[b-9ujxrfb10x] {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

/* Thumbnail strip */
.media-gallery-thumbnails[b-9ujxrfb10x] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    max-width: 90%;
    overflow-x: auto;
    z-index: 10;
}

    .media-gallery-thumbnails[b-9ujxrfb10x]::-webkit-scrollbar {
        display: none;
    }

.media-gallery-thumb[b-9ujxrfb10x] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
}

    .media-gallery-thumb:hover[b-9ujxrfb10x] {
        border-color: rgba(255, 255, 255, 0.5);
    }

    .media-gallery-thumb.active[b-9ujxrfb10x] {
        border-color: white;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
    }

    .media-gallery-thumb img[b-9ujxrfb10x] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.media-gallery-thumb-video[b-9ujxrfb10x] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .media-gallery-content[b-9ujxrfb10x] {
        padding: 50px 16px 100px;
    }

    .media-gallery-nav[b-9ujxrfb10x] {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .media-gallery-prev[b-9ujxrfb10x] {
        left: 8px;
    }

    .media-gallery-next[b-9ujxrfb10x] {
        right: 8px;
    }

    .media-gallery-info[b-9ujxrfb10x] {
        flex-direction: column;
        gap: 8px;
        min-width: auto;
        max-width: 95%;
    }
}
/* /Pages/MyNotifications.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   My Notifications — User-facing Page
   ═══════════════════════════════════════════════ */

.notifications-page[b-wmzbpew5xl] {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Notification List ─────────────────────────── */
.notification-list[b-wmzbpew5xl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border, #e1e4e8);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    margin-bottom: 16px;
}

.notification-card[b-wmzbpew5xl] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-surface, white);
    cursor: pointer;
    transition: background 0.15s;
}

    .notification-card:hover[b-wmzbpew5xl] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .notification-card.notification-failed[b-wmzbpew5xl] {
        background: var(--color-danger-light, #fef2f2);
    }

        .notification-card.notification-failed:hover[b-wmzbpew5xl] {
            background: var(--color-danger-light, #fee2e2);
        }

/* ── Notification Icon ─────────────────────────── */
.notif-icon[b-wmzbpew5xl] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.notif-ticket[b-wmzbpew5xl] {
    background: #dbeafe;
    color: #2563eb;
}

.notif-scheduler[b-wmzbpew5xl] {
    background: #f3e8ff;
    color: #7c3aed;
}

.notif-kb[b-wmzbpew5xl] {
    background: #fef3c7;
    color: #d97706;
}

.notif-default[b-wmzbpew5xl] {
    background: #f3f4f6;
    color: #6b7280;
}

.notif-failed[b-wmzbpew5xl] {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Notification Body ─────────────────────────── */
.notification-body[b-wmzbpew5xl] {
    flex: 1;
    min-width: 0;
}

.notification-subject[b-wmzbpew5xl] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.notification-meta[b-wmzbpew5xl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-attach[b-wmzbpew5xl] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    display: flex;
    align-items: center;
    gap: 3px;
}

.meta-ticket[b-wmzbpew5xl] {
    font-size: 11px;
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: var(--color-primary, #0366d6);
    cursor: pointer;
}

    .meta-ticket:hover[b-wmzbpew5xl] {
        text-decoration: underline;
    }

/* ── Notification Date ─────────────────────────── */
.notification-date[b-wmzbpew5xl] {
    text-align: right;
    flex-shrink: 0;
}

.notif-date-primary[b-wmzbpew5xl] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.notif-date-secondary[b-wmzbpew5xl] {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
}

/* ── Detail Modal ──────────────────────────────── */
.detail-grid[b-wmzbpew5xl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.detail-row[b-wmzbpew5xl] {
    display: flex;
    gap: 16px;
    align-items: baseline;
}

.detail-label[b-wmzbpew5xl] {
    width: 100px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value[b-wmzbpew5xl] {
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    word-break: break-word;
}

.source-detail-text[b-wmzbpew5xl] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.email-preview-section[b-wmzbpew5xl] {
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}

.email-iframe[b-wmzbpew5xl] {
    width: 100%;
    min-height: 300px;
    border: none;
    display: block;
}

/* Expanded (modal maximized via the Expand button) — fill most of the
   viewport so long emails don't need the cramped inner scroll. */
.email-iframe-expanded[b-wmzbpew5xl] {
    min-height: 76vh;
    height: 76vh;
}

/* ── Detail-modal stepper (prev/next, like the ticket image lightbox) ── */
.notif-detail-nav[b-wmzbpew5xl] {
    outline: none;   /* focusable wrapper for Left/Right keys — no ring on the container */
}

.notif-stepper[b-wmzbpew5xl] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 12px;
    margin-bottom: 12px;
    background: var(--color-surface, white);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.notif-stepper-counter[b-wmzbpew5xl] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Filter date inputs ─────────────────────────── */
.filter-date[b-wmzbpew5xl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted, #6e7681);
    white-space: nowrap;
}

    .filter-date input[type="date"][b-wmzbpew5xl] {
        padding: 6px 8px;
        font-size: 13px;
        max-width: 150px;
    }

/* ── Clear-filters button ───────────────────────── */
.btn-clear-filters[b-wmzbpew5xl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-text, #991b1b);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-clear-filters:hover[b-wmzbpew5xl] {
        background: var(--color-danger-light, #fecaca);
    }

    .btn-clear-filters i[b-wmzbpew5xl] {
        font-size: 14px;
    }

/* ── Announcement broadcasts ───────────────────── */
/* Rendered above the email list. Same card chrome as a notification, with a
   primary left-accent so it reads as a site-wide broadcast rather than a
   personal email. */
.announcement-broadcast-list[b-wmzbpew5xl] {
    margin-bottom: 16px;
}

.announcement-broadcast-card[b-wmzbpew5xl] {
    border-left: 3px solid var(--color-primary, #0366d6);
}

.meta-announcement[b-wmzbpew5xl] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

/* Dismiss × — mirrors the Alert close button (muted, brightens on hover). */
.announcement-broadcast-dismiss[b-wmzbpew5xl] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .announcement-broadcast-dismiss:hover[b-wmzbpew5xl] {
        background: var(--color-gray-100, #eef1f4);
        color: var(--color-text-primary, #24292e);
    }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .notification-card[b-wmzbpew5xl] {
        padding: 12px;
        gap: 10px;
    }

    .notif-icon[b-wmzbpew5xl] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
.container[b-4ckdxvxgdb] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.profile-grid[b-4ckdxvxgdb] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

.profile-display[b-4ckdxvxgdb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-field[b-4ckdxvxgdb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-4ckdxvxgdb] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value[b-4ckdxvxgdb] {
    font-size: 16px;
    color: var(--color-text-primary, #24292e);
    font-weight: 500;
}

.photo-section[b-4ckdxvxgdb] {
    text-align: center;
}

.photo-wrapper[b-4ckdxvxgdb] {
    position: relative;
    display: inline-block;
}

.profile-avatar-large[b-4ckdxvxgdb] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-inverse, white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
}

.profile-photo-large[b-4ckdxvxgdb] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border, #e1e4e8);
}

.delete-photo-btn[b-4ckdxvxgdb] {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-danger, #d73a49);
    color: var(--color-text-inverse, white);
    border: 2px solid var(--color-surface, white);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .delete-photo-btn:hover[b-4ckdxvxgdb] {
        background: var(--color-danger, #cb2431);
        transform: scale(1.1);
    }

.photo-name[b-4ckdxvxgdb] {
    margin-top: 16px;
    margin-bottom: 4px;
}

.photo-email[b-4ckdxvxgdb] {
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    margin-bottom: 16px;
}

.photo-upload-area[b-4ckdxvxgdb] {
    margin-top: 16px;
}

.photo-upload-label[b-4ckdxvxgdb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    background: var(--color-surface, white);
    cursor: pointer;
    transition: all 0.2s;
}

    .photo-upload-label:hover[b-4ckdxvxgdb] {
        background: var(--color-gray-100, #f6f8fa);
        border-color: var(--color-border, #d1d5da);
    }

.photo-error[b-4ckdxvxgdb] {
    margin-top: 8px;
    padding: 8px;
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-text, #991b1b);
    border-radius: 4px;
    font-size: 12px;
}

.photo-hint[b-4ckdxvxgdb] {
    font-size: 11px;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 8px;
}

.stat-item[b-4ckdxvxgdb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .stat-item:last-child[b-4ckdxvxgdb] {
        border-bottom: none;
    }

.stat-label[b-4ckdxvxgdb] {
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
}

.stat-value[b-4ckdxvxgdb] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, #0366d6);
}

.form-actions[b-4ckdxvxgdb] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.loading-small[b-4ckdxvxgdb] {
    text-align: center;
    padding: 20px;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
}

@media (max-width: 1024px) {
    .profile-grid[b-4ckdxvxgdb] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/RecentlyViewed.razor.rz.scp.css */
.rv-card[b-furp2r4x3m] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 12px;
    overflow: hidden;
}

/* tabs */
.rv-tabs[b-furp2r4x3m] {
    display: flex;
    gap: 4px;
    padding: 0 8px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.rv-tab[b-furp2r4x3m] {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.rv-tab:hover[b-furp2r4x3m] {
    color: var(--color-text-primary, #24292e);
}

.rv-tab.on[b-furp2r4x3m] {
    color: var(--color-primary, #0366d6);
    border-bottom-color: var(--color-primary, #0366d6);
}

.rv-tab i[b-furp2r4x3m] {
    font-size: 15px;
}

.rv-cnt[b-furp2r4x3m] {
    font-size: 11px;
    font-weight: 700;
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-secondary, #586069);
    border-radius: 999px;
    padding: 1px 7px;
}

/* filter */
.rv-filter[b-furp2r4x3m] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-text-secondary, #586069);
}

.rv-filter:focus-within[b-furp2r4x3m] {
    border-color: var(--color-primary, #0366d6);
    box-shadow: 0 0 0 3px var(--color-primary-light, #dbedff);
    background: var(--color-surface, #fff);
}

.rv-filter i[b-furp2r4x3m] {
    font-size: 14px;
    flex-shrink: 0;
}

.rv-filter input[b-furp2r4x3m] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text-primary, #24292e);
}

/* group header */
.rv-group[b-furp2r4x3m] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px 4px;
}

/* rows */
.rv-row[b-furp2r4x3m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    cursor: pointer;
}

.rv-group + .rv-row[b-furp2r4x3m],
.rv-filter + .rv-row[b-furp2r4x3m] {
    border-top: none;
}

.rv-row:hover[b-furp2r4x3m] {
    background: var(--color-gray-50, #f9fafb);
}

.rv-num[b-furp2r4x3m] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #0366d6);
    background: var(--color-primary-light, #dbedff);
    border-radius: 5px;
    padding: 2px 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.rv-title[b-furp2r4x3m] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-status[b-furp2r4x3m] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    white-space: nowrap;
    flex-shrink: 0;
}

.rv-when[b-furp2r4x3m] {
    font-size: 12px;
    color: var(--color-text-muted, #8b949e);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 66px;
    text-align: right;
}

.rv-empty[b-furp2r4x3m] {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-secondary, #586069);
}

.rv-empty i[b-furp2r4x3m] {
    font-size: 40px;
    color: var(--color-text-muted, #8b949e);
    display: block;
    margin-bottom: 12px;
}
/* /Pages/ReportBuilder.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   REPORT BUILDER - ADVANCED LAYOUT
   Matches the mockup design with collapsible sidebar and vertical tabs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container - Full viewport height minus header */
.report-builder-container[b-p70kxw19s2] {
    display: flex;
    height: calc(100vh - 56px); /* MainLayout header is 56px */
    min-height: 500px;
    background: var(--color-background, #f5f7fa);
    overflow: hidden;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar[b-p70kxw19s2] {
    width: 280px;
    background: var(--color-surface, white);
    border-right: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    flex-direction: row;
    transition: width 0.3s ease;
    position: relative;
    flex-shrink: 0;
    height: 100%;
}

    .sidebar.fully-collapsed[b-p70kxw19s2] {
        width: 40px;
    }

        .sidebar.fully-collapsed .sidebar-content[b-p70kxw19s2],
        .sidebar.fully-collapsed .sidebar-collapse-buttons[b-p70kxw19s2] {
            opacity: 0;
            pointer-events: none;
        }

/* Collapse Toggle Button */
.sidebar-collapse-toggle[b-p70kxw19s2] {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background: var(--color-surface, white);
    border: 2px solid var(--color-border, #d1d5db);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-muted, #6b7280);
    z-index: 100;
    transition: all 0.2s;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

    .sidebar-collapse-toggle:hover[b-p70kxw19s2] {
        background: var(--color-background-hover, #f3f4f6);
        color: var(--color-text-primary, #374151);
        border-color: var(--color-primary, #3b82f6);
    }

/* Vertical Tab Buttons */
.sidebar-collapse-buttons[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    background: var(--color-background-subtle, #f9fafb);
    border-right: 1px solid var(--color-border, #e5e7eb);
    transition: opacity 0.3s ease;
}

.sidebar-collapse-btn[b-p70kxw19s2] {
    width: 30px;
    height: 150px;
    border: none;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-text-muted, #6b7280);
    transition: all 0.2s;
}

    .sidebar-collapse-btn:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
        color: var(--color-text-primary, #374151);
    }

    .sidebar-collapse-btn.active[b-p70kxw19s2] {
        background: var(--color-primary, #3b82f6);
        color: var(--color-text-inverse, white);
    }

/* Sidebar Content - Fixed header with scrollable fields */
.sidebar-content[b-p70kxw19s2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.sidebar-section[b-p70kxw19s2] {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

    .sidebar-section.active[b-p70kxw19s2] {
        display: flex;
    }

.sidebar-header[b-p70kxw19s2] {
    padding: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-background-subtle, #f9fafb);
    flex-shrink: 0;
}

    .sidebar-header h3[b-p70kxw19s2] {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-primary, #374151);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }

.sidebar-header-content[b-p70kxw19s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Field Search - Fixed */
.field-search[b-p70kxw19s2] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface, white);
    flex-shrink: 0;
}

    .field-search i[b-p70kxw19s2] {
        color: var(--color-text-muted, #6b7280);
        flex-shrink: 0;
    }

    .field-search input[b-p70kxw19s2] {
        flex: 1;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 6px;
        padding: 10px 12px;
        font-size: 13px;
        background: var(--color-background-subtle, #f9fafb);
        min-width: 0;
    }

        .field-search input:focus[b-p70kxw19s2] {
            outline: none;
            border-color: var(--color-primary, #3b82f6);
            box-shadow: 0 0 0 2px var(--color-primary-light, rgba(59, 130, 246, 0.1));
            background: var(--color-surface, white);
        }

        .field-search input[b-p70kxw19s2]::placeholder {
            color: var(--color-text-muted, #9ca3af);
        }

/* Scrollable Fields Container */
.fields-scroll-container[b-p70kxw19s2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Hide scrollbar by default, show on hover */
    .fields-scroll-container[b-p70kxw19s2]::-webkit-scrollbar {
        width: 6px;
    }

    .fields-scroll-container[b-p70kxw19s2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .fields-scroll-container[b-p70kxw19s2]::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
    }

    .fields-scroll-container:hover[b-p70kxw19s2]::-webkit-scrollbar-thumb {
        background: var(--color-border, #d1d5db);
    }

    .fields-scroll-container[b-p70kxw19s2]::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted, #9ca3af);
    }

/* Saved Reports List */
.saved-reports-list[b-p70kxw19s2] {
    flex: 1;
    overflow-y: auto;
}

    .saved-reports-list[b-p70kxw19s2]::-webkit-scrollbar {
        width: 6px;
    }

    .saved-reports-list[b-p70kxw19s2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .saved-reports-list[b-p70kxw19s2]::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
    }

    .saved-reports-list:hover[b-p70kxw19s2]::-webkit-scrollbar-thumb {
        background: var(--color-border, #d1d5db);
    }

.saved-report-item[b-p70kxw19s2] {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    transition: background 0.15s;
}

    .saved-report-item:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
    }

    .saved-report-item.active[b-p70kxw19s2] {
        background: var(--color-primary-light, #eff6ff);
        border-left: 3px solid var(--color-primary, #3b82f6);
    }

    .saved-report-item .report-name[b-p70kxw19s2] {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.report-actions[b-p70kxw19s2] {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.saved-report-item:hover .report-actions[b-p70kxw19s2] {
    opacity: 1;
}

.report-actions button[b-p70kxw19s2] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text-muted, #6b7280);
    border-radius: 4px;
}

    .report-actions button:hover[b-p70kxw19s2] {
        color: var(--color-text-primary, #374151);
        background: var(--color-background-hover, #e5e7eb);
    }

/* Field Categories */
.table-category[b-p70kxw19s2] {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.table-header[b-p70kxw19s2] {
    padding: 12px 16px;
    background: var(--color-background-subtle, #f9fafb);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.15s;
}

    .table-header:hover[b-p70kxw19s2] {
        background: var(--color-background-hover, #f3f4f6);
    }

    .table-header span[b-p70kxw19s2] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.table-fields[b-p70kxw19s2] {
    max-height: 300px;
    overflow-y: auto;
}

.field-item[b-p70kxw19s2] {
    padding: 10px 16px 10px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    transition: background 0.15s;
}

    .field-item:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
    }

    .field-item[draggable="true"][b-p70kxw19s2] {
        cursor: grab;
    }

        .field-item[draggable="true"]:active[b-p70kxw19s2] {
            cursor: grabbing;
        }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.main-content[b-p70kxw19s2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    height: 100%;
}

/* Scrollable content area below toolbar */
.scrollable-content[b-p70kxw19s2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Critical for flex scrolling */
}

/* Toolbar - Fixed at top */
.toolbar[b-p70kxw19s2] {
    padding: 12px 24px;
    background: var(--color-surface, white);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-name-edit[b-p70kxw19s2] {
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    margin: 0;
    transition: background 0.15s;
}

    .report-name-edit:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
    }

.unsaved-indicator[b-p70kxw19s2] {
    font-size: 12px;
    color: var(--color-danger, #ef4444);
    font-weight: 500;
}

.schedule-indicator[b-p70kxw19s2] {
    font-size: 12px;
    color: var(--color-primary, #3b82f6);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-primary-light, #eff6ff);
    border-radius: 12px;
    transition: all 0.15s ease;
}

    .schedule-indicator:hover[b-p70kxw19s2] {
        background: var(--color-primary, #3b82f6);
        color: var(--color-text-inverse, white);
    }

    .schedule-indicator i[b-p70kxw19s2] {
        font-size: 14px;
    }

/* Schedule button active state */
.btn.has-schedule[b-p70kxw19s2] {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
}

.toolbar-right[b-p70kxw19s2] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-divider[b-p70kxw19s2] {
    width: 1px;
    height: 24px;
    background: var(--color-border, #d1d5db);
    margin: 0 4px;
}

/* Buttons */
.btn[b-p70kxw19s2] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary[b-p70kxw19s2] {
    background: var(--color-primary, #3b82f6);
    color: var(--color-text-inverse, white);
}

    .btn-primary:hover:not(:disabled)[b-p70kxw19s2] {
        background: var(--color-primary-dark, #2563eb);
    }

.btn-secondary[b-p70kxw19s2] {
    background: var(--color-surface, white);
    color: var(--color-text-primary, #374151);
    border: 1px solid var(--color-border, #d1d5db);
}

    .btn-secondary:hover:not(:disabled)[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
    }

.btn-sm[b-p70kxw19s2] {
    padding: 6px 12px;
    font-size: 12px;
}

.btn:disabled[b-p70kxw19s2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon[b-p70kxw19s2] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--color-text-muted, #6b7280);
    border-radius: 4px;
}

    .btn-icon:hover[b-p70kxw19s2] {
        background: var(--color-background-hover, #e5e7eb);
        color: var(--color-danger, #ef4444);
    }

/* Tab Buttons */
.tab-btn[b-p70kxw19s2] {
    padding: 8px 16px;
    border: 1px solid var(--color-border, #d1d5db);
    background: var(--color-surface, white);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .tab-btn:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
    }

    .tab-btn.active[b-p70kxw19s2] {
        background: var(--color-primary, #3b82f6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #3b82f6);
    }

/* ═══════════════════════════════════════════════════════════════════════════
   CRITERIA BUILDER
   ═══════════════════════════════════════════════════════════════════════════ */

.criteria-builder-section[b-p70kxw19s2] {
    background: var(--color-background-subtle, #f9fafb);
    border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.criteria-header[b-p70kxw19s2] {
    padding: 16px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .criteria-header:hover[b-p70kxw19s2] {
        background: var(--color-background-hover, #f3f4f6);
    }

.criteria-title[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .criteria-title h3[b-p70kxw19s2] {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-primary, #374151);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.condition-count[b-p70kxw19s2] {
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
}

.criteria-arrow[b-p70kxw19s2] {
    font-size: 18px;
    transition: transform 0.3s;
}

.criteria-content[b-p70kxw19s2] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    padding: 16px;
    margin: 0 24px 16px 24px;
}

.criteria-section[b-p70kxw19s2] {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

    .criteria-section:last-child[b-p70kxw19s2] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.section-header[b-p70kxw19s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .section-header strong[b-p70kxw19s2] {
        font-size: 13px;
        color: var(--color-text-primary, #374151);
        display: flex;
        align-items: center;
        gap: 8px;
    }

.section-actions[b-p70kxw19s2] {
    display: flex;
    gap: 8px;
}

/* Conditions */
.conditions-container[b-p70kxw19s2] {
    background: var(--color-background-subtle, #fafafa);
    border-radius: 6px;
    padding: 12px;
}

.empty-conditions[b-p70kxw19s2] {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 13px;
}

.condition-row[b-p70kxw19s2] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    background: var(--color-surface, white);
    border-radius: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

    .condition-row:last-child[b-p70kxw19s2] {
        margin-bottom: 0;
    }

.logic-select[b-p70kxw19s2] {
    min-width: 70px;
}

.field-select[b-p70kxw19s2] {
    min-width: 150px;
}

.operator-select[b-p70kxw19s2] {
    min-width: 120px;
}

.value-input[b-p70kxw19s2] {
    flex: 1;
    min-width: 150px;
}

    .value-input.date-input[b-p70kxw19s2] {
        min-width: 140px;
        flex: 0 0 auto;
    }

.between-and[b-p70kxw19s2] {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    padding: 0 4px;
}

.relative-date-badge[b-p70kxw19s2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    border: 1px solid var(--color-primary-light, #bfdbfe);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
}

    .relative-date-badge i[b-p70kxw19s2] {
        font-size: 13px;
    }

.condition-row select[b-p70kxw19s2],
.condition-row input[b-p70kxw19s2] {
    padding: 6px 8px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 4px;
    font-size: 13px;
}

/* Condition Groups */
.condition-group[b-p70kxw19s2] {
    border: 2px solid var(--color-primary, #3b82f6); /* Blue for level 0 */
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--color-primary-light, #eff6ff); /* Light blue */
}

    .condition-group .group-label[b-p70kxw19s2] {
        color: var(--color-primary, #3b82f6);
    }

    /* Nested groups get different border colors - Level 1: Green */
    .condition-group.nested-group[b-p70kxw19s2] {
        border-color: var(--color-success, #10b981);
        background: var(--color-success-light, #ecfdf5); /* Light green */
        margin-top: 8px;
    }

        .condition-group.nested-group > .group-header .group-label[b-p70kxw19s2],
        .condition-group.nested-group > .group-footer .group-label[b-p70kxw19s2] {
            color: var(--color-success, #10b981);
        }

        /* Level 2: Orange */
        .condition-group.nested-group .nested-group[b-p70kxw19s2] {
            border-color: var(--color-warning, #f59e0b);
            background: var(--color-warning-light, #fffbeb); /* Light orange */
        }

            .condition-group.nested-group .nested-group > .group-header .group-label[b-p70kxw19s2],
            .condition-group.nested-group .nested-group > .group-footer .group-label[b-p70kxw19s2] {
                color: var(--color-warning, #f59e0b);
            }

            /* Level 3: Purple */
            .condition-group.nested-group .nested-group .nested-group[b-p70kxw19s2] {
                border-color: var(--color-accent-ai, #8b5cf6);
                background: var(--color-accent-ai-light, #f5f3ff); /* Light purple */
            }

                .condition-group.nested-group .nested-group .nested-group > .group-header .group-label[b-p70kxw19s2],
                .condition-group.nested-group .nested-group .nested-group > .group-footer .group-label[b-p70kxw19s2] {
                    color: var(--color-accent-ai, #8b5cf6);
                }

                /* Level 4+: Red */
                .condition-group.nested-group .nested-group .nested-group .nested-group[b-p70kxw19s2] {
                    border-color: var(--color-danger, #ef4444);
                    background: var(--color-danger-light, #fef2f2); /* Light red */
                }

                    .condition-group.nested-group .nested-group .nested-group .nested-group > .group-header .group-label[b-p70kxw19s2],
                    .condition-group.nested-group .nested-group .nested-group .nested-group > .group-footer .group-label[b-p70kxw19s2] {
                        color: var(--color-danger, #ef4444);
                    }

    .condition-group .group-header[b-p70kxw19s2] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .condition-group .group-label[b-p70kxw19s2] {
        font-size: 18px;
        font-weight: 600;
    }

    .condition-group.nested-group .group-label[b-p70kxw19s2] {
        font-size: 16px;
    }

    .condition-group .group-actions[b-p70kxw19s2] {
        display: flex;
        gap: 4px;
        margin-left: auto;
    }

        .condition-group .group-actions .btn[b-p70kxw19s2] {
            padding: 4px 8px;
            font-size: 12px;
        }

    .condition-group .group-conditions[b-p70kxw19s2] {
        padding-left: 16px;
        border-left: 3px solid var(--color-primary, #3b82f6); /* Blue for level 0 */
    }

    .condition-group.nested-group > .group-conditions[b-p70kxw19s2] {
        border-left-color: var(--color-success, #10b981); /* Green for level 1 */
    }

    .condition-group.nested-group .nested-group > .group-conditions[b-p70kxw19s2] {
        border-left-color: var(--color-warning, #f59e0b); /* Orange for level 2 */
    }

    .condition-group.nested-group .nested-group .nested-group > .group-conditions[b-p70kxw19s2] {
        border-left-color: var(--color-accent-ai, #8b5cf6); /* Purple for level 3 */
    }

    .condition-group.nested-group .nested-group .nested-group .nested-group > .group-conditions[b-p70kxw19s2] {
        border-left-color: var(--color-danger, #ef4444); /* Red for level 4+ */
    }

    .condition-group .condition-row.nested[b-p70kxw19s2] {
        background: var(--color-surface, white);
    }

    .condition-group .group-footer[b-p70kxw19s2] {
        margin-top: 8px;
    }

        .condition-group .group-footer .group-label[b-p70kxw19s2] {
            display: block;
        }

/* Filter conditions drop zone */
.conditions-container[b-p70kxw19s2] {
    min-height: 60px;
    position: relative;
}

    .conditions-container.drag-over[b-p70kxw19s2] {
        background: var(--color-primary-light, #eff6ff);
        border-radius: 8px;
    }

    .conditions-container .drop-hint-filter[b-p70kxw19s2] {
        padding: 16px;
        text-align: center;
        color: var(--color-text-muted, #6b7280);
        font-size: 13px;
        border: 2px dashed var(--color-border, #d1d5db);
        border-radius: 8px;
        background: var(--color-background-subtle, #f9fafb);
    }

    .conditions-container.drag-over .drop-hint-filter[b-p70kxw19s2] {
        border-color: var(--color-primary, #3b82f6);
        background: var(--color-primary-light, #eff6ff);
    }

/* Group By */
.groupby-area[b-p70kxw19s2] {
    margin-top: 8px;
}

    .groupby-area label[b-p70kxw19s2] {
        font-size: 12px;
        color: var(--color-text-muted, #6b7280);
        margin-bottom: 4px;
        display: block;
    }

.grouping-section[b-p70kxw19s2] {
    min-height: 60px;
    border: 2px dashed var(--color-border, #d1d5db);
    border-radius: 6px;
    padding: 12px;
    background: var(--color-background-subtle, #fafafa);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

    .grouping-section.drag-over[b-p70kxw19s2] {
        background: var(--color-primary-light, #eff6ff);
        border-color: var(--color-primary, #3b82f6);
    }

.drop-hint[b-p70kxw19s2] {
    width: 100%;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 12px;
    padding: 8px;
}

.grouped-field[b-p70kxw19s2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-warning, #f97316);
    color: var(--color-text-inverse, white);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: grab;
    transition: opacity 0.2s, transform 0.2s;
}

    .grouped-field:active[b-p70kxw19s2] {
        cursor: grabbing;
    }

    .grouped-field.dragging[b-p70kxw19s2] {
        opacity: 0.5;
        transform: scale(0.95);
    }

    .grouped-field .drag-handle[b-p70kxw19s2] {
        font-size: 12px;
        opacity: 0.8;
        cursor: grab;
    }

    .grouped-field button[b-p70kxw19s2] {
        background: none;
        border: none;
        color: var(--color-text-inverse, white);
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
    }

        .grouped-field button:hover[b-p70kxw19s2] {
            opacity: 0.8;
        }

/* HAVING Conditions */
.having-area[b-p70kxw19s2] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.having-header[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

    .having-header label[b-p70kxw19s2] {
        font-size: 12px;
        color: var(--color-text-muted, #6b7280);
    }

.having-empty[b-p70kxw19s2] {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    font-style: italic;
    padding: 8px;
    text-align: center;
    background: var(--color-background-subtle, #f9fafb);
    border-radius: 4px;
}

.having-conditions[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.having-condition[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--color-background-subtle, #f9fafb);
    border-radius: 6px;
    border: 1px solid var(--color-border, #e5e7eb);
    flex-wrap: wrap;
}

    .having-condition select[b-p70kxw19s2],
    .having-condition input[b-p70kxw19s2] {
        font-size: 12px;
        padding: 4px 8px;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 4px;
        background: var(--color-surface, white);
    }

    .having-condition .logic-select[b-p70kxw19s2] {
        width: 60px;
    }

    .having-condition .agg-select[b-p70kxw19s2] {
        width: 80px;
        font-weight: 600;
        color: var(--color-primary, #3b82f6);
    }

    .having-condition .field-select[b-p70kxw19s2] {
        min-width: 120px;
        max-width: 180px;
    }

    .having-condition .operator-select[b-p70kxw19s2] {
        width: 50px;
        text-align: center;
    }

    .having-condition .value-input[b-p70kxw19s2] {
        width: 80px;
    }

    .having-condition span[b-p70kxw19s2] {
        font-size: 12px;
        color: var(--color-text-muted, #6b7280);
    }

    .having-condition .btn-icon.remove[b-p70kxw19s2] {
        padding: 4px;
        background: none;
        border: none;
        color: var(--color-text-muted, #9ca3af);
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        margin-left: auto;
    }

        .having-condition .btn-icon.remove:hover[b-p70kxw19s2] {
            background: var(--color-error-light, #fee2e2);
            color: var(--color-error, #ef4444);
        }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SURFACE
   ═══════════════════════════════════════════════════════════════════════════ */

.design-surface[b-p70kxw19s2] {
    padding: 24px;
}

.data-container[b-p70kxw19s2],
.chart-container[b-p70kxw19s2],
.design-view-container[b-p70kxw19s2],
.sql-view-container[b-p70kxw19s2] {
    display: none;
}

    .data-container.active[b-p70kxw19s2],
    .chart-container.active[b-p70kxw19s2],
    .design-view-container.active[b-p70kxw19s2],
    .sql-view-container.active[b-p70kxw19s2] {
        display: block;
    }

    .design-view-container.active[b-p70kxw19s2] {
        display: flex;
        flex: 1;
    }

/* Panels */
.panel[b-p70kxw19s2] {
    background: var(--color-surface, white);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 16px;
}

.panel-header[b-p70kxw19s2] {
    padding: 16px;
    background: var(--color-background-subtle, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
}

    .panel-header:hover[b-p70kxw19s2] {
        background: var(--color-background-hover, #f3f4f6);
    }

.panel-title[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
}

.panel-content[b-p70kxw19s2] {
    padding: 16px;
}

/* Columns Section */
.columns-hint[b-p70kxw19s2] {
    font-size: 13px;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 12px;
}

.columns-drop-zone[b-p70kxw19s2] {
    min-height: 80px;
    border: 2px dashed var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-background-subtle, #fafafa);
}

    .columns-drop-zone.drag-over[b-p70kxw19s2] {
        background: var(--color-primary-light, #eff6ff);
        border-color: var(--color-primary, #3b82f6);
    }

    .columns-drop-zone .empty-state[b-p70kxw19s2] {
        width: 100%;
        text-align: center;
        padding: 24px;
        color: var(--color-text-muted, #6b7280);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

        .columns-drop-zone .empty-state i[b-p70kxw19s2] {
            font-size: 32px;
        }

/* Columns Table - Compact header style */
.columns-table[b-p70kxw19s2] {
    width: 100%;
    border-collapse: collapse;
}

    .columns-table th[b-p70kxw19s2] {
        background: var(--color-surface, white);
        border: 1px solid var(--color-border, #e5e7eb);
        padding: 0;
        text-align: left;
        font-weight: 500;
        font-size: 13px;
        vertical-align: top;
    }

        .columns-table th:first-child[b-p70kxw19s2] {
            border-top-left-radius: 4px;
        }

        .columns-table th:last-child[b-p70kxw19s2] {
            border-top-right-radius: 4px;
        }

.column-header[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

    .column-header .column-name[b-p70kxw19s2] {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: var(--color-primary, #3b82f6);
        font-weight: 600;
        cursor: grab;
    }

        .column-header .column-name:active[b-p70kxw19s2] {
            cursor: grabbing;
        }

    .column-header .drag-handle[b-p70kxw19s2] {
        color: var(--color-text-muted, #9ca3af);
        font-size: 14px;
    }

.column-actions[b-p70kxw19s2] {
    display: flex;
    justify-content: flex-end;
    padding: 4px 8px;
    gap: 2px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-background-subtle, #f9fafb);
}

.action-btn-group[b-p70kxw19s2] {
    position: relative;
}

.action-btn[b-p70kxw19s2] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border, #d1d5db);
    background: var(--color-surface, white);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    transition: all 0.15s;
}

    .action-btn:hover[b-p70kxw19s2] {
        background: var(--color-background-hover, #f3f4f6);
        border-color: var(--color-primary, #3b82f6);
        color: var(--color-primary, #3b82f6);
    }

    .action-btn.active[b-p70kxw19s2] {
        background: var(--color-primary-light, #eff6ff);
        border-color: var(--color-primary, #3b82f6);
        color: var(--color-primary, #3b82f6);
    }

    .action-btn.remove:hover[b-p70kxw19s2] {
        border-color: var(--color-danger, #ef4444);
        color: var(--color-danger, #ef4444);
    }

    .action-btn i[b-p70kxw19s2] {
        font-size: 14px;
    }

/* Aggregation Dropdown - Floating */
.aggregation-dropdown-overlay[b-p70kxw19s2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
}

.aggregation-dropdown-floating[b-p70kxw19s2] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    min-width: 180px;
    overflow: hidden;
}

    .aggregation-dropdown-floating .dropdown-header[b-p70kxw19s2] {
        padding: 12px 16px;
        font-weight: 600;
        font-size: 13px;
        background: var(--color-background-subtle, #f9fafb);
        border-bottom: 1px solid var(--color-border, #e5e7eb);
        color: var(--color-text-primary, #374151);
    }

    .aggregation-dropdown-floating button[b-p70kxw19s2] {
        display: block;
        width: 100%;
        padding: 10px 16px;
        border: none;
        background: var(--color-surface, white);
        text-align: left;
        cursor: pointer;
        font-size: 13px;
        color: var(--color-text-primary, #374151);
        transition: background 0.15s;
    }

        .aggregation-dropdown-floating button:hover[b-p70kxw19s2] {
            background: var(--color-background-subtle, #f9fafb);
        }

        .aggregation-dropdown-floating button.selected[b-p70kxw19s2] {
            background: var(--color-primary-light, #eff6ff);
            color: var(--color-primary, #3b82f6);
            font-weight: 500;
        }

/* Preview rows in columns table */
.columns-table tbody td[b-p70kxw19s2] {
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-top: none;
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-surface, white);
}

.columns-table tbody tr:nth-child(even) td[b-p70kxw19s2] {
    background: var(--color-background-subtle, #f9fafb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED RESULTS TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.unified-table-wrapper[b-p70kxw19s2] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 350px);
    min-height: 200px;
    border: 2px dashed var(--color-border, #d1d5db);
    border-radius: 8px;
    background: var(--color-background-subtle, #fafafa);
}

    /* Hide scrollbar by default, show on hover */
    .unified-table-wrapper[b-p70kxw19s2]::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .unified-table-wrapper[b-p70kxw19s2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .unified-table-wrapper[b-p70kxw19s2]::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }

    .unified-table-wrapper:hover[b-p70kxw19s2]::-webkit-scrollbar-thumb {
        background: var(--color-border, #d1d5db);
    }

    .unified-table-wrapper[b-p70kxw19s2]::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted, #9ca3af);
    }

.unified-results-table[b-p70kxw19s2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--color-surface, white);
}

    .unified-results-table thead[b-p70kxw19s2] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .unified-results-table th[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f8fafc);
        border-bottom: 2px solid var(--color-border, #e2e8f0);
        padding: 0;
        text-align: left;
        width: 220px;
        white-space: nowrap;
        overflow: visible; /* allow title-bubble to escape the cell on hover */
    }

    /* Column header - name and buttons on same row */
    .unified-results-table .column-header[b-p70kxw19s2] {
        padding: 10px 12px;
    }

    .unified-results-table .column-name-row[b-p70kxw19s2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .unified-results-table .column-name-wrapper[b-p70kxw19s2] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
    }

    .unified-results-table .column-name[b-p70kxw19s2] {
        font-weight: 600;
        color: var(--color-text-primary, #1e293b);
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .unified-results-table .column-name:hover[b-p70kxw19s2] {
            color: var(--color-primary, #3b82f6);
        }

        .unified-results-table .column-name .edit-icon[b-p70kxw19s2] {
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.15s;
            color: var(--color-text-muted, #9ca3af);
        }

        .unified-results-table .column-name:hover .edit-icon[b-p70kxw19s2] {
            opacity: 1;
        }

        .unified-results-table .column-name:active[b-p70kxw19s2] {
            cursor: grabbing;
        }

    /* Alias input */
    .unified-results-table .alias-input[b-p70kxw19s2] {
        font-size: 13px;
        font-weight: 600;
        padding: 4px 8px;
        border: 1px solid var(--color-primary, #3b82f6);
        border-radius: 4px;
        outline: none;
        min-width: 80px;
        max-width: 150px;
        background: var(--color-surface, white);
    }

    /* GROUP BY column styling */
    .unified-results-table th.group-by-column[b-p70kxw19s2] {
        background: var(--color-surface-hover, #f1f5f9);
        border-left: 3px solid var(--color-primary, #3b82f6);
    }

    .unified-results-table .group-by-name[b-p70kxw19s2] {
        font-weight: 600;
        color: var(--color-primary, #3b82f6);
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: default;
    }

        .unified-results-table .group-by-name i[b-p70kxw19s2] {
            font-size: 14px;
        }

/* Column resizing */
.unified-results-table[b-p70kxw19s2] {
    table-layout: fixed;
}

    .unified-results-table th[b-p70kxw19s2] {
        position: relative;
        width: 220px;
        overflow: visible; /* allow title-bubble to escape the cell on hover */
        /* Note: native CSS resize disabled because it requires non-visible overflow.
           The .col-resize-handle child element provides custom resize via the shared
           tableColumnInterop JS (same as Tickets/Dashboard). */
    }

        .unified-results-table th .col-resize-handle[b-p70kxw19s2] {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            cursor: col-resize;
            background: transparent;
            z-index: 10;
        }

        .unified-results-table th:hover .col-resize-handle[b-p70kxw19s2] {
            background: var(--color-border, #d1d5db);
        }

        .unified-results-table th .col-resize-handle:hover[b-p70kxw19s2],
        .unified-results-table th .col-resize-handle:active[b-p70kxw19s2] {
            background: var(--color-primary, #3b82f6);
        }

    .unified-results-table td[b-p70kxw19s2] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .unified-results-table .drag-handle[b-p70kxw19s2] {
        opacity: 0.3;
        font-size: 14px;
        cursor: grab;
        padding: 4px;
        margin: -4px;
        margin-right: 4px;
    }

        .unified-results-table .drag-handle:active[b-p70kxw19s2] {
            cursor: grabbing;
        }

    .unified-results-table th:hover .drag-handle[b-p70kxw19s2] {
        opacity: 0.7;
    }

    .unified-results-table th.dragging[b-p70kxw19s2] {
        opacity: 0.5;
        background: var(--color-primary-light, #eff6ff);
    }

    .unified-results-table th.drag-over[b-p70kxw19s2] {
        border-left: 3px solid var(--color-primary, #3b82f6);
    }

    .unified-results-table .column-actions[b-p70kxw19s2] {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }

    .unified-results-table .action-btn[b-p70kxw19s2] {
        width: 26px;
        height: 26px;
        border: 1px solid var(--color-border, #d1d5db);
        background: var(--color-surface, white);
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--color-text-muted, #6b7280);
        transition: all 0.15s;
    }

        .unified-results-table .action-btn:hover[b-p70kxw19s2] {
            background: var(--color-background-subtle, #f3f4f6);
            border-color: var(--color-primary, #3b82f6);
            color: var(--color-primary, #3b82f6);
        }

        .unified-results-table .action-btn.active[b-p70kxw19s2] {
            background: var(--color-primary-light, #eff6ff);
            border-color: var(--color-primary, #3b82f6);
            color: var(--color-primary, #3b82f6);
        }

        .unified-results-table .action-btn.remove:hover[b-p70kxw19s2] {
            background: var(--color-danger-light, #fef2f2);
            border-color: var(--color-danger, #ef4444);
            color: var(--color-danger, #ef4444);
        }

    .unified-results-table tbody td[b-p70kxw19s2] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--color-border-light, #f1f5f9);
        color: var(--color-text-primary, #1e293b);
        min-width: 180px;
    }

    .unified-results-table tbody tr:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f8fafc);
    }

    .unified-results-table tbody tr:nth-child(even)[b-p70kxw19s2] {
        background: var(--color-background-alt, #fafbfc);
    }

        .unified-results-table tbody tr:nth-child(even):hover[b-p70kxw19s2] {
            background: var(--color-background-subtle, #f1f5f9);
        }

    .unified-results-table .placeholder-row td[b-p70kxw19s2] {
        text-align: center;
        padding: 40px 16px;
        color: var(--color-text-muted, #94a3b8);
    }

    .unified-results-table .no-data-hint[b-p70kxw19s2] {
        font-size: 14px;
    }

    /* Dragging state for columns */
    .unified-results-table th.dragging[b-p70kxw19s2] {
        opacity: 0.5;
        background: var(--color-primary-light, #eff6ff);
    }

    .unified-results-table th.drag-over[b-p70kxw19s2] {
        border-left: 3px solid var(--color-primary, #3b82f6);
    }

/* ============================================================ */
/* EXPANDING-CHIP COLUMN HEADER                                  */
/* Single-row design — compact chips bloom open on hover.        */
/* ============================================================ */
:root[b-p70kxw19s2] {
    --chip-ease: cubic-bezier(.32, .72, 0, 1); /* Apple-style smooth ease-out */
    --chip-dur: 380ms;
}

.unified-results-table .col-row[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    height: 48px;
    min-width: 0;
    position: relative;
}

    .unified-results-table .col-row:hover[b-p70kxw19s2] {
        background: rgba(59, 130, 246, .04);
    }

/* Drag grip — only visible on row hover */
.unified-results-table .drag-grip[b-p70kxw19s2] {
    color: var(--color-text-muted, #c8ccd1);
    cursor: grab;
    font-size: 13px;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
}

.unified-results-table .col-row:hover .drag-grip[b-p70kxw19s2] {
    opacity: 1;
}

.unified-results-table .drag-grip:active[b-p70kxw19s2] {
    cursor: grabbing;
}

/* Column name wrap — non-clipping parent that hosts the expand bubble.
   The inner .col-name does the truncation; this wrap stays overflow:visible
   so the bubble can escape the truncation boundary. */
.unified-results-table .name-wrap[b-p70kxw19s2] {
    flex: 1 1 auto;
    min-width: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    overflow: visible;
}

.unified-results-table .col-name[b-p70kxw19s2],
.unified-results-table .col-name-group[b-p70kxw19s2] {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--color-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .unified-results-table .name-wrap:hover .col-name[b-p70kxw19s2] {
        color: var(--color-primary, #3b82f6);
    }

.unified-results-table .col-name-group[b-p70kxw19s2] {
    color: var(--color-primary, #3b82f6);
}

.unified-results-table .name-wrap:has(.col-name-group)[b-p70kxw19s2] {
    cursor: default;
}

/* Edit pencil icon — only visible on name hover */
.unified-results-table .edit-pencil[b-p70kxw19s2] {
    font-size: 11px;
    opacity: 0;
    transition: opacity .15s;
    color: var(--color-text-muted, #9ca3af);
    flex-shrink: 0;
}

.unified-results-table .name-wrap:hover .edit-pencil[b-p70kxw19s2] {
    opacity: 1;
}

/* Title expand-bubble — lives on .name-wrap so the truncation overflow
   on inner .col-name doesn't clip it. Looks like the name itself grew. */
.unified-results-table .name-wrap[data-fullname][b-p70kxw19s2]::before {
    content: attr(data-fullname);
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%) scaleX(.98);
    transform-origin: left center;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    background: var(--color-surface, #ffffff);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(27,31,35,.14), 0 2px 4px rgba(27,31,35,.08), inset 0 0 0 1px var(--color-border, #e1e4e8);
    white-space: nowrap;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--color-text-primary, #1e293b);
    pointer-events: none;
    opacity: 0;
    z-index: 8;
    transition: opacity var(--chip-dur) var(--chip-ease), transform var(--chip-dur) var(--chip-ease);
}

.unified-results-table .name-wrap[data-fullname]:hover[b-p70kxw19s2]::before {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
}

/* Suppress the bubble if the name fits — JS marks the inner col-name */
.unified-results-table .name-wrap:has(.col-name:not(.is-truncated))[b-p70kxw19s2]::before,
.unified-results-table .name-wrap:has(.col-name-group:not(.is-truncated))[b-p70kxw19s2]::before {
    display: none;
}

/* Title-hover collapse: chips squish into a single piled icon and slide
   to the right edge so the title takes the row. Add-buttons hide. */
.unified-results-table .col-row:has(.name-wrap:hover) .chip[b-p70kxw19s2] {
    margin-left: -22px;
}

.unified-results-table .col-row:has(.name-wrap:hover) .chip:first-child[b-p70kxw19s2] {
    margin-left: 0;
}

.unified-results-table .col-row:has(.name-wrap:hover) .chip-cluster[b-p70kxw19s2] {
    transform: translateX(4px);
}

.unified-results-table .col-row:has(.name-wrap:hover) .add-controls[b-p70kxw19s2] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
}

/* Alias edit input */
.unified-results-table .col-row .alias-input[b-p70kxw19s2] {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border: 1px solid var(--color-primary, #3b82f6);
    border-radius: 4px;
    outline: none;
    flex: 1 1 auto;
    min-width: 60px;
    max-width: 150px;
    background: var(--color-surface, white);
}

/* Chip cluster — overlapping stack of active-state chips, pinned to the right */
.unified-results-table .chip-cluster[b-p70kxw19s2] {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px;
    position: relative;
    transition: opacity var(--chip-dur) var(--chip-ease), transform var(--chip-dur) var(--chip-ease);
}

    .unified-results-table .chip-cluster:hover[b-p70kxw19s2] {
        z-index: 5;
    }

/* The expanding chip — unified bloom morph.
   Stage 1 (rest): chips overlap into a tight stack (-14px margin).
   Stage 2 (cluster:hover): margin springs to +4px, fanning the chips out.
   Stage 3 (chip:hover): individual chip blooms with label + ×. */
.unified-results-table .chip[b-p70kxw19s2] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    border-radius: 999px;
    padding: 0;
    border: 2px solid var(--color-surface, #ffffff);
    cursor: pointer;
    overflow: hidden;
    max-width: 22px;
    margin-left: -14px;
    white-space: nowrap;
    position: relative;
    transform: scale(1);
    transition: margin-left var(--chip-dur) var(--chip-ease), max-width var(--chip-dur) var(--chip-ease), padding var(--chip-dur) var(--chip-ease), transform var(--chip-dur) var(--chip-ease), box-shadow var(--chip-dur) var(--chip-ease), background var(--chip-dur) var(--chip-ease), border-color var(--chip-dur) var(--chip-ease);
    will-change: max-width, transform, margin-left;
}

    .unified-results-table .chip:first-child[b-p70kxw19s2] {
        margin-left: 0;
    }

    /* Z-ladder so the leftmost (most prominent) chip stays on top of the stack */
    .unified-results-table .chip-cluster .chip:nth-child(1)[b-p70kxw19s2] { z-index: 4; }
    .unified-results-table .chip-cluster .chip:nth-child(2)[b-p70kxw19s2] { z-index: 3; }
    .unified-results-table .chip-cluster .chip:nth-child(3)[b-p70kxw19s2] { z-index: 2; }
    .unified-results-table .chip-cluster .chip:nth-child(4)[b-p70kxw19s2] { z-index: 1; }

    /* Stage 2: fan out on cluster hover */
    .unified-results-table .chip-cluster:hover .chip[b-p70kxw19s2] {
        margin-left: 4px;
    }

    .unified-results-table .chip-cluster:hover .chip:first-child[b-p70kxw19s2] {
        margin-left: 0;
    }

    /* Stage 3: individual bloom */
    .unified-results-table .chip:hover[b-p70kxw19s2] {
        max-width: 220px;
        padding: 0 2px 0 0;
        transform: scale(1.06);
        z-index: 6;
        box-shadow: 0 8px 20px rgba(27,31,35,.12), 0 2px 4px rgba(27,31,35,.06);
    }

    .unified-results-table .chip .chip-ic[b-p70kxw19s2] {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-weight: 700;
        font-size: 11px;
        transition: transform var(--chip-dur) var(--chip-ease);
    }

    .unified-results-table .chip:hover .chip-ic[b-p70kxw19s2] {
        transform: translateX(-1px);
    }

    .unified-results-table .chip .chip-label[b-p70kxw19s2] {
        font-size: 11px;
        font-weight: 600;
        padding-right: 4px;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity var(--chip-dur) var(--chip-ease), transform var(--chip-dur) var(--chip-ease);
    }

    .unified-results-table .chip:hover .chip-label[b-p70kxw19s2] {
        opacity: 1;
        transform: translateX(0);
    }

    .unified-results-table .chip .chip-x[b-p70kxw19s2] {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        opacity: 0;
        transform: scale(.6);
        margin-right: 3px;
        cursor: pointer;
        transition: opacity var(--chip-dur) var(--chip-ease), transform var(--chip-dur) var(--chip-ease), background .15s ease;
    }

    .unified-results-table .chip:hover .chip-x[b-p70kxw19s2] {
        opacity: 1;
        transform: scale(1);
    }

        .unified-results-table .chip .chip-x:hover[b-p70kxw19s2] {
            background: rgba(0,0,0,.08);
        }

/* Chip color variants — white border keeps stacked-chip readability */
.unified-results-table .chip.sort[b-p70kxw19s2] {
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #2563eb);
    border-color: var(--color-surface, #ffffff);
}

.unified-results-table .chip.agg[b-p70kxw19s2] {
    background: var(--color-accent-ai-light, #f3e8ff);
    color: var(--color-accent-ai, #8b5cf6);
    border-color: var(--color-surface, #ffffff);
}

.unified-results-table .chip.filter[b-p70kxw19s2] {
    background: var(--color-warning-light, #fff7ed);
    color: var(--color-warning, #f59e0b);
    border-color: var(--color-surface, #ffffff);
}

.unified-results-table .chip.group[b-p70kxw19s2] {
    background: var(--color-success-light, #ecfdf5);
    color: var(--color-success, #059669);
    border-color: var(--color-surface, #ffffff);
}

/* Hover-revealed add controls — ghost-circle "empty slots" matching the
   chip language. Stacked with the same overlap pattern as active chips,
   so a column with nothing set reads as a tiny dashed pile on the right. */
.unified-results-table .add-controls[b-p70kxw19s2] {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 2px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--chip-dur) var(--chip-ease), transform var(--chip-dur) var(--chip-ease);
}

.unified-results-table .col-row:hover .add-controls[b-p70kxw19s2] {
    opacity: 1;
    transform: translateX(0);
}

.unified-results-table .add-btn[b-p70kxw19s2] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px dashed var(--color-border, #cfd4da);
    background: var(--color-surface, #ffffff);
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-left: -10px;
    position: relative;
    padding: 0;
    transition: margin-left var(--chip-dur) var(--chip-ease), background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

    .unified-results-table .add-btn:first-child[b-p70kxw19s2] {
        margin-left: 0;
    }

    .unified-results-table .add-controls:hover .add-btn[b-p70kxw19s2] {
        margin-left: 3px;
    }

    .unified-results-table .add-controls:hover .add-btn:first-child[b-p70kxw19s2] {
        margin-left: 0;
    }

    .unified-results-table .add-btn:hover[b-p70kxw19s2] {
        background: var(--color-primary-light, #eff6ff);
        border-color: var(--color-primary, #3b82f6);
        border-style: solid;
        color: var(--color-primary, #3b82f6);
        transform: scale(1.1);
        z-index: 2;
    }

    .unified-results-table .add-btn i[b-p70kxw19s2] {
        font-size: 12px;
    }

    .unified-results-table .add-btn.add-btn-danger:hover[b-p70kxw19s2] {
        background: var(--color-danger-light, #fef2f2);
        border-color: var(--color-danger, #ef4444);
        color: var(--color-danger, #ef4444);
    }

/* Empty state for columns */
.empty-columns-state[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--color-text-muted, #94a3b8);
    border: 2px dashed var(--color-border, #d1d5db);
    border-radius: 8px;
    gap: 12px;
    background: var(--color-background-subtle, #fafafa);
}

    .empty-columns-state i[b-p70kxw19s2] {
        font-size: 48px;
        opacity: 0.5;
    }

/* Results Footer with Pagination */
.results-footer[b-p70kxw19s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-background-subtle, #f8fafc);
    border-top: 1px solid var(--color-border, #e2e8f0);
    font-size: 13px;
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
    flex-wrap: wrap;
    gap: 12px;
}

    .results-footer .execution-time[b-p70kxw19s2] {
        color: var(--color-text-muted, #64748b);
        font-size: 12px;
    }

/* Results Info Footer (legacy) */
.results-info[b-p70kxw19s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-background-subtle, #f8fafc);
    border-top: 1px solid var(--color-border, #e2e8f0);
    font-size: 13px;
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
}

    .results-info .results-stats[b-p70kxw19s2] {
        color: var(--color-text-primary, #1e293b);
    }

    .results-info .results-truncated[b-p70kxw19s2] {
        color: var(--color-text-muted, #64748b);
        font-style: italic;
    }

/* Results Table (legacy - keep for backward compat) */
.results-panel .panel-content[b-p70kxw19s2] {
    padding: 0;
}

.results-table-container[b-p70kxw19s2] {
    overflow-x: auto;
    max-height: 400px;
}

.results-table[b-p70kxw19s2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .results-table th[b-p70kxw19s2],
    .results-table td[b-p70kxw19s2] {
        padding: 10px 12px;
        text-align: left;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }

    .results-table th[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
        font-weight: 600;
        position: sticky;
        top: 0;
    }

    .results-table tbody tr:hover[b-p70kxw19s2] {
        background: var(--color-background-subtle, #f9fafb);
    }

.results-footer[b-p70kxw19s2] {
    padding: 12px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.chart-layout[b-p70kxw19s2] {
    display: flex;
    gap: 16px;
    height: 100%;
}

.chart-settings[b-p70kxw19s2] {
    flex: 0 0 260px;
    min-width: 240px;
}

    .chart-settings .panel-content[b-p70kxw19s2] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.chart-preview-area[b-p70kxw19s2] {
    flex: 1;
    min-width: 0;
}

.chart-panel-content[b-p70kxw19s2] {
    padding: 12px !important;
    min-height: 440px;
}

/* Chart type picker grid */
.chart-type-grid[b-p70kxw19s2] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.chart-type-btn[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface, white);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
}

    .chart-type-btn i[b-p70kxw19s2] {
        font-size: 20px;
    }

    .chart-type-btn:hover[b-p70kxw19s2] {
        border-color: var(--color-primary, #0366d6);
        color: var(--color-primary, #0366d6);
        background: rgba(3, 102, 214, 0.04);
    }

    .chart-type-btn.active[b-p70kxw19s2] {
        border-color: var(--color-primary, #0366d6);
        background: rgba(3, 102, 214, 0.08);
        color: var(--color-primary, #0366d6);
        font-weight: 600;
    }

/* Settings divider */
.settings-divider[b-p70kxw19s2] {
    height: 1px;
    background: var(--color-border, #e1e4e8);
    margin: 8px 0;
}

/* Toggle rows */
.chart-toggles[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.toggle-row[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
    cursor: pointer;
    padding: 4px 0;
}

    .toggle-row input[type="checkbox"][b-p70kxw19s2] {
        width: 15px;
        height: 15px;
        accent-color: var(--color-primary, #0366d6);
        cursor: pointer;
    }

/* Panel actions in header */
.panel-actions[b-p70kxw19s2] {
    display: flex;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.modal[b-p70kxw19s2] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

    .modal.active[b-p70kxw19s2] {
        display: flex;
    }

.modal-content[b-p70kxw19s2] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 8px;
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-right: 32px;
}

    .modal-header h3[b-p70kxw19s2] {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.modal-close[b-p70kxw19s2] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 1;
}

    .modal-close:hover[b-p70kxw19s2] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-footer[b-p70kxw19s2] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

/* Formula Preview */
.formula-preview[b-p70kxw19s2] {
    background: #1f2937;
    color: #f9fafb;
    padding: 16px;
    border-radius: 6px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

/* SQL Preview View */
.sql-view-container.active[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sql-preview-layout[b-p70kxw19s2] {
    display: flex;
    gap: 16px;
    height: 100%;
    flex: 1;
}

.sql-preview-panel[b-p70kxw19s2] {
    background: var(--color-bg-primary, #ffffff);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sql-preview-header[b-p70kxw19s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    flex-shrink: 0;
}

    .sql-preview-header h3[b-p70kxw19s2] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text-primary, #111827);
    }

.sql-preview-actions[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sql-source-badge[b-p70kxw19s2] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.025em;
}

    .sql-source-badge.executed[b-p70kxw19s2] {
        background: var(--color-success-light, #dcfce7);
        color: var(--color-success-text, #166534);
    }

    .sql-source-badge.preview[b-p70kxw19s2] {
        background: var(--color-primary-light, #dbeafe);
        color: var(--color-primary, #1e40af);
    }

.sql-code-block[b-p70kxw19s2] {
    background: #1f2937;
    color: #f9fafb;
    padding: 24px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

/* SQL Info Panel (right sidebar) */
.sql-info-panel[b-p70kxw19s2] {
    width: 280px;
    flex-shrink: 0;
    background: var(--color-bg-primary, #ffffff);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sql-info-header[b-p70kxw19s2] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    flex-shrink: 0;
}

    .sql-info-header h3[b-p70kxw19s2] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text-primary, #111827);
    }

.sql-info-body[b-p70kxw19s2] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sql-info-section[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sql-info-label[b-p70kxw19s2] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sql-info-value[b-p70kxw19s2] {
    font-size: 13px;
    color: var(--color-text-primary, #111827);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sql-info-highlight[b-p70kxw19s2] {
    font-weight: 600;
    color: var(--color-primary, #2563eb);
}

.sql-info-tag[b-p70kxw19s2] {
    background: var(--color-bg-secondary, #f3f4f6);
    color: var(--color-text-primary, #374151);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Courier New', Consolas, monospace;
}

.sql-info-muted[b-p70kxw19s2] {
    color: var(--color-text-secondary, #9ca3af);
    font-style: italic;
    font-size: 12px;
}

.sql-info-divider[b-p70kxw19s2] {
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 2px 0;
}

/* Export Options */
.export-options[b-p70kxw19s2] {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 24px 0;
}

.export-option[b-p70kxw19s2] {
    padding: 24px 32px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-surface, white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

    .export-option:hover[b-p70kxw19s2] {
        border-color: var(--color-primary, #3b82f6);
        background: var(--color-primary-light, #eff6ff);
    }

    .export-option i[b-p70kxw19s2] {
        font-size: 32px;
        color: var(--color-primary, #3b82f6);
    }

/* Send Report Modal */
.modal-content.modal-lg[b-p70kxw19s2] {
    max-width: 560px;
}

.send-modal-body[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.send-section[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.send-section-title[b-p70kxw19s2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .send-section-title i[b-p70kxw19s2] {
        font-size: 15px;
    }

.form-optional[b-p70kxw19s2] {
    font-weight: 400;
    color: var(--color-text-muted, #9ca3af);
    font-size: 12px;
}

/* Recipient tag input */
.recipient-input-container[b-p70kxw19s2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, white);
    min-height: 38px;
    cursor: text;
}

    .recipient-input-container:focus-within[b-p70kxw19s2] {
        border-color: var(--color-primary, #3b82f6);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }

.recipient-tag[b-p70kxw19s2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    border: 1px solid var(--color-primary-light, #bfdbfe);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.recipient-remove[b-p70kxw19s2] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-primary, #3b82f6);
    opacity: 0.6;
    font-size: 11px;
    display: flex;
    align-items: center;
}

    .recipient-remove:hover[b-p70kxw19s2] {
        opacity: 1;
    }

.recipient-input[b-p70kxw19s2] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 140px;
    font-size: 13px;
    padding: 2px 0;
    background: transparent;
}

.form-error[b-p70kxw19s2] {
    font-size: 12px;
    color: var(--color-danger, #ef4444);
}

/* Format picker chips */
.format-picker[b-p70kxw19s2] {
    display: flex;
    gap: 8px;
}

.format-chip[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, white);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--color-text-secondary, #4b5563);
}

    .format-chip:hover[b-p70kxw19s2] {
        border-color: var(--color-primary, #3b82f6);
        color: var(--color-primary, #3b82f6);
    }

    .format-chip.active[b-p70kxw19s2] {
        border-color: var(--color-primary, #3b82f6);
        background: var(--color-primary-light, #eff6ff);
        color: var(--color-primary, #3b82f6);
    }

    .format-chip.designed[b-p70kxw19s2] {
        border-style: dashed;
    }

        .format-chip.designed.active[b-p70kxw19s2] {
            border-style: solid;
        }

    .format-chip i[b-p70kxw19s2] {
        font-size: 16px;
    }

/* Export modal designed divider */
.export-designed-divider[b-p70kxw19s2] {
    text-align: center;
    margin: 8px 0;
    position: relative;
}

    .export-designed-divider[b-p70kxw19s2]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: var(--color-border, #e5e7eb);
    }

    .export-designed-divider span[b-p70kxw19s2] {
        position: relative;
        background: var(--color-surface, white);
        padding: 0 12px;
        font-size: 12px;
        color: var(--color-text-muted, #9ca3af);
    }

.export-option.designed[b-p70kxw19s2] {
    border-style: dashed;
    border-color: var(--color-primary, #3b82f6);
    background: var(--color-primary-light, #eff6ff);
    flex-direction: column;
    flex: 1;
}

    .export-option.designed i[b-p70kxw19s2] {
        color: var(--color-primary, #3b82f6);
    }

    .export-option.designed small[b-p70kxw19s2] {
        font-size: 11px;
        color: var(--color-text-muted, #6b7280);
        margin-top: -2px;
    }

    .export-option.designed:hover[b-p70kxw19s2] {
        border-style: solid;
        background: var(--color-primary-light, #dbeafe);
    }

/* Send status */
/* Send modal form tweaks */
.send-modal-body .form-group[b-p70kxw19s2] {
    margin-bottom: 10px;
}

    .send-modal-body .form-group label[b-p70kxw19s2] {
        font-size: 12px;
        color: var(--color-text-muted, #6b7280);
        margin-bottom: 4px;
    }

    .send-modal-body .form-group input[b-p70kxw19s2],
    .send-modal-body .form-group textarea[b-p70kxw19s2] {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
    }

        .send-modal-body .form-group input:focus[b-p70kxw19s2],
        .send-modal-body .form-group textarea:focus[b-p70kxw19s2] {
            outline: none;
            border-color: var(--color-primary, #3b82f6);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
        }


.form-hint[b-p70kxw19s2] {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
    display: block;
}

/* Form Elements */
.form-group[b-p70kxw19s2] {
    margin-bottom: 16px;
}

    .form-group label[b-p70kxw19s2] {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 13px;
    }

    .form-group input[b-p70kxw19s2],
    .form-group textarea[b-p70kxw19s2],
    .form-group select[b-p70kxw19s2] {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 4px;
        font-size: 13px;
    }

    .form-group textarea[b-p70kxw19s2] {
        min-height: 80px;
        resize: vertical;
    }

.checkbox-label[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .checkbox-label input[b-p70kxw19s2] {
        width: auto;
    }

/* Loading States */
.loading-state[b-p70kxw19s2],
.empty-state[b-p70kxw19s2] {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 13px;
}

.spinner[b-p70kxw19s2] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-text-inverse, white);
    border-radius: 50%;
    animation: spin-b-p70kxw19s2 0.8s linear infinite;
}

@keyframes spin-b-p70kxw19s2 {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATED FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

.calculated-field-add[b-p70kxw19s2] {
    padding: 8px 16px 8px 32px;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

.btn-full[b-p70kxw19s2] {
    width: 100%;
}

.field-item.calculated[b-p70kxw19s2] {
    background: var(--color-background-subtle, #fafafa);
    position: relative;
}

.field-edit-btn[b-p70kxw19s2] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-muted, #9ca3af);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.field-item:hover .field-edit-btn[b-p70kxw19s2] {
    opacity: 1;
}

.field-edit-btn:hover[b-p70kxw19s2] {
    color: var(--color-primary, #3b82f6);
}

.empty-calc-fields[b-p70kxw19s2] {
    padding: 12px 16px 12px 32px;
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
}

/* Modal Large */
.modal-large[b-p70kxw19s2] {
    max-width: 700px;
}

.modal-body[b-p70kxw19s2] {
    padding: 0 0 16px 0;
}

/* Formula Input */
.formula-input[b-p70kxw19s2] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    background: var(--color-background-subtle, #f8fafc);
}

.formula-help[b-p70kxw19s2] {
    background: var(--color-background-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    padding: 12px;
    margin-top: 12px;
    font-size: 12px;
}

    .formula-help .help-section[b-p70kxw19s2] {
        margin-bottom: 8px;
    }

        .formula-help .help-section:last-child[b-p70kxw19s2] {
            margin-bottom: 0;
        }

    .formula-help code[b-p70kxw19s2] {
        background: var(--color-surface, white);
        padding: 2px 6px;
        border-radius: 3px;
        border: 1px solid var(--color-border, #d1d5db);
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 11px;
        margin-right: 4px;
    }

    .formula-help strong[b-p70kxw19s2] {
        color: var(--color-primary, #3b82f6);
    }

/* Action button group positioning fix */
.action-btn-group[b-p70kxw19s2] {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TAB — Block-based report layout designer
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override design-tokens.css icon color variables within the design tab
   so icons are visible regardless of active theme */
.design-view-container[b-p70kxw19s2] {
    --icon-color-fill: #0366d6;
    --icon-color-fill-hover: #0256c7;
    --icon-color-fill-active: #024ea0;
    --icon-color-duotone: #586069;
    --icon-color-duotone-hover: #24292e;
    --icon-color-duotone-active: #0366d6;
}

/* Explicit icon color for palette, canvas, and props to beat !important */
.block-palette i[class*="ph-"][b-p70kxw19s2],
.canvas-area i[class*="ph-"][b-p70kxw19s2],
.properties-panel i[class*="ph-"][b-p70kxw19s2],
.canvas-toolbar i[class*="ph-"][b-p70kxw19s2] {
    color: var(--icon-color-duotone, #586069) !important;
}

.block-palette button:hover i[class*="ph-"][b-p70kxw19s2],
.canvas-area button:hover i[class*="ph-"][b-p70kxw19s2],
.properties-panel button:hover i[class*="ph-"][b-p70kxw19s2],
.canvas-toolbar button:hover i[class*="ph-"][b-p70kxw19s2] {
    color: var(--icon-color-duotone-hover, #24292e) !important;
}

.block-action-btn i[class*="ph-"][b-p70kxw19s2] {
    color: var(--color-text-secondary, #6b7280) !important;
}

.block-action-btn:hover i[class*="ph-"][b-p70kxw19s2] {
    color: var(--color-text-primary, #24292e) !important;
}

.block-action-btn.danger:hover i[class*="ph-"][b-p70kxw19s2] {
    color: var(--color-danger, #dc2626) !important;
}

/* KPI value/label colors - ensure they aren't overridden */
.block-kpi-row .kpi-value[b-p70kxw19s2],
.block-kpi-row .kpi-label[b-p70kxw19s2],
.block-kpi-row .kpi-source-badge[b-p70kxw19s2],
.block-kpi-row .kpi-delta[b-p70kxw19s2],
.block-kpi-row .kpi-period[b-p70kxw19s2] {
    color: inherit;
}

/* Canvas empty state icon */
.canvas-empty i[class*="ph-"][b-p70kxw19s2] {
    color: var(--color-text-muted, #9ca3af) !important;
    opacity: 0.3;
}

/* When design tab is active, remove padding from parent design-surface */
.design-view-container.active[b-p70kxw19s2] {
    margin: -24px;
    height: calc(100% + 48px);
}

/* ── Designer Layout ── */
.designer-layout[b-p70kxw19s2] {
    display: flex;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

/* ── Block Palette ── */
.block-palette[b-p70kxw19s2] {
    width: 220px;
    min-width: 220px;
    background: var(--color-surface, #fff);
    border-right: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 16px;
}

.palette-section-title[b-p70kxw19s2] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 14px 6px;
}

.palette-block[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 2px 8px;
    border-radius: 6px;
    cursor: grab;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
    border: 1px solid transparent;
    transition: all 0.15s;
    user-select: none;
}

    .palette-block:hover[b-p70kxw19s2] {
        background: var(--color-primary-light, #eef5ff);
        border-color: var(--color-primary-light, #c8dff7);
        color: var(--color-primary, #2563eb);
    }

        .palette-block:hover i[class*="ph-"][b-p70kxw19s2] {
            color: var(--color-primary, #2563eb) !important;
            opacity: 1;
        }

    .palette-block:active[b-p70kxw19s2] {
        cursor: grabbing;
        opacity: 0.7;
    }

    .palette-block i[b-p70kxw19s2] {
        font-size: 18px;
        width: 22px;
        text-align: center;
        opacity: 0.7;
    }

.block-hint[b-p70kxw19s2] {
    font-size: 10px;
    color: var(--color-text-secondary, #6b7280);
    font-weight: 400;
    margin-left: auto;
    white-space: nowrap;
}

/* ── Canvas Area ── */
.canvas-area[b-p70kxw19s2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-gray-100, #e8ecf0);
    overflow: auto;
    padding: 24px;
}

.canvas-toolbar[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: space-between;
}

.canvas-toolbar-left[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-toolbar-right[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-label[b-p70kxw19s2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .canvas-label i[b-p70kxw19s2] {
        font-size: 14px;
    }

.zoom-controls[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    padding: 2px;
}

.zoom-btn[b-p70kxw19s2] {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text-secondary, #6b7280);
}

    .zoom-btn:hover[b-p70kxw19s2] {
        background: var(--color-gray-50, #f9fafb);
        color: var(--color-text-primary, #1f2937);
    }

.zoom-label[b-p70kxw19s2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    padding: 0 6px;
    min-width: 36px;
    text-align: center;
}

/* ── Email Canvas ── */
.email-canvas[b-p70kxw19s2] {
    width: 640px;
    margin: 0 auto;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    min-height: 500px;
    position: relative;
    transition: transform 0.2s;
}

.canvas-drop-zone[b-p70kxw19s2] {
    padding: 20px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

    .canvas-drop-zone.drag-over[b-p70kxw19s2] {
        background: rgba(3, 102, 214, 0.03);
    }

.canvas-empty[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 40px;
    color: var(--color-text-secondary, #6b7280);
    border: 2px dashed var(--color-border, #e5e7eb);
    border-radius: 6px;
    margin: 20px;
}

    .canvas-empty i[b-p70kxw19s2] {
        font-size: 48px;
        opacity: 0.3;
    }

    .canvas-empty span[b-p70kxw19s2] {
        font-size: 14px;
        font-weight: 500;
    }

    .canvas-empty small[b-p70kxw19s2] {
        font-size: 12px;
        opacity: 0.7;
    }

/* ── Canvas Block ── */
.canvas-block[b-p70kxw19s2] {
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    overflow: hidden;
}

    .canvas-block:hover[b-p70kxw19s2] {
        border-color: var(--color-primary-light, #bdd5f5);
        z-index: 2;
    }

    .canvas-block.selected[b-p70kxw19s2] {
        border-color: var(--color-primary, #2563eb);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        z-index: 3;
    }

/* ── Block Actions ── */
.block-actions[b-p70kxw19s2] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 2px;
    z-index: 10;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.canvas-block:hover .block-actions[b-p70kxw19s2],
.canvas-block.selected .block-actions[b-p70kxw19s2] {
    display: flex;
}

.block-action-btn[b-p70kxw19s2] {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
}

    .block-action-btn:hover[b-p70kxw19s2] {
        background: var(--color-gray-50, #f9fafb);
        color: var(--color-text-primary, #1f2937);
    }

    .block-action-btn.danger:hover[b-p70kxw19s2] {
        background: var(--color-danger-light, #fee);
        color: var(--color-danger, #dc2626);
    }

/* ── Block Content Styles ── */

/* Header */
.block-header[b-p70kxw19s2] {
    padding: 24px 24px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.block-header-logo[b-p70kxw19s2] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--color-primary, #2563eb) 0%, #2ea4f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse, white);
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.block-header-text h2[b-p70kxw19s2] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 2px;
}

.block-header-text p[b-p70kxw19s2] {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
}

/* Title */
.block-title[b-p70kxw19s2] {
    padding: 16px 24px;
}

    .block-title h3[b-p70kxw19s2] {
        font-size: 17px;
        font-weight: 700;
        color: var(--color-text-primary, #1f2937);
        margin: 0;
    }

/* Rich Text */
.block-richtext[b-p70kxw19s2] {
    padding: 8px 24px;
}

    .block-richtext p[b-p70kxw19s2] {
        font-size: 14px;
        color: var(--color-text-secondary, #6b7280);
        line-height: 1.7;
        margin: 0;
    }

/* KPI Row */
.block-kpi-row[b-p70kxw19s2] {
    padding: 12px 24px;
    display: flex;
    gap: 12px;
}

.kpi-card[b-p70kxw19s2] {
    flex: 1;
    padding: 14px 16px;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    text-align: center;
}

.kpi-value[b-p70kxw19s2] {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary, #1f2937);
    line-height: 1;
}

.kpi-label[b-p70kxw19s2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.kpi-card.accent-blue .kpi-value[b-p70kxw19s2] {
    color: var(--color-primary, #2563eb);
}

.kpi-card.accent-blue[b-p70kxw19s2] {
    border-color: var(--color-primary-light, #bdd5f5);
    background: var(--color-primary-light, #f0f7ff);
}

.kpi-card.accent-green .kpi-value[b-p70kxw19s2] {
    color: var(--color-success, #1a7f37);
}

.kpi-card.accent-green[b-p70kxw19s2] {
    border-color: var(--color-success-light, #b4dfbe);
    background: var(--color-success-light, #f0fdf4);
}

.kpi-card.accent-orange .kpi-value[b-p70kxw19s2] {
    color: var(--color-warning, #d97706);
}

.kpi-card.accent-orange[b-p70kxw19s2] {
    border-color: var(--color-warning-light, #fde68a);
    background: var(--color-warning-light, #fffbeb);
}

.kpi-card.accent-red .kpi-value[b-p70kxw19s2] {
    color: var(--color-danger, #dc2626);
}

.kpi-card.accent-red[b-p70kxw19s2] {
    border-color: var(--color-danger-light, #f5c6cb);
    background: var(--color-danger-light, #fef2f2);
}

.kpi-source-badge[b-p70kxw19s2] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 4px;
}

    .kpi-source-badge.report[b-p70kxw19s2] {
        background: var(--color-primary-light, #dbeafe);
        color: var(--color-primary, #1e40af);
    }

    .kpi-source-badge.this-report[b-p70kxw19s2] {
        background: var(--color-primary-light, #e0e7ff);
        color: var(--color-primary, #3730a3);
    }

    .kpi-source-badge.static[b-p70kxw19s2] {
        background: var(--color-gray-100, #f3f4f6);
        color: var(--color-text-secondary, #6b7280);
    }

.kpi-delta[b-p70kxw19s2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 3px;
}

    .kpi-delta.up[b-p70kxw19s2] {
        color: var(--color-success, #16a34a);
    }

    .kpi-delta.down[b-p70kxw19s2] {
        color: var(--color-danger, #dc2626);
    }

    .kpi-delta.neutral[b-p70kxw19s2] {
        color: var(--color-text-muted, #9ca3af);
    }

    .kpi-delta i[b-p70kxw19s2] {
        font-size: 12px;
    }

.kpi-period[b-p70kxw19s2] {
    font-size: 9px;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 1px;
}

/* Report source badge */
.report-source-badge[b-p70kxw19s2] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-top: 4px;
}

    .report-source-badge.linked[b-p70kxw19s2] {
        background: var(--color-primary-light, #dbeafe);
        color: var(--color-primary, #1e40af);
    }

/* Chart block */
.block-chart[b-p70kxw19s2] {
    padding: 12px 24px;
}

.chart-render-placeholder[b-p70kxw19s2] {
    width: 100%;
    height: 280px;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-secondary, #6b7280);
}

    .chart-render-placeholder i[b-p70kxw19s2] {
        font-size: 36px;
        opacity: 0.4;
    }

    .chart-render-placeholder span[b-p70kxw19s2] {
        font-size: 13px;
        font-weight: 500;
    }

    .chart-render-placeholder small[b-p70kxw19s2] {
        font-size: 11px;
        opacity: 0.6;
    }

/* Data Table block */
.block-datatable[b-p70kxw19s2] {
    padding: 12px 24px;
}

.mini-table[b-p70kxw19s2] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
}

    .mini-table thead th[b-p70kxw19s2] {
        background: var(--color-gray-50, #f9fafb);
        padding: 8px 12px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-secondary, #6b7280);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }

    .mini-table tbody td[b-p70kxw19s2] {
        padding: 8px 12px;
        border-bottom: 1px solid var(--color-border, #f0f2f5);
        color: var(--color-text-primary, #1f2937);
    }

    .mini-table tbody tr:last-child td[b-p70kxw19s2] {
        border-bottom: none;
    }

    .mini-table tbody tr:hover[b-p70kxw19s2] {
        background: var(--color-gray-100, #fafbfc);
    }

.table-footer[b-p70kxw19s2] {
    padding: 6px 12px;
    background: var(--color-gray-50, #f9fafb);
    font-size: 11px;
    color: var(--color-text-secondary, #6b7280);
    border-top: 1px solid var(--color-border, #e5e7eb);
    text-align: right;
}

/* Divider */
.block-divider[b-p70kxw19s2] {
    padding: 8px 24px;
}

    .block-divider hr[b-p70kxw19s2] {
        border: none;
        height: 1px;
        background: var(--color-border, #e5e7eb);
    }

/* Spacer */
.block-spacer[b-p70kxw19s2] {
    height: 24px;
    position: relative;
}

    .block-spacer[b-p70kxw19s2]::after {
        content: 'spacer';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-text-muted, #ccc);
        opacity: 0;
        transition: opacity 0.15s;
    }

.canvas-block:hover .block-spacer[b-p70kxw19s2]::after {
    opacity: 1;
}

/* Image */
.block-image[b-p70kxw19s2] {
    padding: 12px 24px;
}

    .block-image img[b-p70kxw19s2] {
        width: 100%;
        border-radius: 6px;
        border: 1px solid var(--color-border, #e5e7eb);
    }

.image-placeholder[b-p70kxw19s2] {
    width: 100%;
    height: 120px;
    background: var(--color-gray-50, #f9fafb);
    border: 2px dashed var(--color-border, #e5e7eb);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #6b7280);
    font-size: 13px;
    gap: 8px;
}

/* Footer */
.block-footer[b-p70kxw19s2] {
    padding: 16px 24px;
    text-align: center;
}

    .block-footer p[b-p70kxw19s2] {
        font-size: 11px;
        color: var(--color-text-muted, #959da5);
        margin: 0;
    }

    .block-footer a[b-p70kxw19s2] {
        color: var(--color-primary, #2563eb);
        text-decoration: none;
    }

/* ── Properties Panel ── */
.properties-panel[b-p70kxw19s2] {
    width: 260px;
    min-width: 260px;
    background: var(--color-surface, #fff);
    border-left: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width 0.2s ease, min-width 0.2s ease, opacity 0.2s ease, border-width 0.2s ease;
}

    .properties-panel.collapsed[b-p70kxw19s2] {
        width: 0;
        min-width: 0;
        overflow: hidden;
        border-left-width: 0;
        opacity: 0;
        pointer-events: none;
    }

.props-empty[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--color-text-secondary, #6b7280);
    text-align: center;
    flex: 1;
}

    .props-empty i[b-p70kxw19s2] {
        font-size: 36px;
        opacity: 0.3;
        margin-bottom: 12px;
    }

    .props-empty span[b-p70kxw19s2] {
        font-size: 13px;
    }

.props-header[b-p70kxw19s2] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-gray-50, #f9fafb);
}

.props-header-title[b-p70kxw19s2] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .props-header-title i[b-p70kxw19s2] {
        font-size: 15px;
    }

.props-section[b-p70kxw19s2] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border, #f0f2f5);
}

.props-section-title[b-p70kxw19s2] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.prop-row[b-p70kxw19s2] {
    margin-bottom: 10px;
}

    .prop-row label[b-p70kxw19s2] {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-primary, #1f2937);
        margin-bottom: 4px;
    }

    .prop-row input[type="text"][b-p70kxw19s2],
    .prop-row select[b-p70kxw19s2],
    .prop-row input[type="number"][b-p70kxw19s2],
    .prop-row textarea[b-p70kxw19s2] {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 4px;
        font-size: 13px;
        font-family: inherit;
        background: var(--color-surface, #fff);
        color: var(--color-text-primary, #1f2937);
    }

        .prop-row input:focus[b-p70kxw19s2],
        .prop-row select:focus[b-p70kxw19s2],
        .prop-row textarea:focus[b-p70kxw19s2] {
            outline: none;
            border-color: var(--color-primary, #2563eb);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.prop-toggle[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}

    .prop-toggle input[b-p70kxw19s2] {
        width: 15px;
        height: 15px;
        accent-color: var(--color-primary, #2563eb);
        cursor: pointer;
    }

/* ── KPI Card Editor in Props ── */
.kpi-card-editor[b-p70kxw19s2] {
    padding: 10px;
    background: var(--color-gray-50, #f9fafb);
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
}

    .kpi-card-editor.expanded[b-p70kxw19s2] {
        border-color: var(--color-primary, #2563eb);
    }

.kpi-card-header[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0;
}

    .kpi-card-header.open[b-p70kxw19s2] {
        margin-bottom: 10px;
    }

.kpi-card-header-left[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
}

.card-num[b-p70kxw19s2] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    color: var(--color-text-inverse, white);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-card-actions[b-p70kxw19s2] {
    display: flex;
    gap: 2px;
}

    .kpi-card-actions button[b-p70kxw19s2] {
        width: 22px;
        height: 22px;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 3px;
        font-size: 11px;
        color: var(--color-text-secondary, #6b7280);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .kpi-card-actions button:hover[b-p70kxw19s2] {
            background: var(--color-border, #e1e4e8);
        }

        .kpi-card-actions button.danger:hover[b-p70kxw19s2] {
            background: var(--color-danger-light, #fee);
            color: var(--color-danger, #dc2626);
        }

.kpi-subsection[b-p70kxw19s2] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 0 4px;
    margin-top: 6px;
    border-top: 1px solid var(--color-border, #e8e8e8);
}

.add-kpi-btn[b-p70kxw19s2] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

    .add-kpi-btn:hover[b-p70kxw19s2] {
        border-color: var(--color-primary, #2563eb);
        color: var(--color-primary, #2563eb);
        background: var(--color-primary-light, #f0f7ff);
    }

/* ── Design tab responsive ── */
@media (max-width: 1100px) {
    .block-palette[b-p70kxw19s2] {
        width: 180px;
        min-width: 180px;
    }

    .properties-panel[b-p70kxw19s2] {
        width: 220px;
        min-width: 220px;
    }
}

@media (max-width: 900px) {
    .block-palette[b-p70kxw19s2] {
        width: 52px;
        min-width: 52px;
        overflow: hidden;
    }

        .block-palette .palette-section-title[b-p70kxw19s2],
        .block-palette .block-hint[b-p70kxw19s2],
        .palette-block span:not(.block-hint)[b-p70kxw19s2] {
            display: none;
        }

    .palette-block[b-p70kxw19s2] {
        justify-content: center;
        padding: 10px;
        margin: 2px 4px;
    }

    .properties-panel[b-p70kxw19s2] {
        width: 200px;
        min-width: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR DISPLAY MODES (mirrors MainLayout nav display setting)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Icons Only — hide text labels, show tooltips on hover */
.toolbar[data-display-mode="icons-only"] .btn-label[b-p70kxw19s2] {
    display: none;
}

.toolbar[data-display-mode="icons-only"] .btn[b-p70kxw19s2],
.toolbar[data-display-mode="icons-only"] .tab-btn[b-p70kxw19s2] {
    padding: 8px 10px;
    position: relative;
}

    /* Tooltip on hover for icons-only mode */
    .toolbar[data-display-mode="icons-only"] .btn[title][b-p70kxw19s2]::after,
    .toolbar[data-display-mode="icons-only"] .tab-btn[title][b-p70kxw19s2]::after {
        content: attr(title);
        position: absolute;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-text-primary, #1f2937);
        color: var(--color-text-inverse, white);
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 100;
    }

    .toolbar[data-display-mode="icons-only"] .btn[title]:hover[b-p70kxw19s2]::after,
    .toolbar[data-display-mode="icons-only"] .tab-btn[title]:hover[b-p70kxw19s2]::after {
        opacity: 1;
    }

/* Text Only — hide icons, show text labels */
.toolbar[data-display-mode="text-only"] .btn > i[b-p70kxw19s2],
.toolbar[data-display-mode="text-only"] .tab-btn > i[b-p70kxw19s2] {
    display: none;
}

.toolbar[data-display-mode="text-only"] .btn[b-p70kxw19s2],
.toolbar[data-display-mode="text-only"] .tab-btn[b-p70kxw19s2] {
    gap: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .sidebar[b-p70kxw19s2] {
        width: 240px;
    }

    .chart-layout[b-p70kxw19s2] {
        flex-direction: column;
    }

    .chart-settings[b-p70kxw19s2] {
        flex: none;
        width: 100%;
    }

    .chart-type-grid[b-p70kxw19s2] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    .report-builder-container[b-p70kxw19s2] {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 60px);
    }

    .sidebar[b-p70kxw19s2] {
        width: 100%;
        height: auto;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }

    .sidebar-collapse-toggle[b-p70kxw19s2] {
        display: none;
    }

    .toolbar[b-p70kxw19s2] {
        flex-direction: column;
        align-items: flex-start;
    }

    .toolbar-right[b-p70kxw19s2] {
        width: 100%;
        justify-content: flex-start;
    }

    .condition-row[b-p70kxw19s2] {
        flex-direction: column;
        align-items: stretch;
    }

        .condition-row select[b-p70kxw19s2],
        .condition-row input[b-p70kxw19s2] {
            width: 100%;
        }
}

/* Base Table Indicator */
.base-table-indicator[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-alt, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    font-size: 0.8125rem;
}

.base-table-label[b-p70kxw19s2] {
    color: var(--color-text-muted, #64748b);
    font-weight: 500;
}

.base-table-value[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text, #1e293b);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
}

    .base-table-value.locked[b-p70kxw19s2] {
        background: var(--color-primary-light, #e0f2fe);
        border-color: var(--color-primary, #0284c7);
        color: var(--color-primary-dark, #0369a1);
    }

    .base-table-value i[b-p70kxw19s2] {
        font-size: 0.75rem;
        opacity: 0.7;
    }

.btn-link.reset-base[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-muted, #64748b);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

    .btn-link.reset-base:hover[b-p70kxw19s2] {
        background: var(--color-danger-light, #fee2e2);
        color: var(--color-danger, #dc2626);
    }

    .btn-link.reset-base i[b-p70kxw19s2] {
        font-size: 0.875rem;
    }

/* Drop Zone Active Highlight */
.drop-zone-active[b-p70kxw19s2] {
    background-color: var(--color-primary-light, #e0f2fe) !important;
    border: 2px dashed var(--color-primary, #0284c7) !important;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.conditions-container.drop-zone-active[b-p70kxw19s2],
.grouping-section.drop-zone-active[b-p70kxw19s2],
.columns-drop-zone.drop-zone-active[b-p70kxw19s2] {
    box-shadow: inset 0 0 0 2px var(--color-primary, #0284c7);
}

.drop-zone-active .drop-hint[b-p70kxw19s2],
.drop-zone-active .drop-hint-filter[b-p70kxw19s2],
.drop-zone-active .empty-columns-state[b-p70kxw19s2] {
    color: var(--color-primary-dark, #0369a1);
    font-weight: 500;
}

/* Validation Error Banner */
.validation-error-banner[b-p70kxw19s2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger, #dc2626);
    border-left: 4px solid var(--color-danger, #dc2626);
    border-radius: 6px;
    margin-bottom: 1rem;
    color: var(--color-danger-dark, #991b1b);
}

    .validation-error-banner > i[b-p70kxw19s2] {
        font-size: 1.25rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

    .validation-error-banner .error-content[b-p70kxw19s2] {
        flex: 1;
    }

        .validation-error-banner .error-content strong[b-p70kxw19s2] {
            display: block;
            margin-bottom: 0.25rem;
            font-size: 0.875rem;
        }

        .validation-error-banner .error-content p[b-p70kxw19s2] {
            margin: 0;
            font-size: 0.8125rem;
            line-height: 1.5;
            white-space: pre-line;
        }

    .validation-error-banner .btn-dismiss[b-p70kxw19s2] {
        background: none;
        border: none;
        padding: 0.25rem;
        cursor: pointer;
        color: var(--color-danger, #dc2626);
        opacity: 0.7;
        transition: opacity 0.15s ease;
    }

        .validation-error-banner .btn-dismiss:hover[b-p70kxw19s2] {
            opacity: 1;
        }

/* ── AI Report Builder ─────────────────────── */

.ai-report-btn[b-p70kxw19s2] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: var(--color-text-inverse, #fff) !important;
    border: none !important;
    transition: all 0.2s ease;
}

    .ai-report-btn:hover[b-p70kxw19s2] {
        background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
    }

.ai-report-modal[b-p70kxw19s2] {
    max-width: 560px;
    width: 90%;
}

.ai-report-body[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 16px 0;
}

.ai-report-label[b-p70kxw19s2] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #1e293b);
    font-size: 0.875rem;
}

.ai-report-textarea[b-p70kxw19s2] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 100px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    transition: border-color 0.2s ease;
    font-family: inherit;
    line-height: 1.5;
}

    .ai-report-textarea:focus[b-p70kxw19s2] {
        outline: none;
        border-color: var(--color-accent-ai, #7c3aed);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    }

    .ai-report-textarea:disabled[b-p70kxw19s2] {
        opacity: 0.6;
    }

.ai-report-examples[b-p70kxw19s2] {
    margin-top: 1rem;
}

.examples-label[b-p70kxw19s2] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.5rem;
}

.example-chips[b-p70kxw19s2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.example-chip[b-p70kxw19s2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .example-chip:hover[b-p70kxw19s2] {
        border-color: var(--color-accent-ai, #7c3aed);
        color: var(--color-accent-ai, #7c3aed);
        background: rgba(124, 58, 237, 0.05);
    }

    .example-chip i[b-p70kxw19s2] {
        font-size: 0.85rem;
    }

.ai-report-error[b-p70kxw19s2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #b91c1c);
    font-size: 0.8125rem;
    line-height: 1.4;
}

    .ai-report-error i[b-p70kxw19s2] {
        margin-top: 2px;
        flex-shrink: 0;
    }

.ai-report-warning[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--color-warning-light, #fefce8);
    color: var(--color-warning-text, #92400e);
    font-size: 0.8125rem;
}

    .ai-report-warning i[b-p70kxw19s2] {
        flex-shrink: 0;
    }

.ai-generate-btn[b-p70kxw19s2] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: var(--color-text-inverse, #fff) !important;
    border: none !important;
}

    .ai-generate-btn:hover:not(:disabled)[b-p70kxw19s2] {
        background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
    }

    .ai-generate-btn:disabled[b-p70kxw19s2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* AI Progress Bar */
.ai-progress-container[b-p70kxw19s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
    min-height: 180px;
}

.ai-progress-icon[b-p70kxw19s2] {
    font-size: 2.5rem;
    color: var(--color-accent-ai, #7c3aed);
    line-height: 1;
}

    .ai-progress-icon .spinning[b-p70kxw19s2] {
        display: inline-block;
        animation: ai-spin-b-p70kxw19s2 2s linear infinite;
    }

@keyframes ai-spin-b-p70kxw19s2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ai-progress-status[b-p70kxw19s2] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    text-align: center;
}

.ai-progress-bar-track[b-p70kxw19s2] {
    width: 100%;
    max-width: 360px;
    height: 8px;
    background: var(--bg-secondary, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.ai-progress-bar-fill[b-p70kxw19s2] {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 50%, #7c3aed 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    transition: width 0.4s ease;
    animation: ai-progress-shimmer-b-p70kxw19s2 1.5s ease-in-out infinite;
}

@keyframes ai-progress-shimmer-b-p70kxw19s2 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ai-progress-percent[b-p70kxw19s2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}

/* ── AI Refine Section ────────────────────── */

.ai-refine-section[b-p70kxw19s2] {
    margin: 0 0 0.5rem 0;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%);
    overflow: hidden;
}

.ai-refine-header[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-ai, #7c3aed);
}

    .ai-refine-header i:first-child[b-p70kxw19s2] {
        font-size: 1rem;
    }

.ai-refine-close[b-p70kxw19s2] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    line-height: 1;
}

    .ai-refine-close:hover[b-p70kxw19s2] {
        color: var(--color-text-secondary, #64748b);
        background: rgba(0,0,0,0.05);
    }

.ai-refine-body[b-p70kxw19s2] {
    padding: 0 0.75rem 0.625rem;
}

.ai-refine-input-row[b-p70kxw19s2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ai-refine-input[b-p70kxw19s2] {
    flex: 1;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.8125rem;
    background: var(--color-surface, #fff);
    outline: none;
    transition: border-color 0.15s;
}

    .ai-refine-input:focus[b-p70kxw19s2] {
        border-color: var(--color-accent-ai, #7c3aed);
        box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
    }

    .ai-refine-input[b-p70kxw19s2]::placeholder {
        color: var(--color-text-muted, #94a3b8);
    }

.ai-refine-apply-btn[b-p70kxw19s2] {
    white-space: nowrap;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: var(--color-text-inverse, #fff) !important;
    border: none !important;
}

    .ai-refine-apply-btn:hover:not(:disabled)[b-p70kxw19s2] {
        background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
    }

    .ai-refine-apply-btn:disabled[b-p70kxw19s2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ai-refine-error[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #b91c1c);
    font-size: 0.75rem;
}

.ai-refine-success[b-p70kxw19s2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success-text, #15803d);
    font-size: 0.75rem;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Reset Password Page — matches Login + Verify2FA + ForgotPassword
   Single-column centered card. Aurora + glassy logo + glass card.
   Adds: .requirements list and .lead-icon.warn variant.
   ═══════════════════════════════════════════════════════════════ */

.login-page[b-64ibzqv3n2] {
    --brand-ink: #0a1929;
    --brand-muted: #5b6b80;
    --brand-primary-dark: color-mix(in srgb, var(--brand-primary, #0052CC) 78%, #000);
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary, #0052CC) 12%, #fff);

    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    color: var(--brand-ink);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ───────────────── Aurora blobs ───────────────── */
.aurora[b-64ibzqv3n2] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
}

.aurora-1[b-64ibzqv3n2] {
    width: 500px;
    height: 500px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 55%, transparent);
    top: -120px;
    right: -120px;
    animation: aurora-drift-1-b-64ibzqv3n2 28s ease-in-out infinite alternate;
}

.aurora-2[b-64ibzqv3n2] {
    width: 460px;
    height: 460px;
    background: color-mix(in srgb, var(--brand-accent, #1A8AC4) 50%, transparent);
    bottom: -120px;
    left: -100px;
    animation: aurora-drift-2-b-64ibzqv3n2 34s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1-b-64ibzqv3n2 {
    0%   { transform: translate(0, 0)         scale(1); }
    50%  { transform: translate(-120px, 80px) scale(1.15); }
    100% { transform: translate(60px, 140px)  scale(0.9); }
}

@keyframes aurora-drift-2-b-64ibzqv3n2 {
    0%   { transform: translate(0, 0)          scale(1); }
    50%  { transform: translate(140px, -80px)  scale(1.1); }
    100% { transform: translate(-80px, -140px) scale(0.95); }
}

/* ───────────────── Centered wrap ───────────────── */
.auth-wrap[b-64ibzqv3n2] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    overflow-y: auto;
}

/* ───────────────── Card ───────────────── */
.login-card[b-64ibzqv3n2] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 12px 32px -8px rgba(15, 23, 42, 0.18),
        0 30px 60px -20px rgba(15, 23, 42, 0.25);
    animation: card-in-b-64ibzqv3n2 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .login-card[b-64ibzqv3n2]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-primary, #0052CC) 40%, transparent) 0%,
            color-mix(in srgb, var(--brand-accent, #1A8AC4) 15%, transparent) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }

@keyframes card-in-b-64ibzqv3n2 {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───────────────── Floating logo + shimmer ───────────────── */
.brand-tile[b-64ibzqv3n2] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0 auto 20px;
    filter:
        drop-shadow(0 4px 6px rgba(15, 23, 42, 0.10))
        drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18));
}

    .brand-tile[b-64ibzqv3n2]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.75) 50%,
            transparent 70%);
        background-size: 220% 100%;
        background-position: -120% 0;
        mix-blend-mode: screen;
        animation: brand-shimmer-b-64ibzqv3n2 7s ease-in-out infinite;
        animation-delay: 2s;
        pointer-events: none;
    }

.brand-tile-text[b-64ibzqv3n2] {
    font-weight: 800;
    font-size: 42px;
    letter-spacing: 0.5px;
    color: var(--brand-primary, #0052CC);
    line-height: 1;
}

.brand-tile-img[b-64ibzqv3n2] {
    display: block;
    max-width: 200px;
    max-height: 90px;
    object-fit: contain;
}

@keyframes brand-shimmer-b-64ibzqv3n2 {
    0%   { background-position: -120% 0; }
    50%  { background-position:  120% 0; }
    100% { background-position:  120% 0; }
}

/* ───────────────── Lead icon (above title) ───────────────── */
.lead-icon[b-64ibzqv3n2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 4px auto 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 12%, white);
    color: var(--brand-primary, #0052CC);
    font-size: 22px;
}

    /* Warn variant — used when the reset link is invalid/expired */
    .lead-icon.warn[b-64ibzqv3n2] {
        background: color-mix(in srgb, #f59e0b 14%, white);
        color: var(--color-warning-text, #b45309);
    }

/* ───────────────── Card text ───────────────── */
.card-title[b-64ibzqv3n2] {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--brand-ink);
}

.card-sub[b-64ibzqv3n2] {
    color: var(--brand-muted);
    font-size: 14px;
    margin: 0 0 26px;
    line-height: 1.55;
}

    .card-sub strong[b-64ibzqv3n2] {
        color: var(--brand-ink);
        font-weight: 700;
    }

/* ───────────────── Form ───────────────── */
.login-form[b-64ibzqv3n2] {
    margin: 0;
    text-align: left;
}

.field[b-64ibzqv3n2] {
    margin-bottom: 14px;
}

.field-label[b-64ibzqv3n2] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.field-input[b-64ibzqv3n2] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    color: var(--brand-ink);
    background: var(--color-surface, #fff);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .field-input[b-64ibzqv3n2]::placeholder {
        color: var(--color-text-muted, #94a3b8);
    }

    .field-input:focus[b-64ibzqv3n2] {
        outline: 0;
        border-color: var(--brand-primary, #0052CC);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #0052CC) 12%, transparent);
    }

    .field-input:disabled[b-64ibzqv3n2] {
        background: var(--color-gray-100, #f8fafc);
        cursor: not-allowed;
        opacity: 0.7;
    }

/* ───────────────── Submit ───────────────── */
.submit-btn[b-64ibzqv3n2] {
    width: 100%;
    padding: 12px 16px;
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary, #0052CC), var(--brand-primary-dark));
    color: var(--color-text-inverse, #fff);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary, #0052CC) 25%, transparent);
}

    .submit-btn:hover:not(:disabled)[b-64ibzqv3n2] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px color-mix(in srgb, var(--brand-primary, #0052CC) 35%, transparent);
    }

    .submit-btn:active:not(:disabled)[b-64ibzqv3n2] {
        transform: translateY(0);
    }

    .submit-btn:disabled[b-64ibzqv3n2] {
        cursor: not-allowed;
        filter: saturate(0.7);
        opacity: 0.85;
    }

    .submit-btn i[b-64ibzqv3n2] {
        font-size: 16px;
    }

    .submit-btn .spinning[b-64ibzqv3n2] {
        animation: spin-b-64ibzqv3n2 0.9s linear infinite;
    }

@keyframes spin-b-64ibzqv3n2 {
    to { transform: rotate(360deg); }
}

/* ───────────────── Alert ───────────────── */
.login-alert[b-64ibzqv3n2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 10px;
    color: var(--color-danger-text, #991b1b);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

    .login-alert > i[b-64ibzqv3n2] {
        font-size: 18px;
        flex-shrink: 0;
        color: var(--color-danger, #dc2626);
        margin-top: 1px;
    }

    .login-alert span[b-64ibzqv3n2] {
        flex: 1;
    }

.alert-close[b-64ibzqv3n2] {
    background: transparent;
    border: 0;
    color: var(--color-danger-text, #991b1b);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}

    .alert-close:hover[b-64ibzqv3n2] {
        background: rgba(153, 27, 27, 0.1);
    }

/* ───────────────── Password requirements ───────────────── */
.requirements[b-64ibzqv3n2] {
    list-style: none;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--color-gray-100, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    text-align: left;
    font-size: 12px;
    color: var(--brand-muted);
}

    .requirements li[b-64ibzqv3n2] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
        line-height: 1.4;
    }

        .requirements li i[b-64ibzqv3n2] {
            color: var(--color-success, #10b981);
            font-size: 14px;
            flex-shrink: 0;
        }

/* ───────────────── Success state ───────────────── */
.success-state .success-icon[b-64ibzqv3n2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: color-mix(in srgb, #10b981 14%, white);
    color: var(--color-success, #10b981);
    font-size: 32px;
    animation: pop-in-b-64ibzqv3n2 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pop-in-b-64ibzqv3n2 {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* ───────────────── Foot ───────────────── */
.card-foot[b-64ibzqv3n2] {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    font-size: 13px;
}

.link[b-64ibzqv3n2] {
    color: var(--brand-primary, #0052CC);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .link:hover[b-64ibzqv3n2] {
        text-decoration: underline;
    }

    .link i[b-64ibzqv3n2] {
        font-size: 14px;
    }

/* ───────────────── Responsive ───────────────── */
@media (max-width: 600px) {
    .auth-wrap[b-64ibzqv3n2] {
        padding: 20px 16px;
    }

    .login-card[b-64ibzqv3n2] {
        padding: 28px 22px;
    }

    .card-title[b-64ibzqv3n2] {
        font-size: 22px;
    }

    .aurora-1[b-64ibzqv3n2] {
        width: 320px;
        height: 320px;
    }

    .aurora-2[b-64ibzqv3n2] {
        width: 300px;
        height: 300px;
    }
}

/* ───────────────── Reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .aurora-1[b-64ibzqv3n2],
    .aurora-2[b-64ibzqv3n2],
    .brand-tile[b-64ibzqv3n2]::after,
    .login-card[b-64ibzqv3n2],
    .submit-btn .spinning[b-64ibzqv3n2],
    .success-state .success-icon[b-64ibzqv3n2] {
        animation: none !important;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
.container[b-te8cutd9eq] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.settings-grid[b-te8cutd9eq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-icon[b-te8cutd9eq] {
    font-size: 18px;
    color: var(--color-text-secondary, #586069);
}

.danger-icon[b-te8cutd9eq] {
    color: var(--color-danger, #d73a49);
}

.setting-item[b-te8cutd9eq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .setting-item:last-child[b-te8cutd9eq] {
        border-bottom: none;
    }

.setting-info[b-te8cutd9eq] {
    flex: 1;
}

.setting-label[b-te8cutd9eq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.setting-description[b-te8cutd9eq] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.theme-select[b-te8cutd9eq],
.nav-select[b-te8cutd9eq] {
    max-width: 200px;
}

.toggle-switch[b-te8cutd9eq] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .toggle-switch input[b-te8cutd9eq] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-te8cutd9eq] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border, #ccc);
    transition: .3s;
    border-radius: 24px;
}

    .toggle-slider[b-te8cutd9eq]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: var(--color-text-inverse, white);
        transition: .3s;
        border-radius: 50%;
    }

input:checked + .toggle-slider[b-te8cutd9eq] {
    background-color: var(--color-primary, #0366d6);
}

    input:checked + .toggle-slider[b-te8cutd9eq]:before {
        transform: translateX(24px);
    }

.privacy-actions[b-te8cutd9eq] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.danger-zone-wrapper[b-te8cutd9eq]  .card {
    border-color: var(--color-danger, #d73a49);
}

.danger-zone-wrapper[b-te8cutd9eq]  .card-header {
    background: var(--color-danger-light, #ffeef0);
    border-bottom-color: var(--color-danger, #d73a49);
}

.danger-zone-wrapper[b-te8cutd9eq]  .card-title {
    color: var(--color-danger, #d73a49);
}

.settings-footer[b-te8cutd9eq] {
    text-align: center;
    padding: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.settings-footer-text[b-te8cutd9eq] {
    color: var(--color-text-secondary, #586069);
    font-size: 13px;
}

/* Two-Factor Authentication */
.tfa-setup[b-te8cutd9eq] {
    margin-top: 16px;
}

.tfa-instruction[b-te8cutd9eq] {
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 16px;
}

.tfa-qr-container[b-te8cutd9eq] {
    text-align: center;
    padding: 24px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: 8px;
    margin-bottom: 16px;
}

.tfa-qr-image[b-te8cutd9eq] {
    border-radius: 8px;
    border: 2px solid var(--color-border, #e1e4e8);
}

.tfa-manual-entry[b-te8cutd9eq] {
    text-align: center;
    margin-bottom: 24px;
}

.tfa-manual-label[b-te8cutd9eq] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 8px;
}

.tfa-secret-code[b-te8cutd9eq] {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 16px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 2px;
    color: var(--color-text-primary, #24292e);
    word-break: break-all;
    user-select: all;
}

.tfa-verify-form[b-te8cutd9eq] {
    border-top: 1px solid var(--color-border, #e1e4e8);
    padding-top: 20px;
}

.tfa-code-input-row[b-te8cutd9eq] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 12px;
}

.tfa-code-input[b-te8cutd9eq] {
    max-width: 160px;
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.tfa-recovery[b-te8cutd9eq] {
    margin-top: 16px;
}

.tfa-recovery-grid[b-te8cutd9eq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0;
}

.tfa-recovery-code[b-te8cutd9eq] {
    display: block;
    padding: 10px 16px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 16px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    text-align: center;
    letter-spacing: 1px;
    color: var(--color-text-primary, #24292e);
}

.tfa-password-form[b-te8cutd9eq] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

@media (max-width: 600px) {
    .tfa-code-input-row[b-te8cutd9eq] {
        flex-direction: column;
    }

    .tfa-code-input[b-te8cutd9eq] {
        max-width: 100%;
    }

    .tfa-recovery-grid[b-te8cutd9eq] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/TicketDetails.razor.rz.scp.css */
/* ============================================ */
/* TICKET DETAILS - COMPACT INLINE LAYOUT       */
/* Uses design-tokens.css variables throughout  */
/* ============================================ */

.container[b-dgf2u8dyjx] {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-4) var(--spacing-5);
}

/* Back-to-list link — an in-page way back to the ticket list without
   reaching for the browser back button or the sidebar. */
.back-to-list[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.15s;
}

.back-to-list:hover[b-dgf2u8dyjx] {
    color: var(--color-primary);
}

.back-to-list i[b-dgf2u8dyjx] {
    font-size: 15px;
}

/* ============================================ */
/* COMPACT INLINE HEADER                        */
/* ============================================ */

.compact-header[b-dgf2u8dyjx] {
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* ─────────────────────────────────────────────────────────────────────
   Internal ticket header treatment.
   Chip-only — no background gradient, no border-color change. The
   amber Internal pill in .header-badges carries the signal; matches
   the lock-only treatment in the list view so the visual language
   stays consistent (lock prefix in lists, lock chip in detail).
   ─────────────────────────────────────────────────────────────────── */

.internal-chip[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning-text, #78350f);
    border: 1px solid var(--color-warning, #fcd34d);
    padding: 4px 10px 4px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.internal-chip i[b-dgf2u8dyjx] {
    font-size: 12px;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   Visibility toggle (Actions panel) — Internal vs External.
   The whole tile lights up amber when Internal is on, mirroring the
   header treatment so the toggle's effect is visible before the save
   even commits. Switch element is a standard CSS toggle keyed off the
   checkbox state — works without JS interop.
   ─────────────────────────────────────────────────────────────────── */
.visibility-toggle[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-gray-100, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.visibility-toggle.is-internal[b-dgf2u8dyjx] {
    background: var(--color-warning-light, #fffbeb);
    border-color: var(--color-warning, #fcd34d);
}

.visibility-toggle-text[b-dgf2u8dyjx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.visibility-toggle-label[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
}

.visibility-toggle.is-internal .visibility-toggle-label[b-dgf2u8dyjx] {
    color: var(--color-warning-text, #78350f);
}

.visibility-toggle-label i[b-dgf2u8dyjx] {
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-secondary, #64748b);
}

.visibility-toggle.is-internal .visibility-toggle-label i[b-dgf2u8dyjx] {
    color: var(--color-warning, #d97706);
}

.visibility-toggle-sub[b-dgf2u8dyjx] {
    font-size: 11px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.4;
}

.visibility-toggle-sub strong[b-dgf2u8dyjx] {
    color: var(--color-text-primary, #0f172a);
    font-weight: 600;
}

.visibility-toggle.is-internal .visibility-toggle-sub strong[b-dgf2u8dyjx] {
    color: var(--color-warning-text, #422006);
}

/* Internal-org visibility: a fixed status, not a switch — reads as locked
   by rule rather than a toggle that won't move. */
.visibility-locked[b-dgf2u8dyjx] {
    cursor: default;
}

.visibility-locked-chip[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-text, #78350f);
    background: rgba(120, 53, 15, 0.10);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* The switch itself — pure CSS, no JS. Width/height chosen to match
   the SearchSelect chevron baseline so the column reads as a tidy stack. */
.visibility-switch[b-dgf2u8dyjx] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.visibility-switch input[b-dgf2u8dyjx] {
    opacity: 0;
    width: 0;
    height: 0;
}

.visibility-switch-slider[b-dgf2u8dyjx] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border, #cbd5e1);
    border-radius: 999px;
    transition: background-color 0.15s;
}

.visibility-switch-slider[b-dgf2u8dyjx]::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.visibility-switch input:checked + .visibility-switch-slider[b-dgf2u8dyjx] {
    background-color: var(--color-warning, #d97706);
}

.visibility-switch input:checked + .visibility-switch-slider[b-dgf2u8dyjx]::before {
    transform: translateX(16px);
}

.header-row[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}

.ticket-id[b-dgf2u8dyjx] {
    font-family: var(--font-family-mono);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Migration provenance chip — only rendered for imported tickets.
   Quiet, verifiable reference metadata next to the new ticket number
   ("yes, this TKT-00421 is your old OESuite #58176"). Deliberately
   subdued — it's not an alert. */
.legacy-chip[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary-hover, #4338ca);
    border: 1px solid var(--color-primary-light, #c7d2fe);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.legacy-chip i[b-dgf2u8dyjx] {
    font-size: 13px;
}

.ticket-title[b-dgf2u8dyjx] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: var(--line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Long titles clamp to one line; an inline chevron beside the title
   reveals the full text full-width below the header row. */
.title-chevron[b-dgf2u8dyjx] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1;
}

.title-chevron:hover[b-dgf2u8dyjx] {
    background: var(--color-gray-50);
    color: var(--color-text-primary);
}

.title-full[b-dgf2u8dyjx] {
    margin: var(--spacing-3) 0 0;
    padding-top: var(--spacing-3);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-primary);
    width: 100%;
}

.header-badges[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    flex-shrink: 0;
}

.actions-bar[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.meta-compact[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-6);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
    align-items: center;
}

.meta-item-inline[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
}

    .meta-item-inline strong[b-dgf2u8dyjx] {
        color: var(--color-text-primary);
        font-weight: var(--font-weight-medium);
    }

    .meta-item-inline i[b-dgf2u8dyjx] {
        font-size: var(--font-size-md);
        color: var(--color-text-muted);
    }

    /* Field label (e.g. "Assigned to") — muted so the bold value stays the focus. */
    .meta-item-inline .meta-label[b-dgf2u8dyjx] {
        color: var(--color-text-muted);
    }

.meta-divider[b-dgf2u8dyjx] {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* ============================================ */
/* CONTENT GRID                                 */
/* ============================================ */

.content-grid[b-dgf2u8dyjx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--spacing-4);
}

.main-content[b-dgf2u8dyjx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    min-width: 0;
}

.sidebar[b-dgf2u8dyjx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* When the user has no permissions for any sidebar card (Actions,
   Time Tracking, Associated Tickets, etc. — all conditionally
   rendered), the sidebar div has zero element children. Detect that
   via :has() and collapse the grid so the main content area uses the
   full width instead of leaving an empty 320px column on the right.
   Razor leaves whitespace inside the empty div, so :empty won't fire
   — :not(:has(> *)) checks for "no element child", which is the
   actual condition we care about. */
.content-grid:not(:has(> .sidebar > *))[b-dgf2u8dyjx] {
    grid-template-columns: minmax(0, 1fr);
}
.content-grid:not(:has(> .sidebar > *)) > .sidebar[b-dgf2u8dyjx] {
    display: none;
}

    .sidebar[b-dgf2u8dyjx]  .card, .sidebar[b-dgf2u8dyjx]  .card-body {
        overflow: visible;
    }

/* ============================================ */
/* ATTACHMENTS                                  */
/* ============================================ */

.attachments-grid[b-dgf2u8dyjx] {
    display: grid;
    gap: var(--spacing-3);
}

.attachment-card[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    transition: all var(--transition-normal);
}

    .attachment-card:hover[b-dgf2u8dyjx] {
        background: var(--color-surface-hover);
        border-color: var(--color-primary);
    }

.attachment-icon[b-dgf2u8dyjx] {
    font-size: var(--icon-size-xl);
    flex-shrink: 0;
}

.attachment-info[b-dgf2u8dyjx] {
    flex: 1;
    min-width: 0;
}

.attachment-name[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    align-items: center;
}

.attachment-actions[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.btn-icon[b-dgf2u8dyjx] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--icon-size-sm);
    text-decoration: none;
    color: inherit;
}

    .btn-icon:hover[b-dgf2u8dyjx] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

/* ============================================ */
/* COMMENTS & ACTIVITY                          */
/* ============================================ */

.comment[b-dgf2u8dyjx] {
    padding: var(--spacing-4);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-3);
    background: var(--color-surface);
    transition: all var(--transition-normal);
}

    .comment:hover[b-dgf2u8dyjx] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(3, 102, 214, 0.1);
    }

.comment-unread[b-dgf2u8dyjx] {
    border-left: 3px solid var(--color-danger, #ef4444);
    background: var(--color-danger-light, #fef2f2);
}

    .comment-unread:hover[b-dgf2u8dyjx] {
        border-color: var(--color-danger, #ef4444);
        border-left: 3px solid var(--color-danger, #ef4444);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
    }

.comment-avatar-row[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}

.comment-content-wrapper[b-dgf2u8dyjx] {
    flex: 1;
    min-width: 0;
}

.comment-header[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
    justify-content: space-between;
    flex-wrap: wrap;
}

.comment-header-left[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
}

.comment-author[b-dgf2u8dyjx] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    /* Imported author names can arrive lowercase ("sunil ferro");
       capitalize per-word for display without altering stored data. */
    text-transform: capitalize;
}

.comment-date[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.comment-text[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.comment-form[b-dgf2u8dyjx] {
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

.comment-input-row[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}

/* ============================================ */
/* FORMS                                        */
/* ============================================ */

.form-group[b-dgf2u8dyjx] {
    margin-bottom: var(--spacing-4);
}

.form-label[b-dgf2u8dyjx] {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.form-input[b-dgf2u8dyjx], .form-select[b-dgf2u8dyjx] {
    width: 100%;
    padding: var(--input-padding);
    border: var(--border-width) var(--border-style) var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    background: var(--input-background);
    box-sizing: border-box;
}

    .form-input:focus[b-dgf2u8dyjx], .form-select:focus[b-dgf2u8dyjx] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: var(--input-focus-ring);
    }

.form-hint[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

    .form-hint span[b-dgf2u8dyjx] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.time-desc-textarea[b-dgf2u8dyjx] {
    resize: vertical;
    min-height: 80px;
}

.time-entry-form[b-dgf2u8dyjx] {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: var(--border-width) var(--border-style) var(--color-border);
}

/* ============================================ */
/* BUTTON OVERRIDES                             */
/* ============================================ */

.btn-delete[b-dgf2u8dyjx] {
    background: var(--color-danger-light) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

    .btn-delete:hover[b-dgf2u8dyjx] {
        background: var(--color-danger) !important;
        border-color: var(--color-danger) !important;
        color: var(--color-text-inverse) !important;
    }

/* ============================================ */
/* TIME TRACKING                                */
/* ============================================ */

.total-hours[b-dgf2u8dyjx] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-align: center;
    padding: var(--spacing-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

/* --- Timesheet controls: per-ticket budget + lock --- */
.tt-budget[b-dgf2u8dyjx] {
    padding: var(--spacing-3);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-3);
}

.tt-budget-head[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
}

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

.tt-budget-edit[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.tt-num[b-dgf2u8dyjx] {
    width: 5.5rem;
    text-align: right;
}

.tt-meter[b-dgf2u8dyjx] {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--spacing-2);
}

.tt-meter > span[b-dgf2u8dyjx] {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.tt-meter.warn > span[b-dgf2u8dyjx] {
    background: var(--color-warning);
}

.tt-meter.over > span[b-dgf2u8dyjx] {
    background: var(--color-danger);
}

.tt-meter-legend[b-dgf2u8dyjx] {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
}

/* Per-ticket time lock — compact pill */
.tt-lock[b-dgf2u8dyjx] {
    margin-bottom: var(--spacing-3);
}

.tt-lock-label[b-dgf2u8dyjx] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
}

.tt-lock-pill[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 5px 6px 5px 8px;
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-full);
}

.tt-lock-pill.is-locked[b-dgf2u8dyjx] {
    background: var(--color-gray-50);
}

.tt-lock-pill:focus-within[b-dgf2u8dyjx] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.tt-lock-ico[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
    font-size: 15px;
}

.tt-lock-pill.is-locked .tt-lock-ico[b-dgf2u8dyjx] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.tt-lock-date[b-dgf2u8dyjx] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: 0;
}

.tt-lock-btn[b-dgf2u8dyjx] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    height: 30px;
    padding: 0 13px;
    border: none;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.tt-lock-btn:disabled[b-dgf2u8dyjx] {
    opacity: 0.6;
    cursor: default;
}

.tt-lock-btn.primary[b-dgf2u8dyjx] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.tt-lock-btn.danger[b-dgf2u8dyjx] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.tt-lock-caption[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.tt-lock-caption.is-locked[b-dgf2u8dyjx] {
    color: var(--color-text-primary);
}

.tt-lock-caption strong[b-dgf2u8dyjx] {
    font-weight: var(--font-weight-semibold);
}

.tt-lock-standalone[b-dgf2u8dyjx] {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

.time-entry[b-dgf2u8dyjx] {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-3);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.time-info[b-dgf2u8dyjx] {
    flex: 1;
}

.time-user[b-dgf2u8dyjx] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.time-desc[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
}

.time-date[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.time-hours[b-dgf2u8dyjx] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.empty-time[b-dgf2u8dyjx] {
    text-align: center;
    padding: var(--spacing-4);
}

/* ============================================ */
/* LOADING                                      */
/* ============================================ */

.loading[b-dgf2u8dyjx] {
    text-align: center;
    padding: var(--spacing-10);
    color: var(--color-text-secondary);
}

/* ============================================ */
/* UPLOAD MODAL                                 */
/* ============================================ */

.upload-zone[b-dgf2u8dyjx] {
    border: var(--border-width-2) dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-10) var(--spacing-5);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--color-gray-50);
    margin-bottom: var(--spacing-5);
}

    .upload-zone:hover[b-dgf2u8dyjx] {
        border-color: var(--color-primary);
        background: var(--color-primary-light);
    }

.upload-icon[b-dgf2u8dyjx] {
    font-size: var(--spacing-12);
    margin-bottom: var(--spacing-3);
}

.upload-text[b-dgf2u8dyjx] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.upload-hint[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pending-files[b-dgf2u8dyjx] {
    margin-top: var(--spacing-5);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pending-files-header[b-dgf2u8dyjx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

.pending-file-item[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    transition: background var(--transition-normal);
}

    .pending-file-item:last-child[b-dgf2u8dyjx] {
        border-bottom: none;
    }

    .pending-file-item:hover[b-dgf2u8dyjx] {
        background: var(--color-surface-hover);
    }

.pending-file-icon[b-dgf2u8dyjx] {
    font-size: var(--icon-size-lg);
    flex-shrink: 0;
}

.pending-file-info[b-dgf2u8dyjx] {
    flex: 1;
    min-width: 0;
}

.pending-file-name[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-file-size[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.btn-remove[b-dgf2u8dyjx] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: var(--border-width) var(--border-style) var(--color-danger);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
    transition: all var(--transition-normal);
}

    .btn-remove:hover[b-dgf2u8dyjx] {
        background: var(--color-danger);
        color: var(--color-text-inverse);
    }

.btn-link[b-dgf2u8dyjx] {
    background: none;
    border: none;
    color: var(--color-text-link);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-decoration: underline;
}

    .btn-link:hover[b-dgf2u8dyjx] {
        color: var(--color-text-link-hover);
    }

/* ============================================ */
/* SUBMITTER CONFIRMATION PANEL                 */
/* ============================================ */

.submitter-confirmation-panel[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    background: var(--color-success-light);
    border: var(--border-width-2) var(--border-style) var(--color-success);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.confirmation-icon[b-dgf2u8dyjx] {
    font-size: var(--spacing-12);
    color: var(--color-success);
    flex-shrink: 0;
}

.confirmation-content[b-dgf2u8dyjx] {
    flex: 1;
}

.confirmation-title[b-dgf2u8dyjx] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-text);
    margin: 0 0 var(--spacing-1) 0;
}

.confirmation-subtitle[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    color: var(--color-success-text);
    margin: 0 0 var(--spacing-4) 0;
}

.confirmation-actions[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-3);
}

/* ============================================ */
/* CLOSED-TICKET LOCK BANNER                    */
/* ============================================ */
/* Shown when a ticket is in "Closed" status. Visually similar to the
   submitter-confirmation panel but uses warning colours instead of success
   so the "ticket is locked" intent reads clearly at a glance. */

.closed-ticket-banner[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    background: var(--color-warning-light, #fef3c7);
    border: var(--border-width-2) var(--border-style) var(--color-warning, #f59e0b);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.closed-ticket-banner-icon[b-dgf2u8dyjx] {
    font-size: var(--spacing-12);
    color: var(--color-warning, #f59e0b);
    flex-shrink: 0;
}

.closed-ticket-banner-content[b-dgf2u8dyjx] {
    flex: 1;
}

.closed-ticket-banner-title[b-dgf2u8dyjx] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-text, #92400e);
    margin: 0 0 var(--spacing-1) 0;
}

.closed-ticket-banner-subtitle[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    color: var(--color-warning-text, #92400e);
    margin: 0;
}

/* ============================================ */
/* ASSOCIATED TICKETS                           */
/* ============================================ */

.association-section[b-dgf2u8dyjx] {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

    .association-section:last-child[b-dgf2u8dyjx] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.association-label[b-dgf2u8dyjx] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    letter-spacing: 0.5px;
}

    .association-label i[b-dgf2u8dyjx] {
        font-size: var(--font-size-md);
    }

.association-item[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--color-gray-50);
}

    .association-item:last-child[b-dgf2u8dyjx] {
        margin-bottom: 0;
    }

    .association-item:hover[b-dgf2u8dyjx] {
        background: var(--color-primary-light);
        border-color: var(--color-primary);
    }

.association-ticket-info[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.association-ticket-number[b-dgf2u8dyjx] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    flex-shrink: 0;
}

.association-ticket-title[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================ */
/* LINK TICKET MODAL                            */
/* ============================================ */

.link-search-results[b-dgf2u8dyjx] {
    max-height: 300px;
    overflow-y: auto;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-3);
}

.link-search-item[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .link-search-item:last-child[b-dgf2u8dyjx] {
        border-bottom: none;
    }

    .link-search-item:hover[b-dgf2u8dyjx] {
        background: var(--color-surface-hover);
    }

    .link-search-item.selected[b-dgf2u8dyjx] {
        background: var(--color-primary-light);
        border-color: var(--color-primary);
    }

.link-search-number[b-dgf2u8dyjx] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    flex-shrink: 0;
}

.link-search-title[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-search-empty[b-dgf2u8dyjx] {
    text-align: center;
    padding: var(--spacing-5);
    font-size: var(--font-size-sm);
}

/* ============================================ */
/* RELEASE NOTES                                */
/* ============================================ */

.release-notes-card[b-dgf2u8dyjx] {
    background: var(--color-warning-light);
    border: var(--border-width-2) var(--border-style) var(--color-warning);
    border-radius: var(--radius-md);
}

.section-heading[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.release-notes-body[b-dgf2u8dyjx] {
    padding: var(--spacing-4);
}

.collapsible-header[b-dgf2u8dyjx] {
    cursor: pointer;
    padding: var(--spacing-3) var(--spacing-4);
    transition: background var(--transition-normal);
}

    .collapsible-header:hover[b-dgf2u8dyjx] {
        background: var(--color-surface-hover);
    }

.collapse-icon[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: transform var(--transition-normal);
}

.toggle-container[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    user-select: none;
    padding: var(--spacing-3);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: var(--border-width) var(--border-style) var(--color-border);
    transition: all var(--transition-normal);
}

    .toggle-container:hover[b-dgf2u8dyjx] {
        background: var(--color-surface-hover);
        border-color: var(--color-primary);
    }

.toggle-checkbox[b-dgf2u8dyjx] {
    display: none;
}

.toggle-slider[b-dgf2u8dyjx] {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
    transition: background var(--transition-slow);
    flex-shrink: 0;
}

    .toggle-slider[b-dgf2u8dyjx]::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        background: var(--color-surface);
        border-radius: var(--radius-full);
        transition: transform var(--transition-slow);
        box-shadow: var(--shadow-sm);
    }

.toggle-checkbox:checked + .toggle-slider[b-dgf2u8dyjx] {
    background: var(--color-success);
}

    .toggle-checkbox:checked + .toggle-slider[b-dgf2u8dyjx]::before {
        transform: translateX(24px);
    }

.toggle-label[b-dgf2u8dyjx] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
}

.toggle-hint[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
    margin-left: 64px;
    font-style: italic;
}

.label-hint[b-dgf2u8dyjx] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin-left: var(--spacing-2);
}

.release-notes-textarea[b-dgf2u8dyjx] {
    resize: vertical;
    min-height: 150px;
    font-family: var(--font-family);
    background: var(--color-surface);
    border: var(--border-width-2) var(--border-style) var(--color-border);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    width: 100%;
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

    .release-notes-textarea:focus[b-dgf2u8dyjx] {
        border-color: var(--color-warning);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    }

    .release-notes-textarea[b-dgf2u8dyjx]::placeholder {
        color: var(--color-gray-400);
        font-size: var(--font-size-sm);
    }

.release-notes-label-row[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.save-message-inline[b-dgf2u8dyjx] {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    animation: slideIn-b-dgf2u8dyjx var(--transition-slow);
    display: inline-flex;
    align-items: center;
}

    .save-message-inline.success[b-dgf2u8dyjx] {
        background: var(--color-success-light);
        color: var(--color-success-text);
        border: var(--border-width) var(--border-style) var(--color-success);
    }

    .save-message-inline.error[b-dgf2u8dyjx] {
        background: var(--color-danger-light);
        color: var(--color-danger-text);
        border: var(--border-width) var(--border-style) var(--color-danger);
    }

/* ===== Release Note AI Refinement Bar ===== */
.rn-refinement-bar[b-dgf2u8dyjx] {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--color-accent-ai-light, #f5f0ff);
    border: 1px solid var(--color-accent-ai-light, #e0d4f5);
    border-radius: var(--radius-md);
    animation: slideIn-b-dgf2u8dyjx var(--transition-slow);
}

.rn-refinement-header[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-ai, #6f42c1);
    margin-bottom: 8px;
}

.rn-refinement-dismiss[b-dgf2u8dyjx] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-accent-ai, #6f42c1);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
}

    .rn-refinement-dismiss:hover[b-dgf2u8dyjx] {
        opacity: 1;
    }

.rn-refinement-input-row[b-dgf2u8dyjx] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rn-refinement-input[b-dgf2u8dyjx] {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--color-accent-ai-light, #e0d4f5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background: var(--color-surface);
}

    .rn-refinement-input:focus[b-dgf2u8dyjx] {
        outline: none;
        border-color: var(--color-accent-ai, #6f42c1);
        box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
    }

    .rn-refinement-input:disabled[b-dgf2u8dyjx] {
        background: var(--color-gray-50);
        opacity: 0.7;
    }

    .rn-refinement-input[b-dgf2u8dyjx]::placeholder {
        color: var(--color-gray-400);
        font-style: italic;
    }

/* ============================================ */
/* EDIT FORMS                                   */
/* ============================================ */

.edit-ticket-form[b-dgf2u8dyjx] {
    background: var(--color-warning-light);
    padding: var(--spacing-5);
    border: var(--border-width-2) var(--border-style) var(--color-warning);
    border-radius: var(--radius-md);
}

.edit-comment-form[b-dgf2u8dyjx] {
    background: var(--color-gray-50);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    border: var(--border-width-2) var(--border-style) var(--color-primary);
    margin-top: var(--spacing-3);
}

/* ============================================ */
/* VIDEO PLAYER                                 */
/* ============================================ */

.video-modal-overlay[b-dgf2u8dyjx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.video-modal-content[b-dgf2u8dyjx] {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.video-modal-header[b-dgf2u8dyjx] {
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .video-modal-header h3[b-dgf2u8dyjx] {
        margin: 0;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
    }

.video-player-container[b-dgf2u8dyjx] {
    flex: 1;
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--color-gray-50);
}

.loading-spinner[b-dgf2u8dyjx] {
    text-align: center;
}

.spinner[b-dgf2u8dyjx] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin-b-dgf2u8dyjx 1s linear infinite;
    margin: 0 auto var(--spacing-4);
}

.video-modal-footer[b-dgf2u8dyjx] {
    padding: var(--spacing-5) var(--spacing-6);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.video-info[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

.video-info-divider[b-dgf2u8dyjx] {
    margin: 0 var(--spacing-3);
}

/* ============================================ */
/* RICH CONTENT                                 */
/* ============================================ */

.description[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
}

.rich-content[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    overflow: hidden;
    word-break: break-word;
    /* Content is HTML (Quill / imported markup), so collapse the source
       markup's own whitespace. Overrides .description's pre-wrap, which
       otherwise renders inter-tag newlines/indentation as visible gaps. */
    white-space: normal;
}

    /* ::deep is required: the description HTML is injected at runtime via
       (MarkupString), so those elements never receive this component's CSS
       isolation scope attribute. Without ::deep these rules compile to
       `.rich-content X[b-hash]` and silently miss every rendered tag. */
    .rich-content[b-dgf2u8dyjx]  img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-md);
        margin: var(--spacing-3) 0;
        border: var(--border-width) var(--border-style) var(--color-border);
        box-shadow: var(--shadow-xs);
    }

    .rich-content[b-dgf2u8dyjx]  a {
        color: var(--color-text-link);
        text-decoration: none;
    }

        .rich-content[b-dgf2u8dyjx]  a:hover {
            text-decoration: underline;
        }

    .rich-content[b-dgf2u8dyjx]  ul, .rich-content[b-dgf2u8dyjx]  ol {
        padding-left: 1.5em;
        margin: var(--spacing-2) 0;
    }

    .rich-content[b-dgf2u8dyjx]  li {
        margin: var(--spacing-1) 0;
    }

    .rich-content[b-dgf2u8dyjx]  blockquote {
        border-left: 4px solid var(--color-border);
        padding-left: var(--spacing-4);
        margin: var(--spacing-4) 0;
        color: var(--color-text-secondary);
    }

    .rich-content[b-dgf2u8dyjx]  pre {
        background: var(--color-gray-50);
        border: var(--border-width) var(--border-style) var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--spacing-4);
        overflow-x: auto;
        margin: var(--spacing-3) 0;
        font-family: var(--font-family-mono);
    }

    .rich-content[b-dgf2u8dyjx]  code {
        background: var(--color-gray-50);
        padding: 2px var(--spacing-2);
        border-radius: var(--radius-sm);
        font-family: var(--font-family-mono);
        font-size: var(--font-size-sm);
    }

    .rich-content[b-dgf2u8dyjx]  pre code {
        background: none;
        padding: 0;
    }

    .rich-content[b-dgf2u8dyjx]  h1, .rich-content[b-dgf2u8dyjx]  h2 {
        margin-top: var(--spacing-4);
        margin-bottom: var(--spacing-2);
        font-weight: var(--font-weight-semibold);
    }

    .rich-content[b-dgf2u8dyjx]  h1 {
        font-size: var(--font-size-2xl);
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        padding-bottom: var(--spacing-2);
    }

    .rich-content[b-dgf2u8dyjx]  h2 {
        font-size: var(--font-size-xl);
    }

    .rich-content[b-dgf2u8dyjx]  p {
        margin: var(--spacing-2) 0;
    }

    .rich-content[b-dgf2u8dyjx]  strong {
        font-weight: var(--font-weight-semibold);
    }

    .rich-content em[b-dgf2u8dyjx] {
        font-style: italic;
    }

/* ============================================ */
/* SIDEBAR META                                 */
/* ============================================ */

.meta-value[b-dgf2u8dyjx] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.kb-meta[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    font-weight: var(--font-weight-medium);
}

/* ============================================ */
/* ANIMATIONS                                   */
/* ============================================ */

@keyframes spin-b-dgf2u8dyjx {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideIn-b-dgf2u8dyjx {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

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

@media (max-width: 1200px) {
    .content-grid[b-dgf2u8dyjx] {
        grid-template-columns: 1fr;
    }

    .header-row[b-dgf2u8dyjx] {
        flex-wrap: wrap;
    }

    .ticket-title[b-dgf2u8dyjx] {
        font-size: var(--font-size-xl);
    }

    .meta-compact[b-dgf2u8dyjx] {
        gap: var(--spacing-4);
    }
}

/* ============================================ */
/* ACTIVITY TABS                               */
/* ============================================ */

.activity-tabs[b-dgf2u8dyjx] {
    display: flex;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.activity-tab[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border: none;
    background: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

    .activity-tab:hover[b-dgf2u8dyjx] {
        color: var(--color-text-primary);
        background: var(--color-gray-50);
    }

    .activity-tab.active[b-dgf2u8dyjx] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    .activity-tab i[b-dgf2u8dyjx] {
        font-size: 16px;
    }

.tab-count[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.activity-tab.active .tab-count[b-dgf2u8dyjx] {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* ============================================ */
/* AUDIT LOG TIMELINE                          */
/* ============================================ */

.audit-filter-row[b-dgf2u8dyjx] {
    margin-bottom: var(--spacing-4);
}

    .audit-filter-row .form-select-sm[b-dgf2u8dyjx] {
        max-width: 200px;
        padding: 6px 10px;
        font-size: var(--font-size-sm);
    }

.audit-timeline[b-dgf2u8dyjx] {
    position: relative;
    padding-left: 36px;
}

    .audit-timeline[b-dgf2u8dyjx]::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--color-border);
    }

.audit-entry[b-dgf2u8dyjx] {
    position: relative;
    display: flex;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-1);
}

    .audit-entry:last-child[b-dgf2u8dyjx] {
        padding-bottom: 0;
        margin-bottom: 0;
    }

.audit-icon[b-dgf2u8dyjx] {
    position: absolute;
    left: -36px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 1;
    border: 2px solid var(--color-surface);
}

.audit-icon-field[b-dgf2u8dyjx] {
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary, #2563eb);
}

.audit-icon-comment[b-dgf2u8dyjx] {
    background: #e0e7ff;
    color: #4f46e5;
}

.audit-icon-attachment[b-dgf2u8dyjx] {
    background: #fce7f3;
    color: #db2777;
}

.audit-icon-time[b-dgf2u8dyjx] {
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning, #d97706);
}

.audit-icon-lifecycle[b-dgf2u8dyjx] {
    background: #d1fae5;
    color: #059669;
}

.audit-icon-default[b-dgf2u8dyjx] {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
}

.audit-content[b-dgf2u8dyjx] {
    flex: 1;
    min-width: 0;
}

.audit-header[b-dgf2u8dyjx] {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.audit-user[b-dgf2u8dyjx] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.audit-action[b-dgf2u8dyjx] {
    color: var(--color-text-secondary);
    margin-left: var(--spacing-1);
}

.audit-values[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
}

.audit-old-value[b-dgf2u8dyjx] {
    padding: 2px 8px;
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
    border-radius: var(--radius-sm);
    text-decoration: line-through;
    font-size: var(--font-size-xs);
}

.audit-new-value[b-dgf2u8dyjx] {
    padding: 2px 8px;
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success, #16a34a);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
}

.audit-values i[b-dgf2u8dyjx] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.audit-details[b-dgf2u8dyjx] {
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding: var(--spacing-2);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--color-border);
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-meta[b-dgf2u8dyjx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.audit-ip[b-dgf2u8dyjx] {
    padding: 1px 6px;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono, monospace);
    font-size: 11px;
}

/* ── Role-Based Comment Targeting ── */
.comment-target-roles[b-dgf2u8dyjx] {
    margin-top: 0.75rem;
}

    .comment-target-roles .form-label[b-dgf2u8dyjx] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-gray-600);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

.role-chips[b-dgf2u8dyjx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.role-chip[b-dgf2u8dyjx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid var(--color-gray-300);
    background: var(--color-white);
    color: var(--color-gray-500);
    transition: all 0.15s ease;
}

    .role-chip:hover:not(.role-chip-readonly)[b-dgf2u8dyjx] {
        border-color: var(--color-primary, #3b82f6);
        background: var(--color-primary-50, #eff6ff);
        color: var(--color-primary, #3b82f6);
    }

.role-chip-active[b-dgf2u8dyjx] {
    border-color: var(--color-primary, #3b82f6);
    background: var(--color-primary-50, #eff6ff);
    color: var(--color-primary, #3b82f6);
}

    .role-chip-active:hover:not(.role-chip-readonly)[b-dgf2u8dyjx] {
        border-color: var(--color-primary-600, #2563eb);
        background: var(--color-primary-100, #dbeafe);
    }

.role-chip-readonly[b-dgf2u8dyjx] {
    cursor: default;
    opacity: 0.85;
}

.role-chip-optional[b-dgf2u8dyjx] {
    border-style: dashed;
}

    .role-chip-optional.role-chip-active[b-dgf2u8dyjx] {
        border-style: solid;
    }

.role-chips-hint[b-dgf2u8dyjx] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-amber-600, #d97706);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    animation: fadeIn-b-dgf2u8dyjx 0.2s ease;
}

@keyframes fadeIn-b-dgf2u8dyjx {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* ============================================ */
/* CUSTOM FORM - WIZARD STEP PROGRESS           */
/* ============================================ */

[b-dgf2u8dyjx] .cf-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

[b-dgf2u8dyjx] .cf-status-complete {
    background: var(--success-light, #dcfce7);
    color: var(--success, #16a34a);
}

[b-dgf2u8dyjx] .cf-status-partial {
    background: var(--warning-light, #fef3c7);
    color: var(--warning-dark, #b45309);
}

[b-dgf2u8dyjx] .cf-status-pending {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-tertiary, #94a3b8);
}

[b-dgf2u8dyjx] .cf-completed-steps {
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border, #e2e8f0);
    margin-bottom: 16px;
}

[b-dgf2u8dyjx] .cf-next-step {
    animation: fadeIn-b-dgf2u8dyjx 0.3s ease;
}

[b-dgf2u8dyjx] .cf-next-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #3b82f6);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--primary-light, #eff6ff);
    border-radius: 6px;
}

/* ── Read-only wizard stepper ─────────────────── */

[b-dgf2u8dyjx] .cf-readonly-wizard {
    animation: fadeIn-b-dgf2u8dyjx 0.2s ease;
}

[b-dgf2u8dyjx] .cf-readonly-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

[b-dgf2u8dyjx] .cf-readonly-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

[b-dgf2u8dyjx] .cf-readonly-step:hover {
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
}

[b-dgf2u8dyjx] .cf-readonly-step.cf-step-active {
    background: var(--primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    border-color: var(--primary, #6366f1);
}

[b-dgf2u8dyjx] .cf-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,0,0,0.1);
}

[b-dgf2u8dyjx] .cf-step-active .cf-step-num {
    background: rgba(255,255,255,0.25);
}

[b-dgf2u8dyjx] .cf-step-divider {
    color: var(--text-tertiary, #cbd5e1);
    font-size: 10px;
}

[b-dgf2u8dyjx] .cf-readonly-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e2e8f0);
}

/* ── Read-only card grid (Option C) ───────────── */

[b-dgf2u8dyjx] .cf-ro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

[b-dgf2u8dyjx] .cf-ro-field {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 0;
}

[b-dgf2u8dyjx] .cf-ro-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 3px;
}

[b-dgf2u8dyjx] .cf-ro-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    word-break: break-word;
}

@media (max-width: 480px) {
    [b-dgf2u8dyjx] .cf-ro-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* CHAINED FORMS                                */
/* ============================================ */

[b-dgf2u8dyjx] .cf-chained-card {
    position: relative;
}

[b-dgf2u8dyjx] .cf-chained-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-color, #6366f1);
    border-radius: 3px 0 0 3px;
    z-index: 1;
}

[b-dgf2u8dyjx] .cf-chained-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent-color, #6366f1);
    white-space: nowrap;
}

[b-dgf2u8dyjx] .cf-chained-badge i {
    font-size: 12px;
}

/* Chain preview (shown while editing primary form) */
[b-dgf2u8dyjx] .cf-chain-preview {
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

[b-dgf2u8dyjx] .cf-chain-preview-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color, #6366f1);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

[b-dgf2u8dyjx] .cf-chain-preview-head i {
    font-size: 14px;
}

[b-dgf2u8dyjx] .cf-chain-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--success, #16a34a);
    padding: 3px 0;
}

[b-dgf2u8dyjx] .cf-chain-preview-item i {
    font-size: 13px;
}

/* Pre-populated hint */
[b-dgf2u8dyjx] .cf-chain-prepop-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--accent-color, #6366f1);
    background: rgba(99, 102, 241, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

[b-dgf2u8dyjx] .cf-chain-prepop-hint i {
    font-size: 14px;
    flex-shrink: 0;
}

/* ============================================ */
/* AI SUGGESTION ITEMS                          */
/* ============================================ */

[b-dgf2u8dyjx] .ai-suggestion-item {
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-dgf2u8dyjx] .ai-suggestion-item:last-child {
    margin-bottom: 0;
}

[b-dgf2u8dyjx] .ai-suggestion-item:hover {
    background: var(--color-surface-hover, #f8fafc);
    border-color: var(--color-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

[b-dgf2u8dyjx] .ai-suggestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

[b-dgf2u8dyjx] .ai-suggestion-number {
    font-family: var(--font-family-mono, 'Fira Code', monospace);
    font-size: 11px;
    color: var(--color-text-secondary, #64748b);
    font-weight: 600;
}

[b-dgf2u8dyjx] .ai-suggestion-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #0f172a);
    margin-bottom: 8px;
    line-height: 1.4;
}

[b-dgf2u8dyjx] .ai-suggestion-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-dgf2u8dyjx] .ai-score-bar {
    flex: 1;
    height: 4px;
    background: var(--color-gray-100, #f1f5f9);
    border-radius: 2px;
    overflow: hidden;
}

[b-dgf2u8dyjx] .ai-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    border-radius: 2px;
    transition: width 0.3s ease;
}

[b-dgf2u8dyjx] .ai-score-text {
    font-size: 11px;
    color: var(--color-text-muted, #94a3b8);
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

/* ════════════════════════════════════════════════════════
   Universal Save Pill (F1)
   ────────────────────────────────────────────────────────
   Floats at bottom-center when the ticket has any pending
   state. Same visual language as the bulk-edit action bar
   so users recognise it as a page-level commit affordance.
   ════════════════════════════════════════════════════════ */

.save-pill-host[b-dgf2u8dyjx] {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1100;
    pointer-events: none;
}

.save-pill[b-dgf2u8dyjx] {
    pointer-events: auto;
    background: var(--color-text-primary, #0f172a);
    color: var(--color-text-inverse, #fff);
    border-radius: 14px;
    padding: 9px 8px 9px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.32);
    font-size: 13px;
    font-weight: 600;
    min-width: 360px;
    max-width: calc(100vw - 32px);
    animation: save-pill-rise-b-dgf2u8dyjx 0.2s ease-out;
}

@keyframes save-pill-rise-b-dgf2u8dyjx {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.save-pill-icon[b-dgf2u8dyjx] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-radius: 7px;
    font-size: 13px;
    flex-shrink: 0;
}

.save-pill.saving .save-pill-icon[b-dgf2u8dyjx] {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse, #fff);
}

.save-pill-text[b-dgf2u8dyjx] {
    flex: 1;
    line-height: 1.3;
    min-width: 0;
}

    .save-pill-text strong[b-dgf2u8dyjx] {
        display: block;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .save-pill-text small[b-dgf2u8dyjx] {
        display: block;
        opacity: 0.7;
        font-weight: 500;
        font-size: 10px;
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 280px;
    }

.save-pill-btn[b-dgf2u8dyjx] {
    padding: 6px 14px;
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

    .save-pill-btn:hover:not(:disabled)[b-dgf2u8dyjx] {
        background: var(--color-primary-hover, #4f46e5);
    }

    .save-pill-btn:disabled[b-dgf2u8dyjx] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.save-pill-discard[b-dgf2u8dyjx] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-border, #cbd5e1);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

    .save-pill-discard:hover:not(:disabled)[b-dgf2u8dyjx] {
        background: rgba(255, 255, 255, 0.18);
        color: var(--color-text-inverse, #fff);
    }

    .save-pill-discard:disabled[b-dgf2u8dyjx] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.save-pill-spinner[b-dgf2u8dyjx] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--color-text-inverse, #fff);
    border-radius: 50%;
    animation: save-pill-spin-b-dgf2u8dyjx 0.8s linear infinite;
}

@keyframes save-pill-spin-b-dgf2u8dyjx {
    to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
    .save-pill[b-dgf2u8dyjx] {
        min-width: 0;
        flex-wrap: wrap;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Per-field "dirty" dot (V2 of the Universal Save Pill).
   Renders next to the label of any Action-panel field whose current
   value differs from the snapshot. Color matches the warning amber
   used elsewhere in the app for "needs attention" states.
   ────────────────────────────────────────────────────────────────── */
.form-label .dirty-dot[b-dgf2u8dyjx] {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: var(--color-warning, #f59e0b); /* amber-500 */
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
    vertical-align: middle;
    /* Subtle pulse so the dot reads as "active" rather than decorative. */
    animation: dirty-dot-pulse-b-dgf2u8dyjx 1.6s ease-in-out infinite;
}

@keyframes dirty-dot-pulse-b-dgf2u8dyjx {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.28); }
}

/* Schedule group in the Actions card — dev / QA / overall due dates, set off
   from the surrounding dropdowns with a divider + small uppercase heading. */
.schedule-group[b-dgf2u8dyjx] {
    border-top: var(--border-width, 1px) var(--border-style, solid) var(--color-border, #e1e4e8);
    margin-top: 4px;
    padding-top: 12px;
}

.schedule-heading[b-dgf2u8dyjx] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 8px;
}
/* /Pages/Tickets.razor.rz.scp.css */
.header-controls[b-0r8t7ofzny] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-actions-right[b-0r8t7ofzny] {
    display: flex;
    gap: 12px;
}

.section-title[b-0r8t7ofzny] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.toggle-label[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    margin-top: 4px;
}

    .toggle-label input[type="checkbox"][b-0r8t7ofzny] {
        cursor: pointer;
    }

/* ── Table Toolbar ───────────────────────────── */
.table-toolbar[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--color-gray-50, #f6f8fa);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-wrap: wrap;
}

.toolbar-left[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.toolbar-right[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    width: 220px;
}

    .search-box i[b-0r8t7ofzny] {
        color: var(--color-text-secondary, #9ca3af);
        font-size: 14px;
        flex-shrink: 0;
    }

    .search-box input[b-0r8t7ofzny] {
        border: none;
        outline: none;
        font-size: 13px;
        width: 100%;
        color: var(--color-text-primary, #24292e);
        background: transparent;
    }

.active-filter-count[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    font-size: 11px;
    font-weight: 600;
}

.clear-all-btn[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
}

    .clear-all-btn:hover[b-0r8t7ofzny] {
        color: var(--color-danger, #d32f2f);
        border-color: var(--color-danger, #d32f2f);
        background: var(--color-danger-light, #fef2f2);
    }

.filter-result-count[b-0r8t7ofzny] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    white-space: nowrap;
}

/* ── Inline Column Filters & Sort ───────────── */
.th-content[b-0r8t7ofzny] {
    display: flex;
    flex-direction: column;
}

.th-label-row[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 4px;
    cursor: pointer;
    user-select: none;
    gap: 4px;
    white-space: nowrap;
}

    .th-label-row:hover[b-0r8t7ofzny] {
        color: var(--color-primary, #6366f1);
    }

    .th-label-row:hover .sort-icon[b-0r8t7ofzny] {
        opacity: 1;
    }

.th-filter-row[b-0r8t7ofzny] {
    padding: 0 8px 8px;
}

    .th-filter-row select[b-0r8t7ofzny],
    .th-filter-row input[b-0r8t7ofzny] {
        width: 100%;
        padding: 4px 6px;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 4px;
        font-size: 11px;
        color: var(--color-text-primary, #24292e);
        background: var(--color-surface, #fff);
        outline: none;
        transition: border-color 0.15s;
    }

    .th-filter-row select:focus[b-0r8t7ofzny],
    .th-filter-row input:focus[b-0r8t7ofzny] {
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
    }

    .th-filter-row select.has-value[b-0r8t7ofzny],
    .th-filter-row input.has-value[b-0r8t7ofzny] {
        border-color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #f5f3ff);
    }

.sort-icon[b-0r8t7ofzny] {
    font-size: 14px;
    opacity: 0.35;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

    .sort-icon.active[b-0r8t7ofzny] {
        opacity: 1;
        color: var(--color-primary, #6366f1);
    }

/* Table */
.table-container[b-0r8t7ofzny] {
    overflow-x: auto;
}

.data-table[b-0r8t7ofzny] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-0r8t7ofzny] {
        background: var(--color-gray-50, #fafbfc);
        padding: 0;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        /* position:relative — keeps the column resize-handle
           (.col-resize-handle is position:absolute; right:0) anchored
           to its parent th. We previously tried position:sticky here
           to pin the header during vertical page scroll, but the
           wrapping .data-table-scroll element has overflow-x:auto
           which classifies it as a scroll container even though
           overflow-y is clip. Sticky pins to that wrapper instead of
           the viewport, leaving a visible gap between the toolbar and
           the natural header position. Reverted until we can refactor
           the wrapper architecture. */
        position: relative;
        overflow: visible;
        vertical-align: top;
    }

    .data-table tbody td[b-0r8t7ofzny] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr:hover[b-0r8t7ofzny] {
        background: var(--color-gray-50, #f6f8fa);
    }

.ticket-id[b-0r8t7ofzny] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
}

.text-muted[b-0r8t7ofzny] {
    color: var(--color-text-secondary, #6b7280);
}

.count-badge[b-0r8t7ofzny] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading[b-0r8t7ofzny] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}

/* ── Column Resize Handles ────────────────────── */
.col-resize-handle[b-0r8t7ofzny] {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    transition: background-color 0.15s ease;
}

    .col-resize-handle:hover[b-0r8t7ofzny],
    .col-resize-handle.active[b-0r8t7ofzny] {
        background-color: var(--color-primary, #6366f1);
    }

/* ── Column Picker ───────────────────────────── */
.column-picker-container[b-0r8t7ofzny] {
    position: relative;
    display: inline-block;
}

.column-picker-btn[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .column-picker-btn:hover[b-0r8t7ofzny] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
        background: var(--color-gray-50, #f6f8fa);
    }

    .column-picker-btn i.rotated[b-0r8t7ofzny] {
        transform: rotate(180deg);
    }

    .column-picker-btn i[b-0r8t7ofzny] {
        font-size: 14px;
        transition: transform 0.2s ease;
    }

.column-picker-overlay[b-0r8t7ofzny] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
}

.column-picker-dropdown[b-0r8t7ofzny] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 99;
    /* Cap height + scroll so a long column list never runs off the bottom of the
       viewport with no way to reach the columns below the fold (Reported By, dates, …). */
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Flipped above the button — toggled by tableColumnInterop.placeColumnMenu when there's
   no room below. (The JS also caps max-height to the space available on that side.) */
.column-picker-dropdown.drop-up[b-0r8t7ofzny] {
    top: auto;
    bottom: calc(100% + 4px);
}

.column-picker-header[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
}

.column-picker-reset[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

    .column-picker-reset:hover[b-0r8t7ofzny] {
        background: var(--color-gray-100, #eef0f2);
        color: var(--color-primary, #6366f1);
    }

.column-picker-item[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
    transition: background-color 0.1s ease;
    margin: 0;
}

    .column-picker-item:hover[b-0r8t7ofzny] {
        background: var(--color-gray-50, #f6f8fa);
    }

    .column-picker-item input[type="checkbox"][b-0r8t7ofzny] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary, #6366f1);
        cursor: pointer;
        margin: 0;
    }

/* Picker footer with secondary actions — currently houses a single
   "Reset column widths" link, separated from the checkbox list by a
   thin divider so it doesn't look like another toggle. The header
   icon (counter-clockwise arrow) still does a full reset; this one
   is scoped to widths so a user can recover from a botched resize
   without losing their column-visibility curation. */
.column-picker-footer[b-0r8t7ofzny] {
    border-top: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
    padding: 4px;
}

.column-picker-footer-btn[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #586069);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: all 0.15s ease;
}

.column-picker-footer-btn i[b-0r8t7ofzny] {
    font-size: 14px;
    flex-shrink: 0;
}

.column-picker-footer-btn:hover[b-0r8t7ofzny] {
    background: var(--color-gray-100, #eef0f2);
    color: var(--color-primary, #6366f1);
}

/* ── Group By Bar ───────────────────────────── */
.group-by-bar[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-gray-50, #f6f8fa);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-wrap: wrap;
}

.group-by-label[b-0r8t7ofzny] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-pill[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #d0d7de);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.pill-order[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, white);
    font-size: 10px;
    font-weight: 700;
}

.pill-remove[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}

    .pill-remove:hover[b-0r8t7ofzny] {
        background: var(--color-danger-light, #fee2e2);
        color: var(--color-danger, #dc2626);
    }

.group-pill-arrow[b-0r8t7ofzny] {
    color: var(--color-text-secondary, #586069);
    font-size: 12px;
}

.group-add-container[b-0r8t7ofzny] {
    position: relative;
    display: inline-block;
}

.group-add-btn[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: transparent;
    border: 1px dashed var(--color-border, #d0d7de);
    border-radius: 20px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
}

    .group-add-btn:hover[b-0r8t7ofzny] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
        background: var(--color-primary-light, #eef2ff);
    }

.group-add-overlay[b-0r8t7ofzny] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
}

.group-add-dropdown[b-0r8t7ofzny] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 99;
    overflow: hidden;
}

.group-add-option[b-0r8t7ofzny] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    color: var(--color-text-primary, #24292e);
    cursor: pointer;
    transition: background-color 0.1s;
}

    .group-add-option:hover[b-0r8t7ofzny] {
        background: var(--color-gray-50, #f6f8fa);
    }

.group-clear-btn[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    cursor: pointer;
    transition: all 0.15s;
    margin-left: auto;
}

    .group-clear-btn:hover[b-0r8t7ofzny] {
        color: var(--color-danger, #dc2626);
        background: var(--color-danger-light, #fef2f2);
        border-color: var(--color-danger-light, #fecaca);
    }

    .group-clear-btn i[b-0r8t7ofzny] {
        font-size: 12px;
    }

/* ── Group Headers ──────────────────────────── */
.group-header-l1[b-0r8t7ofzny] {
    background: var(--color-gray-50, #f6f8fa);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

    .group-header-l1:hover[b-0r8t7ofzny] {
        background: var(--color-border, #eef0f2);
    }

    .group-header-l1 td[b-0r8t7ofzny] {
        padding: 10px 20px;
        font-weight: 600;
        font-size: 13px;
        color: var(--color-text-primary, #24292e);
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

.group-header-l2[b-0r8t7ofzny] {
    background: var(--color-gray-100, #fbfcfd);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

    .group-header-l2:hover[b-0r8t7ofzny] {
        background: var(--color-gray-100, #f0f2f5);
    }

    .group-header-l2 td[b-0r8t7ofzny] {
        padding: 8px 20px;
        font-weight: 600;
        font-size: 12px;
        color: var(--color-text-secondary, #4b5563);
        border-bottom: 1px solid var(--color-border, #f0f2f5);
    }
    /* indent only the name cell; aligned total cells keep normal padding */
    .group-header-l2 td:first-child[b-0r8t7ofzny] { padding-left: 48px; }

.group-header-content[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-chevron[b-0r8t7ofzny] {
    display: inline-flex;
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    transition: transform 0.2s;
    width: 16px;
}

    .group-chevron.collapsed[b-0r8t7ofzny] {
        transform: rotate(-90deg);
    }

.group-name[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-label-text[b-0r8t7ofzny] {
    font-weight: 600;
    font-size: 13px;
}

.group-count[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--color-border, #eef0f2);
    color: var(--color-text-secondary, #586069);
    font-size: 11px;
    font-weight: 600;
}

.group-count-sm[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-border, #eef0f2);
    color: var(--color-text-secondary, #586069);
    font-size: 10px;
    font-weight: 600;
}

/* Pagination */
.pagination-container[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-0r8t7ofzny] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    font-weight: 500;
}

.pagination-controls[b-0r8t7ofzny] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.pagination-btn[b-0r8t7ofzny] {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-surface, white);
    color: var(--color-text-primary, #24292e);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .pagination-btn:hover:not(:disabled)[b-0r8t7ofzny] {
        background: var(--color-gray-50, #f6f8fa);
        border-color: var(--color-primary, #0366d6);
    }

    .pagination-btn.active[b-0r8t7ofzny] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #0366d6);
    }

    .pagination-btn:disabled[b-0r8t7ofzny] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.pagination-size[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.page-size-select[b-0r8t7ofzny] {
    padding: 6px 8px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    background: var(--color-surface, white);
    cursor: pointer;
}

    .page-size-select:focus[b-0r8t7ofzny] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
    }

@media (max-width: 768px) {
    .filters-bar[b-0r8t7ofzny] {
        grid-template-columns: 1fr;
    }

    .header-controls[b-0r8t7ofzny] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .pagination-container[b-0r8t7ofzny] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── "Include closed" toggle in header + count strip ──────── */
.closed-toggle[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary, #475569);
    user-select: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}

    .closed-toggle:hover[b-0r8t7ofzny] {
        background: var(--color-gray-50, #f1f5f9);
    }

    .closed-toggle.active[b-0r8t7ofzny] {
        background: var(--color-primary-light, #eef2ff);
        color: var(--color-primary-hover, #4338ca);
        border-color: var(--color-primary-light, #c7d2fe);
        font-weight: 600;
    }

    .closed-toggle.disabled[b-0r8t7ofzny] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .closed-toggle input[b-0r8t7ofzny] {
        width: 14px;
        height: 14px;
        accent-color: var(--color-primary, #6366f1);
        cursor: pointer;
        flex-shrink: 0;
    }

.closed-toggle-hint[b-0r8t7ofzny] {
    color: var(--color-text-muted, #94a3b8);
    cursor: help;
    font-size: 13px;
}

.closed-hidden-line[b-0r8t7ofzny] {
    padding: 8px 16px;
    background: var(--color-gray-50, #fafbff);
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .closed-hidden-line strong[b-0r8t7ofzny] {
        color: var(--color-text-primary, #0f172a);
        font-weight: 700;
    }

.closed-hidden-pill[b-0r8t7ofzny] {
    color: var(--color-warning-text, #92400e);
    background: var(--color-warning-light, #fef3c7);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}

.closed-hidden-link[b-0r8t7ofzny] {
    background: none;
    border: none;
    color: var(--color-primary, #6366f1);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    padding: 0;
}

    .closed-hidden-link:hover[b-0r8t7ofzny] {
        color: var(--color-primary-hover, #4338ca);
    }

.closed-hidden-sep[b-0r8t7ofzny] {
    color: var(--color-text-muted, #cbd5e1);
}

/* ── Bulk select column (Phase 5) ────────────────────────── */
.data-table .bulk-select-col[b-0r8t7ofzny] {
    width: 36px;
    padding: 0 8px;
    text-align: center;
}

.bulk-select-checkbox[b-0r8t7ofzny] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary, #6366f1);
}

.data-table tbody tr.bulk-selected td[b-0r8t7ofzny] {
    background: color-mix(in srgb, #6366f1 8%, transparent);
}

.data-table tbody tr.bulk-selected td:first-child[b-0r8t7ofzny] {
    box-shadow: inset 3px 0 0 var(--color-primary, #6366f1);
}

/* ─────────────────────────────────────────────────────────────────────
   Internal-ticket row treatment.
   Just the lock — no row gradient. We tried a left-bleed amber
   gradient on tr.internal-row td but each <td> has its own background
   box, so the linear-gradient restarted at every cell boundary and
   looked like a striped/repeating accent across the first few columns
   rather than a single wash. The lock-only treatment is calmer and
   scans cleanly in long lists.
   ─────────────────────────────────────────────────────────────────── */
.internal-lock[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    color: var(--color-warning-text, #b45309);
    vertical-align: middle;
}

.internal-lock i[b-0r8t7ofzny] {
    font-size: 12px;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────
   View toggle — "Assigned to me / Created by me / Either"
   Lives directly under PageHeader, above the Card.
   ───────────────────────────────────────────────────────────────── */
.view-toggle-wrap[b-0r8t7ofzny] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px 0;
}

.view-toggle[b-0r8t7ofzny] {
    display: inline-flex;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

    .view-toggle button[b-0r8t7ofzny] {
        appearance: none;
        background: transparent;
        border: 0;
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text-muted, #6e7681);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-right: 1px solid var(--color-border, #e2e8f0);
        transition: background 0.15s, color 0.15s;
    }

        .view-toggle button:last-child[b-0r8t7ofzny] {
            border-right: 0;
        }

        .view-toggle button:hover[b-0r8t7ofzny] {
            background: var(--color-gray-100, #f1f5f9);
        }

        .view-toggle button.active[b-0r8t7ofzny] {
            background: var(--color-primary, #0052CC);
            color: var(--color-text-inverse, #ffffff);
        }

            .view-toggle button.active:hover[b-0r8t7ofzny] {
                background: color-mix(in srgb, var(--color-primary, #0052CC) 90%, #000);
            }

        .view-toggle button i[b-0r8t7ofzny] {
            font-size: 14px;
        }

    .view-toggle .count[b-0r8t7ofzny] {
        padding: 1px 7px;
        background: var(--color-gray-100, #f1f5f9);
        color: var(--color-text-muted, #6e7681);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
    }

    .view-toggle button.active .count[b-0r8t7ofzny] {
        background: rgba(255, 255, 255, 0.22);
        color: var(--color-text-inverse, #ffffff);
    }

.view-helper[b-0r8t7ofzny] {
    color: var(--color-text-muted, #6e7681);
    font-size: 12px;
}

/* Empty-state CTA on the "Assigned to me" tab with no rows */
.empty-state-switch[b-0r8t7ofzny] {
    display: inline-block;
    margin-top: 14px;
    color: var(--color-primary, #0052CC);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
}

    .empty-state-switch:hover[b-0r8t7ofzny] {
        text-decoration: underline;
    }
    
/* "Show all N" row shown when an expanded group's rows are capped (perf).
   Clicking it lifts the cap for that one group. */
.group-more-row[b-0r8t7ofzny] {
    cursor: pointer;
    background: var(--color-background, #fafbfc);
}
.group-more-row:hover[b-0r8t7ofzny] {
    background: var(--color-gray-100, #f6f8fa);
}
.group-more-row td[b-0r8t7ofzny] {
    padding: 10px 20px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    text-align: center;
}
.group-more-row .group-more-link[b-0r8t7ofzny] {
    color: var(--color-primary, #0366d6);
    font-weight: 600;
}
.group-more-row .ph[b-0r8t7ofzny] {
    margin-right: 4px;
    vertical-align: middle;
}

/* ── Grouped headers: field chip + per-level colour (cards + chips) ──
   Each level has a colour (--grp-lvl-N, site.css, user-overridable). It drives
   a left spine (the card edge that runs down the whole subgroup — header + its
   rows), the field chip, and the count badge for that level. */
.group-header-l1[b-0r8t7ofzny] { --grp-c: var(--grp-lvl-1, #0072b2); }
.group-header-l2[b-0r8t7ofzny] { --grp-c: var(--grp-lvl-2, #d55e00); }

.group-header-l1 td:first-child[b-0r8t7ofzny] { border-left: 3px solid var(--grp-c); }
.group-header-l2 td:first-child[b-0r8t7ofzny] { border-left: 3px solid var(--grp-c); }

/* the field this level groups by, e.g. ORGANIZATION / MODULE */
.group-field-chip[b-0r8t7ofzny] {
    display: inline-flex;
    align-items: center;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--grp-c) 15%, var(--color-surface, #fff));
    color: var(--grp-c);
}

.group-header-l1 .group-count[b-0r8t7ofzny],
.group-header-l2 .group-count-sm[b-0r8t7ofzny] {
    background: color-mix(in srgb, var(--grp-c) 16%, var(--color-surface, #fff));
    color: var(--grp-c);
}

/* "show all N" tail row keeps the spine so the card edge stays continuous */
.group-more-row td[b-0r8t7ofzny] { border-left: 3px solid var(--grp-lvl-2, #d55e00); }


/* Drag to reorder the GROUP BY pills (highlight class toggled in JS) */
.group-pill[b-0r8t7ofzny] { cursor: grab; }
.group-pill:active[b-0r8t7ofzny] { cursor: grabbing; }
.group-pill.group-pill-over[b-0r8t7ofzny] {
    outline: 2px dashed var(--color-primary, #0366d6);
    outline-offset: 2px;
}


/* ── Group totals / aggregations ─────────────────────────── */
.total-chips[b-0r8t7ofzny] { display:inline-flex; gap:6px; margin-left:8px; }
.total-chip[b-0r8t7ofzny] {
    font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px;
    background: color-mix(in srgb, var(--color-text-secondary, #586069) 12%, var(--color-surface, #fff));
    color: var(--color-text-primary, #24292e);
    white-space:nowrap; font-variant-numeric:tabular-nums;
}
.totals-row td[b-0r8t7ofzny] {
    padding:8px 14px; font-size:12.5px; font-weight:700;
    border-bottom:1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #f8fafc);
    font-variant-numeric:tabular-nums;
}
.totals-row .totals-label[b-0r8t7ofzny] {
    text-transform:uppercase; font-size:10.5px; letter-spacing:.5px;
    color: var(--color-text-secondary, #586069); font-weight:700;
}
.totals-l1 td[b-0r8t7ofzny] { background: color-mix(in srgb, var(--grp-lvl-1, #0072b2) 7%, var(--color-surface, #fff)); }
.totals-l1 td:first-child[b-0r8t7ofzny] { border-left:3px solid var(--grp-lvl-1, #0072b2); }
.totals-l2 td[b-0r8t7ofzny] { background: color-mix(in srgb, var(--grp-lvl-2, #c2410c) 7%, var(--color-surface, #fff)); }
.totals-l2 td:first-child[b-0r8t7ofzny] { border-left:3px solid var(--grp-lvl-2, #c2410c); }
.totals-grand td[b-0r8t7ofzny] {
    background: color-mix(in srgb, var(--color-text-secondary, #334155) 9%, var(--color-surface, #fff));
    border-top:2px solid var(--color-text-secondary, #334155); font-weight:800;
}
.totals-grand .totals-label[b-0r8t7ofzny] { color: var(--color-text-primary, #24292e); }

.totals-config-container[b-0r8t7ofzny] { position:relative; display:inline-block; }
.totals-config-btn[b-0r8t7ofzny] {
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--color-border, #e1e4e8); background:var(--color-surface, #fff);
    color:var(--color-text-secondary, #586069); padding:6px 12px; border-radius:999px;
    font-size:13px; font-weight:600; cursor:pointer;
}
.totals-config-btn:hover[b-0r8t7ofzny] { border-color:var(--color-primary, #0366d6); color:var(--color-primary, #0366d6); }
.totals-config-btn.active[b-0r8t7ofzny] { border-color:var(--color-primary, #0366d6); color:var(--color-primary, #0366d6); background:color-mix(in srgb, var(--color-primary, #0366d6) 8%, var(--color-surface, #fff)); }
.totals-sigma[b-0r8t7ofzny] { font-weight:800; }
.totals-panel[b-0r8t7ofzny] {
    position:absolute; z-index:1000; top:calc(100% + 6px); left:0; width:232px;
    background:var(--color-surface, #fff); border:1px solid var(--color-border, #e1e4e8);
    border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.14); padding:12px;
}
.totals-panel-title[b-0r8t7ofzny] { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted, #8b949e); margin-bottom:8px; }
.totals-panel-title.tp-mt[b-0r8t7ofzny] { margin-top:12px; }
.totals-panel-row[b-0r8t7ofzny] { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.tp-col[b-0r8t7ofzny] { font-size:13px; font-weight:600; }
.tp-select[b-0r8t7ofzny] { font-size:13px; padding:4px 8px; border:1px solid var(--color-border, #e1e4e8); border-radius:6px; background:var(--color-surface, #fff); color:var(--color-text-primary, #24292e); }
.tp-mode[b-0r8t7ofzny] { width:100%; }


/* ── Per-column aggregation (Σ on the column header) ─────────── */
.col-agg-circle[b-0r8t7ofzny] {
    margin-left: 4px; flex: none;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--color-border, #e1e4e8); background: var(--color-surface, #fff);
    color: var(--color-text-muted, #8b949e); font-weight: 800; font-size: 10px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s, background .12s, color .12s, border-color .12s;
}
.data-table th:hover .col-agg-circle[b-0r8t7ofzny] { opacity: 1; }
.col-agg-circle:hover[b-0r8t7ofzny] { border-color: var(--agg, #7c3aed); color: var(--agg, #7c3aed); }
.col-agg-circle.aggd[b-0r8t7ofzny] { opacity: 1; background: var(--agg, #7c3aed); border-color: var(--agg, #7c3aed); color: #fff; }

.agg-dropdown-overlay[b-0r8t7ofzny] { position: fixed; inset: 0; z-index: 1400; }
.agg-dropdown-floating[b-0r8t7ofzny] {
    position: fixed; z-index: 1401; width: 190px;
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16); overflow: hidden; padding: 4px 0;
}
.agg-dd-title[b-0r8t7ofzny] { font-size: 13px; font-weight: 700; padding: 8px 14px 6px; color: var(--color-text-primary, #24292e); }
.agg-dropdown-floating button[b-0r8t7ofzny] {
    display: block; width: 100%; text-align: left; border: none; background: transparent;
    padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--color-text-primary, #24292e);
}
.agg-dropdown-floating button:hover[b-0r8t7ofzny] { background: var(--color-gray-100, #f3f5f7); }
.agg-dropdown-floating button.selected[b-0r8t7ofzny] { background: color-mix(in srgb, var(--color-primary, #0366d6) 12%, var(--color-surface, #fff)); color: var(--color-primary, #0366d6); font-weight: 600; }

.totals-mode-toggle[b-0r8t7ofzny] { display: inline-flex; border: 1px solid var(--color-border, #e1e4e8); border-radius: 999px; overflow: hidden; }
.totals-mode-toggle button[b-0r8t7ofzny] { border: none; background: var(--color-surface, #fff); color: var(--color-text-secondary, #586069); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.totals-mode-toggle button.on[b-0r8t7ofzny] { background: var(--color-primary, #0366d6); color: #fff; }

.total-chip .tc-col[b-0r8t7ofzny] { color: var(--color-text-secondary, #586069); font-weight: 600; margin-right: 2px; }
.totals-fn[b-0r8t7ofzny] { font-size: 9px; color: var(--color-text-muted, #8b949e); margin-left: 5px; font-weight: 700; }


/* ── Click-to-aggregate: title trigger + Σ chip ──────────────── */
.th-sort-btn[b-0r8t7ofzny] { cursor: pointer; display: inline-flex; margin-left: 2px; }
.th-label-clickable[b-0r8t7ofzny] { cursor: pointer; border-radius: 5px; padding: 1px 4px; }
.th-label-clickable:hover[b-0r8t7ofzny] { background: color-mix(in srgb, var(--agg, #7c3aed) 14%, var(--color-surface, #fff)); color: var(--agg, #7c3aed); }
.th-label-aggd[b-0r8t7ofzny] {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--agg, #7c3aed); color: #fff;
    border-radius: 6px; padding: 3px 9px; cursor: pointer; font-weight: 800;
}
.th-label-aggd .agg-sig[b-0r8t7ofzny] { font-weight: 800; }
.th-label-aggd .agg-fn[b-0r8t7ofzny] { font-size: 9px; opacity: .85; }

.group-header-l1 .totals-cell[b-0r8t7ofzny],
.group-header-l2 .totals-cell[b-0r8t7ofzny],
.totals-grand .totals-cell[b-0r8t7ofzny] {
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--color-text-primary, #24292e);
}
.totals-row td[b-0r8t7ofzny] { padding: 8px 20px; }

/* /Pages/Verify2FA.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Verify 2FA Page — matches Login (A1 + Aurora) design language
   Single-column, centered card. Same Aurora background, same
   floating logo with shimmer overlay, same glass card.
   ═══════════════════════════════════════════════════════════════ */

.login-page[b-cwfytqabyk] {
    --brand-ink: #0a1929;
    --brand-muted: #5b6b80;
    --brand-primary-dark: color-mix(in srgb, var(--brand-primary, #0052CC) 78%, #000);
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary, #0052CC) 12%, #fff);

    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    color: var(--brand-ink);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ───────────────── Aurora blobs ───────────────── */
.aurora[b-cwfytqabyk] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
}

.aurora-1[b-cwfytqabyk] {
    width: 500px;
    height: 500px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 55%, transparent);
    top: -120px;
    right: -120px;
    animation: aurora-drift-1-b-cwfytqabyk 28s ease-in-out infinite alternate;
}

.aurora-2[b-cwfytqabyk] {
    width: 460px;
    height: 460px;
    background: color-mix(in srgb, var(--brand-accent, #1A8AC4) 50%, transparent);
    bottom: -120px;
    left: -100px;
    animation: aurora-drift-2-b-cwfytqabyk 34s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1-b-cwfytqabyk {
    0%   { transform: translate(0, 0)         scale(1); }
    50%  { transform: translate(-120px, 80px) scale(1.15); }
    100% { transform: translate(60px, 140px)  scale(0.9); }
}

@keyframes aurora-drift-2-b-cwfytqabyk {
    0%   { transform: translate(0, 0)          scale(1); }
    50%  { transform: translate(140px, -80px)  scale(1.1); }
    100% { transform: translate(-80px, -140px) scale(0.95); }
}

/* ───────────────── Centered wrap (single column) ───────────────── */
.auth-wrap[b-cwfytqabyk] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    overflow-y: auto;
}

/* ───────────────── Card ───────────────── */
.login-card[b-cwfytqabyk] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 12px 32px -8px rgba(15, 23, 42, 0.18),
        0 30px 60px -20px rgba(15, 23, 42, 0.25);
    animation: card-in-b-cwfytqabyk 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .login-card[b-cwfytqabyk]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-primary, #0052CC) 40%, transparent) 0%,
            color-mix(in srgb, var(--brand-accent, #1A8AC4) 15%, transparent) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }

@keyframes card-in-b-cwfytqabyk {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───────────────── Floating logo + shimmer (clipped to silhouette) ───────────────── */
.brand-tile[b-cwfytqabyk] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0 auto 20px;
    filter:
        drop-shadow(0 4px 6px rgba(15, 23, 42, 0.10))
        drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18));
}

    .brand-tile[b-cwfytqabyk]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.75) 50%,
            transparent 70%);
        background-size: 220% 100%;
        background-position: -120% 0;
        mix-blend-mode: screen;
        animation: brand-shimmer-b-cwfytqabyk 7s ease-in-out infinite;
        animation-delay: 2s;
        pointer-events: none;
    }

.brand-tile-text[b-cwfytqabyk] {
    font-weight: 800;
    font-size: 42px;
    letter-spacing: 0.5px;
    color: var(--brand-primary, #0052CC);
    line-height: 1;
}

.brand-tile-img[b-cwfytqabyk] {
    display: block;
    max-width: 200px;
    max-height: 90px;
    object-fit: contain;
}

@keyframes brand-shimmer-b-cwfytqabyk {
    0%   { background-position: -120% 0; }
    50%  { background-position:  120% 0; }
    100% { background-position:  120% 0; }
}

/* ───────────────── Shield reassurance pill ───────────────── */
.shield-row[b-cwfytqabyk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary, #0052CC) 10%, white);
    color: var(--brand-primary, #0052CC);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

    .shield-row i[b-cwfytqabyk] {
        font-size: 14px;
    }

/* ───────────────── Card text ───────────────── */
.card-title[b-cwfytqabyk] {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--brand-ink);
}

.card-sub[b-cwfytqabyk] {
    color: var(--brand-muted);
    font-size: 14px;
    margin: 0 0 26px;
    line-height: 1.5;
}

/* ───────────────── Form ───────────────── */
.login-form[b-cwfytqabyk] {
    margin: 0;
    text-align: left;
}

.field[b-cwfytqabyk] {
    margin-bottom: 18px;
}

.field-label[b-cwfytqabyk] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.field-input[b-cwfytqabyk] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    color: var(--brand-ink);
    background: var(--color-surface, #fff);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .field-input[b-cwfytqabyk]::placeholder {
        color: var(--color-text-muted, #cbd5e1);
    }

    .field-input:focus[b-cwfytqabyk] {
        outline: 0;
        border-color: var(--brand-primary, #0052CC);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #0052CC) 12%, transparent);
    }

    .field-input:disabled[b-cwfytqabyk] {
        background: var(--color-gray-100, #f8fafc);
        cursor: not-allowed;
        opacity: 0.7;
    }

/* OTP-mode code input: big, centered, monospace */
.code-input[b-cwfytqabyk] {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.5em;
    padding: 14px 16px;
    font-weight: 700;
}

    .code-input[b-cwfytqabyk]::placeholder {
        letter-spacing: 0.5em;
        color: var(--color-text-muted, #cbd5e1);
    }

/* Slightly tighter spacing for recovery-code mode (variable length) */
.code-input:not(.code-input-otp)[b-cwfytqabyk] {
    font-size: 18px;
    letter-spacing: 0.2em;
}

/* ───────────────── Submit ───────────────── */
.submit-btn[b-cwfytqabyk] {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary, #0052CC), var(--brand-primary-dark));
    color: var(--color-text-inverse, #fff);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary, #0052CC) 25%, transparent);
}

    .submit-btn:hover:not(:disabled)[b-cwfytqabyk] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px color-mix(in srgb, var(--brand-primary, #0052CC) 35%, transparent);
    }

    .submit-btn:active:not(:disabled)[b-cwfytqabyk] {
        transform: translateY(0);
    }

    .submit-btn:disabled[b-cwfytqabyk] {
        cursor: not-allowed;
        filter: saturate(0.7);
        opacity: 0.85;
    }

    .submit-btn i[b-cwfytqabyk] {
        font-size: 16px;
    }

    .submit-btn .spinning[b-cwfytqabyk] {
        animation: spin-b-cwfytqabyk 0.9s linear infinite;
    }

@keyframes spin-b-cwfytqabyk {
    to { transform: rotate(360deg); }
}

/* ───────────────── Alert ───────────────── */
.login-alert[b-cwfytqabyk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 10px;
    color: var(--color-danger-text, #991b1b);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

    .login-alert > i[b-cwfytqabyk] {
        font-size: 18px;
        flex-shrink: 0;
        color: var(--color-danger, #dc2626);
        margin-top: 1px;
    }

    .login-alert span[b-cwfytqabyk] {
        flex: 1;
    }

.alert-close[b-cwfytqabyk] {
    background: transparent;
    border: 0;
    color: var(--color-danger-text, #991b1b);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}

    .alert-close:hover[b-cwfytqabyk] {
        background: rgba(153, 27, 27, 0.1);
    }

/* ───────────────── Foot (toggle + back) ───────────────── */
.card-foot[b-cwfytqabyk] {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-text-muted, #94a3b8);
}

    .card-foot .foot-sep[b-cwfytqabyk] {
        color: var(--color-text-muted, #cbd5e1);
    }

.link[b-cwfytqabyk] {
    color: var(--brand-primary, #0052CC);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

    .link:hover[b-cwfytqabyk] {
        text-decoration: underline;
    }

/* ───────────────── Responsive ───────────────── */
@media (max-width: 600px) {
    .auth-wrap[b-cwfytqabyk] {
        padding: 20px 16px;
    }

    .login-card[b-cwfytqabyk] {
        padding: 28px 22px;
    }

    .card-title[b-cwfytqabyk] {
        font-size: 22px;
    }

    .code-input[b-cwfytqabyk] {
        font-size: 20px;
        letter-spacing: 0.35em;
    }

    .aurora-1[b-cwfytqabyk] {
        width: 320px;
        height: 320px;
    }

    .aurora-2[b-cwfytqabyk] {
        width: 300px;
        height: 300px;
    }
}

/* ───────────────── Reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .aurora-1[b-cwfytqabyk],
    .aurora-2[b-cwfytqabyk],
    .brand-tile[b-cwfytqabyk]::after,
    .login-card[b-cwfytqabyk],
    .submit-btn .spinning[b-cwfytqabyk] {
        animation: none !important;
    }
}
/* /Shared/Components/Alert.razor.rz.scp.css */
.alert[b-1k4fc1nd5t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-lg, 8px);
    margin-bottom: 16px;
    animation: alertSlideIn-b-1k4fc1nd5t 0.3s ease-out;
}

    /* Variants */
    .alert.alert-success[b-1k4fc1nd5t] {
        background: var(--color-success-light, #f0fdf4);
        border: 1px solid var(--color-success-light, #86efac);
    }

        .alert.alert-success .alert-icon[b-1k4fc1nd5t] {
            color: var(--color-success, #16a34a);
        }

        .alert.alert-success .alert-title[b-1k4fc1nd5t] {
            color: var(--color-success-text, #166534);
        }

        .alert.alert-success .alert-message[b-1k4fc1nd5t] {
            color: var(--color-success-text, #15803d);
        }

    .alert.alert-error[b-1k4fc1nd5t] {
        background: var(--color-danger-light, #fef2f2);
        border: 1px solid var(--color-danger-light, #fecaca);
    }

        .alert.alert-error .alert-icon[b-1k4fc1nd5t] {
            color: var(--color-danger, #dc2626);
        }

        .alert.alert-error .alert-title[b-1k4fc1nd5t] {
            color: var(--color-danger-text, #991b1b);
        }

        .alert.alert-error .alert-message[b-1k4fc1nd5t] {
            color: var(--color-danger-text, #b91c1c);
        }

    .alert.alert-warning[b-1k4fc1nd5t] {
        background: var(--color-warning-light, #fffbeb);
        border: 1px solid var(--color-warning-light, #fed7aa);
    }

        .alert.alert-warning .alert-icon[b-1k4fc1nd5t] {
            color: var(--color-warning, #d97706);
        }

        .alert.alert-warning .alert-title[b-1k4fc1nd5t] {
            color: var(--color-warning-text, #92400e);
        }

        .alert.alert-warning .alert-message[b-1k4fc1nd5t] {
            color: var(--color-warning-text, #b45309);
        }

    .alert.alert-info[b-1k4fc1nd5t] {
        background: var(--color-primary-light, #eff6ff);
        border: 1px solid var(--color-primary-light, #bfdbfe);
    }

        .alert.alert-info .alert-icon[b-1k4fc1nd5t] {
            color: var(--color-primary, #2563eb);
        }

        .alert.alert-info .alert-title[b-1k4fc1nd5t] {
            color: var(--color-primary, #1e40af);
        }

        .alert.alert-info .alert-message[b-1k4fc1nd5t] {
            color: var(--color-primary, #1d4ed8);
        }

/* Icon */
.alert-icon[b-1k4fc1nd5t] {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
}

/* Content */
.alert-content[b-1k4fc1nd5t] {
    flex: 1;
    min-width: 0;
}

.alert-title[b-1k4fc1nd5t] {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.alert-message[b-1k4fc1nd5t] {
    font-size: 14px;
    line-height: 1.5;
}

    .alert-message[b-1k4fc1nd5t]  p {
        margin: 0;
    }

    .alert-message[b-1k4fc1nd5t]  a {
        font-weight: 500;
        text-decoration: underline;
    }

/* Close button */
.alert-close[b-1k4fc1nd5t] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .alert-close:hover[b-1k4fc1nd5t] {
        opacity: 1;
        background: rgba(0, 0, 0, 0.05);
    }

    .alert-close[b-1k4fc1nd5t]  i {
        font-size: 16px;
    }

/* Animation */
@keyframes alertSlideIn-b-1k4fc1nd5t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes alertFadeOut-b-1k4fc1nd5t {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.alert.alert-fade-out[b-1k4fc1nd5t] {
    animation: alertFadeOut-b-1k4fc1nd5t 0.3s ease-out forwards;
}

/* Compact variant */
.alert.alert-compact[b-1k4fc1nd5t] {
    padding: 12px;
    gap: 10px;
}

    .alert.alert-compact .alert-icon[b-1k4fc1nd5t] {
        font-size: 18px;
    }

    .alert.alert-compact .alert-title[b-1k4fc1nd5t],
    .alert.alert-compact .alert-message[b-1k4fc1nd5t] {
        font-size: 13px;
    }
/* /Shared/Components/AnnouncementBanner.razor.rz.scp.css */
.announcement-banner-stack[b-8fnav8vkr7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.announcement-banner-title[b-8fnav8vkr7] {
    font-weight: 700;
    margin-bottom: 2px;
}

/* The body is sanitized HTML from Quill. Keep block spacing tight so a one-line
   announcement doesn't get extra leading from a wrapping <p>. */
.announcement-banner-body :deep(p)[b-8fnav8vkr7] {
    margin: 0 0 6px 0;
}

.announcement-banner-body :deep(p:last-child)[b-8fnav8vkr7] {
    margin-bottom: 0;
}

.announcement-banner-body :deep(img)[b-8fnav8vkr7] {
    max-width: 100%;
    height: auto;
}

.announcement-banner-more[b-8fnav8vkr7] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    padding-left: 4px;
}
/* /Shared/Components/AuditHistoryDrawer.razor.rz.scp.css */
/* ============================================
   AUDIT HISTORY DRAWER
   Slide-out panel for viewing audit history
   ============================================ */

.audit-drawer-backdrop[b-1krraspvj4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: fadeIn-b-1krraspvj4 0.2s ease;
}

.audit-drawer[b-1krraspvj4] {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    background: var(--color-surface, #fff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-1krraspvj4 0.25s ease;
}

@keyframes slideIn-b-1krraspvj4 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-1krraspvj4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Header */
.audit-drawer-header[b-1krraspvj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-shrink: 0;
}

.audit-drawer-title[b-1krraspvj4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
}

    .audit-drawer-title i[b-1krraspvj4] {
        font-size: 20px;
        color: var(--color-primary, #0969da);
    }

    .audit-drawer-title h3[b-1krraspvj4] {
        margin: 0;
        font-size: var(--font-size-lg, 16px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-text-primary, #24292f);
    }

.audit-drawer-subtitle[b-1krraspvj4] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-secondary, #586069);
    padding: 2px 8px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: var(--radius-sm, 4px);
}

.audit-drawer-close[b-1krraspvj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    color: var(--color-text-secondary, #586069);
    transition: all 0.15s ease;
}

    .audit-drawer-close:hover[b-1krraspvj4] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #24292f);
    }

/* Filters */
.audit-drawer-filters[b-1krraspvj4] {
    padding: var(--spacing-3, 12px) var(--spacing-5, 20px);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-shrink: 0;
}

    .audit-drawer-filters .form-select-sm[b-1krraspvj4] {
        max-width: 200px;
        padding: 6px 10px;
        font-size: var(--font-size-sm, 13px);
    }

/* Body */
.audit-drawer-body[b-1krraspvj4] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
}

.audit-drawer-loading[b-1krraspvj4] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

.audit-drawer-empty[b-1krraspvj4] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
}

    .audit-drawer-empty i[b-1krraspvj4] {
        font-size: 40px;
        margin-bottom: 12px;
        display: block;
        opacity: 0.4;
    }

/* Timeline (matches TicketDetails styles) */
.audit-timeline[b-1krraspvj4] {
    position: relative;
    padding-left: 36px;
}

    .audit-timeline[b-1krraspvj4]::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--color-border, #e1e4e8);
    }

.audit-entry[b-1krraspvj4] {
    position: relative;
    display: flex;
    gap: var(--spacing-3, 12px);
    padding-bottom: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-1, 4px);
}

    .audit-entry:last-child[b-1krraspvj4] {
        padding-bottom: 0;
        margin-bottom: 0;
    }

.audit-icon[b-1krraspvj4] {
    position: absolute;
    left: -36px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 1;
    border: 2px solid var(--color-surface, #fff);
}

.audit-icon-field[b-1krraspvj4] {
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary, #2563eb);
}

.audit-icon-comment[b-1krraspvj4] {
    background: var(--color-primary-light, #e0e7ff);
    color: var(--color-primary-hover, #4f46e5);
}

.audit-icon-attachment[b-1krraspvj4] {
    background: #fce7f3;
    color: #db2777;
}

.audit-icon-time[b-1krraspvj4] {
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning-hover, #d97706);
}

.audit-icon-lifecycle[b-1krraspvj4] {
    background: var(--color-success-light, #d1fae5);
    color: var(--color-success, #059669);
}

.audit-icon-security[b-1krraspvj4] {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger, #dc2626);
}

.audit-icon-settings[b-1krraspvj4] {
    background: var(--color-accent-ai-light, #f3e8ff);
    color: var(--color-accent-ai, #9333ea);
}

.audit-icon-default[b-1krraspvj4] {
    background: var(--color-gray-100, #f6f8fa);
    color: var(--color-text-secondary, #586069);
}

.audit-content[b-1krraspvj4] {
    flex: 1;
    min-width: 0;
}

.audit-header[b-1krraspvj4] {
    font-size: var(--font-size-sm, 13px);
    line-height: 1.5;
}

.audit-user[b-1krraspvj4] {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #24292f);
}

.audit-action[b-1krraspvj4] {
    color: var(--color-text-secondary, #586069);
    margin-left: 4px;
}

.audit-values[b-1krraspvj4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: var(--font-size-sm, 13px);
    flex-wrap: wrap;
}

.audit-old-value[b-1krraspvj4] {
    padding: 2px 8px;
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
    border-radius: 4px;
    text-decoration: line-through;
    font-size: var(--font-size-xs, 12px);
}

.audit-new-value[b-1krraspvj4] {
    padding: 2px 8px;
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success, #16a34a);
    border-radius: 4px;
    font-weight: 500;
    font-size: var(--font-size-xs, 12px);
}

.audit-values i[b-1krraspvj4] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

.audit-details[b-1krraspvj4] {
    margin-top: 4px;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary, #586069);
    padding: 6px 8px;
    background: var(--color-gray-50, #fafbfc);
    border-radius: 4px;
    border-left: 2px solid var(--color-border, #e1e4e8);
}

.audit-meta[b-1krraspvj4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary, #586069);
}

.audit-ip[b-1krraspvj4] {
    padding: 1px 6px;
    background: var(--color-gray-100, #f6f8fa);
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
}

/* Pagination */
.audit-drawer-pagination[b-1krraspvj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3, 12px);
    padding: var(--spacing-4, 16px) 0;
    margin-top: var(--spacing-4, 16px);
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.pagination-btn[b-1krraspvj4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-surface, #fff);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    color: var(--color-text-primary, #24292f);
    font-size: 14px;
    transition: all 0.15s ease;
}

    .pagination-btn:hover:not(:disabled)[b-1krraspvj4] {
        border-color: var(--color-primary, #0969da);
        color: var(--color-primary, #0969da);
    }

    .pagination-btn:disabled[b-1krraspvj4] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.pagination-info[b-1krraspvj4] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-secondary, #586069);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 520px) {
    .audit-drawer[b-1krraspvj4] {
        width: 100vw;
    }
}
/* /Shared/Components/Avatar.razor.rz.scp.css */
.avatar[b-zlxmkac6vq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
}

    /* Sizes */
    .avatar.avatar-xs[b-zlxmkac6vq] {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .avatar.avatar-sm[b-zlxmkac6vq] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .avatar.avatar-md[b-zlxmkac6vq] {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .avatar.avatar-lg[b-zlxmkac6vq] {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .avatar.avatar-xl[b-zlxmkac6vq] {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }

/* Image */
.avatar-img[b-zlxmkac6vq] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Initials */
.avatar-initials[b-zlxmkac6vq] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.5px;
    user-select: none;
}

/* Status indicator */
.avatar-status[b-zlxmkac6vq] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-surface, white);
}

.avatar.avatar-xs .avatar-status[b-zlxmkac6vq],
.avatar.avatar-sm .avatar-status[b-zlxmkac6vq] {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
}

.avatar.avatar-lg .avatar-status[b-zlxmkac6vq],
.avatar.avatar-xl .avatar-status[b-zlxmkac6vq] {
    width: 14px;
    height: 14px;
    border-width: 2.5px;
}

.avatar-status.avatar-status-online[b-zlxmkac6vq] {
    background: var(--color-success, #16a34a);
}

.avatar-status.avatar-status-offline[b-zlxmkac6vq] {
    background: var(--color-text-muted, #9ca3af);
}

.avatar-status.avatar-status-busy[b-zlxmkac6vq] {
    background: var(--color-danger, #dc2626);
}

.avatar-status.avatar-status-away[b-zlxmkac6vq] {
    background: var(--color-warning, #f59e0b);
}
/* /Shared/Components/Badge.razor.rz.scp.css */
.badge[b-3oa24sta7r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    /* Fixed radius (~half a single-line chip), NOT --radius-full. The browser
       caps a corner radius at half the box height, so a single-line chip still
       rounds to a clean pill, while a tall multi-line chip renders as a rounded
       rectangle instead of ballooning into an ellipse. */
    border-radius: var(--radius-xl, 12px);
    white-space: nowrap;
    /* Never let a flex parent (card-header actions, filter toolbars) shrink
       the chip below its label — that squeeze is what collapsed it into a
       clipped circle ("CreateNew" → "ateN"). flex:0 0 auto = don't grow,
       don't shrink, size to content. Ignored in table cells (block context),
       so the adaptive cell-wrapping rules are unaffected. */
    flex: 0 0 auto;
    transition: all 0.15s ease;
}

    /* Sizes */
    .badge.badge-sm[b-3oa24sta7r] {
        padding: 2px 8px;
        font-size: 11px;
    }

    .badge.badge-md[b-3oa24sta7r] {
        padding: 4px 10px;
        font-size: 12px;
    }

    .badge.badge-lg[b-3oa24sta7r] {
        padding: 6px 14px;
        font-size: 14px;
    }

    /* Variant: Soft — background, color, border applied via inline style */

    /* Variant: Solid — background, color, border applied via inline style */

    /* Variant: Outline — background, color, border applied via inline style */

    /* Variant: Count — special case, stays in CSS */
    .badge.badge-count[b-3oa24sta7r] {
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        font-size: 11px;
        background: var(--color-danger, #d73a49);
        color: var(--color-text-inverse, white);
        border: none;
        justify-content: center;
    }

    /* Icon sizing */
    .badge[b-3oa24sta7r]  i {
        font-size: 1em;
    }
/* /Shared/Components/BrandMark.razor.rz.scp.css */
.brandmark[b-pke9ignw1d] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--bm-h, 32px);
    border-radius: calc(var(--bm-h, 32px) / 2);
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
    user-select: none;
}

/* Image logo: width follows the content, so a square mark stays a circle and a
   wide wordmark becomes a pill. Padding keeps a square logo off the round edge;
   contain + max-width means it always shows whole and scales down if oversized. */
.brandmark-has-image[b-pke9ignw1d] {
    width: auto;
    min-width: var(--bm-h, 32px);
    max-width: var(--bm-maxw, 180px);
    padding: calc(var(--bm-h, 32px) * 0.12);
    background: transparent;
}

.brandmark-img[b-pke9ignw1d] {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Hidden until a broken image promotes it (see .brandmark-broken). */
.brandmark-fallback[b-pke9ignw1d] {
    display: none;
}

/* Emoji / short text logo. */
.brandmark-glyph[b-pke9ignw1d] {
    width: var(--bm-h, 32px);
    min-width: var(--bm-h, 32px);
    background: transparent;
    font-size: calc(var(--bm-h, 32px) * 0.6);
}

/* No usable logo → initials on a colored disc. */
.brandmark-initials[b-pke9ignw1d] {
    width: var(--bm-h, 32px);
    min-width: var(--bm-h, 32px);
    background: var(--bm-bg, #5a6872);
    color: var(--color-text-inverse, #fff);
    font-weight: 500;
    font-size: calc(var(--bm-h, 32px) * 0.4);
    letter-spacing: 0.5px;
}

/* Runtime fallback when an image URL fails to load (added via onerror).
   Declared after .brandmark-has-image so it wins on the shared element. */
.brandmark-broken[b-pke9ignw1d] {
    width: var(--bm-h, 32px);
    min-width: var(--bm-h, 32px);
    max-width: var(--bm-h, 32px);
    padding: 0;
    background: var(--bm-bg, #5a6872);
    color: var(--color-text-inverse, #fff);
    font-weight: 500;
    font-size: calc(var(--bm-h, 32px) * 0.4);
    letter-spacing: 0.5px;
}

    .brandmark-broken .brandmark-img[b-pke9ignw1d] {
        display: none;
    }

    .brandmark-broken .brandmark-fallback[b-pke9ignw1d] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
/* /Shared/Components/BulkActionBar.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Bulk Action Bar — Pattern A from bulk-update-mockup
   ────────────────────────────────────────────────────────
   Sticky dark pill at the bottom of the viewport when ≥1
   ticket is selected. Self-contained — parent controls
   visibility via SelectedCount > 0.
   ════════════════════════════════════════════════════════ */

.bab-wrap[b-23tass72y6] {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1100;
    pointer-events: none; /* re-enabled on .bab below */
}

.bab[b-23tass72y6] {
    pointer-events: auto;
    background: #0f172a;
    color: var(--color-text-inverse, #fff);
    border-radius: 14px;
    padding: 8px 8px 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
    font-size: 13px;
    font-weight: 600;
    min-width: 540px;
}

.bab-count[b-23tass72y6] {
    background: var(--color-primary, #6366f1);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
    color: var(--color-text-inverse, #fff);
}

.bab-action[b-23tass72y6] {
    position: relative;
}

.bab-sep[b-23tass72y6] {
    width: 1px;
    height: 22px;
    background: #334155;
}

.bab-btn[b-23tass72y6] {
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #cbd5e1);
    cursor: pointer;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .bab-btn:hover:not(:disabled)[b-23tass72y6] {
        background: #1e293b;
        color: var(--color-text-inverse, #fff);
    }

    .bab-btn:disabled[b-23tass72y6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bab-btn.bab-btn-primary[b-23tass72y6] {
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
}

    .bab-btn.bab-btn-primary:hover:not(:disabled)[b-23tass72y6] {
        background: var(--color-primary-hover, #4f46e5);
    }

.bab-action.open .bab-btn[b-23tass72y6] {
    background: #1e293b;
    color: var(--color-text-inverse, #fff);
}

.bab-caret[b-23tass72y6] {
    font-size: 9px;
    opacity: 0.7;
}

.bab-close[b-23tass72y6] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted, #94a3b8);
    margin-left: 4px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
}

    .bab-close:hover:not(:disabled)[b-23tass72y6] {
        background: #1e293b;
        color: var(--color-text-inverse, #fff);
    }

    .bab-close:disabled[b-23tass72y6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Popovers ──────────────────────────────────────────── */
.bab-pop[b-23tass72y6] {
    pointer-events: auto;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--color-border, #e2e8f0);
    width: 240px;
    padding: 6px;
    color: var(--color-text-primary, #0f172a);
    font-weight: normal;
    z-index: 1101;
}

.bab-pop-tall[b-23tass72y6] {
    width: 280px;
    max-height: 360px;
    overflow-y: auto;
}

.bab-pop-head[b-23tass72y6] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px 4px;
}

.bab-pop-row[b-23tass72y6] {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--color-text-primary, #0f172a);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

    .bab-pop-row:hover[b-23tass72y6] {
        background: var(--color-primary-light, #eef2ff);
    }

    .bab-pop-row.bab-pop-preset[b-23tass72y6] {
        background: var(--color-primary-light, #fafbff);
    }

        .bab-pop-row.bab-pop-preset:hover[b-23tass72y6] {
            background: var(--color-primary-light, #eef2ff);
        }

    .bab-pop-row.bab-pop-clear[b-23tass72y6] {
        color: var(--color-text-muted, #94a3b8);
        font-style: italic;
        margin-top: 4px;
        border-top: 1px solid var(--color-border, #f1f5f9);
        padding-top: 10px;
    }

.bab-pop-empty[b-23tass72y6] {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
}

.bab-pop-search[b-23tass72y6] {
    padding: 4px;
    border-bottom: 1px solid var(--color-border, #f1f5f9);
    margin-bottom: 4px;
    position: sticky;
    top: -6px;
    background: var(--color-surface, #fff);
    z-index: 1;
}

    .bab-pop-search input[b-23tass72y6] {
        width: 100%;
        padding: 6px 10px;
        font-size: 12px;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 6px;
        color: var(--color-text-primary, #0f172a);
    }

.bab-swatch[b-23tass72y6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bab-backdrop[b-23tass72y6] {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: transparent;
}

/* ── Spinner during submit ───────────────────────────────── */
.bab-spinner[b-23tass72y6] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--color-text-inverse, #fff);
    border-radius: 50%;
    margin-left: 4px;
    animation: bab-spin-b-23tass72y6 0.8s linear infinite;
}

@keyframes bab-spin-b-23tass72y6 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 720px) {
    .bab[b-23tass72y6] {
        min-width: 0;
        flex-wrap: wrap;
        max-width: calc(100vw - 24px);
    }
}
/* /Shared/Components/BulkCommandPalette.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Bulk Command Palette — Pattern D from bulk-update-mockup
   ════════════════════════════════════════════════════════ */

.bcp-overlay[b-s9qv2ikxa7] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    z-index: 1200;
}

.bcp-box[b-s9qv2ikxa7] {
    width: 540px;
    max-width: calc(100vw - 32px);
    background: var(--color-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.bcp-input-wrap[b-s9qv2ikxa7] {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    gap: 12px;
}

.bcp-icon[b-s9qv2ikxa7] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 13px;
    font-weight: 700;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    background: var(--color-gray-100, #f1f5f9);
    padding: 4px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.bcp-scope[b-s9qv2ikxa7] {
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.bcp-input[b-s9qv2ikxa7] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--color-text-primary, #0f172a);
    background: transparent;
}

    .bcp-input[b-s9qv2ikxa7]::placeholder {
        color: var(--color-text-muted, #cbd5e1);
    }

.bcp-results[b-s9qv2ikxa7] {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.bcp-empty[b-s9qv2ikxa7] {
    padding: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted, #94a3b8);
}

.bcp-group[b-s9qv2ikxa7] {
    padding: 10px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.bcp-row[b-s9qv2ikxa7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

    .bcp-row:hover[b-s9qv2ikxa7],
    .bcp-row.active[b-s9qv2ikxa7] {
        background: var(--color-primary-light, #eef2ff);
    }

.bcp-row-icon[b-s9qv2ikxa7] {
    width: 28px;
    height: 28px;
    background: var(--color-gray-100, #f1f5f9);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bcp-row.active .bcp-row-icon[b-s9qv2ikxa7] {
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
}

.bcp-row-text[b-s9qv2ikxa7] {
    flex: 1;
    min-width: 0;
}

.bcp-row-title[b-s9qv2ikxa7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bcp-row-hint[b-s9qv2ikxa7] {
    font-size: 11px;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bcp-row-key[b-s9qv2ikxa7] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    background: var(--color-gray-100, #f1f5f9);
    padding: 3px 8px;
    border-radius: 5px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    flex-shrink: 0;
}

.bcp-foot[b-s9qv2ikxa7] {
    padding: 10px 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-gray-100, #f8fafc);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    color: var(--color-text-secondary, #64748b);
}

.bcp-foot-spacer[b-s9qv2ikxa7] {
    margin-left: auto;
}

.bcp-kbd[b-s9qv2ikxa7] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 10px;
    color: var(--color-text-secondary, #475569);
}

/* ── AI fallback row + thinking state ─────────────────── */
.bcp-row.bcp-ai[b-s9qv2ikxa7] {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.06), rgba(168, 85, 247, 0.06));
    border: 1px dashed var(--color-primary-light, #c7d2fe);
}

    .bcp-row.bcp-ai.active[b-s9qv2ikxa7] {
        background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.12));
    }

    .bcp-row.bcp-ai .bcp-row-icon[b-s9qv2ikxa7] {
        background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
        color: var(--color-text-inverse, #fff);
    }

    .bcp-row.bcp-ai .bcp-row-title[b-s9qv2ikxa7] {
        color: var(--color-primary-hover, #4338ca);
    }

.bcp-aibadge[b-s9qv2ikxa7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: var(--color-text-inverse, #fff);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.bcp-thinking[b-s9qv2ikxa7] {
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.04), rgba(168, 85, 247, 0.04));
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-primary-hover, #4338ca);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.bcp-thinking-spinner[b-s9qv2ikxa7] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: bcp-spin-b-s9qv2ikxa7 0.8s linear infinite;
}

@keyframes bcp-spin-b-s9qv2ikxa7 {
    to { transform: rotate(360deg); }
}
/* /Shared/Components/BulkEditPanel.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Bulk Edit Panel — Pattern B from bulk-update-mockup
   ────────────────────────────────────────────────────────
   Slide-in panel from the right. Renders one input per
   bulk-editable field; each starts in "Don't change" mode
   so applying a partial edit (e.g. only Status + Assignee)
   doesn't accidentally wipe other fields.
   ════════════════════════════════════════════════════════ */

.bep-overlay[b-ed3n4bst6i] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    z-index: 1090;
}

.bep-panel[b-ed3n4bst6i] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--color-surface, #fff);
    border-left: 1px solid var(--color-border, #e2e8f0);
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.06);
    z-index: 1095;
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary, #0f172a);
}

.bep-head[b-ed3n4bst6i] {
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bep-head-icon[b-ed3n4bst6i] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.bep-head-text[b-ed3n4bst6i] {
    flex: 1;
    min-width: 0;
}

    .bep-head-text h3[b-ed3n4bst6i] {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
    }

    .bep-head-text p[b-ed3n4bst6i] {
        font-size: 12px;
        color: var(--color-text-secondary, #64748b);
        margin: 2px 0 0 0;
    }

.bep-close[b-ed3n4bst6i] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
}

    .bep-close:hover:not(:disabled)[b-ed3n4bst6i] {
        background: var(--color-gray-100, #f1f5f9);
        color: var(--color-text-primary, #0f172a);
    }

    .bep-close:disabled[b-ed3n4bst6i] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bep-body[b-ed3n4bst6i] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.bep-empty[b-ed3n4bst6i] {
    text-align: center;
    color: var(--color-text-muted, #94a3b8);
    padding: 40px 16px;
    font-size: 13px;
}

.bep-section[b-ed3n4bst6i] {
    margin-bottom: 22px;
}

.bep-section-label[b-ed3n4bst6i] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bep-skip[b-ed3n4bst6i] {
    font-size: 10px;
    color: var(--color-primary, #6366f1);
    cursor: pointer;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

    .bep-skip:hover[b-ed3n4bst6i] {
        text-decoration: underline;
    }

.bep-input[b-ed3n4bst6i] {
    width: 100%;
    padding: 9px 11px;
    font-size: 13px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    color: var(--color-text-primary, #0f172a);
    background: var(--color-surface, #fff);
}

    .bep-input:focus[b-ed3n4bst6i] {
        outline: none;
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .bep-input:disabled[b-ed3n4bst6i] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.bep-date-row[b-ed3n4bst6i] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bep-date-input[b-ed3n4bst6i] {
    flex: 1;
}

.bep-clear-mini[b-ed3n4bst6i] {
    padding: 7px 10px;
    font-size: 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

    .bep-clear-mini:hover:not(:disabled)[b-ed3n4bst6i] {
        border-color: var(--color-primary, #6366f1);
        color: var(--color-primary, #6366f1);
    }

.bep-bool[b-ed3n4bst6i] {
    display: flex;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
    font-size: 12px;
    font-weight: 600;
}

    .bep-bool span[b-ed3n4bst6i] {
        flex: 1;
        text-align: center;
        padding: 9px 4px;
        cursor: pointer;
        color: var(--color-text-muted, #94a3b8);
        background: var(--color-surface, #fff);
        border-right: 1px solid var(--color-border, #e2e8f0);
        line-height: 18px;
    }

        .bep-bool span:last-child[b-ed3n4bst6i] {
            border-right: none;
        }

        .bep-bool span:hover[b-ed3n4bst6i] {
            background: var(--color-gray-100, #f8fafc);
        }

        .bep-bool span.on-yes[b-ed3n4bst6i] {
            background: var(--color-success-light, #d1fae5);
            color: var(--color-success-text, #047857);
        }

        .bep-bool span.on-no[b-ed3n4bst6i] {
            background: var(--color-danger-light, #fee2e2);
            color: var(--color-danger-text, #b91c1c);
        }

        .bep-bool span.on-keep[b-ed3n4bst6i] {
            background: var(--color-primary-light, #eef2ff);
            color: var(--color-primary-hover, #4338ca);
        }

.bep-na[b-ed3n4bst6i] {
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
    padding: 8px;
    background: var(--color-gray-100, #f8fafc);
    border-radius: 6px;
}

/* ── Footer ─────────────────────────────────────────────── */
.bep-foot[b-ed3n4bst6i] {
    padding: 14px 20px;
    border-top: 1px solid var(--color-border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary-light, #fafbff);
}

.bep-foot-info[b-ed3n4bst6i] {
    flex: 1;
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
}

    .bep-foot-info strong[b-ed3n4bst6i] {
        color: var(--color-text-primary, #0f172a);
        font-weight: 700;
    }

.bep-btn[b-ed3n4bst6i] {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569);
    cursor: pointer;
}

    .bep-btn:hover:not(:disabled)[b-ed3n4bst6i] {
        background: var(--color-gray-100, #f8fafc);
    }

    .bep-btn:disabled[b-ed3n4bst6i] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bep-btn.bep-btn-primary[b-ed3n4bst6i] {
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    border-color: var(--color-primary, #6366f1);
}

    .bep-btn.bep-btn-primary:hover:not(:disabled)[b-ed3n4bst6i] {
        background: var(--color-primary-hover, #4f46e5);
    }
/* /Shared/Components/BulkSuggestionChip.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Bulk Suggestion Chip — Pattern E from bulk-update-mockup
   ────────────────────────────────────────────────────────
   Floats above the BulkActionBar (which lives at bottom: 18px).
   Stacks 80px above so they're visually grouped without
   overlapping.
   ════════════════════════════════════════════════════════ */

.bsc-wrap[b-0gyyqdc2gw] {
    position: fixed;
    left: 50%;
    bottom: 92px;          /* BulkActionBar bottom (18px) + height (~58px) + gap (16px) */
    transform: translateX(-50%);
    z-index: 1098;
    pointer-events: none;
}

.bsc[b-0gyyqdc2gw] {
    pointer-events: auto;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: var(--color-text-inverse, #fff);
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
    min-width: 380px;
    max-width: 540px;
}

/* AI variant — deeper gradient (indigo→violet from a darker base)
   so users can tell it's a model-generated suggestion at a glance. */
.bsc.bsc-ai[b-0gyyqdc2gw] {
    background: linear-gradient(135deg, #1e293b 0%, #6d28d9 100%);
    box-shadow: 0 10px 30px rgba(109, 40, 217, 0.4);
}

.bsc-aibadge[b-0gyyqdc2gw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse, #fff);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.bsc-conf[b-0gyyqdc2gw] {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.18);
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.bsc-icon[b-0gyyqdc2gw] {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bsc-text[b-0gyyqdc2gw] {
    flex: 1;
    line-height: 1.4;
    min-width: 0;
}

    .bsc-text strong[b-0gyyqdc2gw] {
        display: block;
        font-weight: 700;
    }

    .bsc-text small[b-0gyyqdc2gw] {
        display: block;
        font-weight: 500;
        opacity: 0.85;
        font-size: 11px;
        margin-top: 2px;
    }

.bsc-accept[b-0gyyqdc2gw] {
    padding: 7px 14px;
    background: var(--color-surface, #fff);
    color: var(--color-primary, #6366f1);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

    .bsc-accept:hover:not(:disabled)[b-0gyyqdc2gw] {
        background: var(--color-primary-light, #eef2ff);
    }

    .bsc-accept:disabled[b-0gyyqdc2gw] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.bsc-dismiss[b-0gyyqdc2gw] {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse, #fff);
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

    .bsc-dismiss:hover:not(:disabled)[b-0gyyqdc2gw] {
        background: rgba(255, 255, 255, 0.3);
    }

    .bsc-dismiss:disabled[b-0gyyqdc2gw] {
        opacity: 0.6;
        cursor: not-allowed;
    }

@media (max-width: 720px) {
    .bsc[b-0gyyqdc2gw] {
        min-width: 0;
        max-width: calc(100vw - 24px);
        flex-wrap: wrap;
    }
}
/* /Shared/Components/BulkUndoBar.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Bulk Undo Bar
   ────────────────────────────────────────────────────────
   Sits at bottom-right where notifications usually land
   (deliberately NOT bottom-center so it doesn't compete
   with the BulkActionBar position when a follow-up
   selection is made).
   ════════════════════════════════════════════════════════ */

.bub-wrap[b-tzt2p57y0c] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1097;
    pointer-events: none;
}

.bub[b-tzt2p57y0c] {
    pointer-events: auto;
    background: #0f172a;
    color: var(--color-text-inverse, #fff);
    padding: 12px 12px 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    min-width: 320px;
    animation: bub-slidein-b-tzt2p57y0c 0.2s ease-out;
}

@keyframes bub-slidein-b-tzt2p57y0c {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.bub-icon[b-tzt2p57y0c] {
    width: 28px;
    height: 28px;
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bub-text[b-tzt2p57y0c] {
    flex: 1;
    min-width: 0;
}

    .bub-text strong[b-tzt2p57y0c] {
        display: block;
        font-weight: 600;
    }

    .bub-text small[b-tzt2p57y0c] {
        display: block;
        font-weight: 500;
        color: var(--color-text-muted, #94a3b8);
        font-size: 11px;
        margin-top: 2px;
    }

.bub-undo[b-tzt2p57y0c] {
    padding: 7px 14px;
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #fff);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

    .bub-undo:hover:not(:disabled)[b-tzt2p57y0c] {
        background: var(--color-primary-hover, #4f46e5);
    }

    .bub-undo:disabled[b-tzt2p57y0c] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.bub-dismiss[b-tzt2p57y0c] {
    background: transparent;
    color: var(--color-text-muted, #94a3b8);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

    .bub-dismiss:hover[b-tzt2p57y0c] {
        background: #1e293b;
        color: var(--color-text-inverse, #fff);
    }
/* /Shared/Components/Button.razor.rz.scp.css */
.btn[b-m71nxzdayv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}

    .btn:focus-visible[b-m71nxzdayv] {
        outline: 2px solid var(--color-primary, #0366d6);
        outline-offset: 2px;
    }

    .btn:disabled[b-m71nxzdayv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Sizes */
    .btn.btn-xs[b-m71nxzdayv] {
        padding: 4px 8px;
        font-size: 12px;
    }

    .btn.btn-sm[b-m71nxzdayv] {
        padding: 6px 12px;
        font-size: 13px;
    }

    .btn.btn-md[b-m71nxzdayv] {
        padding: 8px 16px;
        font-size: 14px;
    }

    .btn.btn-lg[b-m71nxzdayv] {
        padding: 12px 24px;
        font-size: 16px;
    }

    /* Icon only buttons */
    .btn.btn-icon-only[b-m71nxzdayv] {
        padding: 8px;
        aspect-ratio: 1;
    }

        .btn.btn-icon-only.btn-xs[b-m71nxzdayv] {
            padding: 4px;
        }

        .btn.btn-icon-only.btn-sm[b-m71nxzdayv] {
            padding: 6px;
        }

        .btn.btn-icon-only.btn-lg[b-m71nxzdayv] {
            padding: 12px;
        }

    /* Block button */
    .btn.btn-block[b-m71nxzdayv] {
        width: 100%;
    }

    /* Variants */
    .btn.btn-primary[b-m71nxzdayv] {
        background: var(--color-primary, #0366d6);
        color: white;
        border-color: var(--color-primary, #0366d6);
    }

        .btn.btn-primary:hover:not(:disabled)[b-m71nxzdayv] {
            background: var(--color-primary-hover, #0256c7);
            border-color: var(--color-primary-hover, #0256c7);
        }

    .btn.btn-secondary[b-m71nxzdayv] {
        background: var(--color-surface, white);
        color: var(--color-text-primary, #24292e);
        border-color: var(--color-border, #e1e4e8);
    }

        .btn.btn-secondary:hover:not(:disabled)[b-m71nxzdayv] {
            background: var(--color-gray-100, #f6f8fa);
            border-color: var(--color-border-dark, #d1d5da);
        }

    .btn.btn-danger[b-m71nxzdayv] {
        background: var(--color-danger, #d73a49);
        color: white;
        border-color: var(--color-danger, #d73a49);
    }

        .btn.btn-danger:hover:not(:disabled)[b-m71nxzdayv] {
            background: var(--color-danger-hover, #cb2431);
            border-color: var(--color-danger-hover, #cb2431);
        }

    .btn.btn-success[b-m71nxzdayv] {
        background: var(--color-success, #28a745);
        color: white;
        border-color: var(--color-success, #28a745);
    }

        .btn.btn-success:hover:not(:disabled)[b-m71nxzdayv] {
            background: var(--color-success-hover, #22863a);
            border-color: var(--color-success-hover, #22863a);
        }

    .btn.btn-warning[b-m71nxzdayv] {
        background: var(--color-warning, #f59e0b);
        color: white;
        border-color: var(--color-warning, #f59e0b);
    }

        .btn.btn-warning:hover:not(:disabled)[b-m71nxzdayv] {
            background: var(--color-warning-hover, #d97706);
            border-color: var(--color-warning-hover, #d97706);
        }

    .btn.btn-ghost[b-m71nxzdayv] {
        background: transparent;
        color: var(--color-text-secondary, #586069);
        border-color: transparent;
    }

        .btn.btn-ghost:hover:not(:disabled)[b-m71nxzdayv] {
            background: var(--color-gray-100, #f6f8fa);
            color: var(--color-text-primary, #24292e);
        }

    .btn.btn-link[b-m71nxzdayv] {
        background: transparent;
        color: var(--color-primary, #0366d6);
        border-color: transparent;
        padding-left: 0;
        padding-right: 0;
    }

        .btn.btn-link:hover:not(:disabled)[b-m71nxzdayv] {
            text-decoration: underline;
        }

    /* Icon sizing */
    .btn[b-m71nxzdayv]  i {
        font-size: 1.15em;
    }

/* Loading spinner */
.btn-spinner[b-m71nxzdayv] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin-b-m71nxzdayv 0.6s linear infinite;
}

@keyframes btn-spin-b-m71nxzdayv {
    to {
        transform: rotate(360deg);
    }
}
/* /Shared/Components/Card.razor.rz.scp.css */
.card[b-6tlfy3jvrl] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}

/* Opt-in (Class="card-allow-overflow"): let a card's content overflow its rounded
   box. Needed when the card header hosts a dropdown/menu — e.g. the ticket-list
   column picker — that must escape the card instead of being clipped by the base
   overflow:hidden. Compound selector outranks the .card rule above. */
.card.card-allow-overflow[b-6tlfy3jvrl] {
    overflow: visible;
}

    .card.card-clickable[b-6tlfy3jvrl] {
        cursor: pointer;
        transition: all 0.15s ease;
    }

        .card.card-clickable:hover[b-6tlfy3jvrl] {
            border-color: var(--color-primary, #0366d6);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

/* Header */
.card-header[b-6tlfy3jvrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
}

.card-header-content[b-6tlfy3jvrl] {
    flex: 1;
    min-width: 0;
}

.card-title[b-6tlfy3jvrl] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.card-subtitle[b-6tlfy3jvrl] {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.card-header-actions[b-6tlfy3jvrl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Body */
.card-body[b-6tlfy3jvrl] {
    padding: 20px;
}

.card.card-no-padding .card-body[b-6tlfy3jvrl] {
    padding: 0;
}

/* Footer */
.card-footer[b-6tlfy3jvrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #fafbfc);
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

/* Variants */
.card.card-flat[b-6tlfy3jvrl] {
    border: none;
    box-shadow: none;
}

.card.card-elevated[b-6tlfy3jvrl] {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .card.card-elevated:hover[b-6tlfy3jvrl] {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
/* /Shared/Components/ConfirmDialog.razor.rz.scp.css */
body[b-y5hi6tifzd] {
}
.confirm-backdrop[b-y5hi6tifzd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn-b-y5hi6tifzd 0.15s ease;
}

.confirm-container[b-y5hi6tifzd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 24px;
}

.confirm-dialog[b-y5hi6tifzd] {
    background: var(--color-surface, white);
    border-radius: var(--radius-lg, 8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    padding: 32px;
    text-align: center;
    animation: slideIn-b-y5hi6tifzd 0.2s ease-out;
}

/* Icon */
.confirm-icon[b-y5hi6tifzd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

    .confirm-icon[b-y5hi6tifzd]  i {
        font-size: 28px;
    }

    .confirm-icon.confirm-icon-primary[b-y5hi6tifzd] {
        background: var(--color-primary-light, #eff6ff);
        color: var(--color-primary, #2563eb);
    }

    .confirm-icon.confirm-icon-danger[b-y5hi6tifzd] {
        background: var(--color-danger-light, #fef2f2);
        color: var(--color-danger, #dc2626);
    }

    .confirm-icon.confirm-icon-warning[b-y5hi6tifzd] {
        background: var(--color-warning-light, #fffbeb);
        color: var(--color-warning, #d97706);
    }

    .confirm-icon.confirm-icon-success[b-y5hi6tifzd] {
        background: var(--color-success-light, #f0fdf4);
        color: var(--color-success, #16a34a);
    }

/* Title */
.confirm-title[b-y5hi6tifzd] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

/* Message */
.confirm-message[b-y5hi6tifzd] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    line-height: 1.5;
}

/* Actions */
.confirm-actions[b-y5hi6tifzd] {
    display: flex;
    gap: 12px;
}

    .confirm-actions .btn[b-y5hi6tifzd] {
        flex: 1;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        border-radius: var(--radius-md, 6px);
        cursor: pointer;
        transition: all 0.15s ease;
        border: 1px solid transparent;
    }

    .confirm-actions .btn-secondary[b-y5hi6tifzd] {
        background: var(--color-surface, white);
        color: var(--color-text-primary, #24292e);
        border-color: var(--color-border, #e1e4e8);
    }

        .confirm-actions .btn-secondary:hover[b-y5hi6tifzd] {
            background: var(--color-gray-100, #f6f8fa);
        }

    .confirm-actions .btn-primary[b-y5hi6tifzd] {
        background: var(--color-primary, #0366d6);
        color: white;
    }

        .confirm-actions .btn-primary:hover[b-y5hi6tifzd] {
            background: var(--color-primary-hover, #0256c7);
        }

    .confirm-actions .btn-danger[b-y5hi6tifzd] {
        background: var(--color-danger, #d73a49);
        color: white;
    }

        .confirm-actions .btn-danger:hover[b-y5hi6tifzd] {
            background: var(--color-danger-hover, #cb2431);
        }

    .confirm-actions .btn-warning[b-y5hi6tifzd] {
        background: var(--color-warning, #f59e0b);
        color: white;
    }

        .confirm-actions .btn-warning:hover[b-y5hi6tifzd] {
            background: var(--color-warning-hover, #d97706);
        }

    .confirm-actions .btn-success[b-y5hi6tifzd] {
        background: var(--color-success, #28a745);
        color: white;
    }

        .confirm-actions .btn-success:hover[b-y5hi6tifzd] {
            background: var(--color-success-hover, #22863a);
        }

/* Animations */
@keyframes fadeIn-b-y5hi6tifzd {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-y5hi6tifzd {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Shared/Components/EmptyState.razor.rz.scp.css */
.empty-state[b-1dubideb7o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
}

    /* Sizes */
    .empty-state.empty-state-sm[b-1dubideb7o] {
        padding: 32px 20px;
    }

        .empty-state.empty-state-sm .empty-state-icon[b-1dubideb7o]  i,
        .empty-state.empty-state-sm .empty-state-emoji[b-1dubideb7o] {
            font-size: 40px;
        }

        .empty-state.empty-state-sm .empty-state-title[b-1dubideb7o] {
            font-size: 16px;
        }

    .empty-state.empty-state-lg[b-1dubideb7o] {
        padding: 64px 32px;
    }

        .empty-state.empty-state-lg .empty-state-icon[b-1dubideb7o]  i,
        .empty-state.empty-state-lg .empty-state-emoji[b-1dubideb7o] {
            font-size: 80px;
        }

        .empty-state.empty-state-lg .empty-state-title[b-1dubideb7o] {
            font-size: 24px;
        }

    /* Compact variant - no border/background */
    .empty-state.empty-state-compact[b-1dubideb7o] {
        background: transparent;
        border: none;
        padding: 24px;
    }

/* Icon */
.empty-state-icon[b-1dubideb7o] {
    margin-bottom: 16px;
    color: var(--color-text-muted, #6a737d);
}

    .empty-state-icon[b-1dubideb7o]  i {
        font-size: 64px;
    }

/* Emoji fallback */
.empty-state-emoji[b-1dubideb7o] {
    font-size: 64px;
    margin-bottom: 16px;
    line-height: 1;
}

/* Title */
.empty-state-title[b-1dubideb7o] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

/* Description */
.empty-state-description[b-1dubideb7o] {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    max-width: 360px;
    line-height: 1.5;
}

/* Action */
.empty-state-action[b-1dubideb7o] {
    margin-top: 8px;
}

/* Button styles (fallback if Button component not used) */
.empty-state .btn[b-1dubideb7o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.empty-state .btn-primary[b-1dubideb7o] {
    background: var(--color-primary, #0366d6);
    color: white;
}

    .empty-state .btn-primary:hover[b-1dubideb7o] {
        background: var(--color-primary-hover, #0256c7);
    }

.empty-state .btn-secondary[b-1dubideb7o] {
    background: var(--color-surface, white);
    color: var(--color-text-primary, #24292e);
    border-color: var(--color-border, #e1e4e8);
}

    .empty-state .btn-secondary:hover[b-1dubideb7o] {
        background: var(--color-gray-100, #f6f8fa);
    }
/* /Shared/Components/Filterbar.razor.rz.scp.css */
.filter-bar[b-rkipioywqs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    flex-wrap: wrap;
}

/* Search */
.filter-bar-search[b-rkipioywqs] {
    position: relative;
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
}

.filter-search-icon[b-rkipioywqs] {
    position: absolute;
    left: 10px;
    font-size: 16px;
    color: var(--color-text-muted, #6a737d);
    pointer-events: none;
}

.filter-search-input[b-rkipioywqs] {
    width: 100%;
    padding: 8px 32px 8px 34px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text-primary, #24292e);
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    transition: all 0.15s ease;
    outline: none;
}

    .filter-search-input:focus[b-rkipioywqs] {
        background: var(--color-surface, white);
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.15);
    }

    .filter-search-input[b-rkipioywqs]::placeholder {
        color: var(--color-text-muted, #6a737d);
    }

.filter-search-clear[b-rkipioywqs] {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text-muted, #6a737d);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .filter-search-clear:hover[b-rkipioywqs] {
        background: var(--color-gray-200, #e1e4e8);
        color: var(--color-text-primary, #24292e);
    }

    .filter-search-clear[b-rkipioywqs]  i {
        font-size: 14px;
    }

/* Filters */
.filter-bar-filters[b-rkipioywqs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .filter-bar-filters[b-rkipioywqs]  select,
    .filter-bar-filters[b-rkipioywqs]  .form-select {
        padding: 8px 32px 8px 12px;
        font-size: 13px;
        font-family: inherit;
        color: var(--color-text-primary, #24292e);
        background: var(--color-surface, white);
        border: 1px solid var(--color-border, #e1e4e8);
        border-radius: var(--radius-md, 6px);
        cursor: pointer;
        outline: none;
        transition: border-color 0.15s ease;
        width: auto;
        min-width: 120px;
    }

        .filter-bar-filters[b-rkipioywqs]  select:focus,
        .filter-bar-filters[b-rkipioywqs]  .form-select:focus {
            border-color: var(--color-primary, #0366d6);
        }

/* Actions */
.filter-bar-actions[b-rkipioywqs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Result count */
.filter-results-count[b-rkipioywqs] {
    padding: 8px 0;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

    .filter-results-count strong[b-rkipioywqs] {
        font-weight: 600;
        color: var(--color-text-primary, #24292e);
    }

/* Responsive */
@media (max-width: 640px) {
    .filter-bar[b-rkipioywqs] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar-search[b-rkipioywqs] {
        min-width: unset;
    }

    .filter-bar-filters[b-rkipioywqs] {
        flex-wrap: wrap;
    }

        .filter-bar-filters[b-rkipioywqs]  select,
        .filter-bar-filters[b-rkipioywqs]  .form-select {
            flex: 1;
            min-width: 0;
        }

    .filter-bar-actions[b-rkipioywqs] {
        margin-left: 0;
    }
}
/* /Shared/Components/FormBuilder/FormChainingEditor.razor.rz.scp.css */
/* ── Form Chaining Editor ─────────────────────────── */

/* Two-panel layout */
.fce-layout[b-ak89zqvu5n] {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* ── Left Sidebar ────────────────────────────────── */
.fce-sidebar[b-ak89zqvu5n] {
    width: 260px;
    border-right: 1px solid var(--border-color, #e8ecf1);
    background: var(--background-primary, #fff);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.fce-sidebar-head[b-ak89zqvu5n] {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    flex-shrink: 0;
}
.fce-sidebar-head i[b-ak89zqvu5n] {
    font-size: 16px;
    color: var(--accent-color, #6366f1);
}
.fce-count[b-ak89zqvu5n] {
    font-size: 10px;
    font-weight: 700;
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: auto;
}

/* Sidebar list */
.fce-sidebar-list[b-ak89zqvu5n] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Empty state */
.fce-sidebar-empty[b-ak89zqvu5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    color: var(--text-tertiary, #94a3b8);
}
.fce-sidebar-empty > i[b-ak89zqvu5n] {
    font-size: 40px;
    color: var(--border-hover, #cbd5e1);
    margin-bottom: 10px;
}
.fce-sidebar-empty > p[b-ak89zqvu5n] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    margin: 0 0 4px;
}
.fce-sidebar-empty-sub[b-ak89zqvu5n] {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--text-tertiary, #94a3b8) !important;
    line-height: 1.5;
}

/* ── Chain Link Card ─────────────────────────────── */
.fce-link-card[b-ak89zqvu5n] {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--background-secondary, #f8fafc);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.fce-link-card:hover[b-ak89zqvu5n] {
    border-color: var(--border-hover, #cbd5e1);
}
.fce-link-card.selected[b-ak89zqvu5n] {
    border-color: var(--accent-color, #6366f1);
    background: rgba(99, 102, 241, 0.03);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}
.fce-link-card.disabled[b-ak89zqvu5n] {
    opacity: 0.55;
}
.fce-link-card-head[b-ak89zqvu5n] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fce-link-card-head > i[b-ak89zqvu5n] {
    font-size: 14px;
    color: var(--accent-color, #6366f1);
    flex-shrink: 0;
}
.fce-link-name[b-ak89zqvu5n] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fce-link-card-meta[b-ak89zqvu5n] {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    padding-left: 22px;
}
.fce-link-card-meta span[b-ak89zqvu5n] {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 4px;
}
.fce-link-card-meta i[b-ak89zqvu5n] {
    font-size: 12px;
}

/* Toggle switch */
.fce-toggle[b-ak89zqvu5n] {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--border-color, #e2e8f0);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.fce-toggle.on[b-ak89zqvu5n] {
    background: var(--accent-color, #6366f1);
}
.fce-toggle[b-ak89zqvu5n]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    transition: left 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.fce-toggle.on[b-ak89zqvu5n]::after {
    left: 16px;
}

/* Add chain link button */
.fce-btn-add-link[b-ak89zqvu5n] {
    margin: 8px;
    padding: 10px;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 8px;
    background: transparent;
    color: var(--accent-color, #6366f1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.fce-btn-add-link:hover[b-ak89zqvu5n] {
    background: rgba(99, 102, 241, 0.04);
    border-color: var(--accent-color, #6366f1);
}

/* ── Right Editor ────────────────────────────────── */
.fce-editor[b-ak89zqvu5n] {
    flex: 1;
    overflow-y: auto;
    background: var(--background-secondary, #f8fafc);
}

/* Empty state */
.fce-editor-empty[b-ak89zqvu5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    color: var(--text-tertiary, #94a3b8);
}
.fce-editor-empty > i[b-ak89zqvu5n] {
    font-size: 52px;
    color: var(--border-hover, #cbd5e1);
    margin-bottom: 16px;
}
.fce-editor-empty h3[b-ak89zqvu5n] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    margin: 0 0 8px;
}
.fce-editor-empty p[b-ak89zqvu5n] {
    font-size: 13px;
    color: var(--text-tertiary, #94a3b8);
    max-width: 380px;
    line-height: 1.6;
    margin: 0;
}

/* Editor content */
.fce-editor-content[b-ak89zqvu5n] {
    padding: 20px 24px;
    max-width: 780px;
}

/* Editor header */
.fce-editor-head[b-ak89zqvu5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.fce-editor-head h3[b-ak89zqvu5n] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.fce-editor-head h3 i[b-ak89zqvu5n] {
    color: var(--accent-color, #6366f1);
}

/* Delete button */
.fce-btn-delete[b-ak89zqvu5n] {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-danger, #dc2626);
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.fce-btn-delete:hover[b-ak89zqvu5n] {
    background: var(--color-danger-light, #fee2e2);
    border-color: var(--color-danger-light, #fca5a5);
}

/* ── Sections ────────────────────────────────────── */
.fce-section[b-ak89zqvu5n] {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
    background: var(--background-primary, #fff);
}
.fce-section-head[b-ak89zqvu5n] {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--background-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e8ecf1);
}
.fce-section-head i[b-ak89zqvu5n] {
    font-size: 14px;
}

/* IF head (purple tint) */
.fce-if-head[b-ak89zqvu5n] {
    background: rgba(99, 102, 241, 0.06);
    color: var(--accent-color, #6366f1);
}

/* Mappings head (green tint) */
.fce-map-head[b-ak89zqvu5n] {
    background: rgba(22, 163, 74, 0.06);
    color: var(--color-success, #16a34a);
}

.fce-section-body[b-ak89zqvu5n] {
    padding: 14px;
}

/* ── Target Form ─────────────────────────────────── */
.fce-select-full[b-ak89zqvu5n] {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #0f172a);
    outline: none;
    transition: border-color 0.15s;
}
.fce-select-full:focus[b-ak89zqvu5n] {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.fce-target-info[b-ak89zqvu5n] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-success, #16a34a);
    background: rgba(22, 163, 74, 0.06);
    padding: 8px 12px;
    border-radius: 8px;
}
.fce-target-info i[b-ak89zqvu5n] {
    font-size: 14px;
}

/* ── Condition Row ───────────────────────────────── */
.fce-cond-row[b-ak89zqvu5n] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.fce-select[b-ak89zqvu5n] {
    padding: 7px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #0f172a);
    outline: none;
    min-width: 0;
    transition: border-color 0.15s;
}
.fce-select:focus[b-ak89zqvu5n] {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.fce-sel-field[b-ak89zqvu5n] { flex: 2; }
.fce-sel-op[b-ak89zqvu5n] { flex: 1.5; }

.fce-input[b-ak89zqvu5n] {
    padding: 7px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    color: var(--text-primary, #0f172a);
    background: var(--background-primary, #fff);
    outline: none;
    transition: border-color 0.15s;
}
.fce-input:focus[b-ak89zqvu5n] {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.fce-inp-val[b-ak89zqvu5n] { flex: 1.5; }

/* Delete button (condition/mapping row) */
.fce-btn-del[b-ak89zqvu5n] {
    font-size: 14px;
    color: var(--text-tertiary, #94a3b8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fce-btn-del:hover[b-ak89zqvu5n] {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
}

/* ── Logic Pill (AND/OR) ─────────────────────────── */
.fce-logic-pill[b-ak89zqvu5n] {
    display: flex;
    gap: 0;
    margin: -2px 0 6px 0;
    padding-left: 6px;
}
.fce-logic-pill button[b-ak89zqvu5n] {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--background-primary, #fff);
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
}
.fce-logic-pill button:first-child[b-ak89zqvu5n] {
    border-radius: 4px 0 0 4px;
}
.fce-logic-pill button:last-child[b-ak89zqvu5n] {
    border-radius: 0 4px 4px 0;
    border-left: none;
}
.fce-logic-pill button.active[b-ak89zqvu5n] {
    background: rgba(99, 102, 241, 0.06);
    color: var(--accent-color, #6366f1);
    border-color: rgba(99, 102, 241, 0.3);
}

/* ── Flow Arrow ──────────────────────────────────── */
.fce-flow-arrow[b-ak89zqvu5n] {
    text-align: center;
    padding: 8px 0;
    color: var(--border-hover, #cbd5e1);
    font-size: 20px;
}

/* ── Mapping Row ─────────────────────────────────── */
.fce-mapping-row[b-ak89zqvu5n] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
}
.fce-mapping-expr[b-ak89zqvu5n] {
    flex: 1;
    min-width: 0;
}
.fce-mapping-label[b-ak89zqvu5n] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 4px;
}
.fce-mapping-expr .fce-input[b-ak89zqvu5n] {
    width: 100%;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
}
.fce-mapping-arrow[b-ak89zqvu5n] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 16px;
    flex-shrink: 0;
}
.fce-mapping-target[b-ak89zqvu5n] {
    flex: 1;
    min-width: 0;
}
.fce-mapping-target .fce-select[b-ak89zqvu5n] {
    width: 100%;
}

/* Field pills */
.fce-field-pills[b-ak89zqvu5n] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.fce-pill[b-ak89zqvu5n] {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-color, #6366f1);
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fce-pill:hover[b-ak89zqvu5n] {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}
.fce-pill-more[b-ak89zqvu5n] {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    padding: 2px 4px;
}

/* ── Empty block ─────────────────────────────────── */
.fce-empty-block[b-ak89zqvu5n] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    padding: 12px 0;
    text-align: center;
}

/* ── Add button (in sections) ────────────────────── */
.fce-btn-add[b-ak89zqvu5n] {
    font-size: 12px;
    color: var(--accent-color, #6366f1);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.fce-btn-add:hover[b-ak89zqvu5n] {
    text-decoration: underline;
}
.fce-btn-add:disabled[b-ak89zqvu5n] {
    color: var(--text-tertiary, #94a3b8);
    cursor: not-allowed;
}
.fce-btn-add:disabled:hover[b-ak89zqvu5n] {
    text-decoration: none;
}

/* Hint text */
.fce-hint[b-ak89zqvu5n] {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    margin-left: 8px;
    font-style: italic;
}

/* ── Validation Warnings ─────────────────────────── */
.fce-warnings[b-ak89zqvu5n] {
    margin-top: 16px;
}
.fce-warning[b-ak89zqvu5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-warning-light, #fffbeb);
    border: 1px solid var(--color-warning-light, #fde68a);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-warning-text, #92400e);
    margin-bottom: 6px;
}
.fce-warning i[b-ak89zqvu5n] {
    font-size: 15px;
    color: var(--color-warning, #f59e0b);
    flex-shrink: 0;
}
/* /Shared/Components/FormBuilder/FormConditionsEditor.razor.rz.scp.css */
/* ── Conditions Layout ────────────────────────────── */
[b-gk2wzghzue] .fb-cond-layout {
    display: flex;
    flex: 1;
    height: calc(100vh - 54px);
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────── */
[b-gk2wzghzue] .fb-cond-sidebar {
    width: 300px;
    background: var(--background-primary, #fff);
    border-right: 1px solid var(--border-color, #e8ecf1);
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
[b-gk2wzghzue] .fb-cond-sidebar-head {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[b-gk2wzghzue] .fb-cond-sidebar-head h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
[b-gk2wzghzue] .fb-cond-sidebar-head h3 i { color: var(--accent-color, #6366f1); font-size: 18px; }
[b-gk2wzghzue] .fb-rule-count {
    font-size: 10px;
    font-weight: 700;
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
    padding: 2px 8px;
    border-radius: 100px;
    min-width: 20px;
    text-align: center;
}
[b-gk2wzghzue] .fb-cond-sidebar-list { padding: 8px; flex: 1; overflow-y: auto; }

/* ── Rule Cards ──────────────────────────────────── */
[b-gk2wzghzue] .fb-cond-rule-card {
    padding: 12px 14px;
    border: 1.5px solid var(--border-color, #e8ecf1);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--background-primary, #fff);
}
[b-gk2wzghzue] .fb-cond-rule-card:hover {
    border-color: var(--border-hover, #cbd5e1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}
[b-gk2wzghzue] .fb-cond-rule-card.active {
    border-color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.04);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
[b-gk2wzghzue] .fb-cond-rule-card.disabled .fb-rc-name { color: var(--text-tertiary, #94a3b8); }
[b-gk2wzghzue] .fb-rc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
[b-gk2wzghzue] .fb-rc-num {
    font-size: 10px; font-weight: 800;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e8ecf1);
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[b-gk2wzghzue] .fb-rc-name {
    font-size: 13px; font-weight: 600; color: var(--text-primary, #0f172a);
    letter-spacing: -0.01em; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[b-gk2wzghzue] .fb-rc-badge {
    font-size: 9px; font-weight: 700; padding: 2px 7px;
    border-radius: 100px; letter-spacing: 0.03em; flex-shrink: 0;
}
[b-gk2wzghzue] .fb-rc-badge.on { background: rgba(16,185,129,0.1); color: var(--color-success, #10b981); }
[b-gk2wzghzue] .fb-rc-badge.off { background: var(--background-secondary, #f8fafc); color: var(--text-tertiary, #94a3b8); }
[b-gk2wzghzue] .fb-rc-summary { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
[b-gk2wzghzue] .fb-rc-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; background: var(--background-secondary, #f8fafc);
    border-radius: 4px; font-size: 10px; font-weight: 600;
}
[b-gk2wzghzue] .fb-rc-tag i { font-size: 10px; }
[b-gk2wzghzue] .fb-rc-tag.if-tag { color: var(--accent-color, #6366f1); }
[b-gk2wzghzue] .fb-rc-tag.then-tag { color: var(--color-success, #10b981); }

[b-gk2wzghzue] .fb-cond-add-rule {
    margin: 8px;
    padding: 12px;
    border: 2px dashed var(--border-color, #e8ecf1);
    border-radius: 10px;
    text-align: center;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
}
[b-gk2wzghzue] .fb-cond-add-rule:hover {
    border-color: var(--accent-color, #6366f1);
    color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.04);
}

/* ── Main Editor Area ────────────────────────────── */
[b-gk2wzghzue] .fb-cond-main {
    flex: 1;
    overflow-y: auto;
    background: var(--background-secondary, #f8fafc);
    padding: 32px;
    display: flex;
    justify-content: center;
}
[b-gk2wzghzue] .fb-cond-editor { width: 100%; max-width: 720px; }

/* Editor head */
[b-gk2wzghzue] .fb-cond-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
[b-gk2wzghzue] .fb-cond-editor-head input {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    letter-spacing: -0.02em;
    outline: none;
}
[b-gk2wzghzue] .fb-cond-editor-head input:hover { border-color: var(--border-color, #e8ecf1); }
[b-gk2wzghzue] .fb-cond-editor-head input:focus {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    background: var(--background-primary, #fff);
}
[b-gk2wzghzue] .fb-cond-del-rule {
    padding: 6px 12px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-danger, #ef4444);
    cursor: pointer;
    transition: all 0.12s;
    background: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
[b-gk2wzghzue] .fb-cond-del-rule:hover { background: var(--color-danger-light, #fef2f2); border-color: var(--color-danger, #ef4444); }

/* ── IF/THEN Blocks ──────────────────────────────── */
[b-gk2wzghzue] .fb-cond-block {
    background: var(--background-primary, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e8ecf1);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[b-gk2wzghzue] .fb-cond-block-head {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[b-gk2wzghzue] .fb-cb-left { display: flex; align-items: center; gap: 8px; }
[b-gk2wzghzue] .fb-cond-block-head i { font-size: 16px; }
[b-gk2wzghzue] .fb-cond-block-head.if-head {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(99,102,241,0.03));
    color: var(--accent-color, #6366f1);
    border-bottom: 1px solid rgba(99,102,241,0.1);
}
[b-gk2wzghzue] .fb-cond-block-head.then-head {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.03));
    color: var(--color-success, #10b981);
    border-bottom: 1px solid rgba(16,185,129,0.1);
}
[b-gk2wzghzue] .fb-cond-block-body { padding: 12px; }
[b-gk2wzghzue] .fb-cond-empty-block {
    padding: 8px;
    text-align: center;
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
}

/* ── Condition/Action Rows ───────────────────────── */
[b-gk2wzghzue] .fb-cond-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--background-secondary, #f8fafc);
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color, #e8ecf1);
    transition: all 0.15s;
}
[b-gk2wzghzue] .fb-cond-row:hover { border-color: var(--border-hover, #cbd5e1); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
[b-gk2wzghzue] .fb-cond-row select, [b-gk2wzghzue] .fb-cond-row input[type="text"] {
    padding: 7px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #0f172a);
    transition: all 0.15s;
    height: 34px;
    outline: none;
}
[b-gk2wzghzue] .fb-cond-row select:focus, [b-gk2wzghzue] .fb-cond-row input[type="text"]:focus {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
[b-gk2wzghzue] .fb-cr-num {
    font-size: 10px; font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    width: 20px; text-align: center; flex-shrink: 0;
}
[b-gk2wzghzue] .fb-cr-field { flex: 2; min-width: 0; }
[b-gk2wzghzue] .fb-cr-op { flex: 1.5; min-width: 0; }
[b-gk2wzghzue] .fb-cr-val { flex: 2; min-width: 0; }
[b-gk2wzghzue] .fb-cr-action { flex: 1.5; min-width: 0; }
[b-gk2wzghzue] .fb-cr-target { flex: 2; min-width: 0; }
[b-gk2wzghzue] .fb-cr-del {
    border: none; background: none; cursor: pointer;
    color: var(--text-tertiary, #94a3b8);
    padding: 5px 6px; border-radius: 6px; font-size: 13px;
    transition: all 0.12s; display: flex; align-items: center; flex-shrink: 0;
}
[b-gk2wzghzue] .fb-cr-del:hover { color: var(--color-danger, #ef4444); background: var(--color-danger-light, #fef2f2); }

/* ── AND/OR Logic Toggle ─────────────────────────── */
[b-gk2wzghzue] .fb-cond-logic-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0 2px 28px;
    gap: 0;
}
[b-gk2wzghzue] .fb-cond-logic-badge button {
    padding: 3px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-color, #e8ecf1);
    cursor: pointer;
    transition: all 0.12s;
    background: var(--background-primary, #fff);
    color: var(--text-tertiary, #94a3b8);
}
[b-gk2wzghzue] .fb-cond-logic-badge button:first-child { border-radius: 100px 0 0 100px; }
[b-gk2wzghzue] .fb-cond-logic-badge button:last-child { border-radius: 0 100px 100px 0; border-left: 0; }
[b-gk2wzghzue] .fb-cond-logic-badge button.active {
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
    border-color: var(--accent-color, #6366f1);
}
[b-gk2wzghzue] .fb-cond-logic-badge button:hover:not(.active) { background: var(--background-secondary, #f8fafc); color: var(--text-secondary, #475569); }

/* ── Add Button ──────────────────────────────────── */
[b-gk2wzghzue] .fb-cond-add-btn {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    margin-top: 4px;
}
[b-gk2wzghzue] .fb-cond-add-btn:hover { border-color: var(--accent-color, #6366f1); color: var(--accent-color, #6366f1); background: rgba(99,102,241,0.04); }

/* ── Flow Arrow ──────────────────────────────────── */
[b-gk2wzghzue] .fb-cond-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    color: var(--border-hover, #cbd5e1);
    gap: 2px;
}
[b-gk2wzghzue] .fb-fa-line { width: 2px; height: 10px; background: var(--border-hover, #cbd5e1); border-radius: 1px; }
[b-gk2wzghzue] .fb-cond-flow-arrow i { font-size: 18px; }

/* ── Empty State ─────────────────────────────────── */
[b-gk2wzghzue] .fb-cond-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-tertiary, #94a3b8);
    text-align: center;
    padding: 60px 24px;
}
[b-gk2wzghzue] .fb-cond-empty i { font-size: 52px; color: var(--border-hover, #cbd5e1); margin-bottom: 16px; }
[b-gk2wzghzue] .fb-cond-empty-t1 { font-size: 16px; font-weight: 700; color: var(--text-secondary, #475569); margin-bottom: 6px; letter-spacing: -0.02em; }
[b-gk2wzghzue] .fb-cond-empty-t2 { font-size: 13px; color: var(--text-tertiary, #94a3b8); max-width: 360px; line-height: 1.6; margin-bottom: 20px; }
/* /Shared/Components/FormBuilder/FormFieldConditionsModal.razor.rz.scp.css */
/* ── Field Conditions Modal ─────────────────────────── */

/* Overlay */
.fcm-overlay[b-k2vsbo9j26] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modal container */
.fcm-modal[b-k2vsbo9j26] {
    background: var(--background-primary, #fff);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
    width: 660px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────── */
.fcm-head[b-k2vsbo9j26] {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    flex-shrink: 0;
}
.fcm-head-icon[b-k2vsbo9j26] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 10px;
    font-size: 18px;
    color: var(--accent-color, #6366f1);
    flex-shrink: 0;
}
.fcm-head-text[b-k2vsbo9j26] { flex: 1; }
.fcm-head-title[b-k2vsbo9j26] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.01em;
}
.fcm-head-sub[b-k2vsbo9j26] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    margin-top: 2px;
}
.fcm-close[b-k2vsbo9j26] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: none;
    font-size: 16px;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
}
.fcm-close:hover[b-k2vsbo9j26] {
    background: var(--background-secondary, #f8fafc);
    color: var(--text-primary, #0f172a);
}

/* ── Body ────────────────────────────────────────── */
.fcm-body[b-k2vsbo9j26] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ── Footer ──────────────────────────────────────── */
.fcm-footer[b-k2vsbo9j26] {
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e8ecf1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.fcm-btn[b-k2vsbo9j26] {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.fcm-btn-secondary[b-k2vsbo9j26] {
    background: var(--background-primary, #fff);
    color: var(--text-secondary, #475569);
    border: 1px solid var(--border-color, #e2e8f0);
}
.fcm-btn-secondary:hover[b-k2vsbo9j26] {
    background: var(--background-secondary, #f8fafc);
}

/* ── Empty state ─────────────────────────────────── */
.fcm-empty[b-k2vsbo9j26] {
    text-align: center;
    padding: 32px 20px;
}
.fcm-empty > i[b-k2vsbo9j26] {
    font-size: 48px;
    color: var(--border-hover, #cbd5e1);
    margin-bottom: 12px;
    display: block;
}
.fcm-empty-title[b-k2vsbo9j26] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    margin-bottom: 6px;
}
.fcm-empty-desc[b-k2vsbo9j26] {
    font-size: 13px;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 18px;
    line-height: 1.6;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Rule card ──────────────────────────────────── */
.fcm-rule[b-k2vsbo9j26] {
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: all 0.15s;
}
.fcm-rule:hover[b-k2vsbo9j26] {
    border-color: var(--border-hover, #cbd5e1);
}
.fcm-rule.expanded[b-k2vsbo9j26] {
    border-color: var(--accent-color, #6366f1);
    background: rgba(99, 102, 241, 0.02);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}

/* Rule header (collapsed) */
.fcm-rule-head[b-k2vsbo9j26] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.fcm-chevron[b-k2vsbo9j26] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    transition: transform 0.15s;
}
.fcm-rule.expanded .fcm-chevron[b-k2vsbo9j26] {
    transform: rotate(90deg);
    color: var(--accent-color, #6366f1);
}
.fcm-rule-name[b-k2vsbo9j26] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    flex: 1;
}

/* Toggle switch */
.fcm-toggle[b-k2vsbo9j26] {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--border-color, #e2e8f0);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.fcm-toggle.on[b-k2vsbo9j26] {
    background: var(--accent-color, #6366f1);
}
.fcm-toggle[b-k2vsbo9j26]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    transition: left 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.fcm-toggle.on[b-k2vsbo9j26]::after {
    left: 16px;
}

/* Rule summary (collapsed view) */
.fcm-rule-summary[b-k2vsbo9j26] {
    font-size: 12px;
    color: var(--text-tertiary, #64748b);
    margin-top: 6px;
    padding-left: 22px;
    line-height: 1.6;
}
.fcm-rule-summary em[b-k2vsbo9j26] {
    font-style: normal;
    font-weight: 600;
    color: var(--accent-color, #6366f1);
}
.fcm-then[b-k2vsbo9j26] {
    color: var(--text-tertiary, #94a3b8);
}
.fcm-action-text[b-k2vsbo9j26] {
    color: var(--color-success, #16a34a) !important;
}

/* ── Expanded editor ─────────────────────────────── */
.fcm-rule-editor[b-k2vsbo9j26] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, #e8ecf1);
}
.fcm-edit-name-row[b-k2vsbo9j26] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.fcm-btn-delete-rule[b-k2vsbo9j26] {
    font-size: 12px;
    color: var(--color-danger, #dc2626);
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-light, #fecaca);
    border-radius: 6px;
    padding: 7px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.15s;
}
.fcm-btn-delete-rule:hover[b-k2vsbo9j26] {
    background: var(--color-danger-light, #fee2e2);
}

/* IF / THEN blocks */
.fcm-block[b-k2vsbo9j26] {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
}
.fcm-block-head[b-k2vsbo9j26] {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fcm-if-head[b-k2vsbo9j26] {
    background: rgba(99, 102, 241, 0.06);
    color: var(--accent-color, #6366f1);
}
.fcm-then-head[b-k2vsbo9j26] {
    background: rgba(22, 163, 74, 0.06);
    color: var(--color-success, #16a34a);
}
.fcm-block-body[b-k2vsbo9j26] {
    padding: 10px 12px;
    background: var(--background-primary, #fff);
}
.fcm-empty-block[b-k2vsbo9j26] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    padding: 8px 0;
    text-align: center;
}

/* Condition / action rows */
.fcm-cond-row[b-k2vsbo9j26] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.fcm-select[b-k2vsbo9j26] {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 5px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #0f172a);
    min-width: 0;
}
.fcm-sel-field[b-k2vsbo9j26] { flex: 2; }
.fcm-sel-op[b-k2vsbo9j26] { flex: 1.5; }
.fcm-sel-action[b-k2vsbo9j26] { flex: 1.5; }
.fcm-input[b-k2vsbo9j26] {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 5px;
    color: var(--text-primary, #0f172a);
    background: var(--background-primary, #fff);
}
.fcm-input:focus[b-k2vsbo9j26], .fcm-select:focus[b-k2vsbo9j26] {
    outline: none;
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.fcm-edit-name-row .fcm-input[b-k2vsbo9j26] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
}
.fcm-inp-val[b-k2vsbo9j26] { flex: 1.5; }

.fcm-btn-del[b-k2vsbo9j26] {
    font-size: 14px;
    color: var(--text-tertiary, #94a3b8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fcm-btn-del:hover[b-k2vsbo9j26] {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
}

/* Logic pill (AND/OR) */
.fcm-logic-pill[b-k2vsbo9j26] {
    display: flex;
    gap: 0;
    margin: -2px 0 6px 0;
}
.fcm-logic-pill button[b-k2vsbo9j26] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--background-primary, #fff);
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
}
.fcm-logic-pill button:first-child[b-k2vsbo9j26] { border-radius: 4px 0 0 4px; }
.fcm-logic-pill button:last-child[b-k2vsbo9j26] { border-radius: 0 4px 4px 0; border-left: none; }
.fcm-logic-pill button.active[b-k2vsbo9j26] {
    background: rgba(99, 102, 241, 0.06);
    color: var(--accent-color, #6366f1);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Flow arrow */
.fcm-flow-arrow[b-k2vsbo9j26] {
    text-align: center;
    padding: 4px 0;
    color: var(--border-hover, #cbd5e1);
    font-size: 16px;
}

/* Add buttons */
.fcm-btn-add[b-k2vsbo9j26] {
    font-size: 11px;
    color: var(--accent-color, #6366f1);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.fcm-btn-add:hover[b-k2vsbo9j26] { text-decoration: underline; }

.fcm-add-rule-area[b-k2vsbo9j26] {
    text-align: center;
    padding: 8px 0;
}
.fcm-btn-add-rule[b-k2vsbo9j26] {
    padding: 9px 18px;
    font-size: 13px;
    color: var(--accent-color, #6366f1);
    background: none;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.fcm-btn-add-rule:hover[b-k2vsbo9j26] {
    background: rgba(99, 102, 241, 0.04);
    border-color: var(--accent-color, #6366f1);
}
/* /Shared/Components/FormBuilder/FormFormProperties.razor.rz.scp.css */
/* ── Form Properties Panel ────────────────────────── */
[b-topkd1p42m] .fb-form-props-body {
    padding: 16px;
}

[b-topkd1p42m] .fb-prop-sep {
    height: 1px;
    background: var(--border-color, #e8ecf1);
    margin: 16px 0;
}

[b-topkd1p42m] .fb-prop-textarea {
    resize: vertical;
    min-height: 52px;
}

/* ── Permission Matrix ───────────────────────────── */
[b-topkd1p42m] .fb-perm-matrix {
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    background: var(--background-primary, #fff);
}
[b-topkd1p42m] .fb-perm-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
[b-topkd1p42m] .fb-perm-matrix thead th {
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    text-align: center;
}
[b-topkd1p42m] .fb-perm-matrix tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    text-align: center;
    vertical-align: middle;
}
[b-topkd1p42m] .fb-perm-matrix tbody tr:last-child td { border-bottom: none; }
[b-topkd1p42m] .fb-perm-matrix tbody tr:hover { background: var(--background-secondary, #f8fafc); }
[b-topkd1p42m] .fb-perm-matrix input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color, #6366f1);
    cursor: pointer;
}
/* /Shared/Components/FormBuilder/FormListManager.razor.rz.scp.css */
/* ── List Manager Layout ─────────────────────────── */
[b-o060z78k1r] .fb-list-manager { display: flex; min-height: 350px; }
[b-o060z78k1r] .fb-list-sidebar {
    width: 200px;
    border-right: 1px solid var(--border-color, #e8ecf1);
    overflow-y: auto;
}
[b-o060z78k1r] .fb-list-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
}
[b-o060z78k1r] .fb-list-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    transition: background 0.1s;
}
[b-o060z78k1r] .fb-list-sidebar-item:hover { background: var(--background-secondary, #f8fafc); }
[b-o060z78k1r] .fb-list-sidebar-item.active { background: rgba(99,102,241,0.06); color: var(--accent-color, #6366f1); }
[b-o060z78k1r] .fb-list-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ── Detail Panel ────────────────────────────────── */
[b-o060z78k1r] .fb-list-detail { flex: 1; padding: 12px; }
[b-o060z78k1r] .fb-list-detail-header { display: flex; gap: 8px; margin-bottom: 12px; }
[b-o060z78k1r] .fb-list-detail-header .fb-prop-input { flex: 1; }
[b-o060z78k1r] .fb-list-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
[b-o060z78k1r] .fb-list-item-row { display: flex; align-items: center; gap: 4px; }
[b-o060z78k1r] .fb-list-item-num {
    width: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    flex-shrink: 0;
}
[b-o060z78k1r] .fb-list-item-row .fb-prop-input { flex: 1; }

/* ── Empty States ────────────────────────────────── */
[b-o060z78k1r] .fb-list-empty,
[b-o060z78k1r] .fb-list-empty-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
    gap: 8px;
}
[b-o060z78k1r] .fb-list-empty-detail i { font-size: 28px; }

/* ── Shared input/button styles (may not inherit from parent) ── */
[b-o060z78k1r] .fb-prop-input {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 13px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #1e293b);
    transition: border-color 0.15s;
}
[b-o060z78k1r] .fb-prop-input:focus {
    outline: none;
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

[b-o060z78k1r] .fb-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.08);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}
[b-o060z78k1r] .fb-btn-sm:hover { background: rgba(99,102,241,0.15); }

[b-o060z78k1r] .fb-btn-icon,
[b-o060z78k1r] .fb-btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary, #94a3b8);
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
[b-o060z78k1r] .fb-btn-icon { padding: 6px; font-size: 16px; }
[b-o060z78k1r] .fb-btn-icon-sm { padding: 4px; font-size: 14px; }
[b-o060z78k1r] .fb-btn-icon:hover,
[b-o060z78k1r] .fb-btn-icon-sm:hover {
    color: var(--danger-color, #ef4444);
    background: rgba(239,68,68,0.08);
}

[b-o060z78k1r] .fb-btn-add-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color, #6366f1);
    background: none;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
[b-o060z78k1r] .fb-btn-add-option:hover {
    border-color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.04);
}
/* /Shared/Components/FormBuilder/FormMappingsEditor.razor.rz.scp.css */
/* ── Mappings Layout ──────────────────────────────── */
[b-g3n01ebtts] .fb-mappings-layout {
    flex: 1;
    overflow-y: auto;
    background: var(--background-secondary, #f8fafc);
    padding: 32px;
    display: flex;
    justify-content: center;
}
[b-g3n01ebtts] .fb-mappings-container { width: 100%; max-width: 720px; }
[b-g3n01ebtts] .fb-mappings-head { margin-bottom: 24px; }
[b-g3n01ebtts] .fb-mappings-head h2 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
[b-g3n01ebtts] .fb-mappings-head h2 i { color: var(--accent-color, #6366f1); }
[b-g3n01ebtts] .fb-mappings-head p { font-size: 13px; color: var(--text-tertiary, #94a3b8); line-height: 1.6; margin: 0; }

/* ── Mapping Card ────────────────────────────────── */
[b-g3n01ebtts] .fb-mapping-card {
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[b-g3n01ebtts] .fb-mapping-card-head {
    padding: 12px 18px;
    background: var(--background-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}
[b-g3n01ebtts] .fb-mapping-card-head i { font-size: 14px; color: var(--accent-color, #6366f1); }

/* ── Mapping Row ─────────────────────────────────── */
[b-g3n01ebtts] .fb-mapping-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
    transition: all 0.12s;
}
[b-g3n01ebtts] .fb-mapping-row:last-child { border-bottom: none; }
[b-g3n01ebtts] .fb-mapping-row:hover { background: var(--background-secondary, #f8fafc); }

[b-g3n01ebtts] .fb-mapping-field {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
}
[b-g3n01ebtts] .fb-mf-type {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e8ecf1);
    padding: 1px 6px;
    border-radius: 4px;
}
[b-g3n01ebtts] .fb-mapping-arrow {
    color: var(--accent-color, #6366f1);
    font-size: 16px;
    flex-shrink: 0;
}
[b-g3n01ebtts] .fb-mapping-target { flex: 1; }
[b-g3n01ebtts] .fb-mapping-target select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 6px;
    font-size: 12px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #0f172a);
    outline: none;
    transition: all 0.15s;
}
[b-g3n01ebtts] .fb-mapping-target select:focus {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
[b-g3n01ebtts] .fb-mapping-match {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-success, #10b981);
    margin-top: 4px;
    font-weight: 500;
}
[b-g3n01ebtts] .fb-mapping-match i { font-size: 13px; }

/* ── Empty & Summary ─────────────────────────────── */
[b-g3n01ebtts] .fb-mappings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 14px;
    text-align: center;
}
[b-g3n01ebtts] .fb-mappings-empty i { font-size: 48px; color: var(--border-hover, #cbd5e1); }
[b-g3n01ebtts] .fb-mappings-summary {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
}
[b-g3n01ebtts] .fb-mappings-summary i { font-size: 14px; }
/* /Shared/Components/FormRenderer/FormDataDisplay.razor.rz.scp.css */
/* ── Form Data Display ──────────────────────────────── */
.fd-form[b-lsxn639igx] {
    margin-bottom: 12px;
}
.fd-form:last-child[b-lsxn639igx] {
    margin-bottom: 0;
}

.fd-form-header[b-lsxn639igx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-color, #6366f1);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
}

.fd-form-body[b-lsxn639igx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fd-field[b-lsxn639igx] {
    min-width: 0;
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    padding: 10px 14px;
}

.fd-label[b-lsxn639igx] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 3px;
}

.fd-value[b-lsxn639igx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    word-break: break-word;
}

.fd-empty[b-lsxn639igx] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary, #94a3b8);
    padding: 12px 0;
}

/* Single column on small widths */
@media (max-width: 480px) {
    .fd-form-body[b-lsxn639igx] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/Components/FormRenderer/FormRenderer.razor.rz.scp.css */
/* ── Form Renderer ─────────────────────────────────── */
.form-renderer[b-3hrxy9b7j2] { }

[b-3hrxy9b7j2] .fr-section {
    margin-bottom: 20px;
}
[b-3hrxy9b7j2] .fr-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
}
[b-3hrxy9b7j2] .fr-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
[b-3hrxy9b7j2] .fr-field-full { width: 100%; }
[b-3hrxy9b7j2] .fr-field-half { width: calc(50% - 7px); }
[b-3hrxy9b7j2] .fr-field-third { width: calc(33.333% - 10px); }
[b-3hrxy9b7j2] .fr-divider {
    border: none;
    border-top: 1px solid var(--border-color, #e8ecf1);
    margin: 4px 0;
}
[b-3hrxy9b7j2] .fr-sub-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 4px 0;
}

/* ── Form Field ───────────────────────────────────── */
[b-3hrxy9b7j2] .fr-field-group { }
[b-3hrxy9b7j2] .fr-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin-bottom: 4px;
}
[b-3hrxy9b7j2] .fr-asterisk { color: var(--color-danger, #ef4444); margin-left: 2px; }
[b-3hrxy9b7j2] .fr-help {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    margin-top: 3px;
}
[b-3hrxy9b7j2] .fr-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    background: var(--background-primary, #fff);
    outline: none;
    transition: border-color 0.15s;
}
[b-3hrxy9b7j2] .fr-input:focus {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}
[b-3hrxy9b7j2] .fr-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    font-size: 13px;
    min-height: 80px;
    resize: vertical;
    color: var(--text-primary, #0f172a);
    background: var(--background-primary, #fff);
    outline: none;
}
[b-3hrxy9b7j2] .fr-textarea:focus {
    border-color: var(--accent-color, #6366f1);
}
[b-3hrxy9b7j2] .fr-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    background: var(--background-primary, #fff);
    outline: none;
}
[b-3hrxy9b7j2] .fr-select:focus { border-color: var(--accent-color, #6366f1); }

[b-3hrxy9b7j2] .fr-radio-group, [b-3hrxy9b7j2] .fr-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
[b-3hrxy9b7j2] .fr-radio-label, [b-3hrxy9b7j2] .fr-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
}
[b-3hrxy9b7j2] .fr-yesno-group { display: flex; gap: 8px; }
[b-3hrxy9b7j2] .fr-yesno-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid var(--border-color, #e8ecf1);
    border-radius: 8px;
    background: var(--background-primary, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    color: var(--text-secondary, #475569);
}
[b-3hrxy9b7j2] .fr-yesno-btn.active {
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, white);
    border-color: var(--accent-color, #6366f1);
}
[b-3hrxy9b7j2] .fr-rating { display: flex; gap: 4px; }
[b-3hrxy9b7j2] .fr-star {
    font-size: 22px;
    cursor: pointer;
    color: var(--border-color, #e8ecf1);
    transition: color 0.1s;
}
[b-3hrxy9b7j2] .fr-star.active { color: var(--color-warning, #f59e0b); }
[b-3hrxy9b7j2] .fr-star:hover { color: var(--color-warning, #f59e0b); }

[b-3hrxy9b7j2] .fr-file-input {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border-color, #e8ecf1);
    border-radius: 8px;
    font-size: 13px;
    background: var(--background-secondary, #f8fafc);
}

[b-3hrxy9b7j2] .fr-error {
    font-size: 11px;
    color: var(--color-danger, #ef4444);
    margin-top: 3px;
}
[b-3hrxy9b7j2] .fr-input-error {
    border-color: var(--color-danger, #ef4444) !important;
}

/* ── Wizard Progress ──────────────────────────────── */
.fr-wizard-progress[b-3hrxy9b7j2] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #e8ecf1);
}
.fr-wizard-steps[b-3hrxy9b7j2] {
    display: flex;
    align-items: center;
    gap: 0;
}
.fr-wizard-step[b-3hrxy9b7j2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.fr-step-icon[b-3hrxy9b7j2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
.fr-step-completed[b-3hrxy9b7j2] {
    color: var(--color-success, #10b981);
    background: rgba(16,185,129,0.08);
}
.fr-step-completed .fr-step-icon[b-3hrxy9b7j2] {
    background: var(--color-success, #10b981);
    color: var(--color-text-inverse, #fff);
}
.fr-step-completed:hover[b-3hrxy9b7j2] { background: rgba(16,185,129,0.14); }
.fr-step-current[b-3hrxy9b7j2] {
    color: var(--accent-color, #6366f1);
    background: rgba(99,102,241,0.08);
}
.fr-step-current .fr-step-icon[b-3hrxy9b7j2] {
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
}
.fr-step-pending[b-3hrxy9b7j2] {
    color: var(--text-tertiary, #94a3b8);
    background: var(--background-secondary, #f8fafc);
}
.fr-step-pending .fr-step-icon[b-3hrxy9b7j2] {
    background: var(--border-color, #e8ecf1);
    color: var(--text-tertiary, #94a3b8);
}
.fr-step-connector[b-3hrxy9b7j2] {
    flex: 1;
    height: 2px;
    min-width: 16px;
    background: var(--border-color, #e8ecf1);
    margin: 0 4px;
    border-radius: 1px;
}
.fr-connector-done[b-3hrxy9b7j2] {
    background: var(--color-success, #10b981);
}

/* ── Wizard Navigation ───────────────────────────── */
.fr-wizard-nav[b-3hrxy9b7j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e8ecf1);
}
.fr-wizard-btn[b-3hrxy9b7j2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}
.fr-btn-back[b-3hrxy9b7j2] {
    background: var(--background-secondary, #f8fafc);
    color: var(--text-secondary, #475569);
    border: 1px solid var(--border-color, #e8ecf1);
}
.fr-btn-back:hover[b-3hrxy9b7j2] {
    background: var(--border-color, #e8ecf1);
}
.fr-btn-next[b-3hrxy9b7j2] {
    background: var(--accent-color, #6366f1);
    color: var(--color-text-inverse, #fff);
}
.fr-btn-next:hover[b-3hrxy9b7j2] {
    background: var(--color-primary, #4f46e5);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
    [b-3hrxy9b7j2] .fr-field-half,
    [b-3hrxy9b7j2] .fr-field-third {
        width: 100%;
    }
    .fr-wizard-steps[b-3hrxy9b7j2] {
        flex-wrap: wrap;
        gap: 4px;
    }
    .fr-step-label[b-3hrxy9b7j2] { display: none; }
    .fr-step-connector[b-3hrxy9b7j2] { min-width: 8px; }
}
/* /Shared/Components/FormRenderer/FormRendererField.razor.rz.scp.css */
/* Styles are inherited from FormRenderer.razor.css via ::deep */
/* /Shared/Components/GlobalSearch.razor.rz.scp.css */
.gs[b-x8d7z9ziiy] {
    position: relative;
    width: 100%;
}

.gs-box[b-x8d7z9ziiy] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 999px;
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-text-secondary, #586069);
    cursor: text;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s, width 0.12s;
}

.gs-box.open[b-x8d7z9ziiy] {
    border-color: var(--color-primary, #0366d6);
    box-shadow: 0 0 0 3px var(--color-primary-light, #dbedff);
    background: var(--color-surface, #fff);
}

.gs-box > i[b-x8d7z9ziiy] {
    font-size: 16px;
    flex-shrink: 0;
}

.gs-clear[b-x8d7z9ziiy] {
    cursor: pointer;
}

.gs-clear:hover[b-x8d7z9ziiy] {
    color: var(--color-text-primary, #24292e);
}

.gs-box input[b-x8d7z9ziiy] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text-primary, #24292e);
}

.gs-dd[b-x8d7z9ziiy] {
    position: absolute;
    top: 44px;
    right: 0;
    width: 360px;
    max-width: 80vw;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(27, 31, 35, 0.17);
    padding: 6px;
    z-index: 20;
    animation: gsIn-b-x8d7z9ziiy 0.12s ease-out;
}

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

.gs-head[b-x8d7z9ziiy] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 10px 4px;
}

.gs-row[b-x8d7z9ziiy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.gs-row:hover[b-x8d7z9ziiy] {
    background: var(--color-gray-50, #f9fafb);
}

.gs-num[b-x8d7z9ziiy] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary, #0366d6);
    background: var(--color-primary-light, #dbedff);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.gs-title[b-x8d7z9ziiy] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-status[b-x8d7z9ziiy] {
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    white-space: nowrap;
    flex-shrink: 0;
}

.gs-empty[b-x8d7z9ziiy] {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    text-align: center;
}

.gs-foot[b-x8d7z9ziiy] {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border, #e1e4e8);
    padding: 8px 8px 4px;
    margin-top: 4px;
}

.gs-foot a[b-x8d7z9ziiy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary, #0366d6);
    cursor: pointer;
}

.gs-foot a:hover[b-x8d7z9ziiy] {
    text-decoration: underline;
}
/* /Shared/Components/KpiBigNumber.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiBigNumber — Hero metric display
   ═══════════════════════════════════════════════ */
.kpi-bignumber[b-ye48ys5irs] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .kpi-bignumber:hover[b-ye48ys5irs] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.bignumber-icon[b-ye48ys5irs] {
    font-size: 28px;
    margin-bottom: 4px;
    opacity: 0.85;
}

.bignumber-value[b-ye48ys5irs] {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
}

.bignumber-label[b-ye48ys5irs] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    margin-top: 2px;
}

.bignumber-delta[b-ye48ys5irs] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}

    .bignumber-delta.delta-positive[b-ye48ys5irs] {
        color: var(--color-success, #16a34a);
    }

    .bignumber-delta.delta-negative[b-ye48ys5irs] {
        color: var(--color-danger, #dc2626);
    }

.delta-period[b-ye48ys5irs] {
    font-weight: 400;
    color: var(--color-text-secondary, #586069);
    margin-left: 2px;
}

.bignumber-threshold[b-ye48ys5irs] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    margin-top: 4px;
}

.threshold-dot[b-ye48ys5irs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* /Shared/Components/KpiBullet.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiBullet — Horizontal bullet chart
   ═══════════════════════════════════════════════ */
.kpi-bullet[b-jti74wyqub] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .kpi-bullet:hover[b-jti74wyqub] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.bullet-header[b-jti74wyqub] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

    .bullet-header i[b-jti74wyqub] {
        font-size: 16px;
        flex-shrink: 0;
    }

.bullet-label[b-jti74wyqub] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    flex: 1;
}

.bullet-value[b-jti74wyqub] {
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Chart bar area ────────────────── */
.bullet-chart[b-jti74wyqub] {
    position: relative;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-gray-50, #f6f8fa);
}

.bullet-band[b-jti74wyqub] {
    position: absolute;
    top: 0;
    height: 100%;
}

.bullet-band-bg[b-jti74wyqub] {
    background: var(--color-gray-50, #f6f8fa);
}

.bullet-band-critical[b-jti74wyqub] {
    background: rgba(220, 38, 38, 0.12);
}

.bullet-band-warning[b-jti74wyqub] {
    background: rgba(217, 119, 6, 0.12);
}

.bullet-band-good[b-jti74wyqub] {
    background: rgba(22, 163, 74, 0.12);
}

.bullet-bar[b-jti74wyqub] {
    position: absolute;
    top: 4px;
    left: 0;
    height: 12px;
    border-radius: 3px;
    transition: width 0.5s ease-out;
    z-index: 1;
}

.bullet-target[b-jti74wyqub] {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--color-text-primary, #24292e);
    border-radius: 1px;
    z-index: 2;
    opacity: 0.6;
}

.bullet-range[b-jti74wyqub] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--color-text-secondary, #586069);
    margin-top: 4px;
}

.bullet-delta[b-jti74wyqub] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

    .bullet-delta.delta-positive[b-jti74wyqub] {
        color: var(--color-success, #16a34a);
    }

    .bullet-delta.delta-negative[b-jti74wyqub] {
        color: var(--color-danger, #dc2626);
    }

.delta-period[b-jti74wyqub] {
    font-weight: 400;
    color: var(--color-text-secondary, #586069);
    margin-left: 2px;
}
/* /Shared/Components/KpiCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiCard — Scoped CSS
   Extends the StatCard visual language with
   threshold coloring, delta display, and scope badges.
   ═══════════════════════════════════════════════ */

.kpi-card[b-jkj5icqtjf] {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-top: 3px solid var(--color-primary, #6366f1);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
}

    .kpi-card:hover[b-jkj5icqtjf] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

/* ── Header: icon + scope badge ── */

.kpi-header[b-jkj5icqtjf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}

.kpi-icon[b-jkj5icqtjf] {
    font-size: 20px;
    opacity: 0.85;
}

.kpi-scope-badge[b-jkj5icqtjf] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-tertiary, #8b949e);
    background: var(--color-gray-50, #f6f8fa);
    border: 1px solid var(--color-border-light, #eaeef2);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Value + label ── */

.kpi-body[b-jkj5icqtjf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-value[b-jkj5icqtjf] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #24292f);
}

.kpi-label[b-jkj5icqtjf] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    line-height: 1.3;
}

/* ── Delta / trend ── */

.kpi-delta[b-jkj5icqtjf] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin-top: 2px;
}

    .kpi-delta i[b-jkj5icqtjf] {
        font-size: 14px;
    }

.kpi-delta-period[b-jkj5icqtjf] {
    font-weight: 400;
    color: var(--color-text-tertiary, #8b949e);
    margin-left: 2px;
}

.delta-positive[b-jkj5icqtjf] {
    color: var(--color-success, #16a34a);
}

.delta-negative[b-jkj5icqtjf] {
    color: var(--color-danger, #dc2626);
}

/* ── Threshold indicator ── */

.kpi-threshold[b-jkj5icqtjf] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

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

.kpi-threshold-label[b-jkj5icqtjf] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tertiary, #8b949e);
}

/* ── Threshold state classes (subtle background tint) ── */

.kpi-threshold-good[b-jkj5icqtjf] {
    background: color-mix(in srgb, #16a34a 3%, var(--color-surface, #ffffff));
}

.kpi-threshold-warning[b-jkj5icqtjf] {
    background: color-mix(in srgb, #d97706 3%, var(--color-surface, #ffffff));
}

.kpi-threshold-critical[b-jkj5icqtjf] {
    background: color-mix(in srgb, #dc2626 3%, var(--color-surface, #ffffff));
}

/* ── Clickable state ── */

.kpi-card[style*="cursor"][b-jkj5icqtjf] {
    cursor: pointer;
}

    .kpi-card[style*="cursor"]:active[b-jkj5icqtjf] {
        transform: scale(0.99);
    }
/* /Shared/Components/KpiGauge.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiGauge — Semicircle gauge
   ═══════════════════════════════════════════════ */
.kpi-gauge[b-w8lluc77d7] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 16px 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .kpi-gauge:hover[b-w8lluc77d7] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.gauge-label[b-w8lluc77d7] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 4px;
}

.gauge-svg-wrap[b-w8lluc77d7] {
    max-width: 200px;
    margin: 0 auto;
}

.gauge-svg[b-w8lluc77d7] {
    width: 100%;
    height: auto;
    overflow: visible;
}

.gauge-value-text[b-w8lluc77d7] {
    font-size: 24px;
    font-weight: 700;
    font-family: inherit;
}

.gauge-range-text[b-w8lluc77d7] {
    font-size: 10px;
    font-family: inherit;
    fill: var(--color-text-secondary, #586069);
}

.gauge-delta[b-w8lluc77d7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

    .gauge-delta.delta-positive[b-w8lluc77d7] {
        color: var(--color-success, #16a34a);
    }

    .gauge-delta.delta-negative[b-w8lluc77d7] {
        color: var(--color-danger, #dc2626);
    }
/* /Shared/Components/KpiHeatmap.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiHeatmap — Time-based heatmap grid
   ═══════════════════════════════════════════════ */
.kpi-heatmap[b-n8035u1jd8] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .kpi-heatmap:hover[b-n8035u1jd8] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.heatmap-header[b-n8035u1jd8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.heatmap-left[b-n8035u1jd8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .heatmap-left i[b-n8035u1jd8] {
        font-size: 14px;
        flex-shrink: 0;
    }

.heatmap-label[b-n8035u1jd8] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
}

.heatmap-value[b-n8035u1jd8] {
    font-size: 18px;
    font-weight: 700;
}

/* ── Grid ────────────────────────── */
.heatmap-grid[b-n8035u1jd8] {
    display: grid;
    gap: 3px;
}

.heatmap-cell[b-n8035u1jd8] {
    aspect-ratio: 1;
    border-radius: 2px;
    min-height: 12px;
    transition: opacity 0.15s;
}

    .heatmap-cell:hover[b-n8035u1jd8] {
        outline: 2px solid var(--color-text-primary, #24292e);
        outline-offset: -1px;
        z-index: 1;
    }

/* ── Legend ───────────────────────── */
.heatmap-legend[b-n8035u1jd8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px;
}

.heatmap-legend-label[b-n8035u1jd8] {
    font-size: 10px;
    color: var(--color-text-tertiary, #8b949e);
}

.heatmap-legend-cells[b-n8035u1jd8] {
    display: flex;
    gap: 2px;
}

.heatmap-legend-cell[b-n8035u1jd8] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ── Empty / Delta ───────────────── */
.heatmap-empty[b-n8035u1jd8] {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-tertiary, #8b949e);
}

.heatmap-delta[b-n8035u1jd8] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}

    .heatmap-delta.delta-positive[b-n8035u1jd8] {
        color: var(--color-success, #16a34a);
    }

    .heatmap-delta.delta-negative[b-n8035u1jd8] {
        color: var(--color-danger, #dc2626);
    }
/* /Shared/Components/KpiRadial.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiRadial — Ring/donut progress
   ═══════════════════════════════════════════════ */
.kpi-radial[b-vzke0r69ky] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .kpi-radial:hover[b-vzke0r69ky] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.radial-svg-wrap[b-vzke0r69ky] {
    max-width: 120px;
    margin: 0 auto;
}

.radial-svg[b-vzke0r69ky] {
    width: 100%;
    height: auto;
    transform: rotate(-90deg);
}

.radial-progress[b-vzke0r69ky] {
    transition: stroke-dashoffset 0.6s ease-out;
}

.radial-value-text[b-vzke0r69ky] {
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    /* Counter-rotate text so it's upright */
    transform: rotate(90deg);
    transform-origin: 60px 55px;
}

.radial-percent-text[b-vzke0r69ky] {
    font-size: 10px;
    font-family: inherit;
    fill: var(--color-text-secondary, #586069);
    transform: rotate(90deg);
    transform-origin: 60px 72px;
}

.radial-label[b-vzke0r69ky] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    margin-top: 8px;
}

.radial-delta[b-vzke0r69ky] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

    .radial-delta.delta-positive[b-vzke0r69ky] {
        color: var(--color-success, #16a34a);
    }

    .radial-delta.delta-negative[b-vzke0r69ky] {
        color: var(--color-danger, #dc2626);
    }
/* /Shared/Components/KpiSparkline.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   KpiSparkline — Mini trend line
   ═══════════════════════════════════════════════ */
.kpi-sparkline[b-xiaw8dyafd] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .kpi-sparkline:hover[b-xiaw8dyafd] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.sparkline-header[b-xiaw8dyafd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sparkline-left[b-xiaw8dyafd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sparkline-left i[b-xiaw8dyafd] {
        font-size: 14px;
        flex-shrink: 0;
    }

.sparkline-label[b-xiaw8dyafd] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
}

.sparkline-value[b-xiaw8dyafd] {
    font-size: 20px;
    font-weight: 700;
}

.sparkline-chart[b-xiaw8dyafd] {
    width: 100%;
    height: 60px;
}

.sparkline-svg[b-xiaw8dyafd] {
    width: 100%;
    height: 100%;
}

.sparkline-range-labels[b-xiaw8dyafd] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--color-text-tertiary, #8b949e);
    margin-top: 2px;
}

.sparkline-empty[b-xiaw8dyafd] {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-tertiary, #8b949e);
}

.sparkline-delta[b-xiaw8dyafd] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}

    .sparkline-delta.delta-positive[b-xiaw8dyafd] {
        color: var(--color-success, #16a34a);
    }

    .sparkline-delta.delta-negative[b-xiaw8dyafd] {
        color: var(--color-danger, #dc2626);
    }

.delta-period[b-xiaw8dyafd] {
    font-weight: 400;
    color: var(--color-text-secondary, #586069);
    margin-left: 2px;
}
/* /Shared/Components/Modal.razor.rz.scp.css */
.modal-backdrop[b-i4imgadxm8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

    .modal-backdrop.active[b-i4imgadxm8] {
        opacity: 1;
        visibility: visible;
    }

.modal-container[b-i4imgadxm8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 24px;
    pointer-events: none;
}

.modal-dialog[b-i4imgadxm8] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: var(--radius-lg, 8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    animation: modalSlideIn-b-i4imgadxm8 0.2s ease-out;
}

/* Sizes */
.modal-container.modal-sm .modal-dialog[b-i4imgadxm8] {
    max-width: 400px;
}

.modal-container.modal-md .modal-dialog[b-i4imgadxm8] {
    max-width: 500px;
}

.modal-container.modal-lg .modal-dialog[b-i4imgadxm8] {
    max-width: 700px;
}

.modal-container.modal-xl .modal-dialog[b-i4imgadxm8] {
    max-width: 900px;
}

.modal-container.modal-full .modal-dialog[b-i4imgadxm8] {
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
}

/* Header */
.modal-header[b-i4imgadxm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 48px 20px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    flex-shrink: 0;
}

.modal-title-section[b-i4imgadxm8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon[b-i4imgadxm8] {
    font-size: 24px;
    color: var(--color-primary, #0366d6);
}

.modal-title[b-i4imgadxm8] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.modal-close[b-i4imgadxm8] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-muted, #6a737d);
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

    .modal-close:hover[b-i4imgadxm8] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

    .modal-close[b-i4imgadxm8]  i {
        font-size: 16px;
    }

/* Body */
.modal-body[b-i4imgadxm8] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Footer */
.modal-footer[b-i4imgadxm8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    flex-shrink: 0;
}

/* Animation */
@keyframes modalSlideIn-b-i4imgadxm8 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 640px) {
    .modal-container[b-i4imgadxm8] {
        padding: 16px;
    }

    .modal-dialog[b-i4imgadxm8] {
        max-width: 100% !important;
    }

    .modal-header[b-i4imgadxm8] {
        padding: 16px 44px 16px 20px;
    }

    .modal-body[b-i4imgadxm8] {
        padding: 20px;
    }

    .modal-footer[b-i4imgadxm8] {
        padding: 16px 20px;
        flex-direction: column;
    }

        .modal-footer[b-i4imgadxm8]  * {
            width: 100%;
        }
}
/* /Shared/Components/NotificationsPopup.razor.rz.scp.css */
/* Hidden by default. js/notif-popup.js positions this as `fixed` (so the
   vertical rail's overflow can't clip it) and reveals it by adding
   .nav-notif-show on hover of the parent .nav-notif item. */
.notif-pop[b-31wxr6qfcy] {
    position: fixed;
    width: 360px;
    max-width: 84vw;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(27, 31, 35, 0.17);
    padding: 6px;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}

.notif-pop.nav-notif-show[b-31wxr6qfcy] {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.notif-head[b-31wxr6qfcy] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary, #586069);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 10px 4px;
}

.notif-row[b-31wxr6qfcy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.notif-row:hover[b-31wxr6qfcy] {
    background: var(--color-gray-50, #f9fafb);
}

.notif-ic[b-31wxr6qfcy] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-primary-light, #dbedff);
    color: var(--color-primary, #0366d6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-ic i[b-31wxr6qfcy] {
    font-size: 16px;
}

.notif-body[b-31wxr6qfcy] {
    flex: 1;
    min-width: 0;
}

.notif-subj[b-31wxr6qfcy] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
    line-height: 1.35;
}

.notif-meta[b-31wxr6qfcy] {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    margin-top: 2px;
}

.notif-empty[b-31wxr6qfcy] {
    padding: 22px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.notif-foot[b-31wxr6qfcy] {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border, #e1e4e8);
    padding: 8px 8px 4px;
    margin-top: 4px;
}

.notif-foot a[b-31wxr6qfcy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary, #0366d6);
    text-decoration: none;
}

.notif-foot a:hover[b-31wxr6qfcy] {
    text-decoration: underline;
}
/* /Shared/Components/Pageheader.razor.rz.scp.css */
.page-header[b-6w7h0omkz6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-header-content[b-6w7h0omkz6] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.page-header-icon[b-6w7h0omkz6] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg, 8px);
    background: var(--color-primary, #0366d6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .page-header-icon[b-6w7h0omkz6]  i,
    .page-header-icon[b-6w7h0omkz6]  i[class~="ph-fill"],
    .page-header-icon[b-6w7h0omkz6]  i[class~="ph-duotone"],
    .page-header-icon[b-6w7h0omkz6]  i[class~="ph-regular"],
    .page-header-icon[b-6w7h0omkz6]  i[class~="ph-bold"],
    .page-header-icon[b-6w7h0omkz6]  i[class~="ph-light"],
    .page-header-icon[b-6w7h0omkz6]  i[class~="ph-thin"] {
        font-size: 24px;
        color: white !important;
    }

.page-header-text[b-6w7h0omkz6] {
    flex: 1;
    min-width: 0;
}

.page-title[b-6w7h0omkz6] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    line-height: 1.3;
}

.page-subtitle[b-6w7h0omkz6] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    line-height: 1.5;
}

.page-header-actions[b-6w7h0omkz6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .page-header[b-6w7h0omkz6] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions[b-6w7h0omkz6] {
        width: 100%;
    }

        .page-header-actions[b-6w7h0omkz6]  .btn {
            flex: 1;
        }
}
/* /Shared/Components/ReportChart.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   REPORT CHART — ECharts Wrapper Component
   ═══════════════════════════════════════════════════════════════════ */

.report-chart-wrapper[b-gn2vdktd25] {
    width: 100%;
    min-height: 200px;
    position: relative;
}

.chart-canvas[b-gn2vdktd25] {
    width: 100%;
    min-height: 300px;
}

.chart-empty[b-gn2vdktd25] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-text-secondary, #586069);
    background: var(--color-gray-50, #f9fafb);
    border: 2px dashed var(--color-border, #e1e4e8);
    border-radius: var(--radius-md, 6px);
}

    .chart-empty i[b-gn2vdktd25] {
        font-size: 48px;
        opacity: 0.4;
    }

    .chart-empty span[b-gn2vdktd25] {
        font-size: 14px;
        font-weight: 500;
    }
/* /Shared/Components/ScheduleModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   REPORT SCHEDULE MODAL - Scoped Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Modal Base ─────────────────────────────────── */

.modal[b-iwdkrexedg] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

    .modal.active[b-iwdkrexedg] {
        display: flex;
    }

.modal-content[b-iwdkrexedg] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 8px;
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-lg[b-iwdkrexedg] {
    max-width: 720px;
}

.modal-header[b-iwdkrexedg] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-right: 32px;
}

    .modal-header h3[b-iwdkrexedg] {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.modal-close[b-iwdkrexedg] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    padding: 0;
    transition: all 0.15s;
    z-index: 1;
}

    .modal-close:hover[b-iwdkrexedg] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-footer[b-iwdkrexedg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

.modal-footer-right[b-iwdkrexedg] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── Schedule Modal Body ────────────────────────── */

.schedule-modal-body[b-iwdkrexedg] {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* ── Sections ───────────────────────────────────── */

.schedule-section[b-iwdkrexedg] {
    background: var(--color-background-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.schedule-section-title[b-iwdkrexedg] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #374151);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .schedule-section-title i[b-iwdkrexedg] {
        font-size: 16px;
        color: var(--color-primary, #3b82f6);
    }

/* ── Form Layout ────────────────────────────────── */

.form-row[b-iwdkrexedg] {
    display: flex;
    gap: 12px;
}

    .form-row .form-group[b-iwdkrexedg] {
        margin-bottom: 12px;
    }

.flex-1[b-iwdkrexedg] {
    flex: 1;
}

.form-group[b-iwdkrexedg] {
    margin-bottom: 16px;
}

    .form-group label[b-iwdkrexedg] {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 13px;
    }

    .form-group input[b-iwdkrexedg],
    .form-group textarea[b-iwdkrexedg],
    .form-group select[b-iwdkrexedg] {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--color-border, #d1d5db);
        border-radius: 6px;
        font-size: 13px;
        background: var(--color-surface, white);
        box-sizing: border-box;
    }

        .form-group input:focus[b-iwdkrexedg],
        .form-group textarea:focus[b-iwdkrexedg],
        .form-group select:focus[b-iwdkrexedg] {
            outline: none;
            border-color: var(--color-primary, #3b82f6);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

.form-hint[b-iwdkrexedg] {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
    display: block;
}

.form-optional[b-iwdkrexedg] {
    font-weight: 400;
    color: var(--color-text-muted, #9ca3af);
    font-size: 12px;
}

.form-error[b-iwdkrexedg] {
    font-size: 12px;
    color: var(--color-danger, #dc2626);
    margin-top: 4px;
    display: block;
}

.input-with-suffix[b-iwdkrexedg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Day Picker ─────────────────────────────────── */

.day-picker[b-iwdkrexedg] {
    display: flex;
    gap: 4px;
}

.day-chip[b-iwdkrexedg] {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, white);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
    color: var(--color-text-secondary, #6b7280);
}

    .day-chip:hover[b-iwdkrexedg] {
        border-color: var(--color-primary, #3b82f6);
        color: var(--color-primary, #3b82f6);
    }

    .day-chip.active[b-iwdkrexedg] {
        background: var(--color-primary, #3b82f6);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #3b82f6);
    }

/* ── Format Picker ──────────────────────────────── */

.format-picker[b-iwdkrexedg] {
    display: flex;
    gap: 8px;
}

.format-chip[b-iwdkrexedg] {
    padding: 8px 16px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, white);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary, #6b7280);
}

    .format-chip:hover[b-iwdkrexedg] {
        border-color: var(--color-primary, #3b82f6);
    }

    .format-chip.active[b-iwdkrexedg] {
        background: var(--color-primary-light, #eff6ff);
        color: var(--color-primary, #3b82f6);
        border-color: var(--color-primary, #3b82f6);
    }

    .format-chip i[b-iwdkrexedg] {
        font-size: 16px;
    }

/* ── Recipient Tags ─────────────────────────────── */

.recipient-input-container[b-iwdkrexedg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, white);
    min-height: 38px;
    align-items: center;
    cursor: text;
}

    .recipient-input-container:focus-within[b-iwdkrexedg] {
        border-color: var(--color-primary, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.recipient-tag[b-iwdkrexedg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.recipient-remove[b-iwdkrexedg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    color: var(--color-primary, #3b82f6);
    opacity: 0.6;
    display: flex;
    align-items: center;
}

    .recipient-remove:hover[b-iwdkrexedg] {
        opacity: 1;
    }

.recipient-input[b-iwdkrexedg] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 160px;
    font-size: 13px;
    padding: 2px 0;
    background: transparent;
}

/* ── Checkbox Rows ──────────────────────────────── */

.checkbox-row[b-iwdkrexedg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
}

    .checkbox-row input[type="checkbox"][b-iwdkrexedg] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary, #3b82f6);
    }

/* ── Schedule Preview ───────────────────────────── */

.schedule-preview[b-iwdkrexedg] {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-info-light, #eff6ff);
    border: 1px solid var(--color-primary-light, #bfdbfe);
    border-radius: 8px;
    margin-top: 4px;
}

.schedule-preview-icon[b-iwdkrexedg] {
    color: var(--color-primary, #3b82f6);
    font-size: 18px;
    flex-shrink: 0;
    padding-top: 1px;
}

.schedule-preview-text[b-iwdkrexedg] {
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.5;
}

.schedule-preview-next[b-iwdkrexedg] {
    color: var(--color-text-muted, #6b7280);
    font-size: 12px;
}

/* ── Schedule Summary / Active Info ─────────────── */

.schedule-summary[b-iwdkrexedg] {
    background: var(--color-success-light, #f0fdf4);
    border: 1px solid var(--color-success-light, #bbf7d0);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
}

.schedule-summary-header[b-iwdkrexedg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schedule-summary-title[b-iwdkrexedg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success-text, #166534);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .schedule-summary-title i[b-iwdkrexedg] {
        font-size: 16px;
    }

.schedule-summary-content[b-iwdkrexedg] {
    font-size: 13px;
    color: var(--color-success-text, #15803d);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.schedule-badge[b-iwdkrexedg] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .schedule-badge.active[b-iwdkrexedg] {
        background: var(--color-success-light, #dcfce7);
        color: var(--color-success-text, #166534);
    }

    .schedule-badge.paused[b-iwdkrexedg] {
        background: var(--color-warning-light, #fef3c7);
        color: var(--color-warning-text, #92400e);
    }

.schedule-stat[b-iwdkrexedg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.schedule-stat-label[b-iwdkrexedg] {
    font-weight: 600;
    color: var(--color-success-text, #166534);
}

.schedule-status[b-iwdkrexedg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

    .schedule-status.success[b-iwdkrexedg] {
        color: var(--color-success, #16a34a);
    }

    .schedule-status.failed[b-iwdkrexedg] {
        color: var(--color-danger, #dc2626);
    }

/* ── Buttons (minimal set for modal) ────────────── */

.btn[b-iwdkrexedg] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-primary[b-iwdkrexedg] {
    background: var(--color-primary, #3b82f6);
    color: var(--color-text-inverse, white);
    border-color: var(--color-primary, #3b82f6);
}

    .btn-primary:hover[b-iwdkrexedg] {
        background: var(--color-primary-hover, #2563eb);
    }

    .btn-primary:disabled[b-iwdkrexedg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-secondary[b-iwdkrexedg] {
    background: var(--color-surface, white);
    color: var(--color-text-secondary, #4b5563);
    border-color: var(--color-border, #d1d5db);
}

    .btn-secondary:hover[b-iwdkrexedg] {
        background: var(--color-background-subtle, #f9fafb);
    }

.btn-danger[b-iwdkrexedg] {
    background: var(--color-surface, white);
    color: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
}

    .btn-danger:hover[b-iwdkrexedg] {
        background: var(--color-danger-light, #fef2f2);
    }
/* /Shared/Components/SearchSelect.razor.rz.scp.css */
/* ============================================
   SearchSelect — Single-select searchable dropdown
   Uses design-tokens.css variables throughout
   ============================================ */

.search-select[b-1zhtw94i8y] {
    position: relative;
    width: 100%;
}

/* Trigger */
.search-select-trigger[b-1zhtw94i8y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--input-padding);
    border: var(--border-width) var(--border-style) var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    box-sizing: border-box;
    background: var(--input-background);
    cursor: pointer;
    min-height: 38px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    color: var(--color-text-primary);
}

    .search-select-trigger:hover[b-1zhtw94i8y] {
        border-color: var(--color-gray-400);
    }

    .search-select-trigger.open[b-1zhtw94i8y] {
        border-color: var(--color-primary);
        box-shadow: var(--input-focus-ring);
    }

    .search-select-trigger.disabled[b-1zhtw94i8y] {
        opacity: 0.6;
        cursor: not-allowed;
        background: var(--color-gray-50);
    }

.search-select-placeholder[b-1zhtw94i8y] {
    color: var(--color-text-muted);
}

.search-select-value[b-1zhtw94i8y] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-select-arrow[b-1zhtw94i8y] {
    font-size: var(--icon-size-sm);
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: var(--spacing-2);
    transition: transform var(--transition-fast);
}

.search-select-trigger.open .search-select-arrow[b-1zhtw94i8y] {
    transform: rotate(180deg);
}

/* Click-away layer — full-viewport, transparent, just below the dropdown so an
   outside click closes it while option clicks still land on the dropdown. */
.search-select-backdrop[b-1zhtw94i8y] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-dropdown) - 1);
    background: transparent;
}

/* Dropdown panel */
.search-select-dropdown[b-1zhtw94i8y] {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
    animation: searchSelectIn-b-1zhtw94i8y 0.15s ease-out;
}

@keyframes searchSelectIn-b-1zhtw94i8y {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Search box */
.search-select-search[b-1zhtw94i8y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-gray-50);
}

    .search-select-search > i[b-1zhtw94i8y] {
        color: var(--color-text-muted);
        font-size: var(--icon-size-sm);
        flex-shrink: 0;
    }

    .search-select-search input[b-1zhtw94i8y] {
        flex: 1;
        border: none;
        outline: none;
        font-size: var(--font-size-sm);
        font-family: var(--font-family);
        background: transparent;
        color: var(--color-text-primary);
        min-width: 0;
    }

        .search-select-search input[b-1zhtw94i8y]::placeholder {
            color: var(--color-text-muted);
        }

.search-select-clear-search[b-1zhtw94i8y] {
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    padding: var(--spacing-1);
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background var(--transition-fast);
}

    .search-select-clear-search:hover[b-1zhtw94i8y] {
        color: var(--color-text-secondary);
        background: var(--color-gray-200);
    }

/* Options list */
.search-select-options[b-1zhtw94i8y] {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--spacing-1) 0;
}

    .search-select-options[b-1zhtw94i8y]::-webkit-scrollbar {
        width: 6px;
    }

    .search-select-options[b-1zhtw94i8y]::-webkit-scrollbar-thumb {
        background: var(--color-gray-300);
        border-radius: var(--radius-full);
    }

.search-select-option[b-1zhtw94i8y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background-color var(--transition-fast);
}

    .search-select-option:hover[b-1zhtw94i8y] {
        background-color: var(--color-surface-hover);
    }

    .search-select-option.selected[b-1zhtw94i8y] {
        background-color: var(--color-primary-light);
        color: var(--color-primary-text);
        font-weight: var(--font-weight-medium);
    }

    .search-select-option .option-none[b-1zhtw94i8y] {
        color: var(--color-text-muted);
        font-style: italic;
    }

/* Check icon on selected item */
.search-select-check[b-1zhtw94i8y] {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

/* Empty state */
.search-select-empty[b-1zhtw94i8y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-6) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

    .search-select-empty > i[b-1zhtw94i8y] {
        font-size: var(--icon-size-lg);
        opacity: 0.4;
    }
/* /Shared/Components/SearchSelectMulti.razor.rz.scp.css */
/* ============================================
   SearchSelectMulti — Multi-select with chips
   Uses design-tokens.css variables throughout
   ============================================ */

.search-select-multi[b-44sbumtgrk] {
    position: relative;
    width: 100%;
}

/* Trigger */
.search-select-multi-trigger[b-44sbumtgrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    width: 100%;
    padding: var(--spacing-1) calc(var(--spacing-8) + 18px) var(--spacing-1) var(--spacing-2);
    border: var(--border-width) var(--border-style) var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    box-sizing: border-box;
    background: var(--input-background);
    cursor: pointer;
    min-height: 38px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    color: var(--color-text-primary);
    position: relative;
}

    .search-select-multi-trigger:hover[b-44sbumtgrk] {
        border-color: var(--color-gray-400);
    }

    .search-select-multi-trigger.open[b-44sbumtgrk] {
        border-color: var(--color-primary);
        box-shadow: var(--input-focus-ring);
    }

    .search-select-multi-trigger.disabled[b-44sbumtgrk] {
        opacity: 0.6;
        cursor: not-allowed;
        background: var(--color-gray-50);
    }

.search-select-multi-placeholder[b-44sbumtgrk] {
    color: var(--color-text-muted);
    padding: var(--spacing-1);
}

.search-select-multi-arrow[b-44sbumtgrk] {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--icon-size-sm);
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.search-select-multi-trigger.open .search-select-multi-arrow[b-44sbumtgrk] {
    transform: translateY(-50%) rotate(180deg);
}

/* Clear all button on the trigger */
.search-select-multi-clear[b-44sbumtgrk] {
    position: absolute;
    right: calc(var(--spacing-3) + 18px);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background var(--transition-fast);
    z-index: 1;
}

    .search-select-multi-clear:hover[b-44sbumtgrk] {
        color: var(--color-danger);
        background: var(--color-danger-light);
    }

/* Chips */
.search-select-multi-chips[b-44sbumtgrk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    align-items: center;
}

.search-select-chip[b-44sbumtgrk] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    background: var(--color-primary-light);
    color: var(--color-primary-text);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    line-height: var(--line-height-normal);
}

/* Collapsed "+N more" chip — muted vs. the real selections; full list lives in its tooltip. */
.search-select-chip-more[b-44sbumtgrk] {
    background: var(--color-surface-alt, #eef1f4);
    color: var(--color-text-secondary, #57606a);
    cursor: help;
}

.search-select-chip-remove[b-44sbumtgrk] {
    font-size: var(--font-size-xs);
    cursor: pointer;
    opacity: 0.65;
    padding: 2px;
    border-radius: var(--radius-full);
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

    .search-select-chip-remove:hover[b-44sbumtgrk] {
        opacity: 1;
        background: rgba(3, 102, 214, 0.15);
    }

/* Click-away layer — full-viewport, transparent, just below the dropdown. */
.search-select-multi-backdrop[b-44sbumtgrk] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-dropdown) - 1);
    background: transparent;
}

/* Dropdown panel */
.search-select-multi-dropdown[b-44sbumtgrk] {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
    animation: searchSelectMultiIn-b-44sbumtgrk 0.15s ease-out;
}

@keyframes searchSelectMultiIn-b-44sbumtgrk {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Search box */
.search-select-multi-search[b-44sbumtgrk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-gray-50);
}

    .search-select-multi-search > i[b-44sbumtgrk] {
        color: var(--color-text-muted);
        font-size: var(--icon-size-sm);
        flex-shrink: 0;
    }

    .search-select-multi-search input[b-44sbumtgrk] {
        flex: 1;
        border: none;
        outline: none;
        font-size: var(--font-size-sm);
        font-family: var(--font-family);
        background: transparent;
        color: var(--color-text-primary);
        min-width: 0;
    }

        .search-select-multi-search input[b-44sbumtgrk]::placeholder {
            color: var(--color-text-muted);
        }

.search-select-multi-clear-search[b-44sbumtgrk] {
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    padding: var(--spacing-1);
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background var(--transition-fast);
}

    .search-select-multi-clear-search:hover[b-44sbumtgrk] {
        color: var(--color-text-secondary);
        background: var(--color-gray-200);
    }

/* Options list */
.search-select-multi-options[b-44sbumtgrk] {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--spacing-1) 0;
}

    .search-select-multi-options[b-44sbumtgrk]::-webkit-scrollbar {
        width: 6px;
    }

    .search-select-multi-options[b-44sbumtgrk]::-webkit-scrollbar-thumb {
        background: var(--color-gray-300);
        border-radius: var(--radius-full);
    }

.search-select-multi-option[b-44sbumtgrk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background-color var(--transition-fast);
}

    .search-select-multi-option:hover[b-44sbumtgrk] {
        background-color: var(--color-surface-hover);
    }

    .search-select-multi-option.selected[b-44sbumtgrk] {
        background-color: var(--color-primary-light);
        color: var(--color-primary-text);
        font-weight: var(--font-weight-medium);
    }

/* CSS-drawn checkbox — unambiguous unchecked (hollow with border) vs
   checked (filled primary + white checkmark). Drawn with a span +
   ::after pseudo-element instead of an icon-font glyph so the visual
   isn't at the mercy of Phosphor weight rendering at tiny sizes
   (where ph-square and ph-fill ph-check-square can read identically). */
.search-select-multi-check[b-44sbumtgrk] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1.5px solid var(--color-border, #cbd5e1);          /* slate-300 — hollow box */
    border-radius: 4px;
    background: var(--color-surface, #fff);
    position: relative;
    transition: background var(--transition-fast),
                border-color var(--transition-fast);
}

/* Hover on an unchecked row: hint at interactivity by darkening
   the border slightly — still clearly NOT filled. */
.search-select-multi-option:hover .search-select-multi-check:not(.checked)[b-44sbumtgrk] {
    border-color: var(--color-text-muted, #94a3b8);                /* slate-400 */
}

/* Checked state: filled primary, no separate border (border colour
   matches background so the outer footprint is identical). */
.search-select-multi-check.checked[b-44sbumtgrk] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* The checkmark itself — pure CSS (two borders rotated). Crisp at
   any DPI; no dependency on the icon font. */
.search-select-multi-check.checked[b-44sbumtgrk]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--color-text-inverse, #fff);
    border-bottom: 2px solid var(--color-text-inverse, #fff);
    transform: rotate(45deg);
}

.search-select-multi-option:hover .search-select-multi-check.checked[b-44sbumtgrk] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Empty state */
.search-select-multi-empty[b-44sbumtgrk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-6) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

    .search-select-multi-empty > i[b-44sbumtgrk] {
        font-size: var(--icon-size-lg);
        opacity: 0.4;
    }

/* Create new item option */
.search-select-multi-create[b-44sbumtgrk] {
    color: var(--color-primary) !important;
    border-top: var(--border-width) var(--border-style) var(--color-border);
}

    .search-select-multi-create:hover[b-44sbumtgrk] {
        background-color: var(--color-primary-light) !important;
    }

.search-select-multi-create-icon[b-44sbumtgrk] {
    font-size: var(--icon-size-md);
    color: var(--color-primary);
    flex-shrink: 0;
}

.search-select-multi-creating[b-44sbumtgrk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.search-select-multi-spinner[b-44sbumtgrk] {
    animation: spinMulti-b-44sbumtgrk 0.8s linear infinite;
    font-size: var(--icon-size-md);
}

@keyframes spinMulti-b-44sbumtgrk {
    to {
        transform: rotate(360deg);
    }
}

/* Footer */
.search-select-multi-footer[b-44sbumtgrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-gray-50);
}

.search-select-multi-clear-btn[b-44sbumtgrk] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    cursor: pointer;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

    .search-select-multi-clear-btn:hover[b-44sbumtgrk] {
        background: var(--color-danger-light);
    }

.search-select-multi-count[b-44sbumtgrk] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

    .search-select-multi-count > i[b-44sbumtgrk] {
        color: var(--color-success);
    }
/* /Shared/Components/StatCard.razor.rz.scp.css */
.stat-card[b-burcty9gg2] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: var(--radius-lg, 8px);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.15s ease;
}

    .stat-card:hover[b-burcty9gg2] {
        border-color: var(--color-border-dark, #d1d5da);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

/* Icon */
.stat-icon[b-burcty9gg2] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 6px);
    background: var(--color-gray-100, #f6f8fa);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary, #0366d6);
}

    .stat-icon[b-burcty9gg2]  i {
        font-size: 24px;
    }

/* Content */
.stat-content[b-burcty9gg2] {
    flex: 1;
    min-width: 0;
}

.stat-label[b-burcty9gg2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    margin-bottom: 4px;
}

.stat-value[b-burcty9gg2] {
    /* Default — short values ("4", "23", "0.0h", "142"). The size tier
       below is set per-card in StatCard.razor based on the Value
       string's character count, so a 7-digit hour count shrinks to
       fit while a single-digit count next to it stays big and bold.
       More precise than scaling everything by viewport — a long value
       in one card doesn't drag the others down with it. */
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
    line-height: 1.2;
    /* Pegs the value to its parent .stat-content (which has min-width:0
       already) so overflow becomes a wrap, not a card-width stretch. */
    max-width: 100%;
}

/* Content-aware size tiers — applied by StatCard.razor based on
   Value.Length. Each step drops ~4-6px so a 7-char value still feels
   prominent without spilling out of the card. Boundaries chosen so
   "1234.5h" (7 chars) takes the medium tier and "1000020.6h" (10
   chars) takes the small tier. */
.stat-value.stat-value-md[b-burcty9gg2] { font-size: 22px; }
.stat-value.stat-value-sm[b-burcty9gg2] { font-size: 18px; }

/* Trend */
.stat-trend[b-burcty9gg2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
}

    .stat-trend.trend-up[b-burcty9gg2] {
        color: var(--color-success, #16a34a);
        background: var(--color-success-light, #f0fdf4);
    }

    .stat-trend.trend-down[b-burcty9gg2] {
        color: var(--color-danger, #dc2626);
        background: var(--color-danger-light, #fef2f2);
    }

    .stat-trend[b-burcty9gg2]  i {
        font-size: 14px;
    }

/* Subtitle */
.stat-subtitle[b-burcty9gg2] {
    font-size: 12px;
    color: var(--color-text-muted, #6a737d);
    margin-top: 4px;
}

/* Compact variant */
.stat-card.stat-card-compact[b-burcty9gg2] {
    padding: 16px;
}

    .stat-card.stat-card-compact .stat-icon[b-burcty9gg2] {
        width: 40px;
        height: 40px;
    }

        .stat-card.stat-card-compact .stat-icon[b-burcty9gg2]  i {
            font-size: 20px;
        }

    .stat-card.stat-card-compact .stat-value[b-burcty9gg2] {
        font-size: 24px;
    }
/* /Shared/Components/TicketListRow.razor.rz.scp.css */
/* Scoped styles for TicketListRow.

   These were originally in Dashboard.razor.css (back when Dashboard
   rendered the ticket-list cells directly). The table-UX overhaul
   moved the markup into this component, but the styles stayed behind
   — Blazor CSS isolation scopes Dashboard.razor.css only to elements
   Dashboard renders itself, not to children, so the rules silently
   stopped applying. That's why the red "unread comment" badge went
   invisible: .count-badge-unread / .unread-indicator weren't reaching
   the markup. Moving them here re-binds them to the component that
   actually emits the markup, so every page that uses TicketListRow
   (Dashboard / Tickets / BookmarkedTickets) gets the styling for free.
*/

.count-badge[b-s6szs400it] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.count-badge-unread[b-s6szs400it] {
    color: var(--color-danger, #ef4444);
    font-weight: 600;
}

.unread-indicator[b-s6szs400it] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-danger, #ef4444);
    color: var(--color-text-inverse, white);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* Migration provenance chip — only renders for imported tickets
   (ExternalId present). Sits under the new ticket number so an agent
   who searched the OLD number immediately sees why this row matched. */
.legacy-chip[b-s6szs400it] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 7px;
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary-hover, #4338ca);
    border: 1px solid var(--color-primary-light, #c7d2fe);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    width: fit-content;
}

.legacy-chip i[b-s6szs400it] {
    font-size: 11px;
}
/* /Shared/Components/ToastContainer.razor.rz.scp.css */
/* ============================================
   Toast Container — Fixed position stack
   ============================================ */
.toast-container[b-4kdulyruj9] {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

/* ===== Position Variants ===== */
.toast-top-right[b-4kdulyruj9] {
    top: 68px;
    right: 16px;
}

.toast-top-left[b-4kdulyruj9] {
    top: 68px;
    left: 16px;
}

.toast-bottom-right[b-4kdulyruj9] {
    bottom: 16px;
    right: 16px;
    flex-direction: column-reverse;
}

.toast-bottom-left[b-4kdulyruj9] {
    bottom: 16px;
    left: 16px;
    flex-direction: column-reverse;
}

/* ============================================
   Individual Toast
   ============================================ */
.toast[b-4kdulyruj9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg, 8px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e1e4e8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    animation: toastSlideIn-b-4kdulyruj9 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

/* Left-side position: slide in from left */
.toast-top-left .toast[b-4kdulyruj9],
.toast-bottom-left .toast[b-4kdulyruj9] {
    animation: toastSlideInLeft-b-4kdulyruj9 0.3s ease-out;
}

/* ===== Type Variants ===== */
.toast.toast-success[b-4kdulyruj9] {
    border-left: 3px solid var(--color-success, #16a34a);
}

    .toast.toast-success .toast-icon[b-4kdulyruj9] {
        color: var(--color-success, #16a34a);
    }

.toast.toast-error[b-4kdulyruj9] {
    border-left: 3px solid var(--color-danger, #dc2626);
}

    .toast.toast-error .toast-icon[b-4kdulyruj9] {
        color: var(--color-danger, #dc2626);
    }

.toast.toast-warning[b-4kdulyruj9] {
    border-left: 3px solid var(--color-warning, #d97706);
}

    .toast.toast-warning .toast-icon[b-4kdulyruj9] {
        color: var(--color-warning, #d97706);
    }

.toast.toast-info[b-4kdulyruj9] {
    border-left: 3px solid var(--color-primary, #2563eb);
}

    .toast.toast-info .toast-icon[b-4kdulyruj9] {
        color: var(--color-primary, #2563eb);
    }

/* ===== Icon ===== */
.toast-icon[b-4kdulyruj9] {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    margin-top: 1px;
}

/* ===== Body ===== */
.toast-body[b-4kdulyruj9] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-4kdulyruj9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 2px;
}

.toast-message[b-4kdulyruj9] {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-secondary, #586069);
    word-wrap: break-word;
}

/* ===== Close Button ===== */
.toast-close[b-4kdulyruj9] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text-secondary, #586069);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .toast-close:hover[b-4kdulyruj9] {
        opacity: 1;
        background: rgba(0, 0, 0, 0.06);
    }

    .toast-close i[b-4kdulyruj9] {
        font-size: 14px;
    }

/* ============================================
   Progress Bar — shrinks over the duration
   ============================================ */
.toast-progress[b-4kdulyruj9] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.04);
}

.toast-progress-bar[b-4kdulyruj9] {
    height: 100%;
    width: 100%;
    transform-origin: left;
    animation: toastProgress-b-4kdulyruj9 linear forwards;
    border-radius: 0 0 0 var(--radius-lg, 8px);
}

.toast-progress-success[b-4kdulyruj9] {
    background: var(--color-success, #16a34a);
}

.toast-progress-error[b-4kdulyruj9] {
    background: var(--color-danger, #dc2626);
}

.toast-progress-warning[b-4kdulyruj9] {
    background: var(--color-warning, #d97706);
}

.toast-progress-info[b-4kdulyruj9] {
    background: var(--color-primary, #2563eb);
}

/* ============================================
   Animations — Right side (default)
   ============================================ */
@keyframes toastSlideIn-b-4kdulyruj9 {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

@keyframes toastFadeOut-b-4kdulyruj9 {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ===== Animations — Left side ===== */
@keyframes toastSlideInLeft-b-4kdulyruj9 {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

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

@keyframes toastFadeOutLeft-b-4kdulyruj9 {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* ===== Progress bar animation ===== */
@keyframes toastProgress-b-4kdulyruj9 {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ===== Fade-out direction based on position ===== */
.toast-top-right .toast.toast-fade-out[b-4kdulyruj9],
.toast-bottom-right .toast.toast-fade-out[b-4kdulyruj9] {
    animation: toastFadeOut-b-4kdulyruj9 0.3s ease-in forwards;
}

.toast-top-left .toast.toast-fade-out[b-4kdulyruj9],
.toast-bottom-left .toast.toast-fade-out[b-4kdulyruj9] {
    animation: toastFadeOutLeft-b-4kdulyruj9 0.3s ease-in forwards;
}

/* ============================================
   Dark Theme Support
   ============================================ */
[data-theme="dark"] .toast[b-4kdulyruj9] {
    background: var(--color-surface, #161b22);
    border-color: var(--color-border, #30363d);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .toast-message[b-4kdulyruj9] {
    color: var(--color-text-secondary, #8b949e);
}

[data-theme="dark"] .toast-title[b-4kdulyruj9] {
    color: var(--color-text-primary, #c9d1d9);
}

[data-theme="dark"] .toast-close:hover[b-4kdulyruj9] {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .toast-progress[b-4kdulyruj9] {
    background: rgba(255, 255, 255, 0.04);
}

/* ============================================
   Responsive — full width on mobile
   ============================================ */
@media (max-width: 480px) {
    .toast-container[b-4kdulyruj9] {
        right: 8px;
        left: 8px;
        max-width: none;
    }

    .toast-top-right[b-4kdulyruj9],
    .toast-top-left[b-4kdulyruj9] {
        top: 60px;
    }

    .toast-bottom-right[b-4kdulyruj9],
    .toast-bottom-left[b-4kdulyruj9] {
        bottom: 8px;
    }
}
/* /Shared/Components/Tooltip.razor.rz.scp.css */
.tooltip-wrapper[b-fxy14avx87] {
    position: relative;
    display: inline-flex;
}

.tooltip[b-fxy14avx87] {
    /* Fixed-positioned so the bubble escapes any ancestor with overflow:hidden.
       The exact `top`/`left` are set by tooltipInterop.position() in JS, which
       reads the wrapper's bounding rect and accounts for the chosen direction.
       Until JS positions it, the bubble is hidden to avoid a one-frame flash
       at (0,0). */
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 1100;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    background: var(--color-text-primary, #24292e);
    border-radius: var(--radius-md, 6px);
    white-space: nowrap;
    pointer-events: none;
    animation: tooltipFadeIn-b-fxy14avx87 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tooltip-arrow[b-fxy14avx87] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-text-primary, #24292e);
    transform: rotate(45deg);
}

/* Arrows still anchor to a side of the bubble — JS positions the bubble
   itself so the arrow points back at the target. */
.tooltip.tooltip-top .tooltip-arrow[b-fxy14avx87] {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.tooltip.tooltip-bottom .tooltip-arrow[b-fxy14avx87] {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.tooltip.tooltip-left .tooltip-arrow[b-fxy14avx87] {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.tooltip.tooltip-right .tooltip-arrow[b-fxy14avx87] {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* Animation — fades in on appear. JS sets visibility:visible after measuring. */
@keyframes tooltipFadeIn-b-fxy14avx87 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Shared/Components/TypedFilterInput.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Typed Filter Input — Phase 4b
   ────────────────────────────────────────────────────────
   Compact form controls sized for column-header cells.
   Each variant scoped under .tfi-{datatype} so styles can
   diverge per type without bleeding across the component.
   ════════════════════════════════════════════════════════ */

.tfi[b-tx9vgyky54] {
    width: 100%;
    font-size: 12px;
    color: var(--color-text, #0f172a);
}

/* ── Text / Code ───────────────────────────────────────
   Single bordered container (the wrap) with leading
   Phosphor icon + transparent input on one flex row —
   mirrors the page's top-bar `.search-box` pattern so
   the visual style is consistent across the page.

   Higher selector specificity on the input rule (0,2,1)
   beats the page-level `.th-filter-row input` rule (0,1,1)
   which would otherwise re-apply its own border + bg
   colour and break the unified-container look. */
.tfi-text-wrap[b-tx9vgyky54] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 28px;
    padding: 3px 6px 3px 8px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, white);
    box-sizing: border-box;
}

    .tfi-text-wrap:focus-within[b-tx9vgyky54] {
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 12%, transparent);
    }

.tfi-text-icon[b-tx9vgyky54] {
    color: var(--color-text-secondary, #94a3b8);
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.tfi-text-wrap input.tfi-text[b-tx9vgyky54] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 20px;
    color: var(--color-text-primary, #0f172a);
}

    .tfi-text-wrap input.tfi-text:focus[b-tx9vgyky54] {
        outline: none;
        border: none;
        box-shadow: none;
    }

    /* Defeat page-level "has-value" highlight that would
       paint a coloured background INSIDE our wrapper. */
    .tfi-text-wrap input.tfi-text.has-value[b-tx9vgyky54],
    .tfi-text-wrap input.tfi-text:not(:placeholder-shown)[b-tx9vgyky54] {
        background: transparent;
    }

.tfi-text-clear[b-tx9vgyky54] {
    width: 16px;
    height: 16px;
    border: none;
    background: var(--color-gray-100, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .tfi-text-clear:hover[b-tx9vgyky54] {
        background: var(--color-gray-200, #e2e8f0);
        color: var(--color-text-primary, #0f172a);
    }

    .tfi-text-clear i[b-tx9vgyky54] {
        font-size: 10px;
    }

/* ── Multi-select (Enum / Lookup / User) ─────────────── */
.tfi-multi-wrap[b-tx9vgyky54] {
    position: relative;
    width: 100%;
}

.tfi-multi[b-tx9vgyky54] {
    width: 100%;
    min-height: 28px;
    padding: 4px 22px 4px 8px;
    font-size: 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    position: relative;
}

    .tfi-multi:hover[b-tx9vgyky54] {
        border-color: var(--color-primary, #6366f1);
    }

    .tfi-multi.open[b-tx9vgyky54] {
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 12%, transparent);
    }

.tfi-multi-placeholder[b-tx9vgyky54] {
    color: var(--color-text-muted, #cbd5e1);
    font-size: 11px;
    padding: 1px 2px;

    /* Keep the placeholder ("ANY TYPE", "ANY STATUS", etc.) on a single
       line even when the column is narrow. flex:1 + min-width:0 lets
       it consume remaining row space; the ellipsis kicks in when the
       column is too narrow for the full text to fit. Without these
       rules the placeholder wraps to two lines because .tfi-multi
       above has flex-wrap:wrap (which is needed for chips). */
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tfi-chip[b-tx9vgyky54] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary-hover, #4338ca);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tfi-chip-x[b-tx9vgyky54] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
}

    .tfi-chip-x:hover[b-tx9vgyky54] {
        color: var(--color-text-secondary, #475569);
    }

.tfi-chip-more[b-tx9vgyky54] {
    font-size: 10px;
    color: var(--color-text-secondary, #64748b);
    font-weight: 600;
    padding: 1px 4px;
}

.tfi-caret[b-tx9vgyky54] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted, #94a3b8);
    font-size: 9px;
    pointer-events: none;
}

/* Backdrop catches outside-clicks to close the dropdown */
.tfi-backdrop[b-tx9vgyky54] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: transparent;
}

.tfi-dropdown[b-tx9vgyky54] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 101;
    min-width: 200px;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    padding: 6px;
}

.tfi-dd-search[b-tx9vgyky54] {
    padding: 4px;
    border-bottom: 1px solid var(--color-border, #f1f5f9);
    margin-bottom: 4px;
    position: sticky;
    top: -6px;
    background: var(--color-surface, white);
}

    .tfi-dd-search input[b-tx9vgyky54] {
        width: 100%;
        padding: 6px 10px;
        font-size: 12px;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 6px;
    }

/* Sticky so the heading stays visible while its own section scrolls: the user
   picker groups by organization, and the list is long enough that you'd
   otherwise lose track of which company you're looking at. .tfi-dropdown is the
   scroll container and carries 6px of padding, so the offset is -6px — at 0 the
   rows would peek through that padding strip above the heading. */
.tfi-dd-group[b-tx9vgyky54] {
    position: sticky;
    top: -6px;
    z-index: 1;
    background: var(--color-surface, white);
    padding: 10px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tfi-dd-row[b-tx9vgyky54] {
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tfi-dd-row:hover[b-tx9vgyky54] {
        background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, transparent);
    }

    .tfi-dd-row.checked[b-tx9vgyky54] {
        background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, transparent);
        color: var(--color-primary, #4338ca);
        font-weight: 600;
    }

.tfi-dd-chk[b-tx9vgyky54] {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-border, #cbd5e1);
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    background: var(--color-surface, white);
}

.tfi-dd-row.checked .tfi-dd-chk[b-tx9vgyky54] {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
}

    .tfi-dd-row.checked .tfi-dd-chk[b-tx9vgyky54]::after {
        content: '✓';
        color: var(--color-text-inverse, white);
        font-size: 10px;
        font-weight: 800;
        position: absolute;
        left: 1px;
        top: -3px;
        line-height: 14px;
    }

.tfi-dd-swatch[b-tx9vgyky54] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tfi-dd-label[b-tx9vgyky54] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tfi-dd-empty[b-tx9vgyky54] {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
}

.tfi-dd-foot[b-tx9vgyky54] {
    padding: 6px 4px 0;
    border-top: 1px solid var(--color-border, #f1f5f9);
    margin-top: 4px;
    display: flex;
    gap: 4px;
}

    .tfi-dd-foot button[b-tx9vgyky54] {
        flex: 1;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 6px;
        border: 1px solid var(--color-border, #e2e8f0);
        background: var(--color-surface, white);
        color: var(--color-text-secondary, #475569);
        cursor: pointer;
    }

        .tfi-dd-foot button:hover[b-tx9vgyky54] {
            background: var(--color-gray-50, #f8fafc);
        }

    .tfi-dd-foot .tfi-dd-done[b-tx9vgyky54] {
        background: var(--color-primary, #6366f1);
        color: var(--color-text-inverse, white);
        border-color: var(--color-primary, #6366f1);
    }

        .tfi-dd-foot .tfi-dd-done:hover[b-tx9vgyky54] {
            filter: brightness(0.92);
            background: var(--color-primary, #6366f1);
        }

/* ── Date ────────────────────────────────────────────── */
.tfi-date[b-tx9vgyky54] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.tfi-date-preset[b-tx9vgyky54] {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, white);
}

.tfi-date-input[b-tx9vgyky54] {
    flex: 1;
    min-width: 110px;
    padding: 5px 6px;
    font-size: 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    color: var(--color-text-secondary, #475569);
}

.tfi-date-sep[b-tx9vgyky54] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Number ──────────────────────────────────────────── */
.tfi-num[b-tx9vgyky54] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.tfi-num-op[b-tx9vgyky54] {
    padding: 6px 18px 6px 8px;
    font-size: 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, white);
    flex-shrink: 0;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'%3e%3cpath fill='%2394a3b8' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.tfi-num-input[b-tx9vgyky54] {
    width: 100%;
    padding: 6px 8px;
    font-size: 11px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
}

.tfi-num-sep[b-tx9vgyky54] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 11px;
}

/* ── Boolean ─────────────────────────────────────────── */
.tfi-bool[b-tx9vgyky54] {
    display: flex;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
    height: 28px;
    font-size: 11px;
    font-weight: 600;
}

    .tfi-bool span[b-tx9vgyky54] {
        flex: 1;
        text-align: center;
        padding: 6px 4px;
        cursor: pointer;
        color: var(--color-text-muted, #94a3b8);
        background: var(--color-surface, white);
        border-right: 1px solid var(--color-border, #e2e8f0);
        line-height: 14px;
    }

        .tfi-bool span:last-child[b-tx9vgyky54] {
            border-right: none;
        }

        .tfi-bool span:hover[b-tx9vgyky54] {
            background: var(--color-gray-50, #f8fafc);
        }

        .tfi-bool span.on-yes[b-tx9vgyky54] {
            background: var(--color-success-light, #d1fae5);
            color: var(--color-success-text, #047857);
        }

        .tfi-bool span.on-no[b-tx9vgyky54] {
            background: var(--color-danger-light, #fee2e2);
            color: var(--color-danger-text, #b91c1c);
        }

        .tfi-bool span.on-any[b-tx9vgyky54] {
            background: var(--color-primary-light, #eef2ff);
            color: var(--color-primary-hover, #4338ca);
        }
/* /Shared/MainLayout.razor.rz.scp.css */
/* ============================================
   site.css - Complete Styles
   ============================================
   Includes navbar styles (CSS isolation unreliable)
   ============================================ */

*[b-wa688qv8v9] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-wa688qv8v9] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background: var(--color-background, #fafbfc);
    color: var(--color-text-primary, #24292e);
}

/* ==========================================
   PAGE LAYOUT
   ========================================== */
.page[b-wa688qv8v9] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main[b-wa688qv8v9] {
    flex: 1;
    padding: 24px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Wide-layout opt-in: when a page renders a .container.container-wide
   (currently Dashboard and My Tickets), drop the 1400px cap so the
   table can stretch to the full viewport. Without this override the
   outer <main> caps everything inside, even if the inner .container
   sets max-width: none. AdminLayout doesn't have this issue because
   it doesn't put a cap on its content wrapper — so wide pages there
   already worked. The :has() pseudo-class is supported in every
   browser from late 2023 onward; fine for an internal tool. */
main:has(> .container.container-wide)[b-wa688qv8v9] {
    max-width: none;
    padding: 24px 32px;
}

/* ==========================================
   NAVBAR
   ========================================== */
.navbar[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background: var(--color-surface, white);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ==========================================
   BRAND / LOGO
   ========================================== */
.nav-brand[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.brand-logo[b-wa688qv8v9] {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.brand-icon[b-wa688qv8v9] {
    font-size: 24px;
    color: var(--color-primary, #0366d6);
}

.brand-name[b-wa688qv8v9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

/* Trademark / registered-mark superscript rendered next to the company
   name. The <sup> default styling already raises the baseline; we just
   tune it down a notch so a tiny ® reads cleanly without crowding the
   logotype. Used on the top-nav brand and mobile-menu brand. */
.brand-name .brand-mark[b-wa688qv8v9] {
    font-size: 0.55em;
    font-weight: 500;
    margin-left: 1px;
    opacity: 0.75;
    vertical-align: super;
    line-height: 0;
}

/* ==========================================
   NAV MENU
   ========================================== */
.nav-menu[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================
   NAV LINKS
   ========================================== */
.nav-link[b-wa688qv8v9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    text-decoration: none;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
}

    .nav-link i[b-wa688qv8v9] {
        font-size: 16px;
    }

    .nav-link:hover[b-wa688qv8v9] {
        color: var(--color-text-primary, #24292e);
        background: var(--color-gray-100, #f6f8fa);
    }

    .nav-link.active[b-wa688qv8v9] {
        color: var(--color-text-primary, #24292e);
    }

    /* ── Icon color overrides ──────────────────────────────────
   .nav-link sets a text color that icons inherit. We
   explicitly override it here so Edge respects the values.
   ---------------------------------------------------------- */

    /* Normal */
    .nav-link i[class~="ph-fill"][b-wa688qv8v9] {
        color: var(--icon-color-fill, #0366d6) !important;
    }

    .nav-link i[class~="ph-duotone"][b-wa688qv8v9] {
        color: var(--icon-color-duotone, #586069) !important;
    }

    .nav-link i[class~="ph-regular"][b-wa688qv8v9] {
        color: var(--icon-color-regular, #6b7280) !important;
    }

    .nav-link i[class~="ph-bold"][b-wa688qv8v9] {
        color: var(--icon-color-bold, #24292e) !important;
    }

    .nav-link i[class~="ph-light"][b-wa688qv8v9] {
        color: var(--icon-color-light, #9ca3af) !important;
    }

    .nav-link i[class~="ph-thin"][b-wa688qv8v9] {
        color: var(--icon-color-thin, #d1d5db) !important;
    }

    /* Hover */
    .nav-link:hover i[class~="ph-fill"][b-wa688qv8v9] {
        color: var(--icon-color-fill-hover, #0256c7) !important;
    }

    .nav-link:hover i[class~="ph-duotone"][b-wa688qv8v9] {
        color: var(--icon-color-duotone-hover, #24292e) !important;
    }

    .nav-link:hover i[class~="ph-regular"][b-wa688qv8v9] {
        color: var(--icon-color-regular-hover, #374151) !important;
    }

    .nav-link:hover i[class~="ph-bold"][b-wa688qv8v9] {
        color: var(--icon-color-bold-hover, #111827) !important;
    }

    .nav-link:hover i[class~="ph-light"][b-wa688qv8v9] {
        color: var(--icon-color-light-hover, #6b7280) !important;
    }

    .nav-link:hover i[class~="ph-thin"][b-wa688qv8v9] {
        color: var(--icon-color-thin-hover, #9ca3af) !important;
    }

    /* Active */
    .nav-link.active i[class~="ph-fill"][b-wa688qv8v9] {
        color: var(--icon-color-fill-active, #024ea0) !important;
    }

    .nav-link.active i[class~="ph-duotone"][b-wa688qv8v9] {
        color: var(--icon-color-duotone-active, #0366d6) !important;
    }

    .nav-link.active i[class~="ph-regular"][b-wa688qv8v9] {
        color: var(--icon-color-regular-active, #0366d6) !important;
    }

    .nav-link.active i[class~="ph-bold"][b-wa688qv8v9] {
        color: var(--icon-color-bold-active, #0366d6) !important;
    }

    .nav-link.active i[class~="ph-light"][b-wa688qv8v9] {
        color: var(--icon-color-light-active, #0366d6) !important;
    }

    .nav-link.active i[class~="ph-thin"][b-wa688qv8v9] {
        color: var(--icon-color-thin-active, #0366d6) !important;
    }

/* Dropdown items */
.dropdown-item i[class~="ph-fill"][b-wa688qv8v9] {
    color: var(--icon-color-fill, #0366d6) !important;
}

.dropdown-item i[class~="ph-duotone"][b-wa688qv8v9] {
    color: var(--icon-color-duotone, #586069) !important;
}

.dropdown-item i[class~="ph-regular"][b-wa688qv8v9] {
    color: var(--icon-color-regular, #6b7280) !important;
}

.dropdown-item i[class~="ph-bold"][b-wa688qv8v9] {
    color: var(--icon-color-bold, #24292e) !important;
}

.dropdown-item i[class~="ph-light"][b-wa688qv8v9] {
    color: var(--icon-color-light, #9ca3af) !important;
}

.dropdown-item i[class~="ph-thin"][b-wa688qv8v9] {
    color: var(--icon-color-thin, #d1d5db) !important;
}

.dropdown-item:hover i[class~="ph-fill"][b-wa688qv8v9],
.dropdown-item:hover i[class~="ph-duotone"][b-wa688qv8v9],
.dropdown-item:hover i[class~="ph-regular"][b-wa688qv8v9],
.dropdown-item:hover i[class~="ph-bold"][b-wa688qv8v9],
.dropdown-item:hover i[class~="ph-light"][b-wa688qv8v9],
.dropdown-item:hover i[class~="ph-thin"][b-wa688qv8v9] {
    color: var(--color-primary, #0366d6) !important;
}

/* ==========================================
   DROPDOWN
   ========================================== */
.nav-dropdown[b-wa688qv8v9] {
    position: relative;
}

.dropdown-toggle[b-wa688qv8v9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.caret[b-wa688qv8v9] {
    font-size: 12px;
    transition: transform 0.2s;
}

    .caret.rotated[b-wa688qv8v9] {
        transform: rotate(180deg);
    }

.dropdown-menu[b-wa688qv8v9] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 200px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    overflow: hidden;
}

.dropdown-right[b-wa688qv8v9] {
    left: auto;
    right: 0;
}

.dropdown-item[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--color-text-primary, #24292e);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

    .dropdown-item i[b-wa688qv8v9] {
        font-size: 16px;
        color: var(--color-text-muted, #6a737d);
    }

    .dropdown-item:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
    }

        .dropdown-item:hover i[b-wa688qv8v9] {
            color: var(--color-primary, #0366d6);
        }

    .dropdown-item.text-danger[b-wa688qv8v9] {
        color: var(--color-danger, #d73a49);
    }

        .dropdown-item.text-danger i[b-wa688qv8v9] {
            color: var(--color-danger, #d73a49);
        }

        .dropdown-item.text-danger:hover[b-wa688qv8v9] {
            background: var(--color-danger-light, #ffeef0);
        }

.dropdown-divider[b-wa688qv8v9] {
    height: 1px;
    margin: 4px 0;
    background: var(--color-border, #e1e4e8);
}

/* ==========================================
   BADGE COUNT
   ========================================== */
.badge-count[b-wa688qv8v9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-inverse, white);
    background: var(--color-danger, #d73a49);
    border-radius: 9999px;
    margin-left: 4px;
}

/* ==========================================
   NAV ICON WRAPPER & BADGE DOT
   ========================================== */
.nav-icon-wrapper[b-wa688qv8v9] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.badge-dot[b-wa688qv8v9] {
    display: none;
}

/* ==========================================
   NAV TOOLTIPS (icons-only mode)
   ========================================== */
.page[data-nav-display="icons-only"] .nav-link[b-wa688qv8v9] {
    position: relative;
}

    .page[data-nav-display="icons-only"] .nav-link[b-wa688qv8v9]::after {
        content: attr(title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 8px;
        padding: 4px 10px;
        background: var(--color-text-primary, #24292e);
        color: var(--color-text-inverse, white);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 4px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s;
        z-index: 10000;
    }

    .page[data-nav-display="icons-only"] .nav-link:hover[b-wa688qv8v9]::after {
        opacity: 1;
    }

/* Horizontal icons-only: tooltip below instead of right */
.page[data-nav-layout="horizontal"][data-nav-display="icons-only"] .nav-link[b-wa688qv8v9]::after {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-top: 6px;
}

/* ==========================================
   USER MENU
   ========================================== */
/* Global ticket search sits at the right of the top nav, grouped with the
   user menu. margin-left:auto pushes it (and the avatar) to the right corner. */
.nav-search[b-wa688qv8v9] {
    margin-left: auto;
    margin-right: 12px;
    width: 260px;
}

/* Horizontal-nav mobile collapses to the hamburger menu; hide the top search
   there for now (mobile search is a follow-up). */
@media (max-width: 900px) {
    .nav-search[b-wa688qv8v9] {
        display: none;
    }
}

/* Notifications nav item: hovering it reveals the recent-activity popup.
   Positioning + reveal are handled in js/notif-popup.js (the popup is rendered
   `fixed` so the vertical rail's overflow can't clip it); clicking the link
   still navigates to the notification center. */
.nav-notif[b-wa688qv8v9] {
    position: relative;
}

/* Vertical rail: the nav is a left column, so the search + messages icon go to
   the FIXED top-right corner of the page (a mini top bar over the content),
   not stacked in the rail. Works for the text rail and the narrow icons-only
   rail alike. The nav links + avatar stay in the rail. */
.page[data-nav-layout="vertical"] .nav-search[b-wa688qv8v9] {
    position: fixed;
    top: 12px;
    right: 60px;
    width: 300px;
    margin: 0;
    z-index: 200;
}

/* Push content down so the floated search doesn't cover the top of the page. */
.page[data-nav-layout="vertical"] main[b-wa688qv8v9] {
    padding-top: 60px;
}

.nav-user[b-wa688qv8v9] {
    position: relative;
}

.user-button[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

    .user-button:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
        border-color: var(--color-border, #d1d5da);
    }

.user-avatar[b-wa688qv8v9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-inverse, white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.user-name[b-wa688qv8v9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #24292e);
}

.user-button .caret[b-wa688qv8v9] {
    color: var(--color-text-muted, #6a737d);
}

/* ==========================================
   IMPERSONATION BANNER
   ========================================== */
.impersonation-banner[b-wa688qv8v9] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--color-text-inverse, white);
    padding: 12px 24px;
}

.impersonation-content[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 14px;
}

    .impersonation-content i[b-wa688qv8v9] {
        font-size: 24px;
    }

.btn-stop-impersonation[b-wa688qv8v9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--color-surface, white);
    color: var(--color-warning, #d97706);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .btn-stop-impersonation:hover[b-wa688qv8v9] {
        background: var(--color-warning-light, #fef3c7);
    }

/* ==========================================
   FAB (Floating Action Button)
   ========================================== */
.fab-container[b-wa688qv8v9] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
}

.fab[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

    .fab:hover[b-wa688qv8v9] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    .fab i[b-wa688qv8v9] {
        font-size: 20px;
        color: var(--color-danger, #d73a49);
    }

    .fab span[b-wa688qv8v9] {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-primary, #24292e);
    }

/* ==========================================
   CONTAINER & PAGE LAYOUT
   ========================================== */
.container[b-wa688qv8v9] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
}

.page-header[b-wa688qv8v9] {
    margin-bottom: 24px;
}

.page-title[b-wa688qv8v9] {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 4px;
}

.page-subtitle[b-wa688qv8v9] {
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
}

/* ==========================================
   STATS GRID
   ========================================== */
.stats-grid[b-wa688qv8v9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-wa688qv8v9] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    padding: 20px;
    transition: box-shadow 0.2s;
    cursor: pointer;
}

    .stat-card:hover[b-wa688qv8v9] {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    }

.stat-label[b-wa688qv8v9] {
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value[b-wa688qv8v9] {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary, #24292e);
}

/* ==========================================
   CONTENT SECTIONS
   ========================================== */
.content-section[b-wa688qv8v9] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
}

.section-header[b-wa688qv8v9] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-wa688qv8v9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

/* ==========================================
   DATA TABLES
   ========================================== */
.data-table[b-wa688qv8v9] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th[b-wa688qv8v9] {
        background: var(--color-background, #fafbfc);
        padding: 12px 20px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-secondary, #586069);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
    }

    .data-table tbody td[b-wa688qv8v9] {
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        font-size: 14px;
    }

    .data-table tbody tr[b-wa688qv8v9] {
        transition: background 0.2s;
        cursor: pointer;
    }

        .data-table tbody tr:hover[b-wa688qv8v9] {
            background: var(--color-gray-100, #f6f8fa);
        }

.ticket-id[b-wa688qv8v9] {
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 13px;
}

/* ==========================================
   BADGES
   ========================================== */
.badge[b-wa688qv8v9] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    border: 1px solid;
}

.type-badge[b-wa688qv8v9] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn[b-wa688qv8v9] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-wa688qv8v9] {
    background: var(--color-primary, #0366d6);
    color: var(--color-text-inverse, white);
}

    .btn-primary:hover[b-wa688qv8v9] {
        background: var(--color-primary-hover, #0256c7);
    }

.btn-secondary[b-wa688qv8v9] {
    background: var(--color-surface, white);
    color: var(--color-text-primary, #24292e);
    border: 1px solid var(--color-border, #e1e4e8);
}

    .btn-secondary:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
    }

.btn-danger[b-wa688qv8v9] {
    background: var(--color-danger, #d73a49);
    color: var(--color-text-inverse, white);
}

    .btn-danger:hover[b-wa688qv8v9] {
        background: var(--color-danger-hover, #cb2431);
    }

    .btn-danger:disabled[b-wa688qv8v9] {
        background: var(--color-border, #d1d5da);
        cursor: not-allowed;
        opacity: 0.5;
    }

.btn-sm[b-wa688qv8v9] {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-block[b-wa688qv8v9] {
    width: 100%;
    margin-top: 12px;
}

/* ==========================================
   LOADING & EMPTY STATES
   ========================================== */
.loading[b-wa688qv8v9], .empty-state[b-wa688qv8v9] {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary, #586069);
}

/* ==========================================
   CARDS
   ========================================== */
.card[b-wa688qv8v9] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    margin-bottom: 24px;
}

.card-header[b-wa688qv8v9] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-wa688qv8v9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.card-body[b-wa688qv8v9] {
    padding: 20px;
}

/* ==========================================
   FORMS
   ========================================== */
.form-group[b-wa688qv8v9] {
    margin-bottom: 16px;
}

.form-label[b-wa688qv8v9] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.form-input[b-wa688qv8v9], .form-select[b-wa688qv8v9] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

    .form-input:focus[b-wa688qv8v9], .form-select:focus[b-wa688qv8v9] {
        outline: none;
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
    }

textarea.form-input[b-wa688qv8v9] {
    resize: vertical;
    font-family: inherit;
}

.action-buttons[b-wa688qv8v9] {
    display: flex;
    gap: 8px;
}

/* ==========================================
   MODALS
   ========================================== */
.modal[b-wa688qv8v9] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    .modal.active[b-wa688qv8v9] {
        display: flex;
    }

.modal-content[b-wa688qv8v9] {
    position: relative;
    background: var(--color-surface, white);
    border-radius: 6px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-wa688qv8v9] {
    padding: 20px 48px 20px 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    align-items: center;
}

.modal-title[b-wa688qv8v9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.modal-close[b-wa688qv8v9] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 1;
}

    .modal-close:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #374151);
    }

.modal-body[b-wa688qv8v9] {
    padding: 24px;
}

.modal-footer[b-wa688qv8v9] {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ==========================================
   ADMIN SIDEBAR
   ========================================== */
.admin-layout[b-wa688qv8v9] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}

.sidebar[b-wa688qv8v9] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    padding: 16px;
    height: fit-content;
}

.sidebar-title[b-wa688qv8v9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    padding: 8px 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-menu[b-wa688qv8v9] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item[b-wa688qv8v9] {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

    .sidebar-item:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

    .sidebar-item.active[b-wa688qv8v9] {
        background: var(--color-primary, #0366d6);
        color: var(--color-text-inverse, white);
    }

.sidebar-back[b-wa688qv8v9] {
    margin-bottom: 16px;
}

.back-button[b-wa688qv8v9] {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-gray-100, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    color: var(--color-text-secondary, #586069);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

    .back-button:hover[b-wa688qv8v9] {
        background: var(--color-border, #e1e4e8);
        color: var(--color-text-primary, #24292e);
    }

/* ==========================================
   COLOR INPUTS
   ========================================== */
.color-swatch[b-wa688qv8v9] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--color-border, #e1e4e8);
    display: inline-block;
}

.color-input[b-wa688qv8v9] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    cursor: pointer;
}

/* ==========================================
   FOCUS STYLES
   ========================================== */
h1:focus[b-wa688qv8v9],
h2:focus[b-wa688qv8v9],
h3:focus[b-wa688qv8v9] {
    outline: none !important;
}

button:focus-visible[b-wa688qv8v9],
a:focus-visible[b-wa688qv8v9],
input:focus-visible[b-wa688qv8v9],
select:focus-visible[b-wa688qv8v9],
textarea:focus-visible[b-wa688qv8v9] {
    outline: 2px solid var(--color-primary, #0366d6);
    outline-offset: 2px;
}

/* ==========================================
   KNOWLEDGE BASE
   ========================================== */
.articles-grid[b-wa688qv8v9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding: 20px;
}

.article-card[b-wa688qv8v9] {
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

    .article-card:hover[b-wa688qv8v9] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

.article-header[b-wa688qv8v9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.article-number[b-wa688qv8v9] {
    font-family: 'Consolas', monospace;
    color: var(--color-primary, #0366d6);
    font-weight: 600;
    font-size: 12px;
}

.module-badge[b-wa688qv8v9] {
    background: var(--color-primary-light, #f0f7ff);
    color: var(--color-primary, #0969da);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.article-title[b-wa688qv8v9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
    margin-bottom: 12px;
    line-height: 1.4;
}

.article-meta[b-wa688qv8v9] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e1e4e8);
}

.article-footer[b-wa688qv8v9] {
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-text-secondary, #586069);
}

/* ==========================================
   NAV DISPLAY MODE: ICONS ONLY
   ========================================== */
.page[data-nav-display="icons-only"] .nav-text[b-wa688qv8v9] {
    display: none;
}

.page[data-nav-display="icons-only"] .nav-link i[b-wa688qv8v9] {
    font-size: 20px;
}

.page[data-nav-display="icons-only"] .nav-link[b-wa688qv8v9] {
    padding: 8px;
}

.page[data-nav-display="icons-only"] .brand-name[b-wa688qv8v9] {
    display: none;
}

/* Hide number badges, show dot indicator in icons-only */
.page[data-nav-display="icons-only"] .badge-count[b-wa688qv8v9] {
    display: none;
}

.page[data-nav-display="icons-only"] .badge-dot[b-wa688qv8v9] {
    display: block;
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--color-danger, #d73a49);
    border-radius: 50%;
    border: 2px solid var(--color-surface, white);
}

/* ==========================================
   NAV DISPLAY MODE: TEXT ONLY
   ========================================== */
.page[data-nav-display="text-only"] .nav-link > i[b-wa688qv8v9],
.page[data-nav-display="text-only"] .brand-icon[b-wa688qv8v9] {
    display: none;
}

.page[data-nav-display="text-only"] .nav-link[b-wa688qv8v9] {
    gap: 0;
}

/* ==========================================
   COMPACT MODE
   ========================================== */
.page[data-compact="true"] .navbar[b-wa688qv8v9] {
    height: 44px;
    padding: 0 16px;
}

.page[data-compact="true"] .nav-link[b-wa688qv8v9] {
    padding: 4px 8px;
    font-size: 13px;
}

.page[data-compact="true"] main[b-wa688qv8v9] {
    padding: 16px;
}

.page[data-compact="true"] .user-avatar[b-wa688qv8v9] {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.page[data-compact="true"] .fab[b-wa688qv8v9] {
    padding: 8px 12px;
}

    .page[data-compact="true"] .fab i[b-wa688qv8v9] {
        font-size: 16px;
    }

    .page[data-compact="true"] .fab span[b-wa688qv8v9] {
        font-size: 12px;
    }

/* ==========================================
   VERTICAL NAV LAYOUT (SIDEBAR)
   ========================================== */
.page[data-nav-layout="vertical"][b-wa688qv8v9] {
    flex-direction: row;
    flex-wrap: wrap;
}

    .page[data-nav-layout="vertical"] .impersonation-banner[b-wa688qv8v9] {
        width: 100%;
        flex-shrink: 0;
    }

    .page[data-nav-layout="vertical"] .navbar[b-wa688qv8v9] {
        flex-direction: column;
        align-items: stretch;
        width: 240px;
        min-width: 240px;
        height: 100vh;
        padding: 16px 12px;
        border-bottom: none;
        border-right: 1px solid var(--color-border, #e1e4e8);
        position: sticky;
        top: 0;
        gap: 8px;
        overflow-y: auto;
    }

    .page[data-nav-layout="vertical"] .nav-brand[b-wa688qv8v9] {
        padding: 4px 8px 16px;
        border-bottom: 1px solid var(--color-border, #e1e4e8);
        margin-bottom: 4px;
    }

    .page[data-nav-layout="vertical"] .nav-menu[b-wa688qv8v9] {
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }

    .page[data-nav-layout="vertical"] .nav-link[b-wa688qv8v9] {
        width: 100%;
        padding: 8px 12px;
        border-radius: 6px;
    }

        .page[data-nav-layout="vertical"] .nav-link.active[b-wa688qv8v9] {
            background: var(--color-primary, #0366d6);
            color: var(--color-text-inverse, white);
        }

            /* Force icons white on active vertical nav items */
            .page[data-nav-layout="vertical"] .nav-link.active i[class~="ph-fill"][b-wa688qv8v9],
            .page[data-nav-layout="vertical"] .nav-link.active i[class~="ph-duotone"][b-wa688qv8v9],
            .page[data-nav-layout="vertical"] .nav-link.active i[class~="ph-regular"][b-wa688qv8v9],
            .page[data-nav-layout="vertical"] .nav-link.active i[class~="ph-bold"][b-wa688qv8v9],
            .page[data-nav-layout="vertical"] .nav-link.active i[class~="ph-light"][b-wa688qv8v9],
            .page[data-nav-layout="vertical"] .nav-link.active i[class~="ph-thin"][b-wa688qv8v9],
            .page[data-nav-layout="vertical"] .nav-link.active i.ph[b-wa688qv8v9] {
                color: white !important;
            }

    .page[data-nav-layout="vertical"] .nav-dropdown[b-wa688qv8v9] {
        width: 100%;
    }

    .page[data-nav-layout="vertical"] .dropdown-toggle[b-wa688qv8v9] {
        width: 100%;
        justify-content: flex-start;
    }

        .page[data-nav-layout="vertical"] .dropdown-toggle .caret[b-wa688qv8v9] {
            margin-left: auto;
        }

    .page[data-nav-layout="vertical"] .dropdown-menu[b-wa688qv8v9] {
        position: static;
        margin-top: 2px;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 12px;
    }

    .page[data-nav-layout="vertical"] .dropdown-item[b-wa688qv8v9] {
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px;
    }

    .page[data-nav-layout="vertical"] .nav-user[b-wa688qv8v9] {
        border-top: 1px solid var(--color-border, #e1e4e8);
        padding-top: 12px;
        margin-top: 8px;
        position: relative;
    }

    .page[data-nav-layout="vertical"] .user-button[b-wa688qv8v9] {
        width: 100%;
        justify-content: flex-start;
        border-radius: 6px;
        border: none;
        padding: 8px;
    }

        .page[data-nav-layout="vertical"] .user-button .caret[b-wa688qv8v9] {
            margin-left: auto;
        }

    /* User dropdown opens UPWARD in vertical sidebar */
    .page[data-nav-layout="vertical"] .dropdown-right[b-wa688qv8v9] {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        top: auto;
        margin-bottom: 4px;
        margin-top: 0;
        background: var(--color-surface, white);
        border: 1px solid var(--color-border, #e1e4e8);
        border-radius: 6px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        z-index: 1000;
    }

    .page[data-nav-layout="vertical"] main[b-wa688qv8v9] {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    /* ── Vertical + Icons Only ── */
    .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .navbar[b-wa688qv8v9] {
        width: 60px;
        min-width: 60px;
        padding: 16px 8px;
        align-items: center;
        overflow: visible;
    }

    .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .nav-brand[b-wa688qv8v9] {
        justify-content: center;
        padding: 4px 0 16px;
    }

    .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .nav-link[b-wa688qv8v9] {
        justify-content: center;
        padding: 10px;
    }

    .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .dropdown-toggle .caret[b-wa688qv8v9] {
        display: none;
    }

    .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .dropdown-menu[b-wa688qv8v9] {
        position: absolute;
        left: 100%;
        top: 0;
        margin-top: 0;
        margin-left: 4px;
        background: var(--color-surface, white);
        border: 1px solid var(--color-border, #e1e4e8);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        padding-left: 0;
        min-width: 200px;
        border-radius: 6px;
        z-index: 10000;
    }

        .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .dropdown-menu .dropdown-item[b-wa688qv8v9] {
            padding: 8px 16px;
            font-size: 14px;
        }

    .page[data-nav-layout="vertical"][data-nav-display="icons-only"] .nav-dropdown[b-wa688qv8v9] {
        position: relative;
    }

/* Hide tooltip on dropdown toggle only when dropdown is open */
.page[data-nav-display="icons-only"] .dropdown-toggle:focus[b-wa688qv8v9]::after {
    opacity: 0;
}

.page[data-nav-layout="vertical"][data-nav-display="icons-only"] .user-button[b-wa688qv8v9] {
    justify-content: center;
    padding: 8px;
}

.page[data-nav-layout="vertical"][data-nav-display="icons-only"] .user-name[b-wa688qv8v9] {
    display: none;
}

.page[data-nav-layout="vertical"][data-nav-display="icons-only"] .user-button .caret[b-wa688qv8v9] {
    display: none;
}

.page[data-nav-layout="vertical"][data-nav-display="icons-only"] .dropdown-right[b-wa688qv8v9] {
    position: absolute;
    left: 100%;
    bottom: 0;
    top: auto;
    right: auto;
    margin-top: 0;
    margin-left: 4px;
    background: var(--color-surface, white);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 10000;
}

/* ── Vertical + Compact ── */
.page[data-nav-layout="vertical"][data-compact="true"] .navbar[b-wa688qv8v9] {
    width: 200px;
    min-width: 200px;
    padding: 12px 8px;
}

.page[data-nav-layout="vertical"][data-compact="true"] .nav-link[b-wa688qv8v9] {
    padding: 6px 10px;
}

.page[data-nav-layout="vertical"][data-compact="true"] .nav-brand[b-wa688qv8v9] {
    padding: 2px 8px 12px;
}

/* ── Vertical + Icons Only + Compact ── */
.page[data-nav-layout="vertical"][data-nav-display="icons-only"][data-compact="true"] .navbar[b-wa688qv8v9] {
    width: 48px;
    min-width: 48px;
    padding: 12px 6px;
}

.page[data-nav-layout="vertical"][data-nav-display="icons-only"][data-compact="true"] .nav-link[b-wa688qv8v9] {
    padding: 6px;
}

    .page[data-nav-layout="vertical"][data-nav-display="icons-only"][data-compact="true"] .nav-link i[b-wa688qv8v9] {
        font-size: 18px;
    }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1200px) {
    .stats-grid[b-wa688qv8v9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    /* Horizontal nav: hide text, show icons only - but respect user preference */
    .page:not([data-nav-display="text-only"]) .nav-link .nav-text[b-wa688qv8v9],
    .page:not([data-nav-display="text-only"]) .brand-name[b-wa688qv8v9] {
        display: none;
    }

    /* If user chose text-only, hide icons instead */
    .page[data-nav-display="text-only"] .nav-link > i:not(.caret)[b-wa688qv8v9],
    .page[data-nav-display="text-only"] .brand-icon[b-wa688qv8v9] {
        display: none;
    }

    .nav-link[b-wa688qv8v9] {
        padding: 8px;
    }

        .nav-link i[b-wa688qv8v9] {
            font-size: 20px;
        }

    /* Vertical sidebar: collapse width at this breakpoint */
    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .navbar[b-wa688qv8v9] {
        width: 60px;
        min-width: 60px;
        padding: 16px 8px;
        align-items: center;
        overflow: visible;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .nav-brand[b-wa688qv8v9] {
        justify-content: center;
        padding: 4px 0 16px;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .nav-link[b-wa688qv8v9] {
        justify-content: center;
        padding: 10px;
        width: auto;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .nav-text[b-wa688qv8v9],
    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .brand-name[b-wa688qv8v9] {
        display: none;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .dropdown-toggle .caret[b-wa688qv8v9] {
        display: none;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .badge-count[b-wa688qv8v9] {
        display: none;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .badge-dot[b-wa688qv8v9] {
        display: block;
        position: absolute;
        top: -2px;
        right: -4px;
        width: 8px;
        height: 8px;
        background: var(--color-danger, #d73a49);
        border-radius: 50%;
        border: 2px solid var(--color-surface, white);
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .dropdown-menu[b-wa688qv8v9] {
        position: absolute;
        left: 100%;
        top: 0;
        margin-top: 0;
        margin-left: 4px;
        background: var(--color-surface, white);
        border: 1px solid var(--color-border, #e1e4e8);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        padding-left: 0;
        min-width: 200px;
        border-radius: 6px;
        z-index: 10000;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .nav-dropdown[b-wa688qv8v9] {
        position: relative;
        width: auto;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .user-button[b-wa688qv8v9] {
        justify-content: center;
        padding: 8px;
        width: auto;
        border: none;
    }

        .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .user-name[b-wa688qv8v9],
        .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .user-button .caret[b-wa688qv8v9] {
            display: none;
        }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .dropdown-right[b-wa688qv8v9] {
        position: absolute;
        left: 100%;
        bottom: 0;
        top: auto;
        right: auto;
        margin-top: 0;
        margin-left: 4px;
        background: var(--color-surface, white);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        min-width: 200px;
        z-index: 10000;
    }

    .page[data-nav-layout="vertical"]:not([data-nav-display="text-only"]) .nav-user[b-wa688qv8v9] {
        border-top: 1px solid var(--color-border, #e1e4e8);
        padding-top: 12px;
        margin-top: auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Text-only vertical sidebar: keep wider but hide icons */
    .page[data-nav-layout="vertical"][data-nav-display="text-only"] .navbar[b-wa688qv8v9] {
        width: 180px;
        min-width: 180px;
    }
}

/* ==========================================
   MOBILE MENU TOGGLE BUTTON
   ========================================== */
.mobile-menu-toggle[b-wa688qv8v9] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-primary, #24292e);
    transition: background-color 0.15s;
}

    .mobile-menu-toggle:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
    }

    .mobile-menu-toggle i[b-wa688qv8v9] {
        font-size: 24px;
    }

/* ==========================================
   MOBILE MENU OVERLAY & DRAWER
   ========================================== */
.mobile-menu-overlay[b-wa688qv8v9] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    animation: fadeIn-b-wa688qv8v9 0.2s ease;
}

.mobile-menu[b-wa688qv8v9] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--color-surface, white);
    z-index: 1000;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    animation: slideInLeft-b-wa688qv8v9 0.25s ease;
}

@keyframes fadeIn-b-wa688qv8v9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft-b-wa688qv8v9 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.mobile-menu-header[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .mobile-menu-header .nav-brand[b-wa688qv8v9] {
        cursor: default;
    }

    .mobile-menu-header .brand-name[b-wa688qv8v9] {
        display: block !important;
    }

.mobile-menu-close[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary, #586069);
    transition: background-color 0.15s, color 0.15s;
}

    .mobile-menu-close:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

    .mobile-menu-close i[b-wa688qv8v9] {
        font-size: 20px;
    }

.mobile-menu-content[b-wa688qv8v9] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.mobile-nav-link[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary, #586069);
    text-decoration: none;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    text-align: left;
}

    .mobile-nav-link i[b-wa688qv8v9] {
        font-size: 20px;
        width: 24px;
        text-align: center;
    }

    .mobile-nav-link:hover[b-wa688qv8v9] {
        background: var(--color-gray-100, #f6f8fa);
        color: var(--color-text-primary, #24292e);
    }

    .mobile-nav-link.active[b-wa688qv8v9] {
        background: var(--color-primary-soft, #f0f7ff);
        color: var(--color-primary, #0366d6);
    }

    .mobile-nav-link .caret[b-wa688qv8v9] {
        margin-left: auto;
        font-size: 14px;
        transition: transform 0.2s;
    }

        .mobile-nav-link .caret.rotated[b-wa688qv8v9] {
            transform: rotate(180deg);
        }

    .mobile-nav-link.text-danger[b-wa688qv8v9] {
        color: var(--color-danger, #d73a49);
    }

        .mobile-nav-link.text-danger:hover[b-wa688qv8v9] {
            background: var(--color-danger-light, #ffeef0);
        }

.mobile-nav-link-sub[b-wa688qv8v9] {
    padding-left: 52px;
    font-size: 14px;
}

.mobile-nav-group[b-wa688qv8v9] {
    margin-bottom: 4px;
}

.mobile-submenu[b-wa688qv8v9] {
    margin-top: 4px;
}

.mobile-menu-footer[b-wa688qv8v9] {
    border-top: 1px solid var(--color-border, #e1e4e8);
    padding: 16px;
}

.mobile-user-info[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .mobile-user-info .user-avatar[b-wa688qv8v9] {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

.mobile-user-details[b-wa688qv8v9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-user-name[b-wa688qv8v9] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #24292e);
}

.mobile-user-email[b-wa688qv8v9] {
    font-size: 13px;
    color: var(--color-text-secondary, #586069);
}

.mobile-user-actions[b-wa688qv8v9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mobile-user-actions .mobile-nav-link[b-wa688qv8v9] {
        padding: 10px 12px;
    }

/* Badge dot visible in mobile menu */
.badge-dot-visible[b-wa688qv8v9] {
    display: block !important;
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--color-danger, #d73a49);
    border-radius: 50%;
    border: 2px solid var(--color-surface, white);
}

@media (max-width: 768px) {
    .stats-grid[b-wa688qv8v9] {
        grid-template-columns: 1fr;
    }

    .admin-layout[b-wa688qv8v9] {
        grid-template-columns: 1fr;
    }

    /* Hide desktop nav menu, show mobile toggle */
    .nav-menu[b-wa688qv8v9] {
        display: none;
    }

    .mobile-menu-toggle[b-wa688qv8v9] {
        display: flex;
    }

    /* Show mobile menu when active */
    .mobile-menu-overlay[b-wa688qv8v9] {
        display: block;
    }

    .mobile-menu[b-wa688qv8v9] {
        display: flex;
    }

    .nav-user[b-wa688qv8v9] {
        display: none;
    }

    .fab span[b-wa688qv8v9] {
        display: none;
    }

    .fab[b-wa688qv8v9] {
        padding: 12px;
    }

    main[b-wa688qv8v9] {
        padding: 16px;
    }

    /* Collapse vertical sidebar to horizontal on mobile */
    .page[data-nav-layout="vertical"][b-wa688qv8v9] {
        flex-direction: column;
    }

        .page[data-nav-layout="vertical"] .navbar[b-wa688qv8v9] {
            flex-direction: row;
            width: 100%;
            min-width: unset;
            height: 56px;
            padding: 0 16px;
            border-right: none;
            border-bottom: 1px solid var(--color-border, #e1e4e8);
            overflow-y: visible;
            position: sticky;
            top: 0;
        }

        .page[data-nav-layout="vertical"] .nav-brand[b-wa688qv8v9] {
            padding: 0;
            border-bottom: none;
            margin-bottom: 0;
        }

        .page[data-nav-layout="vertical"] .nav-menu[b-wa688qv8v9] {
            display: none;
        }

        .page[data-nav-layout="vertical"] .nav-user[b-wa688qv8v9] {
            display: none;
        }

        .page[data-nav-layout="vertical"] .user-button[b-wa688qv8v9] {
            border: 1px solid var(--color-border, #e1e4e8);
            border-radius: 9999px;
            padding: 4px 12px;
        }

        .page[data-nav-layout="vertical"] .dropdown-right[b-wa688qv8v9] {
            position: absolute;
            right: 0;
            left: auto;
            bottom: auto;
            margin-top: 4px;
            background: var(--color-surface, white);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }

        .page[data-nav-layout="vertical"] .mobile-menu-toggle[b-wa688qv8v9] {
            display: flex;
        }
}
/* ==========================================
   STICKY COPYRIGHT FOOTER
   ========================================== */
.copyright-bar[b-wa688qv8v9] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 11px;
    color: var(--color-text-secondary, #586069);
    letter-spacing: 0.3px;
}

/* Dark theme support */
[data-theme="dark"] .copyright-bar[b-wa688qv8v9] {
    background: rgba(22, 27, 34, 0.8);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #8b949e;
}

/* Prevent content from hiding behind the footer */
main[b-wa688qv8v9] {
    padding-bottom: 54px;
}

/* Push the FAB above the copyright bar */
.fab-container[b-wa688qv8v9] {
    bottom: 42px;
}

/* ═══════════════════════════════════════════════════════════════
   2FA ENFORCEMENT OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.tfa-enforcement-backdrop[b-wa688qv8v9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9998;
}

.tfa-enforcement-overlay[b-wa688qv8v9] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.tfa-enforcement-dialog[b-wa688qv8v9] {
    background: var(--color-surface, white);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    animation: tfaSlideIn-b-wa688qv8v9 0.3s ease-out;
}

@keyframes tfaSlideIn-b-wa688qv8v9 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tfa-enforcement-header[b-wa688qv8v9] {
    text-align: center;
    padding: 32px 32px 20px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

    .tfa-enforcement-header h2[b-wa688qv8v9] {
        margin: 0 0 8px;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-text-primary, #24292e);
    }

    .tfa-enforcement-header p[b-wa688qv8v9] {
        margin: 0;
        font-size: 14px;
        color: var(--color-text-secondary, #586069);
        line-height: 1.5;
    }

.tfa-enforcement-icon[b-wa688qv8v9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning, #d97706);
    font-size: 28px;
    margin-bottom: 16px;
}

.tfa-enforcement-body[b-wa688qv8v9] {
    padding: 24px 32px;
}

.tfa-enforcement-footer[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid var(--color-border, #e1e4e8);
    background: var(--color-gray-50, #f6f8fa);
    border-radius: 0 0 12px 12px;
}

.tfa-enforcement-error[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 32px;
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

/* ── Start Step: Info Items ── */

.tfa-enforcement-info[b-wa688qv8v9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tfa-info-item[b-wa688qv8v9] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-gray-50, #f6f8fa);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e1e4e8);
}

    .tfa-info-item > i[b-wa688qv8v9] {
        font-size: 24px;
        color: var(--color-primary, #0366d6);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .tfa-info-item strong[b-wa688qv8v9] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-primary, #24292e);
        margin-bottom: 2px;
    }

    .tfa-info-item span[b-wa688qv8v9] {
        font-size: 13px;
        color: var(--color-text-secondary, #586069);
    }

/* ── QR Code Step ── */

.tfa-step-label[b-wa688qv8v9] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary, #0366d6);
    margin: 0 0 4px;
}

.tfa-step-desc[b-wa688qv8v9] {
    font-size: 14px;
    color: var(--color-text-secondary, #586069);
    margin: 0 0 16px;
}

.tfa-enforcement-qr-section[b-wa688qv8v9] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.tfa-qr-container[b-wa688qv8v9] {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: var(--color-surface, white);
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    margin-bottom: 12px;
}

.tfa-qr-image[b-wa688qv8v9] {
    width: 180px;
    height: 180px;
    border-radius: 4px;
}

.tfa-manual-entry[b-wa688qv8v9] {
    text-align: center;
}

.tfa-manual-label[b-wa688qv8v9] {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted, #6a737d);
    margin-bottom: 6px;
}

.tfa-secret-code[b-wa688qv8v9] {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-gray-50, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-text-primary, #24292e);
    word-break: break-all;
    user-select: all;
}

/* ── Verify Code ── */

.tfa-code-row[b-wa688qv8v9] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tfa-code-input[b-wa688qv8v9] {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 2px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 6px;
    text-align: center;
    color: var(--color-text-primary, #24292e);
    background: var(--color-surface, white);
    outline: none;
    transition: border-color 0.15s;
}

    .tfa-code-input:focus[b-wa688qv8v9] {
        border-color: var(--color-primary, #0366d6);
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.12);
    }

    .tfa-code-input[b-wa688qv8v9]::placeholder {
        letter-spacing: 6px;
        color: var(--color-text-muted, #d1d5db);
    }

/* ── Recovery Codes Step ── */

.tfa-enforcement-success[b-wa688qv8v9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success, #16a34a);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

    .tfa-enforcement-success > i[b-wa688qv8v9] {
        font-size: 22px;
    }

.tfa-recovery-section[b-wa688qv8v9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tfa-recovery-warning[b-wa688qv8v9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-warning-light, #fffbeb);
    border: 1px solid var(--color-warning, #fde68a);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-warning-text, #92400e);
    line-height: 1.5;
}

    .tfa-recovery-warning > i[b-wa688qv8v9] {
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--color-warning, #d97706);
    }

.tfa-recovery-grid[b-wa688qv8v9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.tfa-recovery-code[b-wa688qv8v9] {
    display: block;
    padding: 8px 12px;
    background: var(--color-gray-50, #f6f8fa);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    color: var(--color-text-primary, #24292e);
    user-select: all;
}

/* ── Buttons ── */

.tfa-enforcement-overlay .btn[b-wa688qv8v9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.tfa-enforcement-overlay .btn-primary[b-wa688qv8v9] {
    background: var(--color-primary, #0366d6);
    color: var(--color-text-inverse, white);
}

    .tfa-enforcement-overlay .btn-primary:hover:not(:disabled)[b-wa688qv8v9] {
        filter: brightness(1.1);
    }

    .tfa-enforcement-overlay .btn-primary:disabled[b-wa688qv8v9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.tfa-enforcement-overlay .btn-secondary[b-wa688qv8v9] {
    background: var(--color-gray-100, #f6f8fa);
    color: var(--color-text-primary, #24292e);
    border: 1px solid var(--color-border, #e1e4e8);
}

    .tfa-enforcement-overlay .btn-secondary:hover[b-wa688qv8v9] {
        background: var(--color-gray-200, #e1e4e8);
    }

.tfa-enforcement-overlay .btn-lg[b-wa688qv8v9] {
    padding: 12px 28px;
    font-size: 15px;
}

@keyframes tfa-spin-b-wa688qv8v9 {
    to {
        transform: rotate(360deg);
    }
}

.tfa-spin[b-wa688qv8v9] {
    animation: tfa-spin-b-wa688qv8v9 1s linear infinite;
}

/* ── Responsive ── */

@media (max-width: 540px) {
    .tfa-enforcement-dialog[b-wa688qv8v9] {
        max-width: 100%;
    }

    .tfa-enforcement-header[b-wa688qv8v9],
    .tfa-enforcement-body[b-wa688qv8v9],
    .tfa-enforcement-footer[b-wa688qv8v9] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tfa-code-row[b-wa688qv8v9] {
        flex-direction: column;
    }

        .tfa-code-row .btn[b-wa688qv8v9] {
            width: 100%;
            justify-content: center;
        }

    .tfa-enforcement-footer[b-wa688qv8v9] {
        flex-direction: column;
    }

        .tfa-enforcement-footer .btn[b-wa688qv8v9] {
            width: 100%;
            justify-content: center;
        }

    .tfa-recovery-grid[b-wa688qv8v9] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ifv5ad6u0a] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-ifv5ad6u0a] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ifv5ad6u0a] {
    font-size: 1.1rem;
}

.oi[b-ifv5ad6u0a] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-ifv5ad6u0a] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ifv5ad6u0a] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ifv5ad6u0a] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ifv5ad6u0a]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-ifv5ad6u0a]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item[b-ifv5ad6u0a]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

        /* ?? Icon color overrides ??????????????????????????????????
   The ::deep a rule sets color: #d7d7d7 which all child
   elements (including icons) inherit. Edge doesn't let the
   global design-tokens.css override this via specificity, so
   we re-declare icon colors here using the same CSS vars.
   ---------------------------------------------------------- */

        /* Normal */
        .nav-item[b-ifv5ad6u0a]  a i[class*="ph-fill"] {
            color: var(--icon-color-fill, #0366d6) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a i[class*="ph-duotone"] {
            color: var(--icon-color-duotone, #586069) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a i[class*="ph-regular"] {
            color: var(--icon-color-regular, #6b7280) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a i[class*="ph-bold"] {
            color: var(--icon-color-bold, #24292e) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a i[class*="ph-light"] {
            color: var(--icon-color-light, #9ca3af) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a i[class*="ph-thin"] {
            color: var(--icon-color-thin, #d1d5db) !important;
        }

        /* Hover */
        .nav-item[b-ifv5ad6u0a]  a:hover i[class*="ph-fill"] {
            color: var(--icon-color-fill-hover, #0256c7) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a:hover i[class*="ph-duotone"] {
            color: var(--icon-color-duotone-hover, #24292e) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a:hover i[class*="ph-regular"] {
            color: var(--icon-color-regular-hover, #374151) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a:hover i[class*="ph-bold"] {
            color: var(--icon-color-bold-hover, #111827) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a:hover i[class*="ph-light"] {
            color: var(--icon-color-light-hover, #6b7280) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a:hover i[class*="ph-thin"] {
            color: var(--icon-color-thin-hover, #9ca3af) !important;
        }

        /* Active */
        .nav-item[b-ifv5ad6u0a]  a.active i[class*="ph-fill"] {
            color: var(--icon-color-fill-active, #024ea0) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a.active i[class*="ph-duotone"] {
            color: var(--icon-color-duotone-active, #0366d6) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a.active i[class*="ph-regular"] {
            color: var(--icon-color-regular-active, #0366d6) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a.active i[class*="ph-bold"] {
            color: var(--icon-color-bold-active, #0366d6) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a.active i[class*="ph-light"] {
            color: var(--icon-color-light-active, #0366d6) !important;
        }

        .nav-item[b-ifv5ad6u0a]  a.active i[class*="ph-thin"] {
            color: var(--icon-color-thin-active, #0366d6) !important;
        }

@media (min-width: 641px) {
    .navbar-toggler[b-ifv5ad6u0a] {
        display: none;
    }

    .collapse[b-ifv5ad6u0a] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-ifv5ad6u0a] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Shared/Pagination.razor.rz.scp.css */
/* ============================================
   PAGINATION COMPONENT STYLES
   ============================================
   Scoped CSS for Shared/Components/Pagination.razor
   Uses CSS variables from design-tokens.css
   ============================================ */

.pagination-container[b-7kxp8voxae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-gray-50);
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* ═══════ Info Text ═══════ */
.pagination-info[b-7kxp8voxae] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* ═══════ Controls ═══════ */
.pagination-controls[b-7kxp8voxae] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-wrap: wrap;
}

/* ═══════ Page Buttons ═══════ */
.pagination-btn[b-7kxp8voxae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    min-width: 36px;
    height: 36px;
    border: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}

    .pagination-btn:hover:not(:disabled)[b-7kxp8voxae] {
        background: var(--color-gray-100);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .pagination-btn.active[b-7kxp8voxae] {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);
    }

        .pagination-btn.active:hover[b-7kxp8voxae] {
            background: var(--color-primary-hover);
            border-color: var(--color-primary-hover);
        }

    .pagination-btn:disabled[b-7kxp8voxae] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .pagination-btn:focus-visible[b-7kxp8voxae] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Icon sizing inside buttons */
    .pagination-btn i[b-7kxp8voxae] {
        font-size: 14px;
        line-height: 1;
    }

/* ═══════ Ellipsis ═══════ */
.pagination-ellipsis[b-7kxp8voxae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    letter-spacing: 2px;
    user-select: none;
}

/* ═══════ Page Size Selector ═══════ */
.pagination-size[b-7kxp8voxae] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.page-size-select[b-7kxp8voxae] {
    padding: 6px 8px;
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

    .page-size-select:focus[b-7kxp8voxae] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: var(--input-focus-ring);
    }

/* ═══════ Small Size Variant ═══════ */
.pagination-container.pagination-sm[b-7kxp8voxae] {
    padding: var(--spacing-3) var(--spacing-4);
    gap: var(--spacing-3);
}

    .pagination-container.pagination-sm .pagination-info[b-7kxp8voxae] {
        font-size: var(--font-size-xs);
    }

    .pagination-container.pagination-sm .pagination-btn[b-7kxp8voxae] {
        padding: 4px 8px;
        min-width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }

        .pagination-container.pagination-sm .pagination-btn i[b-7kxp8voxae] {
            font-size: 12px;
        }

    .pagination-container.pagination-sm .pagination-ellipsis[b-7kxp8voxae] {
        min-width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }

    .pagination-container.pagination-sm .pagination-size[b-7kxp8voxae] {
        font-size: var(--font-size-xs);
    }

    .pagination-container.pagination-sm .page-size-select[b-7kxp8voxae] {
        padding: 4px 6px;
        font-size: var(--font-size-xs);
    }

/* ═══════ Responsive ═══════ */
@media (max-width: 768px) {
    .pagination-container[b-7kxp8voxae] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-controls[b-7kxp8voxae] {
        justify-content: center;
    }

    .pagination-info[b-7kxp8voxae] {
        text-align: center;
    }

    .pagination-size[b-7kxp8voxae] {
        justify-content: center;
    }
}