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

/* /Components/Chat/AttachmentPreviewItem.razor.rz.scp.css */
/* AttachmentPreviewItem — composer attachment chip */

.attpi[b-3wcq9ezwbk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--surface-2);
    max-width: 220px;
    position: relative;
    transition: border-color 0.15s;
}
.attpi:hover[b-3wcq9ezwbk] { border-color: #6366f1; }

/* Image thumbnail variant */
.attpi--img[b-3wcq9ezwbk] { max-width: 180px; flex-direction: column; padding: 6px; align-items: flex-start; }

.attpi__thumb-wrap[b-3wcq9ezwbk] {
    width: 100%;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-3);
}
.attpi__thumb[b-3wcq9ezwbk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attpi__icon[b-3wcq9ezwbk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.attpi__info[b-3wcq9ezwbk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.attpi--img .attpi__info[b-3wcq9ezwbk] { width: 100%; }

.attpi__name[b-3wcq9ezwbk] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attpi__size[b-3wcq9ezwbk] {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

.attpi__remove[b-3wcq9ezwbk] {
    width: 20px; height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.attpi__remove:hover[b-3wcq9ezwbk] { background: rgba(239,68,68,0.12); color: #ef4444; }
.attpi__remove svg[b-3wcq9ezwbk] { width: 12px; height: 12px; }

/* Position the remove button top-right for the image variant */
.attpi--img .attpi__remove[b-3wcq9ezwbk] {
    position: absolute;
    top: 5px; right: 5px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border-radius: 50%;
}
.attpi--img .attpi__remove:hover[b-3wcq9ezwbk] { background: rgba(239,68,68,0.85); }
/* /Components/Chat/FileTypeIcon.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   FileTypeIcon — high-fidelity SVG file type icons
   ═══════════════════════════════════════════════════════ */

.fti[b-k34jle0b2q] {
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;       /* removes inline baseline gap */
    vertical-align: middle;
}

/* Generic (light page) adapts in dark mode */
.fti--generic rect:first-child[b-k34jle0b2q],
.fti--text    rect:first-child[b-k34jle0b2q] { fill: #E2E8F0; }
.fti--generic polygon:first-of-type[b-k34jle0b2q],
.fti--text    polygon:first-of-type[b-k34jle0b2q] { fill: #CBD5E1; }

:root[data-theme="dark"] .fti--generic rect:first-child[b-k34jle0b2q],
:root[data-theme="dark"] .fti--text    rect:first-child[b-k34jle0b2q] { fill: #334155; }
:root[data-theme="dark"] .fti--generic polygon:first-of-type[b-k34jle0b2q],
:root[data-theme="dark"] .fti--text    polygon:first-of-type[b-k34jle0b2q] { fill: #1E293B; }

/* All branded icons (Excel, Word, PPT, PDF, CSV, ZIP, Video, Audio, Image)
   are fully self-coloured — no additional overrides needed. */

/* /Components/Chat/FullScreenFilePreviewDialog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FULL-SCREEN FILE PREVIEW DIALOG  — Microsoft Teams style
   ═══════════════════════════════════════════════════════════════ */

/* Backdrop */
.fspd-backdrop[b-oki59e0rri] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: stretch;
    justify-content: center;
    animation: fspd-fade-in-b-oki59e0rri 0.18s ease both;
}

@keyframes fspd-fade-in-b-oki59e0rri {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Shell */
.fspd-shell[b-oki59e0rri] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    margin: 16px;
    border-radius: 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: fspd-slide-in-b-oki59e0rri 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes fspd-slide-in-b-oki59e0rri {
    from { transform: translateY(24px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* ── Header ── */
.fspd-header[b-oki59e0rri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    flex-shrink: 0;
    gap: 12px;
}

.fspd-header-left[b-oki59e0rri] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.fspd-file-icon[b-oki59e0rri] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fspd-title[b-oki59e0rri] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fspd-header-actions[b-oki59e0rri] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.fspd-action-btn[b-oki59e0rri] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.fspd-action-btn:hover[b-oki59e0rri] { background: rgba(255,255,255,0.3); }
.fspd-action-btn svg[b-oki59e0rri] { width: 15px; height: 15px; }

.fspd-close-btn[b-oki59e0rri] {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
}
.fspd-close-btn:hover[b-oki59e0rri] { background: rgba(239,68,68,0.75); }
.fspd-close-btn svg[b-oki59e0rri] { width: 16px; height: 16px; }

/* ── Body ── */
.fspd-body[b-oki59e0rri] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-3);
    min-height: 0;
}

/* Image */
.fspd-img-wrap[b-oki59e0rri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.fspd-img[b-oki59e0rri] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* PDF / iframe */
.fspd-iframe[b-oki59e0rri] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Plain text */
.fspd-text[b-oki59e0rri] {
    width: 100%; height: 100%;
    margin: 0;
    padding: 20px 24px;
    box-sizing: border-box;
    overflow: auto;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--surface-2);
}

/* Unsupported / loading state */
.fspd-unsupported[b-oki59e0rri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
}
.fspd-unsupported-icon[b-oki59e0rri] {
    width: 56px; height: 56px;
    opacity: 0.4;
    color: var(--text-secondary);
}
.fspd-unsupported p[b-oki59e0rri] {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-secondary);
}
.fspd-dl-link[b-oki59e0rri] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 8px;
    background: #4f46e5;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    margin-top: 4px;
}
.fspd-dl-link:hover[b-oki59e0rri] { background: #4338ca; }

/* Spinner */
.fspd-spinner[b-oki59e0rri] {
    width: 36px; height: 36px;
    border: 3px solid var(--border-primary);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: fspd-spin-b-oki59e0rri 0.7s linear infinite;
}
@keyframes fspd-spin-b-oki59e0rri {
    to { transform: rotate(360deg); }
}

/* Dark theme */
:root[data-theme="dark"] .fspd-shell[b-oki59e0rri] { border-color: var(--border-secondary); }
:root[data-theme="dark"] .fspd-text[b-oki59e0rri]  { background: #1a1a2e; }
/* /Components/Chat/GroupAvatarMosaic.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   GROUP AVATAR MOSAIC — Teams-style member grid
   ═══════════════════════════════════════════════════════ */

.gam[b-7wqq1tfmtj] {
    display: grid;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-3);
}

/* ── Size variants ── */
.gam--sm[b-7wqq1tfmtj]  { width: 36px; height: 36px; }
.gam--md[b-7wqq1tfmtj]  { width: 40px; height: 40px; }
.gam--lg[b-7wqq1tfmtj]  { width: 64px; height: 64px; }

/* ── Layout variants ── */
.gam--one[b-7wqq1tfmtj]   { grid-template-columns: 1fr; }
.gam--two[b-7wqq1tfmtj]   { grid-template-columns: 1fr 1fr; }
/* Three: 2 cells on top row, 1 centered on bottom */
.gam--three[b-7wqq1tfmtj] { grid-template-columns: 1fr 1fr; }

/* ── Cells ── */
.gam__cell[b-7wqq1tfmtj] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover);
    min-width: 0;
    min-height: 0;
}

/* In "three" layout, the third cell spans both columns and centres itself */
.gam--three .gam__cell:nth-child(3)[b-7wqq1tfmtj] {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
}

.gam__img[b-7wqq1tfmtj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gam__initials[b-7wqq1tfmtj] {
    font-size: 0.6em;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

/* ── Fallback (no members / empty group) ── */
.gam--fallback[b-7wqq1tfmtj] {
    align-items: center;
    justify-content: center;
    background: var(--surface-hover);
    border-radius: 50%;
}
.gam__hash[b-7wqq1tfmtj] {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ── Dark mode: already inherits CSS vars, no extra rules needed ── */
/* /Components/Chat/MessageAttachmentList.razor.rz.scp.css */
/* MessageAttachmentList — sent-message attachment display */

.mal[b-rw720z17nt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* ── Image card ── */
.mal__img-card[b-rw720z17nt] {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    background: var(--surface-2);
    max-width: 240px;
}

.mal__img-wrap[b-rw720z17nt] {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    min-height: 80px;
    max-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
}
.mal__img[b-rw720z17nt] {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s;
}
.mal__img-wrap:hover .mal__img[b-rw720z17nt] { opacity: 0.82; }

.mal__img-overlay[b-rw720z17nt] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(0,0,0,0.3);
    transition: opacity 0.15s;
    color: #fff;
}
.mal__img-overlay svg[b-rw720z17nt] { width: 28px; height: 28px; }
.mal__img-wrap:hover .mal__img-overlay[b-rw720z17nt] { opacity: 1; }

.mal__img-footer[b-rw720z17nt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    gap: 6px;
}

.mal__img-actions[b-rw720z17nt] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ── File card ── */
.mal__file-card[b-rw720z17nt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--surface-2);
    max-width: 320px;
}

.mal__file-icon[b-rw720z17nt] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mal__file-info[b-rw720z17nt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mal__filename[b-rw720z17nt] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mal__filesize[b-rw720z17nt] {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

.mal__file-actions[b-rw720z17nt] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ── Shared action button ── */
.mal__action-btn[b-rw720z17nt] {
    width: 28px; height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.mal__action-btn:hover[b-rw720z17nt] { background: var(--surface-hover); color: #4f46e5; }
.mal__action-btn svg[b-rw720z17nt] { width: 14px; height: 14px; }

.mal__action-btn--dim[b-rw720z17nt] { opacity: 0.35; cursor: not-allowed; }
.mal__action-btn--dim:hover[b-rw720z17nt] { background: transparent; color: var(--text-secondary); }

:root[data-theme="dark"] .mal__img-card[b-rw720z17nt],
:root[data-theme="dark"] .mal__file-card[b-rw720z17nt] {
    border-color: var(--border-secondary);
}
/* /Components/Help/AiAssistant.razor.rz.scp.css */
/* AI Assistant styles moved to app.css to avoid CSS isolation breaking position:fixed */
/* /Components/Help/HelpPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   HELP PANEL — Slide-out drawer (pure CSS transitions, no JS)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Backdrop ──────────────────────────────────────────────────────── */
.help-panel-backdrop[b-kbil7o5eph] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1998;
    animation: hpFadeIn-b-kbil7o5eph 200ms ease;
}

@keyframes hpFadeIn-b-kbil7o5eph {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Drawer shell ────────────────────────────────────────────────────── */
.help-panel[b-kbil7o5eph] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(300px, 38vw, 520px);
    background: var(--bg-elevated);
    border-left: 1px solid var(--border-primary);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.help-panel--open[b-kbil7o5eph] {
    transform: translateX(0);
}

/* ── Header ────────────────────────────────────────────────────────── */
.help-panel__header[b-kbil7o5eph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
    background: linear-gradient(135deg,
        rgba(var(--gold-rgb), 0.06) 0%,
        transparent 100%);
    flex-shrink: 0;
}

.help-panel__header-left[b-kbil7o5eph] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-panel__icon[b-kbil7o5eph] {
    font-size: 1.1rem;
}

.help-panel__title[b-kbil7o5eph] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.help-panel__close[b-kbil7o5eph] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
}

.help-panel__close:hover[b-kbil7o5eph] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* ── Scrollable body ─────────────────────────────────────────────────── */
.help-panel__body[b-kbil7o5eph] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    scroll-behavior: smooth;
}

/* ── Empty / loading state ───────────────────────────────────────────── */
.help-panel__state[b-kbil7o5eph] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-align: center;
}

.help-panel__spinner[b-kbil7o5eph] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: hpSpin-b-kbil7o5eph 0.7s linear infinite;
}

@keyframes hpSpin-b-kbil7o5eph {
    to { transform: rotate(360deg); }
}

.help-panel__browse-link[b-kbil7o5eph] {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.help-panel__browse-link:hover[b-kbil7o5eph] {
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.help-panel__footer[b-kbil7o5eph] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-primary);
    background: var(--surface-2);
    flex-shrink: 0;
}

.help-panel__footer-link[b-kbil7o5eph] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-info);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.help-panel__footer-link:hover[b-kbil7o5eph] {
    color: var(--text-primary);
    text-decoration: none;
}

/* ── Compact doc styles inside the panel (narrower than full help pages) ── */
.help-panel__doc .md-step[b-kbil7o5eph] {
    padding: 0.875rem 1rem;
}

.help-panel__doc .md-h2[b-kbil7o5eph] { font-size: 1rem; }
.help-panel__doc .md-h3[b-kbil7o5eph] { font-size: 0.9375rem; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .help-panel[b-kbil7o5eph] {
        width: 100%;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
#blazor-error-ui[b-xk27nazszg] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xk27nazszg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.language-selector[b-qtu8713pbe] {
    position: relative;
    display: inline-block;
}

.language-selector__btn[b-qtu8713pbe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--surface-1);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.language-selector__btn:hover[b-qtu8713pbe] {
    background: var(--surface-hover);
    border-color: var(--border-secondary);
}

.language-selector__code[b-qtu8713pbe] {
    letter-spacing: .03em;
}

.language-selector__menu[b-qtu8713pbe] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 420px;
    overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.language-selector__search[b-qtu8713pbe] {
    margin: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}

.language-selector__search:focus[b-qtu8713pbe] {
    border-color: var(--border-secondary);
}

.language-selector__list[b-qtu8713pbe] {
    overflow-y: auto;
    padding: 4px 6px 10px;
}

.language-selector__item[b-qtu8713pbe] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}

.language-selector__item:hover[b-qtu8713pbe] {
    background: var(--surface-hover);
}

.language-selector__item.is-active[b-qtu8713pbe] {
    background: var(--surface-3);
    font-weight: 600;
}

.language-selector__native[b-qtu8713pbe] {
    font-size: 14px;
}

.language-selector__english[b-qtu8713pbe] {
    color: var(--text-secondary);
    font-size: 12px;
}

.language-selector__tag[b-qtu8713pbe] {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 1px 5px;
}

:root[data-theme="dark"] .language-selector__menu[b-qtu8713pbe] {
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-l1tre1f2iu] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-l1tre1f2iu] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}

.main--expanded[b-l1tre1f2iu] {
    margin-left: 0;
}

.sidebar[b-l1tre1f2iu] {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08);
    position: relative;
    width: 210px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.sidebar-content[b-l1tre1f2iu] {
    overflow: hidden;
    height: 100%;
}

.sidebar--collapsed[b-l1tre1f2iu] {
    width: 80px;
}

.sidebar[b-l1tre1f2iu]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(var(--gold-secondary-rgb), 0.2) 0%, 
        rgba(var(--gold-secondary-rgb), 0.05) 50%, 
        rgba(var(--gold-secondary-rgb), 0.2) 100%);
}

/* Sidebar Toggle Button */
.sidebar-toggle[b-l1tre1f2iu] {
    position: absolute;
    top: 13px;
    right: -14px;
    width: 30px;
    height: 30px;
    background: var(--accent-gradient);
    border: 2px solid #ffffff; /*var(--bg-primary);*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3), 0 0 20px rgba(var(--gold-rgb), 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-toggle:hover[b-l1tre1f2iu] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.4), 0 0 30px rgba(var(--gold-rgb), 0.3);
}

.sidebar-toggle:active[b-l1tre1f2iu] {
    transform: scale(0.95);
}

.sidebar-toggle svg[b-l1tre1f2iu] {
    width: 14px;
    height: 14px;
    color: white;
}

.chevron-icon path[b-l1tre1f2iu] {
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-row[b-l1tre1f2iu] {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-primary);
    justify-content: flex-end;
    height: 49px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-row__left[b-l1tre1f2iu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-row__right[b-l1tre1f2iu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.top-row__icon-btn[b-l1tre1f2iu],
.top-row__right[b-l1tre1f2iu]  .top-row__icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border: 1.5px solid var(--text-secondary);
    opacity: 0.85;
    background: transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.top-row__icon-btn:hover[b-l1tre1f2iu],
.top-row__right[b-l1tre1f2iu]  .top-row__icon-btn:hover {
    color: var(--gold-500, #d4a017);
    border-color: var(--gold-400, #d4a017);
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.08);
    opacity: 1;
    transform: scale(1.05);
    text-decoration: none;
}

.top-row__icon-btn svg[b-l1tre1f2iu],
.top-row__right[b-l1tre1f2iu]  .top-row__icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Active state — MyDownload page indicator (blue) */
.top-row__icon-btn.active[b-l1tre1f2iu],
.top-row__right[b-l1tre1f2iu]  .top-row__icon-btn.active {
    color: #4a9eff !important;
    background: rgba(13, 110, 253, 0.1) !important;
    border-color: #4a9eff !important;
    border-width: 1.5px;
    opacity: 1;
}

    .top-row[b-l1tre1f2iu]  a, .top-row[b-l1tre1f2iu]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
        color: var(--text-primary);
        font-weight: 500;
    }

    .top-row[b-l1tre1f2iu]  a:hover, .top-row[b-l1tre1f2iu]  .btn-link:hover {
        text-decoration: none;       /* pill buttons — no underline */
        color: var(--text-link-hover);
    }

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

/* Hidden checkbox for mobile nav toggle */
.mobile-nav-toggle[b-l1tre1f2iu] {
    display: none;
    appearance: none;
    position: absolute;
}

/* Sidebar backdrop for mobile */
.sidebar-backdrop[b-l1tre1f2iu] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    cursor: pointer;
}

/* Mobile brand logo — shown next to hamburger on small screens */
.mobile-brand-link[b-l1tre1f2iu] {
    display: none;
    align-items: center;
    text-decoration: none;
}

.mobile-brand-logo[b-l1tre1f2iu] {
    height: 28px;
    width: auto;
    object-fit: contain;
}

/* Hamburger button for mobile */
.hamburger-mobile[b-l1tre1f2iu] {
    display: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    padding: 6px;
    border: 1px solid var(--border-primary);
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hamburger-mobile:hover[b-l1tre1f2iu] {
    background: rgba(var(--gold-rgb), 0.08);
    border-color: var(--gold-400, #d4a017);
}

.hamburger-icon[b-l1tre1f2iu] {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28180, 180, 180, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

@media (max-width: 640.98px) {
    .page[b-l1tre1f2iu] {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar[b-l1tre1f2iu] {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 210px;
        transform: translateX(-100%);
        z-index: 1050;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar--collapsed[b-l1tre1f2iu] {
        width: 210px;
    }

    .sidebar-toggle[b-l1tre1f2iu] {
        display: none;
    }

    .mobile-nav-toggle:checked ~ .sidebar[b-l1tre1f2iu] {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .mobile-nav-toggle:checked ~ .sidebar-backdrop[b-l1tre1f2iu] {
        display: block;
    }

    .hamburger-mobile[b-l1tre1f2iu] {
        display: flex;
    }

    .mobile-brand-link[b-l1tre1f2iu] {
        display: flex;
    }

    main[b-l1tre1f2iu] {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .content[b-l1tre1f2iu] {
        overflow-y: auto;
        flex: 1;
    }

    .top-row[b-l1tre1f2iu] {
        justify-content: space-between;
        flex-shrink: 0;
    }

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

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

    .sidebar[b-l1tre1f2iu] {
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

    /* Hide mobile-only elements on desktop */
    .hamburger-mobile[b-l1tre1f2iu] {
        display: none !important;
    }

    .sidebar-backdrop[b-l1tre1f2iu] {
        display: none !important;
    }

    .top-row__left[b-l1tre1f2iu] {
        display: none;
    }
}

#blazor-error-ui[b-l1tre1f2iu] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* ═══════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR — NAV ICON ALIGNMENT
   ─────────────────────────────────────────────────────────────
   These rules MUST live here in MainLayout.razor.css, NOT in
   NavMenu.razor.css.

   WHY: Blazor's CSS isolation rewriter adds the component's scope
   attribute to every simple selector in a rule. Rules in
   NavMenu.razor.css that reference .sidebar--collapsed get
   NavMenu's scope added to it, e.g.
     .sidebar--collapsed[b-nav] .nav-item[b-nav] ...
   But .sidebar--collapsed is applied by JavaScript to a <div>
   rendered by MainLayout, so that element carries MainLayout's
   scope attribute — never NavMenu's. The selector never matches.

   By placing these rules here, .sidebar--collapsed gets
   MainLayout's scope (which it actually has), and ::deep removes
   the scope restriction for all NavMenu-rendered descendants.
   ═══════════════════════════════════════════════════════════════ */

/* Nav-link (NavLink → <a>) */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
}

/* Nav-link (expandable <button>) */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-link--expandable {
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
}

    .sidebar--collapsed[b-l1tre1f2iu]  .nav-link--expandable .nav-icon {
        margin-left: 15px !important;
    }


/* Icon wrapper — guarantee flex centering in both axes */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
}

/* Hide text labels */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-text {
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
}

/* Hide chevron arrow */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-chevron {
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
}

/* Remove scrollable padding so icons fill the full 80 px width */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-scrollable {
    padding: 0;
}

/* Hide sub-menus */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-submenu {
    display: none;
}

/* Sidebar-header: centre the favicon logo */
.sidebar--collapsed[b-l1tre1f2iu]  .sidebar-header {
    padding: 6px 0;
}

.sidebar--collapsed[b-l1tre1f2iu]  .brand-enhanced {
    justify-content: center;
    gap: 0;
}

/* Full logo → hidden; favicon → visible */
.sidebar--collapsed[b-l1tre1f2iu]  .brand-logo--full {
    max-width: 0;
    opacity: 0;
}

.sidebar--collapsed[b-l1tre1f2iu]  .brand-logo--favicon {
    max-width: 36px;
    opacity: 1;
}

.sidebar--collapsed[b-l1tre1f2iu]  .brand-title {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
}

/* Section labels */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-section-label .nav-text {
    opacity: 0;
}

/* Tooltip: show nav-item title on hover when collapsed */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-item {
    position: relative;
}

.sidebar--collapsed[b-l1tre1f2iu]  .nav-item::before {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar--collapsed[b-l1tre1f2iu]  .nav-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(12px);
}

/* Hover: scale instead of slide when collapsed */
.sidebar--collapsed[b-l1tre1f2iu]  .nav-link:hover,
.sidebar--collapsed[b-l1tre1f2iu]  .nav-link--expandable:hover {
    transform: translateX(0) scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   HOVER EXPAND — sidebar temporarily floats open on mouse-enter.
   Uses position:absolute so main content never shifts.
   Desktop only — mobile uses the toggle+backdrop pattern.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu] {
        width: 210px;
        position: absolute;
        height: 100vh;
        z-index: 99;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.25), 2px 0 8px rgba(0, 0, 0, 0.12);
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Restore nav-link horizontal layout */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-link {
        justify-content: flex-start;
        padding: 0 0.875rem;
        gap: 1rem;
    }

    /* Restore expandable button layout */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-link--expandable {
        justify-content: flex-start;
        padding: 0 0.875rem;
        gap: 1rem;
    }

    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-link--expandable .nav-icon {
        margin-left: 0 !important;
    }

    /* Restore icon — clear forced centering margins */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-icon {
        margin: 0 !important;
    }

    /* Restore nav-text visibility */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-text {
        opacity: 1;
        width: auto;
        min-width: 0;
        overflow: visible;
    }

    /* Restore chevron visibility */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-chevron {
        opacity: 1;
        width: auto;
        min-width: 0;
        overflow: visible;
    }

    /* Restore scrollable padding */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-scrollable {
        padding: 0 0.5rem;
    }

    /* Show sub-menus */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-submenu {
        display: block;
    }

    /* Restore sidebar-header padding */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .sidebar-header {
        padding: 6px 0.875rem;
    }

    /* Restore brand to horizontal layout */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .brand-enhanced {
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .brand-logo--full {
        max-width: 140px;
        opacity: 1;
    }

    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .brand-logo--favicon {
        max-width: 0;
        opacity: 0;
    }

    /* Restore brand title */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .brand-title {
        opacity: 1;
        max-width: 200px;
        overflow: hidden;
    }

    /* Restore section label text */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-section-label .nav-text {
        opacity: 1;
    }

    /* Suppress tooltip pseudo-elements — text is already visible */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-item::before {
        display: none !important;
    }

    /* Restore slide-in hover effect */
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-link:hover,
    .sidebar--collapsed.sidebar--hover-expanded[b-l1tre1f2iu]  .nav-link--expandable:hover {
        transform: translateX(4px);
    }

    }

    #blazor-error-ui .dismiss[b-l1tre1f2iu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ═══════════════════════════════════════════════════════════════════
   Expandable pill buttons for top-row (Chat, Downloads, Help).
   ─ Default  : compact 36px pill — icon only, blends with top-row bg
   ─ Hover    : expands right, label fades in, accent colour applied
   ─ Active   : accent tint so user knows which page they're on
   ─ No underline ever
   Works identically in light and dark themes via CSS variables.
   ═══════════════════════════════════════════════════════════════════ */

[b-l1tre1f2iu] .top-pill-btn,
[b-l1tre1f2iu] .chat-pill-btn {
    /* Layout */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    text-decoration: none !important;  /* never underline */
    cursor: pointer;

    /* Collapsed size — icon only */
    height: 36px;
    max-width: 36px;
    border-radius: 999px;
    overflow: hidden;
    padding: 0 9px;

    /* Colour — inherits top-row theme */
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-secondary, rgba(148,163,184,0.3));
    opacity: 0.9;

    /* Smooth expand */
    transition:
        max-width    0.32s cubic-bezier(0.4, 0, 0.2, 1),
        gap          0.32s ease,
        padding      0.32s ease,
        background   0.2s ease,
        color        0.2s ease,
        border-color 0.2s ease,
        opacity      0.2s ease;
}

/* Hover: pill expands + accent colour */
[b-l1tre1f2iu] .top-pill-btn:hover,
[b-l1tre1f2iu] .chat-pill-btn:hover {
    max-width: 180px;
    gap: 7px;
    padding: 0 14px 0 10px;
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.12);
    color: var(--gold-500, #d4a017);
    border-color: var(--gold-400, #d4a017);
    opacity: 1;
    text-decoration: none !important;
}

/* Active page state — pill stays fully expanded (same as hover) */
[b-l1tre1f2iu] .top-pill-btn--active,
[b-l1tre1f2iu] .top-pill-btn.active,
[b-l1tre1f2iu] .chat-pill-btn--active,
[b-l1tre1f2iu] .chat-pill-btn.active {
    max-width: 180px;
    gap: 7px;
    padding: 0 14px 0 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.6);
    opacity: 1;
}
[b-l1tre1f2iu] .top-pill-btn--active:hover,
[b-l1tre1f2iu] .top-pill-btn.active:hover,
[b-l1tre1f2iu] .chat-pill-btn--active:hover,
[b-l1tre1f2iu] .chat-pill-btn.active:hover {
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.12);
    color: var(--gold-500, #d4a017);
    border-color: var(--gold-400, #d4a017);
}

/* Icon — fixed 18×18, never changes */
[b-l1tre1f2iu] .top-pill-btn__icon,
[b-l1tre1f2iu] .chat-pill-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
[b-l1tre1f2iu] .top-pill-btn__icon svg,
[b-l1tre1f2iu] .chat-pill-btn__icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Label — hidden until hover opens the pill */
[b-l1tre1f2iu] .top-pill-btn__label,
[b-l1tre1f2iu] .chat-pill-btn__label {
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    opacity: 0;
    transform: translateX(-5px);
    transition:
        opacity   0.22s ease 0.08s,
        transform 0.22s ease 0.08s;
    pointer-events: none;
}
/* Hover: fade in with slight delay */
[b-l1tre1f2iu] .top-pill-btn:hover .top-pill-btn__label,
[b-l1tre1f2iu] .chat-pill-btn:hover .chat-pill-btn__label {
    opacity: 1;
    transform: translateX(0);
}
/* Active page: label visible immediately, no delay */
[b-l1tre1f2iu] .top-pill-btn--active .top-pill-btn__label,
[b-l1tre1f2iu] .top-pill-btn.active .top-pill-btn__label,
[b-l1tre1f2iu] .chat-pill-btn--active .chat-pill-btn__label,
[b-l1tre1f2iu] .chat-pill-btn.active .chat-pill-btn__label {
    opacity: 1;
    transform: translateX(0);
    transition: none;
}

/* Badge wrapper — overflow:visible so the badge is never clipped by the pill's overflow:hidden */
[b-l1tre1f2iu] .chat-pill-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    overflow: visible;
}
/* Positioned relative to .chat-pill-wrap (overflow:visible), never clipped */
[b-l1tre1f2iu] .chat-pill-btn__badge {
    position: absolute;
    top: -4px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bg-elevated, var(--bg-primary, #0f172a));
    z-index: 3;
    animation: badge-pop-b-l1tre1f2iu 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-pop-b-l1tre1f2iu {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════
   SIDEBAR HEADER & BRAND
   ═══════════════════════════════════════ */
.sidebar-header[b-mrbl78nwa7] {
    padding: 6px 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.5rem;
}

.brand-container[b-mrbl78nwa7] {
    display: flex;
    align-items: center;
}

.navbar-brand[b-mrbl78nwa7] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    margin-right: 15px !important;
}

.brand-enhanced[b-mrbl78nwa7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Full logo — shown when expanded, hidden when collapsed */
.brand-logo--full[b-mrbl78nwa7] {
    height: 29px;
    width: auto;
    /*max-width: 140px;*/
    min-width: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(var(--gold-rgb), 0.3));
    opacity: 1;
    overflow: hidden;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Favicon logo — hidden when expanded, shown when collapsed */
.brand-logo--favicon[b-mrbl78nwa7] {
    height: 28px;
    width: 36px;
    max-width: 0;
    min-width: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(var(--gold-rgb), 0.3));
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* .sidebar--collapsed brand logo rules — moved to MainLayout.razor.css */

/* Collapsed sidebar-header and brand rules moved to MainLayout.razor.css */

/* Brand title text — shown when expanded, hidden when collapsed */
.brand-title[b-mrbl78nwa7] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity 0.2s ease, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 200px;
    letter-spacing: 0.02em;
}

/* .sidebar--collapsed .brand-title — moved to MainLayout.razor.css */


/* ═══════════════════════════════════════
   MOBILE TOGGLE
   ═══════════════════════════════════════ */
.navbar-toggler[b-mrbl78nwa7] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.navbar-toggler:checked[b-mrbl78nwa7] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

/* ═══════════════════════════════════════
   NAV SCROLLABLE
   ═══════════════════════════════════════ */
.nav-scrollable[b-mrbl78nwa7] {
    height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.5rem;
}

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

.nav-scrollable[b-mrbl78nwa7]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.nav-scrollable[b-mrbl78nwa7]::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), 0.3);
    border-radius: 10px;
}

.nav-scrollable[b-mrbl78nwa7]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--gold-rgb), 0.5);
}

/* ═══════════════════════════════════════
   NAV ITEMS
   ═══════════════════════════════════════ */
.nav-item[b-mrbl78nwa7] {
    font-size: 0.9375rem;
    padding: 2px 0;
    position: relative;
}

.nav-item:first-of-type[b-mrbl78nwa7] {
    padding-top:0px;
}

.nav-item:last-of-type[b-mrbl78nwa7] {
    padding-bottom: 1rem;
}

.nav-item[b-mrbl78nwa7]  .nav-link {
    color: rgba(255, 255, 255, 0.8);
    background: none;
    border: none;
    border-radius: 10px;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 0.875rem;
    width: 100%;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    gap: 1rem;
}

.nav-item[b-mrbl78nwa7]  .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--accent-gradient);
    border-radius: 0 4px 4px 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item[b-mrbl78nwa7]  .nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.15), rgba(var(--gold-secondary-rgb), 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.nav-icon[b-mrbl78nwa7] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.nav-icon svg[b-mrbl78nwa7] {
    width: 20px;
    height: 20px;
}

.nav-text[b-mrbl78nwa7] {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sidebar--collapsed .nav-text[b-mrbl78nwa7] {
    /* Moved to MainLayout.razor.css — see comment there for why */
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
}

/* .sidebar--collapsed .nav-scrollable — moved to MainLayout.razor.css */

/* .sidebar--collapsed nav-link centering — moved to MainLayout.razor.css */

/* Active State */
.nav-item[b-mrbl78nwa7]  a.active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    font-weight: 600;
}

.nav-item[b-mrbl78nwa7]  a.active::before {
    height: 60%;
}

.nav-item[b-mrbl78nwa7]  a.active::after {
    opacity: 1;
}

.nav-item[b-mrbl78nwa7]  a.active .nav-icon {
    transform: scale(1.1);
    color: var(--gold-500);
}

/* Hover State */
.nav-item[b-mrbl78nwa7]  .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(4px);
}

/* .sidebar--collapsed nav-link hover — moved to MainLayout.razor.css */

.nav-item[b-mrbl78nwa7]  .nav-link:hover .nav-icon {
    transform: scale(1.15);
    color: var(--gold-500);
}

.nav-item[b-mrbl78nwa7]  .nav-link:hover::after {
    opacity: 0.5;
}

/* ═══════════════════════════════════════
   NAV DIVIDER & SECTION LABEL
   ═══════════════════════════════════════ */
.nav-divider[b-mrbl78nwa7] {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    margin: 0.5rem 0;
}

.nav-section-label[b-mrbl78nwa7] {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}

/* .sidebar--collapsed .nav-section-label — moved to MainLayout.razor.css */

/* ═══════════════════════════════════════
   TOOLTIPS FOR COLLAPSED STATE
   Moved to MainLayout.razor.css (::deep rules)
   ═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 640.98px) {
    .sidebar-header[b-mrbl78nwa7] {
        padding: 1rem;
    }

    .navbar-toggler[b-mrbl78nwa7] {
        display: none;
    }

    .nav-scrollable[b-mrbl78nwa7] {
        display: block;
        height: calc(100vh - 60px);
        max-height: none;
        overflow-y: auto;
    }

    /* Override collapsed state on mobile — always show full content */
    .sidebar--collapsed .brand-content[b-mrbl78nwa7],
    .sidebar--collapsed .nav-text[b-mrbl78nwa7] {
        opacity: 1;
        width: auto;
    }

    .sidebar--collapsed .brand-title[b-mrbl78nwa7] {
        opacity: 1;
        max-width: 200px;
    }

    .sidebar--collapsed .brand-logo--full[b-mrbl78nwa7] {
        max-width: none;
        opacity: 1;
    }

    .sidebar--collapsed .brand-logo--favicon[b-mrbl78nwa7] {
        max-width: 0;
        opacity: 0;
    }

    .sidebar--collapsed .brand-enhanced[b-mrbl78nwa7] {
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .sidebar--collapsed .sidebar-header[b-mrbl78nwa7] {
        padding: 1rem;
    }

    .sidebar--collapsed .nav-item[b-mrbl78nwa7]  .nav-link {
        justify-content: flex-start;
        padding: 0 0.875rem;
        gap: 1rem;
    }

    .sidebar--collapsed .nav-chevron[b-mrbl78nwa7] {
        opacity: 1;
        width: auto;
        min-width: auto;
        overflow: visible;
    }

    .sidebar--collapsed .nav-link--expandable[b-mrbl78nwa7] {
        justify-content: flex-start;
        padding: 0 0.875rem;
        gap: 1rem;
    }

    .sidebar--collapsed .nav-submenu[b-mrbl78nwa7] {
        display: block;
    }

    .nav-item[b-mrbl78nwa7]  .nav-link:hover {
        transform: translateX(0);
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-mrbl78nwa7] {
        display: none;
    }
}

/* ═══════════════════════════════════════
   EXPANDABLE MENU & SUBMENU
   ═══════════════════════════════════════ */
.nav-link--expandable[b-mrbl78nwa7] {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    height: 42px;
    padding: 0 0.875rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9375rem;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-family: inherit;
}

.nav-link--expandable:hover[b-mrbl78nwa7] {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(4px);
}

.nav-link--expandable:hover .nav-icon[b-mrbl78nwa7] {
    transform: scale(1.15);
    color: var(--gold-500);
}

.nav-link--expandable.expanded[b-mrbl78nwa7] {
    background: rgba(255, 255, 255, 0.06);
    color: white;
}

.nav-link--expandable:focus-visible[b-mrbl78nwa7] {
    outline: 2px solid rgba(var(--gold-rgb), 0.5);
    outline-offset: 2px;
}

.nav-chevron[b-mrbl78nwa7] {
    margin-left: auto;
    display: flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-chevron svg[b-mrbl78nwa7] {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.4);
}

.nav-link--expandable.expanded .nav-chevron[b-mrbl78nwa7] {
    transform: rotate(180deg);
}

/* .sidebar--collapsed nav-chevron and expandable — moved to MainLayout.razor.css */

/* Submenu container */
.nav-submenu[b-mrbl78nwa7] {
    padding-left: 0.75rem;
    animation: submenuSlideDown-b-mrbl78nwa7 0.25s ease-out;
    overflow: hidden;
}

@keyframes submenuSlideDown-b-mrbl78nwa7 {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
}

.nav-item--sub[b-mrbl78nwa7] {
    padding: 1px 0;
}

.nav-item--sub[b-mrbl78nwa7]  .nav-link--sub {
    height: 36px;
    font-size: 0.875rem;
    padding-left: 1rem !important;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 8px;
}

.nav-item--sub[b-mrbl78nwa7]  .nav-link--sub .nav-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.nav-item--sub[b-mrbl78nwa7]  .nav-link--sub .nav-icon svg {
    width: 16px;
    height: 16px;
}

.nav-item--sub[b-mrbl78nwa7]  a.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-item--sub[b-mrbl78nwa7]  a.active .nav-icon {
    color: var(--gold-500);
}

/* .sidebar--collapsed .nav-submenu — moved to MainLayout.razor.css */

/* ── Chat nav badge ─────────────────────────────────────────────── */
[b-mrbl78nwa7] .nav-chat-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
    pointer-events: none;
}

/* ---------------------------------------
   HELP � NEW-TAB LINK
   --------------------------------------- */
.nav-link--newtab[b-mrbl78nwa7] {
    text-decoration: none;
}

.nav-newtab-icon[b-mrbl78nwa7] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 1.55;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-link--newtab:hover .nav-newtab-icon[b-mrbl78nwa7],
.nav-link--newtab:focus .nav-newtab-icon[b-mrbl78nwa7] {
    opacity: 1;
    transform: translate(1px, -1px);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rpfrod9aww],
.components-reconnect-repeated-attempt-visible[b-rpfrod9aww],
.components-reconnect-failed-visible[b-rpfrod9aww],
.components-pause-visible[b-rpfrod9aww],
.components-resume-failed-visible[b-rpfrod9aww],
.components-rejoining-animation[b-rpfrod9aww] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-retrying[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-failed[b-rpfrod9aww],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rpfrod9aww] {
    display: block;
}


#components-reconnect-modal[b-rpfrod9aww] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rpfrod9aww 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rpfrod9aww 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rpfrod9aww 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rpfrod9aww]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rpfrod9aww 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rpfrod9aww {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rpfrod9aww {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rpfrod9aww {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rpfrod9aww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rpfrod9aww] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rpfrod9aww] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-rpfrod9aww] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-rpfrod9aww] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-rpfrod9aww] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rpfrod9aww] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rpfrod9aww 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rpfrod9aww] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rpfrod9aww {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TenantNavBar.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   TenantNavBar — scoped CSS
   Uses the project's design-token CSS variables; no Bootstrap dependency.
───────────────────────────────────────────────────────────────────────────── */

/* ── Root container ────────────────────────────────────────────────────── */
.tnb[b-fx7dlb17y6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Organization button (chip) ─────────────────────────────────────────────── */
.tnb__organization-btn[b-fx7dlb17y6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.45rem;
    background: transparent;
    border: 1.5px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
    max-width: 220px;
}

.tnb__organization-btn:hover[b-fx7dlb17y6] {
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.08);
    border-color: var(--gold-400, #d4a017);
    color: var(--gold-500, #d4a017);
}

.tnb__organization-btn:focus-visible[b-fx7dlb17y6] {
    outline: 2px solid var(--gold-400, #d4a017);
    outline-offset: 2px;
}

/* Organization icon */
.tnb__organization-icon[b-fx7dlb17y6] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.tnb__organization-btn:hover .tnb__organization-icon[b-fx7dlb17y6] {
    color: var(--gold-500, #d4a017);
}

.tnb__organization-icon svg[b-fx7dlb17y6] {
    width: 15px;
    height: 15px;
}

/* Organization name text */
.tnb__organization-name[b-fx7dlb17y6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No-organization state — amber accent to draw attention */
.tnb__organization-name--nocmp[b-fx7dlb17y6] {
    color: #F59E0B;
    font-style: italic;
}

/* Chevron arrow */
.tnb__chevron[b-fx7dlb17y6] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-secondary);
}

.tnb__chevron svg[b-fx7dlb17y6] {
    width: 13px;
    height: 13px;
}

.tnb__chevron--open[b-fx7dlb17y6] {
    transform: rotate(180deg);
}

/* ── Role badge ────────────────────────────────────────────────────────── */
.tnb__role-badge[b-fx7dlb17y6] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tnb__role-badge--po[b-fx7dlb17y6] {
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.15);
    color: var(--gold-500, #d4a017);
    border: 1px solid rgba(var(--gold-rgb, 212, 160, 23), 0.35);
}

.tnb__role-badge--oem[b-fx7dlb17y6] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.tnb__role-badge--dis[b-fx7dlb17y6] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.tnb__role-badge--res[b-fx7dlb17y6] {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.tnb__role-badge--tp[b-fx7dlb17y6] {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.tnb__role-badge--default[b-fx7dlb17y6] {
    background: rgba(var(--text-secondary-rgb, 100, 116, 139), 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

/* ── Dropdown ──────────────────────────────────────────────────────────── */
.tnb__dropdown[b-fx7dlb17y6] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 200;
    overflow: hidden;
    animation: tnb-fade-in-b-fx7dlb17y6 0.18s ease;
}

@keyframes tnb-fade-in-b-fx7dlb17y6 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown header */
.tnb__dropdown-header[b-fx7dlb17y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.tnb__dropdown-organization[b-fx7dlb17y6] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scope pill inside dropdown header */
.tnb__scope-pill[b-fx7dlb17y6] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tnb__scope-pill--po[b-fx7dlb17y6]      { background: rgba(var(--gold-rgb, 212, 160, 23), 0.15); color: var(--gold-500, #d4a017); }
.tnb__scope-pill--oem[b-fx7dlb17y6]     { background: rgba(59, 130, 246, 0.12);  color: #3b82f6; }
.tnb__scope-pill--dis[b-fx7dlb17y6]     { background: rgba(34, 197, 94, 0.12);   color: #22c55e; }
.tnb__scope-pill--res[b-fx7dlb17y6]     { background: rgba(168, 85, 247, 0.12);  color: #a855f7; }
.tnb__scope-pill--tp[b-fx7dlb17y6]      { background: rgba(249, 115, 22, 0.12);  color: #f97316; }
.tnb__scope-pill--default[b-fx7dlb17y6] { background: rgba(100, 116, 139, 0.1);  color: var(--text-secondary); }

/* Divider */
.tnb__divider[b-fx7dlb17y6] {
    height: 1px;
    background: var(--border-primary);
    margin: 0;
}

/* Dropdown items */
.tnb__item[b-fx7dlb17y6] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.tnb__item:hover[b-fx7dlb17y6] {
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.07);
    color: var(--gold-500, #d4a017);
}

.tnb__item:hover .tnb__item-icon[b-fx7dlb17y6] {
    color: var(--gold-500, #d4a017);
}

.tnb__item:last-child[b-fx7dlb17y6] {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Item icon */
.tnb__item-icon[b-fx7dlb17y6] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.tnb__item-icon svg[b-fx7dlb17y6] {
    width: 15px;
    height: 15px;
}

/* "PO" badge on Tenant Management */
.tnb__item-badge[b-fx7dlb17y6] {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: rgba(var(--gold-rgb, 212, 160, 23), 0.15);
    color: var(--gold-500, #d4a017);
    border: 1px solid rgba(var(--gold-rgb, 212, 160, 23), 0.3);
}

/* ── Section label (My Organizations heading) ──────────────────────────────── */
.tnb__section-label[b-fx7dlb17y6] {
    padding: 0.35rem 0.85rem 0.1rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary, #718096);
}

/* ── Organization switcher items ─────────────────────────────────────────────── */
.tnb__item--organization[b-fx7dlb17y6] {
    gap: 0.6rem;
    align-items: center;
}

.tnb__item--organization:disabled[b-fx7dlb17y6] {
    cursor: default;
    opacity: 1;
}

.tnb__item--organization-active[b-fx7dlb17y6] {
    background: var(--surface-hover, #f1f5f9);
}

.tnb__item-avatar[b-fx7dlb17y6] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--gold-500, #d4a843), var(--gold-600, #b8922d));
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tnb__item-organization-info[b-fx7dlb17y6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.tnb__item-organization-name[b-fx7dlb17y6] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tnb__item-organization-role[b-fx7dlb17y6] {
    font-size: 0.7rem;
    color: var(--text-secondary, #718096);
}

.tnb__item-active-dot[b-fx7dlb17y6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

.tnb__item-primary-badge[b-fx7dlb17y6] {
    margin-left: 0.3rem;
    font-size: 0.65rem;
    color: var(--gold-500, #d4a843);
    line-height: 1;
}

/* "Set as Primary" sub-action row */
.tnb__item--set-primary[b-fx7dlb17y6] {
    font-size: 0.75rem;
    padding: 0.25rem 0.85rem 0.4rem 2.9rem;
    color: var(--gold-500, #d4a843);
    gap: 0.35rem;
    margin-top: -0.35rem;
}

.tnb__item--set-primary:hover:not(:disabled)[b-fx7dlb17y6] {
    background: rgba(212, 168, 67, 0.08);
    color: var(--gold-600, #b8922d);
}

.tnb__item--set-primary:disabled[b-fx7dlb17y6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Responsive — hide role badge on very small screens ────────────────── */
@media (max-width: 480px) {
    .tnb__role-badge[b-fx7dlb17y6] {
        display: none;
    }

    .tnb__organization-name[b-fx7dlb17y6] {
        max-width: 100px;
    }
}
/* /Components/Pages/AuditLogs.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   AUDIT LOGS PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Today's summary banner ─────────────────────────────── */
.al-summary-row[b-4s1dn3b9e6] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.al-stat[b-4s1dn3b9e6] {
    flex: 1;
    min-width: 110px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.al-stat__value[b-4s1dn3b9e6] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.al-stat__label[b-4s1dn3b9e6] {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.al-stat--critical[b-4s1dn3b9e6] { border-left: 3px solid #f87171; }
.al-stat--critical .al-stat__value[b-4s1dn3b9e6] { color: #f87171; }

.al-stat--warning[b-4s1dn3b9e6]  { border-left: 3px solid #fbbf24; }
.al-stat--warning  .al-stat__value[b-4s1dn3b9e6] { color: #fbbf24; }

.al-stat--failed[b-4s1dn3b9e6]   { border-left: 3px solid #94a3b8; }

/* ── Filter bar ──────────────────────────────────────────── */
.al-filters[b-4s1dn3b9e6] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.al-filters__row[b-4s1dn3b9e6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: flex-end;
}

.al-filter-group[b-4s1dn3b9e6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.al-filter-group--search[b-4s1dn3b9e6] {
    flex: 1;
    min-width: 180px;
}

.al-filter-label[b-4s1dn3b9e6] {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.al-filter-input[b-4s1dn3b9e6] {
    height: 32px;
    padding: 0 0.6rem;
    font-size: 0.8rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.al-filter-input:focus[b-4s1dn3b9e6] {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(var(--gold-500-rgb, 234,179,8), 0.15);
}

.al-filter-input--sm[b-4s1dn3b9e6] { height: 28px; font-size: 0.75rem; }

.al-clear-btn[b-4s1dn3b9e6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-end;
}

.al-clear-btn:hover[b-4s1dn3b9e6] { background: var(--surface-hover); color: #f87171; border-color: #f87171; }
.al-clear-btn svg[b-4s1dn3b9e6]   { width: 14px; height: 14px; }

/* ── Main card ───────────────────────────────────────────── */
.al-card[b-4s1dn3b9e6] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    overflow: hidden;
}

.al-loading[b-4s1dn3b9e6], .al-empty[b-4s1dn3b9e6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    gap: 0.5rem;
    flex-direction: column;
}

.al-empty__icon[b-4s1dn3b9e6] {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

/* ── Table ───────────────────────────────────────────────── */
.al-table-wrap[b-4s1dn3b9e6] {
    overflow-x: auto;
}

.al-table[b-4s1dn3b9e6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.al-th[b-4s1dn3b9e6] {
    padding: 0.6rem 0.875rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    white-space: nowrap;
    user-select: none;
}

.al-th--sortable[b-4s1dn3b9e6] { cursor: pointer; }
.al-th--sortable:hover[b-4s1dn3b9e6] { color: var(--text-primary); }
.al-th--center[b-4s1dn3b9e6]  { text-align: center; }
.al-th--right[b-4s1dn3b9e6]   { text-align: right; }

.al-sort-icon[b-4s1dn3b9e6] { margin-left: 0.25rem; opacity: 0.8; }

.al-row[b-4s1dn3b9e6] {
    border-bottom: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: background 0.1s;
}

.al-row:hover[b-4s1dn3b9e6] { background: var(--surface-hover); }

.al-td[b-4s1dn3b9e6] {
    padding: 0.55rem 0.875rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.al-td--mono[b-4s1dn3b9e6]  { font-family: var(--font-mono, monospace); font-size: 0.75rem; }
.al-td--muted[b-4s1dn3b9e6] { color: var(--text-tertiary); }
.al-td--center[b-4s1dn3b9e6] { text-align: center; }
.al-td--right[b-4s1dn3b9e6]  { text-align: right; }

/* User cell */
.al-user[b-4s1dn3b9e6] { display: flex; flex-direction: column; gap: 0.1rem; }
.al-user__email[b-4s1dn3b9e6] { color: var(--text-primary); font-size: 0.8rem; }
.al-user__name[b-4s1dn3b9e6]  { color: var(--text-tertiary); font-size: 0.72rem; }

/* Entity cell */
.al-entity-type[b-4s1dn3b9e6] { color: var(--text-primary); display: block; }
.al-entity-name[b-4s1dn3b9e6] { color: var(--text-tertiary); font-size: 0.72rem; display: block; }

/* Action pill */
.al-action[b-4s1dn3b9e6] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
}

/* Severity badges */
.al-severity[b-4s1dn3b9e6] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
}

.al-severity--info[b-4s1dn3b9e6]     { background: rgba(99,179,237,0.12); color: #63b3ed; }
.al-severity--warning[b-4s1dn3b9e6]  { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.al-severity--critical[b-4s1dn3b9e6] { background: rgba(248,113,113,0.12); color: #f87171; }

/* Status icons */
.al-status[b-4s1dn3b9e6] { font-size: 0.9rem; font-weight: 700; }
.al-status--ok[b-4s1dn3b9e6]   { color: #34d399; }
.al-status--fail[b-4s1dn3b9e6] { color: #f87171; }

/* ── Pagination ───────────────────────────────────────────── */
.al-pagination[b-4s1dn3b9e6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.al-pagination__info[b-4s1dn3b9e6] {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.al-pagination__btns[b-4s1dn3b9e6] {
    display: flex;
    gap: 0.25rem;
}

.al-page-btn[b-4s1dn3b9e6] {
    height: 28px;
    min-width: 28px;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.al-page-btn:hover:not(:disabled)[b-4s1dn3b9e6] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--gold-500);
}

.al-page-btn:disabled[b-4s1dn3b9e6] { opacity: 0.35; cursor: not-allowed; }

.al-page-btn--active[b-4s1dn3b9e6] {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: #000;
    font-weight: 700;
}

.al-pagination__size[b-4s1dn3b9e6] { display: flex; align-items: center; }

/* ── Detail modal ─────────────────────────────────────────── */
.al-modal-backdrop[b-4s1dn3b9e6] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.al-modal[b-4s1dn3b9e6] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.al-modal__header[b-4s1dn3b9e6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.al-modal__title[b-4s1dn3b9e6] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.al-modal__close[b-4s1dn3b9e6] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.15s;
}

.al-modal__close:hover[b-4s1dn3b9e6] { background: var(--surface-hover); color: var(--text-primary); }

.al-modal__body[b-4s1dn3b9e6] {
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Detail key-value grid */
.al-detail-grid[b-4s1dn3b9e6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.al-detail-row[b-4s1dn3b9e6] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem;
    align-items: start;
}

.al-detail-key[b-4s1dn3b9e6] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.1rem;
}

.al-detail-val[b-4s1dn3b9e6] {
    font-size: 0.82rem;
    color: var(--text-primary);
    word-break: break-all;
}

/* Changes JSON block */
.al-changes[b-4s1dn3b9e6] {
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
}

.al-changes__header[b-4s1dn3b9e6] {
    background: var(--bg-secondary);
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-primary);
}

.al-changes__body[b-4s1dn3b9e6] {
    padding: 0.75rem;
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
    color: var(--text-secondary);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 250px;
    overflow-y: auto;
    background: var(--bg-primary);
}
/* /Components/Pages/Chat/Chat.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   TEAM CHAT — Microsoft Teams–inspired professional layout
   Full-viewport grid. Sidebar scrolls internally. Thread + composer
   fill the main column. Full light & dark theme support.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Search highlight ── */
:global(.chat-search-highlight)[b-ta4mut1lp0] {
    background: rgba(255, 213, 0, 0.45);
    color: inherit;

/* ── Muted row indicator ── */
.chat-row__muted {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Creator pill in manage modal ── */
.chat-pill[b-ta4mut1lp0] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bs-primary, #4f46e5);
    color: #fff;
    margin-left: 5px;
    vertical-align: middle;
}
    border-radius: 2px;
    padding: 0 1px;[b-ta4mut1lp0]
}
:root[data-theme="dark"] :global(.chat-search-highlight)[b-ta4mut1lp0] {
    background: rgba(255, 200, 0, 0.3);
}

/* ── Forward confirmation ── */
.chat-forward-confirm[b-ta4mut1lp0] {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    white-space: nowrap;
    z-index: 10;
    animation: chat-badge-in-b-ta4mut1lp0 0.18s ease;
}

/* ── New-message jump badge ── */
.chat-new-msg-badge[b-ta4mut1lp0] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px 7px 12px;
    background: var(--bs-primary, #4f46e5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    z-index: 10;
    white-space: nowrap;
    animation: chat-badge-in-b-ta4mut1lp0 0.18s ease;
}
.chat-new-msg-badge:hover[b-ta4mut1lp0] { filter: brightness(1.1); }
.chat-new-msg-badge svg[b-ta4mut1lp0] { width: 14px; height: 14px; flex-shrink: 0; }
@keyframes chat-badge-in-b-ta4mut1lp0 {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Page shell ── */
.chat-page[b-ta4mut1lp0] {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: calc(100dvh - 64px);
    min-height: 0;
    background: var(--surface-1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    border: 1px solid var(--border-primary);
}

/* ══════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════ */
.chat-sidebar[b-ta4mut1lp0] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-2);
    border-right: 1px solid var(--border-primary);
    overflow: hidden;
}

.chat-sidebar__header[b-ta4mut1lp0] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 10px;
}
.chat-sidebar__header h2[b-ta4mut1lp0] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.chat-sidebar__actions[b-ta4mut1lp0] { display: flex; gap: 4px; }

/* Search with icon */
.chat-search[b-ta4mut1lp0] {
    flex-shrink: 0;
    margin: 0 10px 8px;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--border-secondary);
    border-radius: 20px;
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: calc(100% - 20px);
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-search:focus[b-ta4mut1lp0] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.chat-sidebar__section[b-ta4mut1lp0] {
    padding: 10px 14px 3px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-secondary);
}
.chat-empty-mini[b-ta4mut1lp0] {
    padding: 4px 16px 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-style: italic;
}

/* Scrollable rows wrapper inside the sidebar */
.chat-rows-scroll[b-ta4mut1lp0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    min-height: 0;
    scrollbar-width: thin;
}

/* Conversation row */
.chat-row[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 8px;
    margin: 1px 8px;
    width: calc(100% - 16px);
    transition: background 0.14s;
    position: relative;
}
.chat-row:hover[b-ta4mut1lp0] { background: var(--surface-hover); }
.chat-row--active[b-ta4mut1lp0] { background: rgba(99,102,241,0.1); }
.chat-row--active[b-ta4mut1lp0]::before {
    content: '';
    position: absolute;
    left: -8px; top: 6px; bottom: 6px;
    width: 3px;
    background: #6366f1;
    border-radius: 0 3px 3px 0;
}

/* Avatar */
.chat-row__avatar[b-ta4mut1lp0] {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.chat-row__avatar--group[b-ta4mut1lp0] { background: transparent; padding: 0; }

.chat-row__presence[b-ta4mut1lp0] {
    position: absolute; bottom: 4px; right: -1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid var(--surface-2);
}
.chat-row__presence.is-online[b-ta4mut1lp0] { background: #22c55e; }

.chat-row__body[b-ta4mut1lp0] { flex: 1; min-width: 0; }
.chat-row__title[b-ta4mut1lp0] {
    font-size: 0.875rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 5px;
}
.chat-row--active .chat-row__title[b-ta4mut1lp0] { color: #818cf8; }
.chat-row__sub[b-ta4mut1lp0] { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.chat-row__edit[b-ta4mut1lp0] {
    opacity: 0; color: var(--text-secondary);
    padding: 4px 5px; cursor: pointer; border-radius: 4px;
    font-size: 0.85rem;
    transition: opacity 0.15s, background 0.15s;
}
.chat-row:hover .chat-row__edit[b-ta4mut1lp0] { opacity: 1; }
.chat-row__edit:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }

/* ── More options (...) button ── */
.chat-row__menu-wrap[b-ta4mut1lp0] {
    position: static;
    flex-shrink: 0;
}

.chat-row__more[b-ta4mut1lp0] {
    opacity: 0;
    width: 26px; height: 26px;
    border: none; border-radius: 6px;
    background: transparent; color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    padding: 0;
}
.chat-row__more svg[b-ta4mut1lp0] { width: 16px; height: 16px; }
.chat-row:hover .chat-row__more[b-ta4mut1lp0] { opacity: 1; }
/* Keep ... visible while its menu is open — driven by a C# class, not :has() (unreliable in scoped CSS) */
.chat-row__menu-wrap--open .chat-row__more[b-ta4mut1lp0] { opacity: 1; background: rgba(99,102,241,0.12); color: #6366f1; }
.chat-row__more:hover[b-ta4mut1lp0] { background: rgba(99,102,241,0.12); color: #6366f1; }

/* ── Context dropdown menu — floats to the right of the sidebar ── */
.chat-ctx-menu[b-ta4mut1lp0] {
    position: fixed;
    min-width: 200px;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    padding: 4px;
    z-index: 9999;
    animation: ctx-pop-b-ta4mut1lp0 .12s ease;
}
@keyframes ctx-pop-b-ta4mut1lp0 {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-ctx-item[b-ta4mut1lp0] {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 8px 10px;
    background: transparent; border: none; border-radius: 7px;
    color: var(--text-primary); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; text-align: left;
    transition: background 0.12s;
}
.chat-ctx-item svg[b-ta4mut1lp0] { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.75; }
.chat-ctx-item:hover[b-ta4mut1lp0] { background: var(--surface-hover); }
.chat-ctx-item--danger[b-ta4mut1lp0] { color: #ef4444; }
.chat-ctx-item--danger svg[b-ta4mut1lp0] { opacity: 1; }
.chat-ctx-item--danger:hover[b-ta4mut1lp0] { background: rgba(239,68,68,0.08); }
:root[data-theme="dark"] .chat-ctx-item--danger:hover[b-ta4mut1lp0] { background: rgba(239,68,68,0.14); }

.chat-ctx-sep[b-ta4mut1lp0] {
    height: 1px;
    background: var(--border-secondary);
    margin: 3px 6px;
}

.chat-unread[b-ta4mut1lp0] {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: #6366f1; color: #fff;
    font-size: 0.64rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.chat-row--active .chat-unread[b-ta4mut1lp0] { background: #4f46e5; }

.chat-pill[b-ta4mut1lp0] { padding: 1px 6px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; }
.chat-pill--warn[b-ta4mut1lp0] { background: #fef3c7; color: #b45309; }
:root[data-theme="dark"] .chat-pill--warn[b-ta4mut1lp0] { background: #78350f; color: #fcd34d; }

.chat-iconbtn[b-ta4mut1lp0] {
    background: transparent; border: none; border-radius: 6px;
    padding: 5px; cursor: pointer; color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
}
.chat-iconbtn:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }
.chat-iconbtn svg[b-ta4mut1lp0] { width: 17px; height: 17px; }

/* ══════════════════════════════════════════════════════
   MAIN PANE
   ══════════════════════════════════════════════════════ */
.chat-main[b-ta4mut1lp0] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--surface-1);
    position: relative; /* anchors .chat-new-msg-badge */
}

/* Empty state */
.chat-empty[b-ta4mut1lp0] {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    color: var(--text-secondary);
}
.chat-empty svg[b-ta4mut1lp0] { opacity: 0.2; }
.chat-empty h3[b-ta4mut1lp0] { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.chat-empty p[b-ta4mut1lp0] { margin: 0; font-size: 0.875rem; }

/* ── Teams-like welcome panel (shown when no conversation is selected) ── */
.chat-welcome[b-ta4mut1lp0] {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px;
    padding: 40px 24px;
    text-align: center;
}
.chat-welcome__graphic svg[b-ta4mut1lp0] { width: 80px; height: 80px; }
.chat-welcome__title[b-ta4mut1lp0] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.chat-welcome__sub[b-ta4mut1lp0] {
    margin: 0;
    max-width: 440px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.chat-welcome__pills[b-ta4mut1lp0] {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 4px;
}
.chat-welcome__pills span[b-ta4mut1lp0] {
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border-secondary);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Avatar images (profile picture) ── */
.chat-row__avatar-img[b-ta4mut1lp0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.chat-msg__avatar-img[b-ta4mut1lp0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}

/* ── Empty conversation state (conversation open, zero messages) ── */
.chat-conv-empty[b-ta4mut1lp0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.chat-conv-empty__avatar[b-ta4mut1lp0] {
    width: 72px; height: 72px;
    border-radius: 40px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 700;
    margin-bottom: 6px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(99,102,241,0.28);
}
.chat-conv-empty__avatar--group[b-ta4mut1lp0] {
    background: transparent;
    box-shadow: 0 8px 24px rgba(99,102,241,0.18);
    padding: 0;
}
.chat-conv-empty__avatar-img[b-ta4mut1lp0] {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 22px; display: block;
}
.chat-conv-empty__name[b-ta4mut1lp0] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}
.chat-conv-empty__sub[b-ta4mut1lp0] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: -4px;
}
.chat-conv-empty__hint[b-ta4mut1lp0] {
    margin: 8px 0 0;
    max-width: 380px;
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.chat-conv-empty__hint strong[b-ta4mut1lp0] { color: var(--text-primary); }

/* Thread header */
.chat-thread-header[b-ta4mut1lp0] {
    flex-shrink: 0;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--surface-1);
    display: flex; align-items: center; gap: 10px;
}
.chat-thread-header__title[b-ta4mut1lp0] {
    font-weight: 700; font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-header__sub[b-ta4mut1lp0] {
    color: var(--text-secondary); font-size: 0.75rem; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Message thread — Teams-style: content centred with wide side gutters */
.chat-thread[b-ta4mut1lp0] {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 16px 12% 4px;
    display: flex; flex-direction: column;
    gap: 1px;
    background: var(--surface-1);
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/* ── Date divider (Today / Thursday / March 15…) ── */
.chat-date-divider[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.chat-date-divider[b-ta4mut1lp0]::before,
.chat-date-divider[b-ta4mut1lp0]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-secondary);
}
.chat-date-divider span[b-ta4mut1lp0] { flex-shrink: 0; padding: 0 2px; }

/* ── Message row ── */
.chat-msg[b-ta4mut1lp0] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.1s;
    margin-bottom: 1px;
    overflow: visible;
}
/*.chat-msg:hover { background: var(--surface-hover); }*/
.chat-msg--mine[b-ta4mut1lp0] { flex-direction: row-reverse; }
.chat-msg--grouped[b-ta4mut1lp0] { margin-top: -2px; }

/* Teams-style flash highlight when jumping to a quoted message */
@keyframes chat-msg-flash-b-ta4mut1lp0 {
    0%   { background: rgba(99,102,241,0.42); box-shadow: 0 0 0 3px rgba(99,102,241,0.35); }
    35%  { background: rgba(99,102,241,0.35); box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }
    70%  { background: rgba(99,102,241,0.16); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
    100% { background: transparent;           box-shadow: none; }
}
.chat-msg--highlight[b-ta4mut1lp0] {
    animation: chat-msg-flash-b-ta4mut1lp0 2.8s ease-out forwards;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* Avatar — shown once per sender group */
.chat-msg__avatar[b-ta4mut1lp0] {
    width: 32px; height: 32px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    flex-shrink: 0;
    margin-top: 18px; /* aligns with sender-name row */
    overflow: hidden;
}
/* Invisible spacer keeps bubbles aligned when avatar is hidden */
.chat-msg__avatar--spacer[b-ta4mut1lp0] {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Content column — holds meta row + bubble */
.chat-msg__content[b-ta4mut1lp0] {
    display: flex;
    flex-direction: column;
    max-width: 68%;
    min-width: 0;
    position: relative;
    overflow: visible;
}
.chat-msg--mine .chat-msg__content[b-ta4mut1lp0] { align-items: flex-end; }

/* Meta: sender name + time (only on first message of a group) */
.chat-msg__meta[b-ta4mut1lp0] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 3px;
    padding: 0 2px;
}
.chat-msg__sender-name[b-ta4mut1lp0] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.chat-msg__time-meta[b-ta4mut1lp0] {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Bubble */
.chat-msg__bubble[b-ta4mut1lp0] {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 4px 14px 14px 14px;
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
    word-wrap: break-word; overflow-wrap: anywhere;
    line-height: 1.48;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.chat-msg--mine .chat-msg__bubble[b-ta4mut1lp0] {
    border-radius: 14px 4px 14px 14px;
    background: #4f46e5;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,70,229,0.28);
}
.chat-msg--grouped .chat-msg__bubble[b-ta4mut1lp0] { border-radius: 4px 14px 14px 14px; }
.chat-msg--mine.chat-msg--grouped .chat-msg__bubble[b-ta4mut1lp0] { border-radius: 14px 4px 14px 14px; }

.chat-msg__html[b-ta4mut1lp0] { font-size: 0.9rem; }
.chat-msg__html p[b-ta4mut1lp0] { margin: 0 0 3px 0; }
.chat-msg__html p:last-child[b-ta4mut1lp0] { margin: 0; }

.chat-msg__image[b-ta4mut1lp0] {
    max-width: 260px; max-height: 200px; border-radius: 8px;
    min-height: 80px;
    margin-top: 6px; display: block; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--surface-3);
}
.chat-msg__file[b-ta4mut1lp0] {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 7px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.12); color: inherit;
    text-decoration: none; font-size: 0.84rem;
    border: 1px solid rgba(255,255,255,0.18);
    transition: background 0.14s;
}
.chat-msg__file:hover[b-ta4mut1lp0] { background: rgba(255,255,255,0.2); }
.chat-msg:not(.chat-msg--mine) .chat-msg__file[b-ta4mut1lp0] {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}
.chat-msg__file span[b-ta4mut1lp0] { opacity: 0.7; font-size: 0.74rem; }

/* ══════════════════════════════════════════════════════
   COMPOSER  (Teams-style card, two-state)
   ══════════════════════════════════════════════════════ */
.chat-composer[b-ta4mut1lp0] {
    flex-shrink: 0;
    background: var(--surface-2);
    position: relative;
    margin: 0 12% 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border-secondary);
    overflow: visible;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-composer:focus-within[b-ta4mut1lp0],
.chat-composer--expanded[b-ta4mut1lp0] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1), 0 1px 6px rgba(0,0,0,0.06);
}

/* ── Message action toolbar (hover-reveal, floating above bubble) ── */
.chat-msg[b-ta4mut1lp0] { position: relative; }

.chat-msg-toolbar[b-ta4mut1lp0] {
    position: absolute;
    top: -38px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    padding: 3px 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    white-space: nowrap;
    z-index: 30;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}
/* Own messages: toolbar anchored to the right edge (extends left, stays in chat area) */
.chat-msg--mine .chat-msg-toolbar[b-ta4mut1lp0],
.chat-msg-toolbar--mine[b-ta4mut1lp0] { left: auto; right: 0; }

/* Show on message hover OR when emoji portal is open for this message */
.chat-msg__content:hover .chat-msg-toolbar[b-ta4mut1lp0],
.chat-msg--toolbar-pinned .chat-msg-toolbar[b-ta4mut1lp0] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.chat-msg-toolbar__emoji[b-ta4mut1lp0] {
    background: transparent; border: none;
    font-size: 1rem; cursor: pointer; padding: 2px 3px;
    border-radius: 6px; line-height: 1;
    transition: background 0.1s, transform 0.1s;
}
.chat-msg-toolbar__emoji:hover[b-ta4mut1lp0] { background: var(--surface-hover); transform: scale(1.25); }

.chat-msg-toolbar__sep[b-ta4mut1lp0] { width: 1px; height: 14px; background: var(--border-secondary); margin: 0 4px; flex-shrink: 0; }

.chat-msg-toolbar__btn[b-ta4mut1lp0] {
    width: 28px; height: 28px;
    border: none; border-radius: 6px;
    background: transparent; color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
    padding: 0;
}
.chat-msg-toolbar__btn svg[b-ta4mut1lp0] { width: 14px; height: 14px; }
.chat-msg-toolbar__btn:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }
.chat-msg-toolbar__btn--active[b-ta4mut1lp0] { background: rgba(99,102,241,0.12); color: #6366f1; }
.chat-msg-toolbar__btn--danger:hover[b-ta4mut1lp0] { background: rgba(239,68,68,0.1); color: #ef4444; }

/* ── Inline emoji picker (attached to message, not composer) ── */
.chat-emoji-picker--inline[b-ta4mut1lp0] {
    bottom: auto;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: 35;
}

/* ── Reaction emoji portal (fixed overlay, never clipped) ── */
.chat-emoji-backdrop[b-ta4mut1lp0] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    user-select: none;
    -webkit-user-select: none;
}
.chat-emoji-portal[b-ta4mut1lp0] {
    position: fixed;
    z-index: 2001;
    width: 380px;
    height: 380px;
    background: var(--surface-1);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-emoji-portal__search-wrap[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-secondary);
    flex-shrink: 0;
}
.chat-emoji-portal__search-icon[b-ta4mut1lp0] {
    width: 16px; height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.chat-emoji-portal__search[b-ta4mut1lp0] {
    flex: 1;
    padding: 4px 8px;
    border: none;
    border-bottom: 2px solid #6366f1;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
}
.chat-emoji-portal__scroll[b-ta4mut1lp0] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 4px 4px;
}
.chat-emoji-portal__scroll[b-ta4mut1lp0]::-webkit-scrollbar { width: 4px; }
.chat-emoji-portal__scroll[b-ta4mut1lp0]::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
.chat-emoji-portal__section-label[b-ta4mut1lp0] {
    padding: 8px 10px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.chat-emoji-portal__grid[b-ta4mut1lp0] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    padding: 2px 6px;
}
.chat-emoji-portal__grid button[b-ta4mut1lp0] {
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.1s, transform 0.1s;
    aspect-ratio: 1;
}
.chat-emoji-portal__grid button:hover[b-ta4mut1lp0] {
    background: var(--surface-hover);
    transform: scale(1.2);
}
/* Category tab bar */
.chat-emoji-portal__tabs[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border-secondary);
    background: var(--surface-2);
    padding: 2px 6px;
    gap: 2px;
    flex-shrink: 0;
}
.chat-emoji-portal__tab[b-ta4mut1lp0] {
    flex: 1;
    background: transparent;
    border: 0;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 6px;
    line-height: 1;
    color: var(--text-secondary);
    transition: background 0.1s, color 0.1s;
    border-bottom: 2px solid transparent;
}
.chat-emoji-portal__tab:hover[b-ta4mut1lp0] { background: var(--surface-hover); }
.chat-emoji-portal__tab--active[b-ta4mut1lp0] {
    color: #6366f1;
    border-bottom-color: #6366f1;
}
.chat-emoji-portal__empty[b-ta4mut1lp0] {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.83rem;
}

/* ── Deleted message tombstone ── */
.chat-msg__bubble--deleted[b-ta4mut1lp0] {
    background: var(--surface-2) !important;
    border-style: dashed !important;
    box-shadow: none !important;
    opacity: 0.65;
}
.chat-msg__deleted[b-ta4mut1lp0] {
    font-size: 0.84rem;
    font-style: italic;
    color: var(--text-secondary);
}

/* ── Quoted reply preview inside bubble ── */
.chat-msg__quote[b-ta4mut1lp0] {
    border-left: 3px solid rgba(99,102,241,0.6);
    padding: 4px 8px;
    margin-bottom: 6px;
    border-radius: 0 4px 4px 0;
    background: rgba(99,102,241,0.08);
}
.chat-msg--mine .chat-msg__quote[b-ta4mut1lp0] { border-left-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); }

/* Clickable quote — jump to original message */
.chat-msg__quote--clickable[b-ta4mut1lp0] {
    cursor: pointer;
    transition: background 0.15s, border-left-color 0.15s;
}
.chat-msg__quote--clickable:hover[b-ta4mut1lp0] {
    background: rgba(99,102,241,0.16);
    border-left-color: rgba(99,102,241,0.9);
}
.chat-msg--mine .chat-msg__quote--clickable:hover[b-ta4mut1lp0] {
    background: rgba(255,255,255,0.22);
    border-left-color: rgba(255,255,255,0.8);
}
.chat-msg__quote-name[b-ta4mut1lp0] {
    font-size: 0.72rem; font-weight: 700;
    color: #818cf8;
    display: block; margin-bottom: 2px;
}
.chat-msg--mine .chat-msg__quote-name[b-ta4mut1lp0] { color: rgba(255,255,255,0.8); }
.chat-msg__quote-text[b-ta4mut1lp0] {
    font-size: 0.78rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.chat-msg--mine .chat-msg__quote-text[b-ta4mut1lp0] { color: rgba(255,255,255,0.7); }

/* ── Reaction chips ── */
.chat-msg__reactions[b-ta4mut1lp0] {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 4px;
}
.chat-reaction[b-ta4mut1lp0] {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid var(--border-secondary);
    background: var(--surface-2);
    font-size: 0.82rem; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.chat-reaction span[b-ta4mut1lp0] { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.chat-reaction:hover[b-ta4mut1lp0] { background: var(--surface-hover); }
.chat-reaction--mine[b-ta4mut1lp0] {
    border-color: #6366f1;
    background: rgba(99,102,241,0.1);
}
.chat-reaction--mine span[b-ta4mut1lp0] { color: #6366f1; }

/* ── Reply preview strip in composer ── */
.chat-composer__reply-preview[b-ta4mut1lp0] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--surface-3, var(--surface-2));
    border-radius: 8px 8px 0 0;
}
.chat-composer__reply-content[b-ta4mut1lp0] { flex: 1; min-width: 0; }
.chat-composer__reply-name[b-ta4mut1lp0] {
    font-size: 0.72rem; font-weight: 700; color: #6366f1;
    display: block; margin-bottom: 2px;
}
.chat-composer__reply-text[b-ta4mut1lp0] {
    font-size: 0.78rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
}
.chat-composer__reply-cancel[b-ta4mut1lp0] {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary); border-radius: 4px;
    padding: 2px 5px; font-size: 0.85rem;
    transition: background 0.12s;
}
.chat-composer__reply-cancel:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }

/* ── Toolbar */
.chat-toolbar[b-ta4mut1lp0] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--surface-3, var(--surface-2));
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.chat-toolbar[b-ta4mut1lp0]::-webkit-scrollbar { display: none; }

.chat-toolbar button[b-ta4mut1lp0],
.chat-toolbar__color[b-ta4mut1lp0],
.chat-toolbar__attach[b-ta4mut1lp0],
.chat-toolbar__attach-btn[b-ta4mut1lp0] {
    background: transparent;
    color: var(--text-secondary);
    border: none; border-radius: 5px;
    padding: 4px 6px; cursor: pointer;
    font-size: 0.83rem; height: 27px; min-width: 27px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap; flex-shrink: 0;
}
.chat-toolbar button:hover[b-ta4mut1lp0],
.chat-toolbar__color:hover[b-ta4mut1lp0],
.chat-toolbar__attach:hover[b-ta4mut1lp0],
.chat-toolbar__attach-btn:hover[b-ta4mut1lp0] {
    background: rgba(99,102,241,0.1); color: #6366f1;
}
.chat-toolbar select[b-ta4mut1lp0] {
    background: var(--surface-1); color: var(--text-secondary);
    border: 1px solid var(--border-secondary); border-radius: 5px;
    padding: 2px 5px; font-size: 0.75rem; height: 25px; cursor: pointer;
}
.chat-toolbar__sep[b-ta4mut1lp0] { width: 1px; height: 16px; background: var(--border-secondary); margin: 0 4px; flex-shrink: 0; }
.chat-toolbar__spacer[b-ta4mut1lp0] { flex: 1; }
.chat-toolbar__clear[b-ta4mut1lp0] { color: var(--text-secondary) !important; }
.chat-toolbar__clear:hover[b-ta4mut1lp0] { background: rgba(239,68,68,0.1) !important; color: #ef4444 !important; }
.chat-toolbar__color input[type="color"][b-ta4mut1lp0] { width: 13px; height: 13px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.chat-toolbar__attach input[type="file"][b-ta4mut1lp0] { display: none; }
.chat-toolbar__size[b-ta4mut1lp0], .chat-toolbar__face[b-ta4mut1lp0] { font-size: 0.75rem; }

/* Editor + inline icon row (Teams style: text fills width, icons pinned right) */
.chat-composer__row[b-ta4mut1lp0] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 2px 6px 2px 4px;
}

.chat-editor[b-ta4mut1lp0] {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 140px;
    overflow-y: auto;
    padding: 9px 10px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.45;
    border: none;
    outline: none;
    scrollbar-width: thin;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-composer--expanded .chat-editor[b-ta4mut1lp0] { min-height: 78px; }
.chat-editor:empty[b-ta4mut1lp0]::before {
    content: attr(placeholder);
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0.65;
}

.chat-composer__icons[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    padding: 4px 2px;
    align-self: flex-end;
}

.chat-composer__error[b-ta4mut1lp0] { padding: 0 12px 5px; }

/* Icon buttons in action row */
.chat-bar-btn[b-ta4mut1lp0] {
    width: 30px; height: 30px;
    border-radius: 6px; border: none;
    background: transparent; color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
    padding: 0; flex-shrink: 0;
}
.chat-bar-btn svg[b-ta4mut1lp0] { width: 16px; height: 16px; }
.chat-bar-btn:hover[b-ta4mut1lp0] { background: rgba(99,102,241,0.12); color: #6366f1; }
.chat-bar-btn--active[b-ta4mut1lp0] { color: #6366f1; background: rgba(99,102,241,0.14); }
.chat-bar-btn--active:hover[b-ta4mut1lp0] { background: rgba(99,102,241,0.22); }
.chat-bar-sep[b-ta4mut1lp0] { width: 1px; height: 18px; background: var(--border-secondary); margin: 0 4px; flex-shrink: 0; }

.chat-bar-btn--send[b-ta4mut1lp0] {
    width: 32px; height: 32px;
    background: #4f46e5; color: #fff; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(79,70,229,0.3);
    transition: background 0.14s, box-shadow 0.14s, transform 0.1s;
}
.chat-bar-btn--send:hover[b-ta4mut1lp0] { background: #4338ca; color: #fff; box-shadow: 0 4px 10px rgba(79,70,229,0.4); transform: translateY(-1px); }
.chat-bar-btn--send:active[b-ta4mut1lp0] { transform: translateY(0); }
.chat-bar-btn--send:disabled[b-ta4mut1lp0] { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

/* Pending attachment strip — multi-file chips above the editor */
.chat-pending-strip[b-ta4mut1lp0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px 4px;
    align-items: flex-start;
    border-top: 1px solid var(--border-primary);
}
/* No top border when the formatting toolbar is already showing above */
.chat-composer--expanded .chat-pending-strip[b-ta4mut1lp0] {
    border-top: none;
}

/* Legacy single-file chip (kept for graceful fallback) */
.chat-pending-file[b-ta4mut1lp0] {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.22);
    color: var(--text-primary); padding: 3px 10px;
    border-radius: 6px; font-size: 0.82rem;
    align-self: flex-start; margin: 4px 12px 0;
}
.chat-pending-file button[b-ta4mut1lp0] { background: transparent; border: 0; cursor: pointer; color: var(--text-secondary); padding: 1px 3px; border-radius: 3px; }
.chat-pending-file button:hover[b-ta4mut1lp0] { background: rgba(239,68,68,0.12); color: #ef4444; }

/* Emoji picker */
.chat-emoji-picker[b-ta4mut1lp0] {
    position: absolute; bottom: calc(100% + 8px); right: 8px;
    display: grid; grid-template-columns: repeat(10, 1fr);
    gap: 2px; padding: 10px;
    background: var(--surface-1); border: 1px solid var(--border-secondary);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
    max-height: 200px; overflow-y: auto; z-index: 20;
    scrollbar-width: thin;
}
.chat-emoji-picker button[b-ta4mut1lp0] {
    background: transparent; border: 0; font-size: 1.2rem; cursor: pointer;
    padding: 4px; border-radius: 6px;
    transition: background 0.1s, transform 0.1s; line-height: 1;
}
.chat-emoji-picker button:hover[b-ta4mut1lp0] { background: var(--surface-hover); transform: scale(1.2); }

.chat-error[b-ta4mut1lp0] { color: #dc2626; font-size: 0.78rem; }
:root[data-theme="dark"] .chat-error[b-ta4mut1lp0] { color: #f87171; }

/* Dark-mode highlight uses a warmer purple glow so it reads clearly on dark surfaces */
@keyframes chat-msg-flash-dark-b-ta4mut1lp0 {
    0%   { background: rgba(129,140,248,0.38); box-shadow: 0 0 0 3px rgba(129,140,248,0.32); }
    35%  { background: rgba(129,140,248,0.28); box-shadow: 0 0 0 3px rgba(129,140,248,0.20); }
    70%  { background: rgba(129,140,248,0.14); box-shadow: 0 0 0 2px rgba(129,140,248,0.10); }
    100% { background: transparent;            box-shadow: none; }
}
:root[data-theme="dark"] .chat-msg--highlight[b-ta4mut1lp0] {
    animation: chat-msg-flash-dark-b-ta4mut1lp0 2.8s ease-out forwards;
}

.chat-blocked[b-ta4mut1lp0] {
    margin: 16px; padding: 14px 18px; border-radius: 10px;
    background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.18);
    color: var(--text-secondary); text-align: center; font-size: 0.87rem;
}
:root[data-theme="dark"] .chat-blocked[b-ta4mut1lp0] { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.28); }

/* ══════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════ */
.chat-modal-backdrop[b-ta4mut1lp0] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 1050;
}
.chat-modal[b-ta4mut1lp0] {
    background: var(--surface-1); border: 1px solid var(--border-primary);
    border-radius: 14px;
    width: 100%; max-width: 520px; max-height: 82vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.1);
}
.chat-modal__header[b-ta4mut1lp0],
.chat-modal__footer[b-ta4mut1lp0] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--surface-2); flex-shrink: 0;
}
.chat-modal__footer[b-ta4mut1lp0] { border-top: 1px solid var(--border-secondary); border-bottom: 0; gap: 8px; justify-content: flex-end; }
.chat-modal__header h3[b-ta4mut1lp0] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.chat-modal__body[b-ta4mut1lp0] { padding: 16px 18px; overflow-y: auto; color: var(--text-primary); flex: 1; }
.chat-modal__body label[b-ta4mut1lp0] { display: block; margin: 10px 0 4px; font-size: 0.83rem; color: var(--text-secondary); font-weight: 500; }
.chat-modal__section[b-ta4mut1lp0] { margin: 14px 0 8px; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.chat-modal__hint[b-ta4mut1lp0] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.5; }

.chat-member-picker[b-ta4mut1lp0] {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border-secondary); border-radius: 8px;
    padding: 6px; background: var(--surface-2);
}
.chat-member-pick[b-ta4mut1lp0] {
    display: flex; align-items: center; gap: 8px; font-size: 0.88rem;
    padding: 5px 6px; border-radius: 6px; cursor: pointer;
    transition: background 0.12s;
}
.chat-member-pick:hover[b-ta4mut1lp0] { background: var(--surface-hover); }

.chat-manage-row[b-ta4mut1lp0] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border-secondary);
    color: var(--text-primary); font-size: 0.88rem; gap: 8px;
}
.chat-manage-row:last-child[b-ta4mut1lp0] { border-bottom: 0; }
.chat-manage-row em[b-ta4mut1lp0] { color: var(--text-secondary); font-style: normal; font-size: 0.76rem; margin-left: 4px; }

.chat-switch[b-ta4mut1lp0] { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 0.84rem; }

/* ── Pin indicator on sidebar rows ── */
.chat-row__pin[b-ta4mut1lp0] {
    font-size: 0.7rem;
    opacity: 0.5;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Thread header with search toggle ── */
.chat-thread-header[b-ta4mut1lp0] {
    flex-shrink: 0;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--surface-1);
    display: flex; align-items: center; gap: 10px;
}
.chat-thread-header__info[b-ta4mut1lp0] {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px;
}
.chat-thread-header__avatar-wrap[b-ta4mut1lp0] {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-primary);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
}
.chat-thread-header__avatar-img[b-ta4mut1lp0] {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.chat-thread-header__avatar-initials[b-ta4mut1lp0] {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0.02em;
}
.chat-thread-header__avatar-initials--group[b-ta4mut1lp0] {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    font-size: 1.1rem; font-weight: 800;
}
.chat-thread-header__text[b-ta4mut1lp0] { min-width: 0; flex: 1; }
.chat-thread-header__actions[b-ta4mut1lp0] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chat-header-btn[b-ta4mut1lp0] {
    width: 30px; height: 30px;
    border: none; border-radius: 7px;
    background: transparent; color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
}
.chat-header-btn svg[b-ta4mut1lp0] { width: 16px; height: 16px; }
.chat-header-btn:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }
.chat-header-btn--active[b-ta4mut1lp0] { background: rgba(99,102,241,0.12); color: #6366f1; }

/* ── Body wrapper: thread + optional members panel ── */
.chat-body-wrap[b-ta4mut1lp0] {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.chat-body-wrap .chat-thread[b-ta4mut1lp0] {
    flex: 1;
    min-width: 0;
}

/* ── Members side-panel ── */
.chat-members-panel[b-ta4mut1lp0] {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-primary);
    background: var(--surface-1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-members-panel__header[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}
.chat-members-panel__list[b-ta4mut1lp0] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.chat-members-panel__row[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    transition: background 0.12s;
}
.chat-members-panel__row:hover[b-ta4mut1lp0] { background: var(--surface-hover); }
.chat-members-panel__avatar[b-ta4mut1lp0] {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
}
.chat-members-panel__avatar-img[b-ta4mut1lp0] {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.chat-members-panel__avatar-initials[b-ta4mut1lp0] {
    font-size: 0.72rem; font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    pointer-events: none;
}
.chat-members-panel__online-dot[b-ta4mut1lp0] {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--surface-1);
}
.chat-members-panel__info[b-ta4mut1lp0] { flex: 1; min-width: 0; }
.chat-members-panel__name[b-ta4mut1lp0] {
    font-size: 0.82rem; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 5px;
}
.chat-members-panel__role[b-ta4mut1lp0] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-members-panel__badge[b-ta4mut1lp0] {
    font-size: 0.62rem; font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(99,102,241,0.12);
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Dark mode overrides for members panel */
:root[data-theme="dark"] .chat-members-panel[b-ta4mut1lp0] {
    background: var(--surface-2);
}
:root[data-theme="dark"] .chat-members-panel__badge[b-ta4mut1lp0] {
    background: rgba(129,140,248,0.18);
    color: #818cf8;
}

/* ── Message search bar (inside conversation) ── */
.chat-msg-search[b-ta4mut1lp0] {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 18px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-primary);
}
.chat-msg-search input[b-ta4mut1lp0] {
    flex: 1;
    padding: 6px 12px 6px 32px;
    border: 1px solid var(--border-secondary);
    border-radius: 20px;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
    color: var(--text-primary); font-size: 0.875rem;
    transition: border-color 0.2s;
}
.chat-msg-search input:focus[b-ta4mut1lp0] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.chat-msg-search__count[b-ta4mut1lp0] { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.chat-msg-search__clear[b-ta4mut1lp0] {
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: transparent; color: var(--text-secondary);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    transition: background 0.14s;
}
.chat-msg-search__clear:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }

/* ── "New messages" unread divider inside the thread ── */
.chat-unread-divider[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.chat-unread-divider[b-ta4mut1lp0]::before,
.chat-unread-divider[b-ta4mut1lp0]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(99,102,241,0.4);
}
.chat-unread-divider span[b-ta4mut1lp0] { flex-shrink: 0; padding: 0 8px; }

/* ── Toast notifications (new message in another conversation) ── */
.chat-toasts[b-ta4mut1lp0] {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 8000;
    pointer-events: none;
}
.chat-toast[b-ta4mut1lp0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-left: 3px solid #6366f1;
    border-radius: 10px;
    padding: 11px 13px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    cursor: pointer;
    pointer-events: all;
    max-width: 290px;
    animation: toast-slide-in-b-ta4mut1lp0 0.25s ease;
}
.chat-toast:hover[b-ta4mut1lp0] { box-shadow: 0 10px 30px rgba(0,0,0,0.24); transform: translateY(-1px); }
@keyframes toast-slide-in-b-ta4mut1lp0 {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
.chat-toast__icon[b-ta4mut1lp0] {
    width: 32px; height: 32px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.chat-toast__avatar-img[b-ta4mut1lp0] {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 22px; display: block;
}
.chat-toast__body[b-ta4mut1lp0] { flex: 1; min-width: 0; }
.chat-toast__title[b-ta4mut1lp0] {
    font-weight: 700; font-size: 0.82rem;
    color: var(--text-primary); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-toast__preview[b-ta4mut1lp0] {
    font-size: 0.76rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.chat-toast__close[b-ta4mut1lp0] {
    flex-shrink: 0; align-self: flex-start;
    width: 18px; height: 18px;
    border: none; border-radius: 4px;
    background: transparent; color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 0; transition: background 0.14s;
}
.chat-toast__close:hover[b-ta4mut1lp0] { background: var(--surface-hover); color: var(--text-primary); }
.chat-toast__close svg[b-ta4mut1lp0] { width: 11px; height: 11px; }

/* ═══════════════════════════════════════════════════════
   INLINE EDIT — message bubble edit mode
   ═══════════════════════════════════════════════════════ */

.chat-msg__edit-wrap[b-ta4mut1lp0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.chat-msg__edit-input[b-ta4mut1lp0] {
    width: 100%;
    min-height: 60px;
    max-height: 160px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #6366f1;
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.45;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    font-family: inherit;
}
.chat-msg__edit-input:focus[b-ta4mut1lp0] {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.18);
}

.chat-msg__edit-actions[b-ta4mut1lp0] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.chat-msg__edit-save[b-ta4mut1lp0],
.chat-msg__edit-cancel[b-ta4mut1lp0] {
    padding: 4px 14px;
    border-radius: 6px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, opacity 0.14s, transform 0.1s;
}

.chat-msg__edit-save[b-ta4mut1lp0] {
    background: #4f46e5;
    color: #fff;
    box-shadow: 0 2px 6px rgba(79,70,229,0.28);
}
.chat-msg__edit-save:hover:not(:disabled)[b-ta4mut1lp0] {
    background: #4338ca;
    transform: translateY(-1px);
}
.chat-msg__edit-save:disabled[b-ta4mut1lp0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-msg__edit-cancel[b-ta4mut1lp0] {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-secondary);
}
.chat-msg__edit-cancel:hover[b-ta4mut1lp0] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* "(edited)" marker shown below the message */
.chat-msg__edited-marker[b-ta4mut1lp0] {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
    cursor: default;
}
/* In own-message (dark) bubble, lighten the marker */
.chat-msg--mine .chat-msg__edited-marker[b-ta4mut1lp0] {
    color: rgba(255,255,255,0.6);
    opacity: 1;
}
/* /Components/Pages/Chat/ChatWindow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   FLOATING CHAT WINDOW  — draggable, resizable, stackable
   ═══════════════════════════════════════════════════════ */

.cw[b-sl704gs8gx] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 340px;
    height: 480px;
    min-width: 280px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.22),
        0 4px 16px rgba(0,0,0,0.12),
        0 0 0 1px rgba(99,102,241,0.08);
    overflow: hidden;
    transition: box-shadow 0.2s, height 0.22s ease;
    user-select: none;
}

/* Maximised — fills viewport */
.cw--maximized[b-sl704gs8gx] {
    position: fixed;
    inset: 12px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 14px;
}

/* Minimised — only the title bar is visible */
.cw--minimized[b-sl704gs8gx] {
    height: auto !important;
    min-height: 0;
    border-radius: 10px;
}

/* ── Title bar ── */
.cw__header[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 10px 12px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    cursor: grab;
    flex-shrink: 0;
    gap: 6px;
}
.cw__header:active[b-sl704gs8gx] { cursor: grabbing; }

.cw__header-left[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.cw__avatar[b-sl704gs8gx] {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-size: 0.68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,0.4);
}
.cw__avatar--group[b-sl704gs8gx] { background: rgba(255,255,255,0.18); }
.cw__header-avatar-img[b-sl704gs8gx] {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cw__header-title-wrap[b-sl704gs8gx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.cw__title[b-sl704gs8gx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.cw__subtitle[b-sl704gs8gx] {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.cw__badge[b-sl704gs8gx] {
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.63rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    animation: badge-pop-b-sl704gs8gx 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes badge-pop-b-sl704gs8gx {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.cw__header-actions[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.cw__btn[b-sl704gs8gx] {
    width: 26px; height: 26px;
    border: none; background: transparent;
    color: rgba(255,255,255,0.75);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
    padding: 0;
}
.cw__btn svg[b-sl704gs8gx] { width: 14px; height: 14px; }
.cw__btn:hover[b-sl704gs8gx] { background: rgba(255,255,255,0.15); color: #fff; }
.cw__btn--close:hover[b-sl704gs8gx] { background: rgba(239,68,68,0.5); color: #fff; }

/* ── Message thread ── */
.cw__thread[b-sl704gs8gx] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--surface-1);
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.cw__loading[b-sl704gs8gx],
.cw__empty[b-sl704gs8gx] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    padding: 20px;
}

/* Date divider */
.cw__date-divider[b-sl704gs8gx] {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 6px;
    font-size: 0.68rem; font-weight: 600;
    color: var(--text-secondary);
}
.cw__date-divider[b-sl704gs8gx]::before,
.cw__date-divider[b-sl704gs8gx]::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border-secondary);
}
.cw__date-divider span[b-sl704gs8gx] { flex-shrink: 0; }

/* Message row */
.cw__msg[b-sl704gs8gx] {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 2px 4px; border-radius: 6px;
    transition: background 0.1s; margin-bottom: 1px;
}
.cw__msg:hover[b-sl704gs8gx] { background: var(--surface-hover); }
.cw__msg--mine[b-sl704gs8gx] { flex-direction: row-reverse; }
.cw__msg--grouped[b-sl704gs8gx] { margin-top: -1px; }

.cw__msg-avatar[b-sl704gs8gx] {
    width: 26px; height: 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 16px;
    overflow: hidden;
}
.cw__msg-avatar--spacer[b-sl704gs8gx] {
    background: transparent !important;
    pointer-events: none;
}
.cw__msg-avatar-img[b-sl704gs8gx] {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 22px; display: block;
}

.cw__msg-content[b-sl704gs8gx] { display: flex; flex-direction: column; max-width: 80%; min-width: 0; }
.cw__msg--mine .cw__msg-content[b-sl704gs8gx] { align-items: flex-end; }

.cw__msg-meta[b-sl704gs8gx] {
    display: flex; align-items: baseline; gap: 5px;
    margin-bottom: 2px; padding: 0 2px;
}
.cw__msg-name[b-sl704gs8gx] { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.cw__msg-time[b-sl704gs8gx] { font-size: 0.63rem; color: var(--text-secondary); opacity: 0.7; }

.cw__msg-bubble[b-sl704gs8gx] {
    display: block; width: fit-content; max-width: 100%;
    padding: 6px 10px;
    border-radius: 4px 12px 12px 12px;
    background: var(--surface-2); color: var(--text-primary);
    border: 1px solid var(--border-secondary);
    word-wrap: break-word; overflow-wrap: anywhere;
    line-height: 1.45; font-size: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.cw__msg--mine .cw__msg-bubble[b-sl704gs8gx] {
    border-radius: 12px 4px 12px 12px;
    background: #4f46e5; color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,70,229,0.28);
}
.cw__msg--grouped .cw__msg-bubble[b-sl704gs8gx] { border-radius: 4px 12px 12px 12px; }
.cw__msg--mine.cw__msg--grouped .cw__msg-bubble[b-sl704gs8gx] { border-radius: 12px 4px 12px 12px; }
.cw__msg-html p[b-sl704gs8gx] { margin: 0 0 2px 0; }
.cw__msg-html p:last-child[b-sl704gs8gx] { margin: 0; }
.cw__msg-image[b-sl704gs8gx] { max-width: 180px; max-height: 160px; min-height: 60px; border-radius: 6px; margin-top: 4px; display: block; background: var(--surface-3); }
.cw__msg-file[b-sl704gs8gx] {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; padding: 5px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.12); color: inherit;
    text-decoration: none; font-size: 0.8rem;
}

/* ── Composer ── */
.cw__composer[b-sl704gs8gx] {
    flex-shrink: 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border-secondary);
    position: relative;
    margin: 0 10px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: visible;
}
.cw__composer:focus-within[b-sl704gs8gx],
.cw__composer--expanded[b-sl704gs8gx] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* Toolbar */
.cw__toolbar[b-sl704gs8gx] {
    display: flex; align-items: center; gap: 1px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--surface-3, var(--surface-2));
    border-radius: 6px 6px 0 0;
    overflow-x: auto; scrollbar-width: none;
}
.cw__toolbar[b-sl704gs8gx]::-webkit-scrollbar { display: none; }
.cw__toolbar button[b-sl704gs8gx] {
    background: transparent; color: var(--text-secondary);
    border: none; border-radius: 4px;
    padding: 3px 5px; cursor: pointer;
    font-size: 0.8rem; height: 24px; min-width: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.cw__toolbar button:hover[b-sl704gs8gx] { background: rgba(99,102,241,0.1); color: #6366f1; }
.cw__toolbar-sep[b-sl704gs8gx] { width: 1px; height: 14px; background: var(--border-secondary); margin: 0 3px; }

/* Composer row — editor + icon buttons side by side */
.cw__composer-row[b-sl704gs8gx] {
    display: flex; align-items: flex-end; gap: 2px;
    padding: 2px 4px 2px 2px;
}
.cw__editor[b-sl704gs8gx] {
    flex: 1; min-width: 0;
    min-height: 34px; max-height: 100px;
    overflow-y: auto;
    padding: 7px 8px;
    background: transparent; color: var(--text-primary);
    font-size: 0.875rem; line-height: 1.4;
    border: none; outline: none;
    scrollbar-width: thin; word-wrap: break-word;
}
.cw__composer--expanded .cw__editor[b-sl704gs8gx] { min-height: 64px; }
.cw__editor:empty[b-sl704gs8gx]::before {
    content: attr(placeholder);
    color: var(--text-secondary); opacity: 0.65; pointer-events: none;
}

.cw__composer-icons[b-sl704gs8gx] {
    display: flex; align-items: center; gap: 1px;
    flex-shrink: 0; padding: 3px 2px; align-self: flex-end;
}
.cw__composer-sep[b-sl704gs8gx] { width: 1px; height: 16px; background: var(--border-secondary); margin: 0 3px; }
.cw__icon-btn[b-sl704gs8gx] {
    width: 26px; height: 26px;
    border-radius: 5px; border: none;
    background: transparent; color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s; padding: 0;
}
.cw__icon-btn svg[b-sl704gs8gx] { width: 14px; height: 14px; }
.cw__icon-btn:hover[b-sl704gs8gx] { background: rgba(99,102,241,0.12); color: #6366f1; }
.cw__icon-btn--active[b-sl704gs8gx] { color: #6366f1; background: rgba(99,102,241,0.14); }
.cw__icon-btn--send[b-sl704gs8gx] {
    width: 28px; height: 28px;
    background: #4f46e5; color: #fff; border-radius: 7px;
    box-shadow: 0 2px 6px rgba(79,70,229,0.3);
    transition: background 0.14s, box-shadow 0.14s, transform 0.1s;
}
.cw__icon-btn--send:hover[b-sl704gs8gx] { background: #4338ca; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(79,70,229,0.4); }
.cw__icon-btn--send:active[b-sl704gs8gx] { transform: translateY(0); }
.cw__icon-btn--send:disabled[b-sl704gs8gx] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Emoji picker — portal (fixed, escapes overflow:hidden on .cw) */
.cw__emoji-backdrop[b-sl704gs8gx] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.cw__emoji-portal[b-sl704gs8gx] {
    position: fixed;
    z-index: 1051;
    width: 320px;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
    overflow: hidden;
}

.cw__emoji-search-wrap[b-sl704gs8gx] {
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--border-secondary);
    flex-shrink: 0;
    background: var(--surface-1);
}
.cw__emoji-search[b-sl704gs8gx] {
    width: 100%;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-secondary);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    box-sizing: border-box;
}
.cw__emoji-search:focus[b-sl704gs8gx] {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

.cw__emoji-scroll[b-sl704gs8gx] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-bottom: 6px;
}
.cw__emoji-scroll[b-sl704gs8gx]::-webkit-scrollbar { width: 4px; }
.cw__emoji-scroll[b-sl704gs8gx]::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }

.cw__emoji-category-label[b-sl704gs8gx] {
    padding: 6px 8px 2px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--surface-1);
}

.cw__emoji-grid[b-sl704gs8gx] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    padding: 2px 6px 4px;
}

.cw__emoji-grid button[b-sl704gs8gx] {
    background: transparent;
    border: 0;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.1s, transform 0.1s;
}
.cw__emoji-grid button:hover[b-sl704gs8gx] {
    background: var(--surface-hover);
    transform: scale(1.25);
}

.cw__emoji-empty[b-sl704gs8gx] {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.cw__error[b-sl704gs8gx] { padding: 0 8px 4px; color: #dc2626; font-size: 0.75rem; }

/* ── Resize handles ── */
.cw__resize-handle[b-sl704gs8gx] {
    position: absolute;
    z-index: 10;
}
.cw__resize--n[b-sl704gs8gx]  { top: 0; left: 8px; right: 8px; height: 5px; cursor: n-resize; }
.cw__resize--w[b-sl704gs8gx]  { left: 0; top: 8px; bottom: 8px; width: 5px; cursor: w-resize; }
.cw__resize--e[b-sl704gs8gx]  { right: 0; top: 8px; bottom: 8px; width: 5px; cursor: e-resize; }
.cw__resize--nw[b-sl704gs8gx] { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
.cw__resize--ne[b-sl704gs8gx] { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }

/* ═══════════════════════════════════════════════════════
   ATTACHMENT — preview strip (before sending)
   ═══════════════════════════════════════════════════════ */
.cw__attach-preview-strip[b-sl704gs8gx] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: var(--surface-3, var(--surface-2));
    border-bottom: 1px solid var(--border-secondary);
    border-radius: 6px 6px 0 0;
}

.cw__attach-preview-img img[b-sl704gs8gx] {
    max-height: 64px;
    max-width: 80px;
    border-radius: 5px;
    object-fit: cover;
    display: block;
}

.cw__attach-preview-file[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-1);
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    padding: 5px 8px;
}
.cw__attach-preview-fileicon[b-sl704gs8gx] { font-size: 1.2rem; }
.cw__attach-preview-filename[b-sl704gs8gx] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cw__attach-preview-size[b-sl704gs8gx] {
    font-size: 0.68rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cw__attach-preview-remove[b-sl704gs8gx] {
    margin-left: auto;
    width: 22px; height: 22px;
    border-radius: 50%; border: none;
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s;
    padding: 0;
}
.cw__attach-preview-remove svg[b-sl704gs8gx] { width: 11px; height: 11px; }
.cw__attach-preview-remove:hover[b-sl704gs8gx] { background: rgba(239,68,68,0.3); }

/* ═══════════════════════════════════════════════════════
   ATTACHMENT — image in message bubble
   ═══════════════════════════════════════════════════════ */
.cw__attach-img-wrap[b-sl704gs8gx] {
    margin-top: 4px;
    display: inline-block;
    max-width: 200px;
    min-height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--surface-3);
}

.cw__attach-img-link[b-sl704gs8gx] {
    position: relative;
    display: block;
}

.cw__attach-img-link img[b-sl704gs8gx] {
    display: block;
    max-width: 200px;
    max-height: 160px;
    object-fit: cover;
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.cw__attach-img-overlay[b-sl704gs8gx] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0 0;
    transition: background 0.16s;
}
.cw__attach-img-overlay svg[b-sl704gs8gx] {
    width: 22px; height: 22px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.16s;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.cw__attach-img-link:hover .cw__attach-img-overlay[b-sl704gs8gx] { background: rgba(0,0,0,0.32); }
.cw__attach-img-link:hover .cw__attach-img-overlay svg[b-sl704gs8gx] { opacity: 1; }

.cw__attach-img-footer[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    background: rgba(0,0,0,0.06);
    gap: 4px;
}
.cw__msg--mine .cw__attach-img-footer[b-sl704gs8gx] { background: rgba(0,0,0,0.15); }

/* ═══════════════════════════════════════════════════════
   ATTACHMENT — file card in message bubble
   ═══════════════════════════════════════════════════════ */
.cw__attach-file-card[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    min-width: 170px;
    max-width: 220px;
}
/* In someone else's bubble, use surface colours */
.cw__msg:not(.cw__msg--mine) .cw__attach-file-card[b-sl704gs8gx] {
    background: var(--surface-1);
    border-color: var(--border-secondary);
}

.cw__attach-file-icon[b-sl704gs8gx] {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}

.cw__attach-file-info[b-sl704gs8gx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Shared filename style (image footer + file card) */
.cw__attach-filename[b-sl704gs8gx] {
    font-size: 0.72rem;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    display: block;
}

.cw__attach-filesize[b-sl704gs8gx] {
    font-size: 0.65rem;
    opacity: 0.7;
    color: inherit;
}

.cw__attach-file-actions[b-sl704gs8gx] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Shared action button (open / download) */
.cw__attach-action-btn[b-sl704gs8gx],
.cw__attach-dl-btn[b-sl704gs8gx] {
    width: 24px; height: 24px;
    border-radius: 5px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.14s;
    flex-shrink: 0;
}
.cw__attach-action-btn svg[b-sl704gs8gx],
.cw__attach-dl-btn svg[b-sl704gs8gx] {
    width: 12px; height: 12px;
}
.cw__attach-action-btn:hover[b-sl704gs8gx],
.cw__attach-dl-btn:hover[b-sl704gs8gx] { background: rgba(255,255,255,0.3); }

/* In a non-mine bubble, darken the hover */
.cw__msg:not(.cw__msg--mine) .cw__attach-action-btn[b-sl704gs8gx],
.cw__msg:not(.cw__msg--mine) .cw__attach-dl-btn[b-sl704gs8gx] {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.cw__msg:not(.cw__msg--mine) .cw__attach-action-btn:hover[b-sl704gs8gx],
.cw__msg:not(.cw__msg--mine) .cw__attach-dl-btn:hover[b-sl704gs8gx] {
    background: rgba(99,102,241,0.15);
    color: #6366f1;
}

/* /Components/Pages/LocalizationDemo.razor.rz.scp.css */
.localization-demo[b-jsyfor4mii] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.demo-header[b-jsyfor4mii] {
    text-align: center;
    margin-bottom: 3rem;
}

.demo-header h1[b-jsyfor4mii] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.demo-header p[b-jsyfor4mii] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.demo-info-cards[b-jsyfor4mii] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.demo-card[b-jsyfor4mii] {
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.demo-card__icon[b-jsyfor4mii] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.demo-card h3[b-jsyfor4mii] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.demo-card__value[b-jsyfor4mii] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.demo-section[b-jsyfor4mii] {
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.demo-section h2[b-jsyfor4mii] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-primary);
}

.demo-buttons[b-jsyfor4mii] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.demo-buttons .btn[b-jsyfor4mii] {
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.demo-buttons .btn-primary[b-jsyfor4mii] {
    background: #3b82f6;
    color: white;
}

.demo-buttons .btn-primary:hover[b-jsyfor4mii] {
    background: #2563eb;
}

.demo-buttons .btn-secondary[b-jsyfor4mii] {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.demo-buttons .btn-secondary:hover[b-jsyfor4mii] {
    background: var(--surface-hover);
}

.demo-buttons .btn-danger[b-jsyfor4mii] {
    background: #ef4444;
    color: white;
}

.demo-buttons .btn-danger:hover[b-jsyfor4mii] {
    background: #dc2626;
}

.demo-buttons .btn-success[b-jsyfor4mii] {
    background: #10b981;
    color: white;
}

.demo-buttons .btn-success:hover[b-jsyfor4mii] {
    background: #059669;
}

.demo-form[b-jsyfor4mii] {
    display: grid;
    gap: 1.5rem;
}

.demo-form__group[b-jsyfor4mii] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-form__group label[b-jsyfor4mii] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.demo-form__group input[b-jsyfor4mii],
.demo-form__group textarea[b-jsyfor4mii] {
    padding: 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.demo-form__group input:focus[b-jsyfor4mii],
.demo-form__group textarea:focus[b-jsyfor4mii] {
    outline: none;
    border-color: #3b82f6;
}

.demo-alerts[b-jsyfor4mii] {
    display: grid;
    gap: 1rem;
}

.alert[b-jsyfor4mii] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-success[b-jsyfor4mii] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.alert-info[b-jsyfor4mii] {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.alert-warning[b-jsyfor4mii] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.alert-error[b-jsyfor4mii] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.demo-regional[b-jsyfor4mii] {
    display: grid;
    gap: 1rem;
}

.demo-regional__item[b-jsyfor4mii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 8px;
}

.demo-regional__item strong[b-jsyfor4mii] {
    color: var(--text-primary);
}

.demo-regional__item span[b-jsyfor4mii] {
    color: var(--text-secondary);
    font-family: monospace;
}

.demo-prose[b-jsyfor4mii] {
    line-height: 1.75;
    color: var(--text-primary);
}

.demo-prose p[b-jsyfor4mii] {
    margin-bottom: 1rem;
}

.demo-footer[b-jsyfor4mii] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-primary);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.demo-footer p[b-jsyfor4mii] {
    margin-bottom: 0.5rem;
}

.demo-footer code[b-jsyfor4mii] {
    background: var(--surface-2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    color: #ef4444;
    font-size: 0.8125rem;
}

:root[data-theme="dark"] .alert-success[b-jsyfor4mii] {
    background: #064e3b;
    color: #6ee7b7;
}

:root[data-theme="dark"] .alert-info[b-jsyfor4mii] {
    background: #1e3a8a;
    color: #93c5fd;
}

:root[data-theme="dark"] .alert-warning[b-jsyfor4mii] {
    background: #78350f;
    color: #fcd34d;
}

:root[data-theme="dark"] .alert-error[b-jsyfor4mii] {
    background: #7f1d1d;
    color: #fca5a5;
}
/* /Components/Pages/Network/AcceptInvitation.razor.rz.scp.css */
/* ═══════════════════════════════════════
   ACCEPT INVITATION PAGE
   Anonymous-friendly, enterprise-grade
   ═══════════════════════════════════════ */

.ai-page[b-venfnhuvuv] {
    max-width: 560px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ── Loading ───────────────────────────────────────────────── */
.ai-loading[b-venfnhuvuv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--text-secondary, #718096);
}

/* ── Card ──────────────────────────────────────────────────── */
.ai-card[b-venfnhuvuv] {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ── Card Header ───────────────────────────────────────────── */
.ai-card__header[b-venfnhuvuv] {
    padding: 2rem;
    text-align: center;
    color: white;
}

.ai-card__header h1[b-venfnhuvuv] {
    margin: 0.75rem 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.ai-card__header p[b-venfnhuvuv] {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
    color: white;
}

.ai-card__header--invite[b-venfnhuvuv] {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.ai-card__header--error[b-venfnhuvuv] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.ai-card__header--warning[b-venfnhuvuv] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ai-card__header--info[b-venfnhuvuv] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.ai-card__icon-wrap[b-venfnhuvuv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 2rem;
}

/* ── Card Body ─────────────────────────────────────────────── */
.ai-card__body[b-venfnhuvuv] {
    padding: 1.5rem 2rem 2rem;
}

/* ── Details ───────────────────────────────────────────────── */
.ai-details-section[b-venfnhuvuv] {
    margin-bottom: 1.5rem;
}

.ai-detail-row[b-venfnhuvuv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.ai-detail-row:last-of-type[b-venfnhuvuv] {
    border-bottom: none;
}

.ai-detail-label[b-venfnhuvuv] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #718096);
}

.ai-detail-value[b-venfnhuvuv] {
    font-size: 0.9rem;
    color: var(--text-primary, #1a202c);
}

.ai-detail-value--bold[b-venfnhuvuv] {
    font-weight: 700;
}

/* ── Message box ───────────────────────────────────────────── */
.ai-message-box[b-venfnhuvuv] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 10px;
}

.ai-message-label[b-venfnhuvuv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #718096);
}

.ai-message-text[b-venfnhuvuv] {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-primary, #1a202c);
    line-height: 1.5;
}

/* ── Auth info ─────────────────────────────────────────────── */
.ai-auth-info[b-venfnhuvuv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    background: #d1fae5;
    border: 1px solid #10b981;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #065f46;
}

/* ── Anonymous section ─────────────────────────────────────── */
.ai-anon-section[b-venfnhuvuv] {
    text-align: center;
    padding-top: 0.5rem;
}

.ai-anon-text[b-venfnhuvuv] {
    font-size: 0.9rem;
    color: var(--text-secondary, #718096);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* ── Actions ───────────────────────────────────────────────── */
.ai-actions[b-venfnhuvuv] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────── */
.ai-btn[b-venfnhuvuv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.ai-btn:disabled[b-venfnhuvuv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-btn--primary[b-venfnhuvuv] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
}

.ai-btn--primary:hover:not(:disabled)[b-venfnhuvuv] {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.ai-btn--success[b-venfnhuvuv] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.ai-btn--success:hover:not(:disabled)[b-venfnhuvuv] {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.ai-btn--danger-outline[b-venfnhuvuv] {
    background: transparent;
    border: 1px solid #e53e3e;
    color: #e53e3e;
}

.ai-btn--danger-outline:hover:not(:disabled)[b-venfnhuvuv] {
    background: #e53e3e;
    color: white;
}

/* ── Badges ────────────────────────────────────────────────── */
.ai-badge[b-venfnhuvuv] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
}

.ai-badge--accepted[b-venfnhuvuv] { background: #d1fae5; color: #065f46; }
.ai-badge--pending[b-venfnhuvuv]   { background: #dbeafe; color: #1e40af; }
.ai-badge--declined[b-venfnhuvuv]  { background: #fed7d7; color: #742a2a; }
.ai-badge--expired[b-venfnhuvuv]   { background: #fef3c7; color: #92400e; }
.ai-badge--cancelled[b-venfnhuvuv] { background: #e2e8f0; color: #4a5568; }

:root[data-theme="dark"] .ai-badge--accepted[b-venfnhuvuv] { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
:root[data-theme="dark"] .ai-badge--pending[b-venfnhuvuv]   { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
:root[data-theme="dark"] .ai-badge--declined[b-venfnhuvuv]  { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; }
:root[data-theme="dark"] .ai-badge--expired[b-venfnhuvuv]   { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
:root[data-theme="dark"] .ai-badge--cancelled[b-venfnhuvuv] { background: rgba(71, 85, 105, 0.3);   color: #94a3b8; }

/* ── Alerts ────────────────────────────────────────────────── */
.ai-alert[b-venfnhuvuv] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.ai-alert--success[b-venfnhuvuv] {
    background: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
}

.ai-alert--error[b-venfnhuvuv] {
    background: #fed7d7;
    border: 1px solid #e53e3e;
    color: #742a2a;
}

.ai-alert--warning[b-venfnhuvuv] {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.ai-alert--info[b-venfnhuvuv] {
    background: #dbeafe;
    border: 1px solid #3b82f6;
    color: #1e40af;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ai-page[b-venfnhuvuv] {
        margin: 1rem auto;
    }

    .ai-card__body[b-venfnhuvuv] {
        padding: 1.25rem;
    }

    .ai-actions[b-venfnhuvuv] {
        flex-direction: column;
    }

    .ai-btn[b-venfnhuvuv] {
        width: 100%;
    }
}

/* ── Dark mode ─────────────────────────────────────────────── */
:root[data-theme="dark"] .ai-auth-info[b-venfnhuvuv] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

:root[data-theme="dark"] .ai-message-box[b-venfnhuvuv] {
    background: var(--surface-3, #1e293b);
    border-color: var(--border-primary, #1e293b);
}

:root[data-theme="dark"] .ai-alert--success[b-venfnhuvuv] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

:root[data-theme="dark"] .ai-alert--error[b-venfnhuvuv] {
    background: rgba(229, 62, 62, 0.15);
    border-color: rgba(229, 62, 62, 0.4);
    color: #fca5a5;
}

:root[data-theme="dark"] .ai-alert--warning[b-venfnhuvuv] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

:root[data-theme="dark"] .ai-alert--info[b-venfnhuvuv] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}
/* /Components/Pages/Network/OrganizationNetwork.razor.rz.scp.css */
/* ═══════════════════════════════════════
   ORGANIZATION NETWORK PAGE
   Enterprise-grade, theme-aware styles
   ═══════════════════════════════════════ */

.cn-page[b-s7tud51yyo] {
    padding: 1.5rem;
}

/* ── Header ────────────────────────────────────────────────── */
.cn-header[b-s7tud51yyo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cn-header__title[b-s7tud51yyo] {
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary, #1a202c);
    margin: 0;
}

.cn-header__icon[b-s7tud51yyo] {
    width: 28px;
    height: 28px;
    color: var(--gold-500, #d4a843);
}

.cn-header__sub[b-s7tud51yyo] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #718096);
}

/* ── Stats ─────────────────────────────────────────────────── */
.cn-stats[b-s7tud51yyo] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cn-stat[b-s7tud51yyo] {
    flex: 1;
    min-width: 140px;
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s ease;
}

.cn-stat:hover[b-s7tud51yyo] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.cn-stat__num[b-s7tud51yyo] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gold-500, #d4a843);
    line-height: 1;
}

.cn-stat--sent .cn-stat__num[b-s7tud51yyo] { color: #3182ce; }
.cn-stat--received .cn-stat__num[b-s7tud51yyo] { color: #805ad5; }

.cn-stat__label[b-s7tud51yyo] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #718096);
    margin-top: 0.25rem;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.cn-tabs[b-s7tud51yyo] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border-primary, #e2e8f0);
    margin-bottom: 1.5rem;
}

.cn-tab[b-s7tud51yyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #718096);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cn-tab:hover[b-s7tud51yyo] {
    color: var(--text-primary, #1a202c);
    background: var(--surface-hover, rgba(0, 0, 0, 0.03));
    border-radius: 8px 8px 0 0;
}

.cn-tab--active[b-s7tud51yyo] {
    color: var(--gold-500, #d4a843);
    border-bottom-color: var(--gold-500, #d4a843);
}

/* ── Partner cards grid ────────────────────────────────────── */
.cn-card-grid[b-s7tud51yyo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.cn-partner-card[b-s7tud51yyo] {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cn-partner-card:hover[b-s7tud51yyo] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.cn-partner-card__header[b-s7tud51yyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--gold-rgb, 212, 168, 67), 0.06), transparent);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.cn-partner-card__avatar[b-s7tud51yyo] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-500, #d4a843), var(--gold-600, #b8922d));
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-partner-card__info h4[b-s7tud51yyo] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
}

.cn-partner-card__body[b-s7tud51yyo] {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cn-partner-card__detail[b-s7tud51yyo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cn-detail-label[b-s7tud51yyo] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary, #718096);
}

.cn-detail-value[b-s7tud51yyo] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
}

.cn-partner-card__footer[b-s7tud51yyo] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
    display: flex;
    justify-content: flex-end;
}

/* ── Table ─────────────────────────────────────────────────── */
.cn-table-wrap[b-s7tud51yyo] {
    overflow-x: auto;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    background: var(--surface-1, #fff);
}

.cn-table[b-s7tud51yyo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.cn-table thead th[b-s7tud51yyo] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #718096);
    background: var(--surface-2, #f8fafc);
    border-bottom: 2px solid var(--border-primary, #e2e8f0);
}

.cn-table tbody td[b-s7tud51yyo] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    color: var(--text-primary, #1a202c);
    vertical-align: middle;
}

.cn-table tbody tr:last-child td[b-s7tud51yyo] {
    border-bottom: none;
}

.cn-table tbody tr:hover[b-s7tud51yyo] {
    background: var(--surface-hover, rgba(0, 0, 0, 0.02));
}

.cn-table-sub[b-s7tud51yyo] {
    font-size: 0.8rem;
    color: var(--text-secondary, #718096);
}

.cn-table-msg[b-s7tud51yyo] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary, #718096);
    font-style: italic;
}

/* ── Badges ────────────────────────────────────────────────── */
.cn-badge[b-s7tud51yyo] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    white-space: nowrap;
}

.cn-badge--active[b-s7tud51yyo],
.cn-badge--accepted[b-s7tud51yyo] {
    background: #d1fae5;
    color: #065f46;
}

.cn-badge--pending[b-s7tud51yyo] {
    background: #dbeafe;
    color: #1e40af;
}

.cn-badge--declined[b-s7tud51yyo] {
    background: #fed7d7;
    color: #742a2a;
}

.cn-badge--expired[b-s7tud51yyo] {
    background: #fef3c7;
    color: #92400e;
}

.cn-badge--cancelled[b-s7tud51yyo] {
    background: #e2e8f0;
    color: #4a5568;
}

.cn-badge--role[b-s7tud51yyo] {
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Buttons ───────────────────────────────────────────────── */
.cn-btn[b-s7tud51yyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.cn-btn:disabled[b-s7tud51yyo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cn-btn--primary[b-s7tud51yyo] {
    background: linear-gradient(135deg, var(--gold-500, #d4a843), var(--gold-600, #b8922d));
    color: white;
    border: none;
}

.cn-btn--primary:hover:not(:disabled)[b-s7tud51yyo] {
    box-shadow: 0 4px 12px rgba(var(--gold-rgb, 212, 168, 67), 0.3);
    transform: translateY(-1px);
}

.cn-btn--success[b-s7tud51yyo] {
    background: #10b981;
    color: white;
}

.cn-btn--success:hover:not(:disabled)[b-s7tud51yyo] {
    background: #059669;
}

.cn-btn--danger-outline[b-s7tud51yyo] {
    background: transparent;
    border: 1px solid #e53e3e;
    color: #e53e3e;
}

.cn-btn--danger-outline:hover:not(:disabled)[b-s7tud51yyo] {
    background: #e53e3e;
    color: white;
}

.cn-btn--danger[b-s7tud51yyo] {
    background: #e53e3e;
    color: white;
    border: none;
}

.cn-btn--danger:hover:not(:disabled)[b-s7tud51yyo] {
    background: #c53030;
}

.cn-btn--ghost[b-s7tud51yyo] {
    background: transparent;
    color: var(--text-secondary, #718096);
    border: 1px solid var(--border-primary, #e2e8f0);
}

.cn-btn--ghost:hover:not(:disabled)[b-s7tud51yyo] {
    background: var(--surface-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #1a202c);
}

.cn-btn--sm[b-s7tud51yyo] {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
}

.cn-btn-group[b-s7tud51yyo] {
    display: flex;
    gap: 0.4rem;
}

/* ── Empty state ───────────────────────────────────────────── */
.cn-empty[b-s7tud51yyo] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #718096);
}

.cn-empty h3[b-s7tud51yyo] {
    margin: 1rem 0 0.25rem;
    font-size: 1.1rem;
    color: var(--text-primary, #1a202c);
}

.cn-empty p[b-s7tud51yyo] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.cn-loading[b-s7tud51yyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem;
    color: var(--text-secondary, #718096);
}

/* ── Accept banner (from email link) ───────────────────────── */
.cn-accept-banner[b-s7tud51yyo] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    border: 1px solid #93c5fd;
    border-radius: 12px;
}

.cn-accept-banner__icon[b-s7tud51yyo] {
    font-size: 2rem;
    flex-shrink: 0;
}

.cn-accept-banner__body h3[b-s7tud51yyo] {
    margin: 0;
    font-size: 1.05rem;
    color: #1e3a5f;
}

.cn-accept-banner__body p[b-s7tud51yyo] {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
    color: #3b5998;
}

.cn-accept-banner__actions[b-s7tud51yyo] {
    display: flex;
    gap: 0.5rem;
}

/* ── Modal ─────────────────────────────────────────────────── */
.cn-modal-overlay[b-s7tud51yyo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: cn-fade-in-b-s7tud51yyo 0.2s ease;
}

.cn-modal[b-s7tud51yyo] {
    background: var(--surface-1, #fff);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    animation: cn-slide-up-b-s7tud51yyo 0.25s ease;
}

.cn-modal__header[b-s7tud51yyo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.cn-modal__header h2[b-s7tud51yyo] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
}

.cn-modal__close[b-s7tud51yyo] {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #718096);
    transition: background 0.2s;
}

.cn-modal__close:hover[b-s7tud51yyo] {
    background: var(--surface-active, rgba(0, 0, 0, 0.1));
}

.cn-modal__body[b-s7tud51yyo] {
    padding: 1.5rem;
}

.cn-modal__footer[b-s7tud51yyo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}

.cn-modal--sm[b-s7tud51yyo] {
    max-width: 380px;
}

.cn-modal__header--danger[b-s7tud51yyo] {
    border-bottom-color: rgba(229, 62, 62, 0.2);
}

.cn-modal__header--danger h2[b-s7tud51yyo] {
    color: #e53e3e;
}

.cn-confirm-sub[b-s7tud51yyo] {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #718096);
}

:root[data-theme="dark"] .cn-modal__header--danger h2[b-s7tud51yyo] {
    color: #fc8181;
}

.cn-modal__header--success[b-s7tud51yyo] {
    border-bottom-color: rgba(16, 185, 129, 0.2);
}

.cn-modal__header--success h2[b-s7tud51yyo] {
    color: #059669;
}

:root[data-theme="dark"] .cn-modal__header--success h2[b-s7tud51yyo] {
    color: #6ee7b7;
}

.cn-modal__header--warning[b-s7tud51yyo] {
    border-bottom-color: rgba(245, 158, 11, 0.2);
}

.cn-modal__header--warning h2[b-s7tud51yyo] {
    color: #d97706;
}

:root[data-theme="dark"] .cn-modal__header--warning h2[b-s7tud51yyo] {
    color: #fcd34d;
}

.cn-btn--warning[b-s7tud51yyo] {
    background: #d97706;
    color: white;
    border: none;
}

.cn-btn--warning:hover:not(:disabled)[b-s7tud51yyo] {
    background: #b45309;
}

/* ── Form elements ─────────────────────────────────────────── */
.cn-form-group[b-s7tud51yyo] {
    margin-bottom: 1rem;
}

.cn-label[b-s7tud51yyo] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin-bottom: 0.35rem;
}

.cn-required[b-s7tud51yyo] {
    color: #e53e3e;
}

.cn-input[b-s7tud51yyo] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    background: var(--surface-1, #fff);
    color: var(--text-primary, #1a202c);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.cn-input:focus[b-s7tud51yyo] {
    outline: none;
    border-color: var(--gold-500, #d4a843);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb, 212, 168, 67), 0.15);
}

.cn-textarea[b-s7tud51yyo] {
    resize: vertical;
    min-height: 80px;
}

.cn-form-error[b-s7tud51yyo] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: #fed7d7;
    border: 1px solid #e53e3e;
    border-radius: 8px;
    color: #742a2a;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Invite contextual hint ─────────────────────────────── */
.cn-invite-hint[b-s7tud51yyo] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.cn-invite-hint--organization[b-s7tud51yyo] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e3a5f;
}

.cn-invite-hint--user[b-s7tud51yyo] {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #064e3b;
}

.cn-invite-hint__icon[b-s7tud51yyo] { flex-shrink: 0; font-size: 1rem; }

:root[data-theme="dark"] .cn-invite-hint--organization[b-s7tud51yyo] {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(96, 165, 250, 0.4);
    color: #bfdbfe;
}

:root[data-theme="dark"] .cn-invite-hint--user[b-s7tud51yyo] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
    color: #a7f3d0;
}


/* ── Toast ─────────────────────────────────────────────────── */
.cn-toast[b-s7tud51yyo] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2000;
    animation: cn-slide-up-b-s7tud51yyo 0.3s ease;
}

.cn-toast--success[b-s7tud51yyo] {
    background: #065f46;
    color: white;
}

.cn-toast--error[b-s7tud51yyo] {
    background: #742a2a;
    color: white;
}

.cn-toast--info[b-s7tud51yyo] {
    background: #1e40af;
    color: white;
}

.cn-toast__close[b-s7tud51yyo] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.cn-toast__close:hover[b-s7tud51yyo] {
    opacity: 1;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes cn-fade-in-b-s7tud51yyo {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cn-slide-up-b-s7tud51yyo {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cn-header[b-s7tud51yyo] {
        flex-direction: column;
    }

    .cn-stats[b-s7tud51yyo] {
        flex-direction: column;
    }

    .cn-card-grid[b-s7tud51yyo] {
        grid-template-columns: 1fr;
    }

    .cn-tabs[b-s7tud51yyo] {
        overflow-x: auto;
    }

    .cn-tab[b-s7tud51yyo] {
        padding: 0.6rem 0.85rem;
        font-size: 0.8rem;
    }

    .cn-modal[b-s7tud51yyo] {
        width: 95%;
    }
}

/* ── Dark mode support (via CSS custom properties) ─────────── */
:root[data-theme="dark"] .cn-badge--active[b-s7tud51yyo],
:root[data-theme="dark"] .cn-badge--accepted[b-s7tud51yyo] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

:root[data-theme="dark"] .cn-badge--pending[b-s7tud51yyo] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

:root[data-theme="dark"] .cn-badge--declined[b-s7tud51yyo] {
    background: rgba(229, 62, 62, 0.2);
    color: #fca5a5;
}

:root[data-theme="dark"] .cn-badge--expired[b-s7tud51yyo] {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

:root[data-theme="dark"] .cn-badge--cancelled[b-s7tud51yyo] {
    background: rgba(113, 128, 150, 0.2);
    color: #a0aec0;
}

:root[data-theme="dark"] .cn-badge--role[b-s7tud51yyo] {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

:root[data-theme="dark"] .cn-accept-banner[b-s7tud51yyo] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-color: rgba(59, 130, 246, 0.4);
}

:root[data-theme="dark"] .cn-accept-banner__body h3[b-s7tud51yyo] {
    color: #93c5fd;
}

:root[data-theme="dark"] .cn-accept-banner__body p[b-s7tud51yyo] {
    color: #bfdbfe;
}

:root[data-theme="dark"] .cn-form-error[b-s7tud51yyo] {
    background: rgba(229, 62, 62, 0.15);
    border-color: rgba(229, 62, 62, 0.4);
    color: #fca5a5;
}

/* -- Access-denied panel -------------------------------------------- */
.cn-access-denied[b-s7tud51yyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.cn-access-denied__icon[b-s7tud51yyo] { color: var(--text-secondary, #718096); }

.cn-access-denied__title[b-s7tud51yyo] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    margin: 0;
}

.cn-access-denied__msg[b-s7tud51yyo] {
    font-size: 0.95rem;
    color: var(--text-secondary, #718096);
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}
/* /Components/Pages/Organization/OrganizationSettings.razor.rz.scp.css */
.cs-page[b-5y5wz5mzpd] {
    padding-bottom: 5rem;
}


/* ── Loading / Empty ─────────────────────────────────────────────────────── */
.cs-loading[b-5y5wz5mzpd],
.cs-empty[b-5y5wz5mzpd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 0.85rem;
    color: var(--text-secondary);
}

.cs-empty h3[b-5y5wz5mzpd] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cs-empty p[b-5y5wz5mzpd] { font-size: 0.9rem; margin: 0; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.cs-toast[b-5y5wz5mzpd] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.cs-toast--success[b-5y5wz5mzpd] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #065f46;
}

:root[data-theme="dark"] .cs-toast--success[b-5y5wz5mzpd],
[data-bs-theme="dark"] .cs-toast--success[b-5y5wz5mzpd] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.cs-toast--error[b-5y5wz5mzpd] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

:root[data-theme="dark"] .cs-toast--error[b-5y5wz5mzpd],
[data-bs-theme="dark"] .cs-toast--error[b-5y5wz5mzpd] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.cs-toast__close[b-5y5wz5mzpd] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    padding: 0 0.25rem;
}

.cs-toast__close:hover[b-5y5wz5mzpd] { opacity: 1; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.cs-card[b-5y5wz5mzpd] {
    background: var(--surface-1);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.cs-card:hover[b-5y5wz5mzpd] { box-shadow: var(--shadow-md); }

.cs-card__header[b-5y5wz5mzpd] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--border-primary);
    background: var(--surface-2);
}

.cs-card__header-icon[b-5y5wz5mzpd] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cs-card__header-icon--blue[b-5y5wz5mzpd]  { background: rgba(37,99,235,0.12);  color: #2563eb; }
.cs-card__header-icon--amber[b-5y5wz5mzpd] { background: rgba(245,158,11,0.12); color: #d97706; }
.cs-card__header-icon--green[b-5y5wz5mzpd] { background: rgba(16,185,129,0.12); color: #059669; }
.cs-card__header-icon--purple[b-5y5wz5mzpd]{ background: rgba(109,40,217,0.12); color: #7c3aed; }
.cs-card__header-icon--teal[b-5y5wz5mzpd]  { background: rgba(20,184,166,0.12); color: #0d9488; }
.cs-card__header-icon--indigo[b-5y5wz5mzpd]{ background: rgba(99,102,241,0.12); color: #6366f1; }

:root[data-theme="dark"] .cs-card__header-icon--blue[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card__header-icon--blue[b-5y5wz5mzpd]  { background: rgba(37,99,235,0.2);  color: #93c5fd; }
:root[data-theme="dark"] .cs-card__header-icon--amber[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card__header-icon--amber[b-5y5wz5mzpd] { background: rgba(245,158,11,0.2); color: #fcd34d; }
:root[data-theme="dark"] .cs-card__header-icon--green[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card__header-icon--green[b-5y5wz5mzpd] { background: rgba(16,185,129,0.2); color: #6ee7b7; }
:root[data-theme="dark"] .cs-card__header-icon--purple[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card__header-icon--purple[b-5y5wz5mzpd]{ background: rgba(109,40,217,0.2); color: #c4b5fd; }
:root[data-theme="dark"] .cs-card__header-icon--teal[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card__header-icon--teal[b-5y5wz5mzpd]  { background: rgba(20,184,166,0.2); color: #5eead4; }
:root[data-theme="dark"] .cs-card__header-icon--indigo[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card__header-icon--indigo[b-5y5wz5mzpd]{ background: rgba(99,102,241,0.2); color: #a5b4fc; }

.cs-card__title[b-5y5wz5mzpd] {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.15rem;
}

.cs-card__desc[b-5y5wz5mzpd] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.cs-card__body[b-5y5wz5mzpd] { padding: 1.4rem; }

/* ── Grid layouts ────────────────────────────────────────────────────────── */
.cs-grid[b-5y5wz5mzpd] {
    display: grid;
    gap: 1.15rem;
}

.cs-grid--1[b-5y5wz5mzpd] { grid-template-columns: 1fr; }
.cs-grid--2[b-5y5wz5mzpd] { grid-template-columns: 1fr 1fr; }
.cs-grid--3[b-5y5wz5mzpd] { grid-template-columns: 1fr 1fr 1fr; }

/* 3-col → 2-col on medium screens */
@media (max-width: 960px) {
    .cs-grid--3[b-5y5wz5mzpd] { grid-template-columns: 1fr 1fr; }
}

/* 2-col and 3-col → 1-col on small screens */
@media (max-width: 600px) {
    .cs-grid--2[b-5y5wz5mzpd],
    .cs-grid--3[b-5y5wz5mzpd] { grid-template-columns: 1fr; }
}

.cs-field--full[b-5y5wz5mzpd]  { grid-column: 1 / -1; }
.cs-field--span2[b-5y5wz5mzpd] { grid-column: span 2; }

/* ── Field ───────────────────────────────────────────────────────────────── */
.cs-field[b-5y5wz5mzpd] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cs-label[b-5y5wz5mzpd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cs-label--required[b-5y5wz5mzpd]::after {
    content: " *";
    color: #ef4444;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
/*
  All form-component rules (InputText, InputSelect, InputNumber, InputTextArea,
  ValidationMessage) use ::deep so the styles pierce Blazor CSS-isolation
  boundaries and are guaranteed to reach component-rendered elements even when
  the parent's scope attribute doesn’t propagate through AdditionalAttributes.
  .cs-page is a direct <div> in the template → it always carries the scope attr.
*/
.cs-page[b-5y5wz5mzpd]  .cs-input {
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface-3); /* #F1F5F9 light → #1E293B dark — auto-adapts */
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    appearance: none;
    /* NO color-scheme property — explicit background/color are sufficient and
       color-scheme:light would force OS system-colour overrides in dark mode */
}

.cs-page[b-5y5wz5mzpd]  .cs-input:focus {
    border-color: var(--gold-500, #FBB040);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(251,176,64,0.15));
    outline: none;
}

/* Dark mode: background is already correct via var(--surface-3)=#1E293B.
   We only need to fix the border (border-primary=#1E293B in dark = same as bg)
   and add color-scheme:dark so native <select> dropdowns render dark. */
:root[data-theme="dark"] .cs-page[b-5y5wz5mzpd]  .cs-input,
[data-bs-theme="dark"]   .cs-page[b-5y5wz5mzpd]  .cs-input {
    color-scheme: dark; /* makes native <select> popup dark */
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .cs-page[b-5y5wz5mzpd]  .cs-input:focus,
[data-bs-theme="dark"]   .cs-page[b-5y5wz5mzpd]  .cs-input:focus {
    border-color: #FBB040;
    box-shadow: 0 0 0 3px rgba(251,176,64,0.18);
}

:root[data-theme="dark"] .cs-page[b-5y5wz5mzpd]  .cs-input::placeholder,
[data-bs-theme="dark"]   .cs-page[b-5y5wz5mzpd]  .cs-input::placeholder {
    color: #64748B;
    opacity: 1;
}

.cs-page[b-5y5wz5mzpd]  .cs-input--readonly {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--surface-2); /* slightly lighter than editable inputs */
}

:root[data-theme="dark"] .cs-page[b-5y5wz5mzpd]  .cs-input--readonly,
[data-bs-theme="dark"]   .cs-page[b-5y5wz5mzpd]  .cs-input--readonly {
    background: #0D1117; /* deepest dark — clearly different from editable */
    border-color: transparent;
    color: #94A3B8;
}

.cs-page[b-5y5wz5mzpd]  .cs-textarea {
    resize: vertical;
    min-height: 88px;
}

.cs-page[b-5y5wz5mzpd]  .cs-select { cursor: pointer; }

/* Custom dropdown arrow */
.cs-page[b-5y5wz5mzpd]  .cs-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
    background-size: 12px 8px;
}

:root[data-theme="dark"] .cs-page[b-5y5wz5mzpd]  .cs-select,
[data-bs-theme="dark"]   .cs-page[b-5y5wz5mzpd]  .cs-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cs-hint[b-5y5wz5mzpd] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ── Validation ──────────────────────────────────────────────────────────── */
.cs-page[b-5y5wz5mzpd]  .cs-validation {
    font-size: 0.775rem;
    color: #ef4444;
}

:root[data-theme="dark"] .cs-page[b-5y5wz5mzpd]  .cs-validation,
[data-bs-theme="dark"]   .cs-page[b-5y5wz5mzpd]  .cs-validation { color: #fca5a5; }

/* ── Input with prefix icon ──────────────────────────────────────────────── */
.cs-input-prefix-wrap[b-5y5wz5mzpd] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.cs-input-prefix[b-5y5wz5mzpd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--surface-3);
    border: 1px solid var(--border-primary);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-secondary);
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

.cs-input-prefix svg[b-5y5wz5mzpd] { flex-shrink: 0; }

:root[data-theme="dark"] .cs-input-prefix[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-input-prefix[b-5y5wz5mzpd] {
    background: #151B27;
    border-color: rgba(255,255,255,0.1);
    color: #94A3B8;
}

.cs-input-prefix--linkedin[b-5y5wz5mzpd] { color: #0a66c2; background: rgba(10,102,194,0.1); }
.cs-input-prefix--facebook[b-5y5wz5mzpd] { color: #1877f2; background: rgba(24,119,242,0.1); }
.cs-input-prefix--slug[b-5y5wz5mzpd]     { color: var(--text-secondary); font-weight: 700; font-size: 1.05rem; }

:root[data-theme="dark"] .cs-input-prefix--linkedin[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-input-prefix--linkedin[b-5y5wz5mzpd] { color: #93c5fd; background: rgba(10,102,194,0.18); border-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .cs-input-prefix--facebook[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-input-prefix--facebook[b-5y5wz5mzpd] { color: #93c5fd; background: rgba(24,119,242,0.18); border-color: rgba(255,255,255,0.08); }

.cs-page[b-5y5wz5mzpd]  .cs-input--prefixed {
    border-radius: 0 8px 8px 0;
    flex: 1;
    min-width: 0;
}

/* ── Save bar ────────────────────────────────────────────────────────────── */
.cs-save-bar[b-5y5wz5mzpd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cs-save-bar__hint[b-5y5wz5mzpd] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.cs-btn[b-5y5wz5mzpd] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.2rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.18s;
    text-decoration: none;
}

.cs-btn:disabled[b-5y5wz5mzpd] { opacity: 0.55; cursor: not-allowed; }

.cs-btn--primary[b-5y5wz5mzpd] {
    background: linear-gradient(135deg, #1e40af, #6d28d9);
    color: white;
    box-shadow: 0 2px 8px rgba(109,40,217,0.28);
}

.cs-btn--primary:hover:not(:disabled)[b-5y5wz5mzpd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(109,40,217,0.38);
}

.cs-btn--danger[b-5y5wz5mzpd] {
    background: #ef4444;
    color: white;
}

.cs-btn--danger:hover:not(:disabled)[b-5y5wz5mzpd] {
    background: #dc2626;
    transform: translateY(-1px);
}

.cs-btn--delete[b-5y5wz5mzpd] {
    background: transparent;
    color: #ef4444;
    border: 1.5px solid #ef4444;
    padding: 0.45rem 1rem;
}

.cs-btn--delete:hover:not(:disabled)[b-5y5wz5mzpd] {
    background: rgba(239,68,68,0.08);
}

:root[data-theme="dark"] .cs-btn--delete[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-btn--delete[b-5y5wz5mzpd] { color: #fca5a5; border-color: #fca5a5; }
:root[data-theme="dark"] .cs-btn--delete:hover:not(:disabled)[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-btn--delete:hover:not(:disabled)[b-5y5wz5mzpd] { background: rgba(252,165,165,0.1); }

.cs-btn--ghost[b-5y5wz5mzpd] {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-primary);
    padding: 0.45rem 1rem;
}

.cs-btn--ghost:hover:not(:disabled)[b-5y5wz5mzpd] { background: var(--surface-hover); }

/* ── Danger Zone ──────────────────────────────────────────────────────────── */
.cs-danger-zone[b-5y5wz5mzpd] {
    border: 1.5px solid rgba(239,68,68,0.35);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 2rem;
}

:root[data-theme="dark"] .cs-danger-zone[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-danger-zone[b-5y5wz5mzpd] { border-color: rgba(252,165,165,0.25); }

.cs-danger-zone__header[b-5y5wz5mzpd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    background: rgba(239,68,68,0.07);
    border-bottom: 1.5px solid rgba(239,68,68,0.15);
    color: #ef4444;
}

:root[data-theme="dark"] .cs-danger-zone__header[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-danger-zone__header[b-5y5wz5mzpd] { color: #fca5a5; background: rgba(252,165,165,0.08); }

.cs-danger-zone__header h3[b-5y5wz5mzpd] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: inherit;
}

.cs-danger-zone__body[b-5y5wz5mzpd] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    flex-wrap: wrap;
    background: var(--surface-1);
}

.cs-danger-zone__info[b-5y5wz5mzpd] {
    flex: 1;
    min-width: 200px;
}

.cs-danger-zone__info strong[b-5y5wz5mzpd] {
    font-size: 0.9rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.3rem;
}

.cs-danger-zone__info p[b-5y5wz5mzpd] {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin: 0;
}

.cs-danger-zone__warning[b-5y5wz5mzpd] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #92400e;
    margin-top: 0.75rem;
    width: 100%;
}

:root[data-theme="dark"] .cs-danger-zone__warning[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-danger-zone__warning[b-5y5wz5mzpd] {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.25);
    color: #fcd34d;
}

.cs-danger-zone__error[b-5y5wz5mzpd] {
    font-size: 0.82rem;
    color: #ef4444;
    margin-top: 0.5rem;
    width: 100%;
}

:root[data-theme="dark"] .cs-danger-zone__error[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-danger-zone__error[b-5y5wz5mzpd] { color: #fca5a5; }

.cs-danger-zone__confirm[b-5y5wz5mzpd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cs-danger-zone__confirm-label[b-5y5wz5mzpd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Read-only badge in card header ──────────────────────────────────────── */
.cs-card__ro-badge[b-5y5wz5mzpd] {
    margin-left: auto;
    align-self: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    white-space: nowrap;
}

/* ── Subscription card subtle tint ──────────────────────────────────────── */
.cs-card--subscription .cs-card__header[b-5y5wz5mzpd] {
    background: rgba(99,102,241,0.06);
}

:root[data-theme="dark"] .cs-card--subscription .cs-card__header[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-card--subscription .cs-card__header[b-5y5wz5mzpd] {
    background: rgba(99,102,241,0.1);
}

/* ── Plan badges ─────────────────────────────────────────────────────────── */
.cs-plan-badge[b-5y5wz5mzpd] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid transparent;
}

.cs-plan-badge--free[b-5y5wz5mzpd]       { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border-primary); }
.cs-plan-badge--starter[b-5y5wz5mzpd]    { background: rgba(37,99,235,0.1);   color: #2563eb; border-color: rgba(37,99,235,0.3); }
.cs-plan-badge--pro[b-5y5wz5mzpd]        { background: rgba(109,40,217,0.1);  color: #7c3aed; border-color: rgba(109,40,217,0.3); }
.cs-plan-badge--enterprise[b-5y5wz5mzpd] { background: rgba(245,158,11,0.12); color: #b45309; border-color: rgba(245,158,11,0.35); }

:root[data-theme="dark"] .cs-plan-badge--free[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-plan-badge--free[b-5y5wz5mzpd]       { background: rgba(255,255,255,0.05); color: var(--text-secondary); }
:root[data-theme="dark"] .cs-plan-badge--starter[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-plan-badge--starter[b-5y5wz5mzpd]    { background: rgba(37,99,235,0.18);   color: #93c5fd;  border-color: rgba(37,99,235,0.4); }
:root[data-theme="dark"] .cs-plan-badge--pro[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-plan-badge--pro[b-5y5wz5mzpd]        { background: rgba(109,40,217,0.18);  color: #c4b5fd;  border-color: rgba(109,40,217,0.4); }
:root[data-theme="dark"] .cs-plan-badge--enterprise[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-plan-badge--enterprise[b-5y5wz5mzpd] { background: rgba(245,158,11,0.18);  color: #fcd34d;  border-color: rgba(245,158,11,0.4); }

/* ── Status badges ───────────────────────────────────────────────────────── */
.cs-status-badge[b-5y5wz5mzpd] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1.5px solid transparent;
}

.cs-status-dot[b-5y5wz5mzpd] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cs-status-badge--active[b-5y5wz5mzpd]    { background: rgba(16,185,129,0.1);  color: #065f46; border-color: rgba(16,185,129,0.3); }
.cs-status-badge--active    .cs-status-dot[b-5y5wz5mzpd] { background: #10b981; }
.cs-status-badge--trialing[b-5y5wz5mzpd]  { background: rgba(245,158,11,0.1);  color: #92400e; border-color: rgba(245,158,11,0.3); }
.cs-status-badge--trialing  .cs-status-dot[b-5y5wz5mzpd] { background: #f59e0b; }
.cs-status-badge--suspended[b-5y5wz5mzpd] { background: rgba(239,68,68,0.1);   color: #991b1b; border-color: rgba(239,68,68,0.3); }
.cs-status-badge--suspended .cs-status-dot[b-5y5wz5mzpd] { background: #ef4444; }
.cs-status-badge--cancelled[b-5y5wz5mzpd] { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border-primary); }
.cs-status-badge--cancelled .cs-status-dot[b-5y5wz5mzpd] { background: var(--text-secondary); }

:root[data-theme="dark"] .cs-status-badge--active[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-status-badge--active[b-5y5wz5mzpd]    { background: rgba(16,185,129,0.15);  color: #6ee7b7;  border-color: rgba(16,185,129,0.35); }
:root[data-theme="dark"] .cs-status-badge--trialing[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-status-badge--trialing[b-5y5wz5mzpd]  { background: rgba(245,158,11,0.15);  color: #fcd34d;  border-color: rgba(245,158,11,0.35); }
:root[data-theme="dark"] .cs-status-badge--suspended[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-status-badge--suspended[b-5y5wz5mzpd] { background: rgba(239,68,68,0.15);   color: #fca5a5;  border-color: rgba(239,68,68,0.35); }

/* ── Animate in ──────────────────────────────────────────────────────────── */
@keyframes cs-fade-in-b-5y5wz5mzpd {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in[b-5y5wz5mzpd] { animation: cs-fade-in-b-5y5wz5mzpd 0.22s ease both; }

/* ── Colour picker ───────────────────────────────────────────────────────── */
.cs-color-wrap[b-5y5wz5mzpd] {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.cs-color-picker[b-5y5wz5mzpd] {
    width: 48px;
    min-width: 48px;
    height: auto;
    padding: 0.3rem;
    border: 1px solid var(--border-primary);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: var(--surface-3);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

:root[data-theme="dark"] .cs-color-picker[b-5y5wz5mzpd],
[data-bs-theme="dark"]   .cs-color-picker[b-5y5wz5mzpd] {
    background: #151B27;
    border-color: rgba(255,255,255,0.1);
}

.cs-color-picker[b-5y5wz5mzpd]::-webkit-color-swatch-wrapper { padding: 2px; border-radius: 5px; }
.cs-color-picker[b-5y5wz5mzpd]::-webkit-color-swatch         { border: none; border-radius: 4px; }
.cs-color-picker[b-5y5wz5mzpd]::-moz-color-swatch            { border: none; border-radius: 4px; }

.cs-page[b-5y5wz5mzpd]  .cs-input--color-text {
    border-radius: 0 8px 8px 0;
    flex: 1;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}
/* /Components/Pages/Organization/OrganizationTeam.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────────── */
.cm-page[b-7whizis20v] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem 5rem;
    position: relative;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.cm-header[b-7whizis20v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.cm-header__left[b-7whizis20v] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cm-header__icon[b-7whizis20v] {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.cm-header__icon svg[b-7whizis20v] { width: 26px; height: 26px; }

.cm-header__title[b-7whizis20v] {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    line-height: 1.2;
}

.cm-header__sub[b-7whizis20v] {
    font-size: 0.875rem;
    opacity: 0.85;
    margin: 0;
}

.cm-header__count[b-7whizis20v] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    background: rgba(255,255,255,0.22);
    border-radius: 999px;
    color: white;
    white-space: nowrap;
}

/* ── Loading / Empty / Access-denied ─────────────────────────────────────── */
.cm-loading[b-7whizis20v],
.cm-empty[b-7whizis20v],
.cm-access-denied[b-7whizis20v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 0.85rem;
    color: var(--text-secondary, #718096);
}

.cm-empty h3[b-7whizis20v],
.cm-access-denied h2[b-7whizis20v] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin: 0;
}

.cm-empty p[b-7whizis20v],
.cm-access-denied p[b-7whizis20v] { font-size: 0.9rem; margin: 0; }

/* ── Table wrapper ───────────────────────────────────────────────────────── */
.cm-table-wrapper[b-7whizis20v] {
    background: var(--surface-1, #ffffff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}

.cm-table[b-7whizis20v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cm-table thead th[b-7whizis20v] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-2, #f8fafc);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary, #718096);
    text-align: left;
    white-space: nowrap;
}

.cm-row td[b-7whizis20v] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary, #f1f5f9);
    vertical-align: middle;
    color: var(--text-primary, #1a202c);
}

.cm-row:last-child td[b-7whizis20v] { border-bottom: none; }
.cm-row--self[b-7whizis20v]         { background: var(--surface-2, #f8fafc); }
.cm-row--inactive[b-7whizis20v]     { opacity: 0.55; }

/* ── Member cell ──────────────────────────────────────────────────────────── */
.cm-member[b-7whizis20v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 180px;
}

.cm-avatar[b-7whizis20v] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    color: white;
}

.cm-avatar--owner[b-7whizis20v]      { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.cm-avatar--superadmin[b-7whizis20v] { background: linear-gradient(135deg, #d97706, #b45309); }
.cm-avatar--admin[b-7whizis20v]      { background: linear-gradient(135deg, #059669, #047857); }
.cm-avatar--manager[b-7whizis20v]    { background: linear-gradient(135deg, #0891b2, #0e7490); }
.cm-avatar--viewer[b-7whizis20v]     { background: linear-gradient(135deg, #6b7280, #4b5563); }

.cm-member__info[b-7whizis20v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cm-member__name[b-7whizis20v] {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cm-member__email[b-7whizis20v] {
    font-size: 0.8rem;
    color: var(--text-secondary, #718096);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* ── Inline chips (You / Primary / Inactive) ─────────────────────────────── */
.cm-chip[b-7whizis20v] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.cm-chip--you[b-7whizis20v]     { background: #dbeafe; color: #1d4ed8; }
.cm-chip--primary[b-7whizis20v] { background: #fef3c7; color: #92400e; }
.cm-chip--inactive[b-7whizis20v]{ background: #fee2e2; color: #991b1b; }

:root[data-theme="dark"] .cm-chip--you[b-7whizis20v]      { background: rgba(37,99,235,0.25);  color: #93c5fd; }
:root[data-theme="dark"] .cm-chip--primary[b-7whizis20v]  { background: rgba(245,158,11,0.2);  color: #fcd34d; }
:root[data-theme="dark"] .cm-chip--inactive[b-7whizis20v] { background: rgba(239,68,68,0.2);   color: #fca5a5; }

/* ── Role badge (read-only display) ─────────────────────────────────────── */
.cm-role-badge[b-7whizis20v] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.cm-role-badge--owner[b-7whizis20v]      { background: #dbeafe; color: #1d4ed8; }
.cm-role-badge--superadmin[b-7whizis20v] { background: #fef3c7; color: #92400e; }
.cm-role-badge--admin[b-7whizis20v]      { background: #d1fae5; color: #065f46; }
.cm-role-badge--manager[b-7whizis20v]    { background: #cffafe; color: #0e7490; }
.cm-role-badge--viewer[b-7whizis20v]     { background: #f1f5f9; color: #475569; }

:root[data-theme="dark"] .cm-role-badge--owner[b-7whizis20v]      { background: rgba(37,99,235,0.2);   color: #93c5fd; }
:root[data-theme="dark"] .cm-role-badge--superadmin[b-7whizis20v] { background: rgba(245,158,11,0.2);  color: #fcd34d; }
:root[data-theme="dark"] .cm-role-badge--admin[b-7whizis20v]      { background: rgba(16,185,129,0.2);  color: #6ee7b7; }
:root[data-theme="dark"] .cm-role-badge--manager[b-7whizis20v]    { background: rgba(14,165,233,0.2);  color: #7dd3fc; }
:root[data-theme="dark"] .cm-role-badge--viewer[b-7whizis20v]     { background: rgba(100,116,139,0.2); color: #94a3b8; }

.cm-role-lock[b-7whizis20v] { font-size: 0.7rem; }

/* ── Role select dropdown ────────────────────────────────────────────────── */
.cm-role-select[b-7whizis20v] {
    padding: 0.35rem 0.7rem;
    border: 1.5px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #1a202c);
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    min-width: 130px;
}

.cm-role-select:focus[b-7whizis20v] { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

.cm-role-select--changed[b-7whizis20v] {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

:root[data-theme="dark"] .cm-role-select[b-7whizis20v] {
    background: var(--surface-2, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

:root[data-theme="dark"] .cm-role-select--changed[b-7whizis20v] {
    background: rgba(245,158,11,0.1);
    border-color: #f59e0b;
    color: #fcd34d;
}

/* ── Date ────────────────────────────────────────────────────────────────── */
.cm-date[b-7whizis20v] {
    font-size: 0.82rem;
    color: var(--text-secondary, #718096);
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.cm-actions[b-7whizis20v] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cm-btn[b-7whizis20v] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.cm-btn:disabled[b-7whizis20v] { opacity: 0.55; cursor: not-allowed; }

.cm-btn--save[b-7whizis20v]   { background: #2563eb; color: white; }
.cm-btn--ghost[b-7whizis20v]  { background: var(--surface-2, #f1f5f9); color: var(--text-primary, #374151); border-color: var(--border-primary, #e2e8f0); }
.cm-btn--danger[b-7whizis20v] { background: #dc2626; color: white; }
.cm-btn--remove[b-7whizis20v] { background: transparent; color: #dc2626; border-color: #dc2626; }

.cm-btn--save:hover:not(:disabled)[b-7whizis20v]   { opacity: 0.85; }
.cm-btn--ghost:hover:not(:disabled)[b-7whizis20v]  { background: var(--surface-hover, #e2e8f0); }
.cm-btn--danger:hover:not(:disabled)[b-7whizis20v] { opacity: 0.85; }
.cm-btn--remove:hover:not(:disabled)[b-7whizis20v] { background: #fee2e2; }

:root[data-theme="dark"] .cm-btn--remove:hover:not(:disabled)[b-7whizis20v] { background: rgba(239,68,68,0.15); }

.cm-confirm-text[b-7whizis20v] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #dc2626;
}

.cm-muted[b-7whizis20v] {
    font-size: 0.8rem;
    color: var(--text-secondary, #9ca3af);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.cm-toast[b-7whizis20v] {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    z-index: 9999;
    animation: cm-slide-in-b-7whizis20v 0.22s ease;
    max-width: 380px;
}

.cm-toast--success[b-7whizis20v] { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.cm-toast--error[b-7whizis20v]   { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; }

:root[data-theme="dark"] .cm-toast--success[b-7whizis20v] { background: rgba(16,185,129,0.18); color: #6ee7b7; border-color: #10b981; }
:root[data-theme="dark"] .cm-toast--error[b-7whizis20v]   { background: rgba(239,68,68,0.18);  color: #fca5a5; border-color: #f87171; }

.cm-toast__close[b-7whizis20v] {
    background: none;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.65;
    margin-left: auto;
    padding: 0;
    line-height: 1;
}

@keyframes cm-slide-in-b-7whizis20v {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Dark mode table overrides ───────────────────────────────────────────── */
:root[data-theme="dark"] .cm-table-wrapper[b-7whizis20v] {
    background: var(--surface-1, #1e293b);
    border-color: var(--border-primary, #334155);
}

:root[data-theme="dark"] .cm-table thead th[b-7whizis20v] {
    background: var(--surface-2, #0f172a);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #94a3b8);
}

:root[data-theme="dark"] .cm-row td[b-7whizis20v]         { border-color: var(--border-secondary, #1e293b); }
:root[data-theme="dark"] .cm-row--self[b-7whizis20v]       { background: var(--surface-2, #0f172a); }
/* /Components/Pages/SystemHealth.razor.rz.scp.css */
.sh-page-grid[b-dbea35pqeu] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .sh-page-grid[b-dbea35pqeu] {
        grid-template-columns: 1fr;
    }
}

/* ── Service health checks section ── */
.sh-checks-section[b-dbea35pqeu] {
    margin-top: 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}

/* ── Endpoint reference section ── */
.sh-endpoints-section[b-dbea35pqeu] {
    margin-top: 1.25rem;
}

.sh-endpoint-grid[b-dbea35pqeu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .sh-endpoint-grid[b-dbea35pqeu] {
        grid-template-columns: 1fr;
    }
}

.sh-endpoint[b-dbea35pqeu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-secondary);
}

.sh-endpoint__path[b-dbea35pqeu] {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--gold-500);
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.sh-endpoint__label[b-dbea35pqeu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sh-endpoint__note[b-dbea35pqeu] {
    font-size: 0.73rem;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* ── Shared info card ── */
.sh-info-card[b-dbea35pqeu] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}

.sh-info-card__title[b-dbea35pqeu] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.sh-info-list[b-dbea35pqeu] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sh-info-list li[b-dbea35pqeu] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.sh-info-list strong[b-dbea35pqeu] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.sh-info-list p[b-dbea35pqeu] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.sh-dot[b-dbea35pqeu] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.sh-dot--cpu[b-dbea35pqeu]     { background: #94a3b8; }
.sh-dot--memory[b-dbea35pqeu]  { background: #34d399; }
.sh-dot--disk[b-dbea35pqeu]    { background: #f87171; }
.sh-dot--network[b-dbea35pqeu] { background: #60a5fa; }

/* /Components/Pages/ThemeSettings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Theme Settings Page Styles
   ═══════════════════════════════════════════════════════════ */

.theme-settings-page[b-va196nfe9f] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    padding: 0;
    margin: 0 auto;
}

/* Theme Settings Card */
.theme-settings-card[b-va196nfe9f] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.theme-settings-header[b-va196nfe9f] {
    padding: 2rem;
    border-bottom: 1px solid var(--border-secondary);
    background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

.theme-settings-title[b-va196nfe9f] {
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.theme-settings-subtitle[b-va196nfe9f] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.theme-settings-body[b-va196nfe9f] {
    padding: 2rem;
}

/* Theme Section */
.theme-section[b-va196nfe9f] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}

.theme-section:last-child[b-va196nfe9f] {
    border-bottom: none;
}

.theme-section--actions[b-va196nfe9f] {
    display: flex;
    gap: 1rem;
    padding-bottom: 0;
}

.theme-section__header[b-va196nfe9f] {
    margin-bottom: 1.5rem;
}

.theme-section__title[b-va196nfe9f] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.theme-section__desc[b-va196nfe9f] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Theme Options (Grid) */
.theme-options[b-va196nfe9f] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.theme-option[b-va196nfe9f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--surface-2);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.theme-option svg[b-va196nfe9f] {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
}

.theme-option:hover[b-va196nfe9f] {
    border-color: var(--border-focus);
    background: var(--surface-hover);
    transform: translateY(-2px);
}

.theme-option.active[b-va196nfe9f] {
    border-color: var(--gold-500);
    background: var(--accent-glow);
}

.theme-option.active svg[b-va196nfe9f] {
    color: var(--gold-500);
}

/* Toggle Switch */
.theme-toggle[b-va196nfe9f] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toggle-switch[b-va196nfe9f] {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

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

.toggle-slider[b-va196nfe9f] {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border-radius: 28px;
    cursor: pointer;
    transition: background 0.3s;
    border: 2px solid var(--border-primary);
}

.toggle-slider[b-va196nfe9f]:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch input:checked + .toggle-slider[b-va196nfe9f] {
    background: var(--accent-gradient);
    border-color: var(--gold-500);
}

.toggle-switch input:checked + .toggle-slider[b-va196nfe9f]:before {
    transform: translateX(24px);
}

.toggle-label[b-va196nfe9f] {
    flex: 1;
}

.toggle-label strong[b-va196nfe9f] {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.toggle-desc[b-va196nfe9f] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Color Pickers */
.color-pickers[b-va196nfe9f] {
    display: grid;
    gap: 1.5rem;
}

.color-picker[b-va196nfe9f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.color-picker label[b-va196nfe9f] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.color-input-group[b-va196nfe9f] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.color-input-group input[type="color"][b-va196nfe9f] {
    width: 60px;
    height: 40px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
}

.color-input-group .color-text[b-va196nfe9f] {
    flex: 1;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--surface-1);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.color-input-group .color-text:focus[b-va196nfe9f] {
    border-color: var(--border-focus);
    outline: none;
}

.color-picker small[b-va196nfe9f] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* Radio Group */
.theme-radio-group[b-va196nfe9f] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.theme-radio[b-va196nfe9f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--surface-2);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.theme-radio:hover[b-va196nfe9f] {
    border-color: var(--border-focus);
    background: var(--surface-hover);
}

.theme-radio input[type="radio"][b-va196nfe9f] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold-500);
    cursor: pointer;
}

.theme-radio input[type="radio"]:checked + span[b-va196nfe9f] {
    font-weight: 600;
}

/* Theme Buttons */
.theme-btn[b-va196nfe9f] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family);
}

.theme-btn--primary[b-va196nfe9f] {
    background: var(--accent-gradient);
    color: white;
    box-shadow: var(--shadow-md);
}

.theme-btn--primary:hover[b-va196nfe9f] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.theme-btn--secondary[b-va196nfe9f] {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 2px solid var(--border-primary);
}

.theme-btn--secondary:hover[b-va196nfe9f] {
    background: var(--surface-hover);
    border-color: var(--border-focus);
}

/* Theme Alert */
.theme-alert[b-va196nfe9f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    margin-top: 1.5rem;
    animation: slideIn-b-va196nfe9f 0.3s ease;
}

@keyframes slideIn-b-va196nfe9f {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-alert--success[b-va196nfe9f] {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
}

.theme-alert svg[b-va196nfe9f] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Preview Card */
.theme-preview-card[b-va196nfe9f] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
}

.theme-preview-header[b-va196nfe9f] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
    background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

.theme-preview-header h3[b-va196nfe9f] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.theme-preview-header p[b-va196nfe9f] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
}

.theme-preview-body[b-va196nfe9f] {
    padding: 1.5rem;
}

.preview-sample[b-va196nfe9f] {
    margin-bottom: 1.5rem;
}

.preview-sample:last-child[b-va196nfe9f] {
    margin-bottom: 0;
}

.preview-btn[b-va196nfe9f] {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
}

.preview-btn--primary[b-va196nfe9f] {
    background: var(--accent-gradient);
    color: white;
}

.preview-btn--secondary[b-va196nfe9f] {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 2px solid var(--border-primary);
}

.preview-card[b-va196nfe9f] {
    padding: 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
}

.preview-card h4[b-va196nfe9f] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.preview-card p[b-va196nfe9f] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.preview-badge[b-va196nfe9f] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--accent-glow);
    color: var(--gold-600);
    border: 1px solid var(--gold-300);
    border-radius: var(--radius-full);
}

/* Responsive */
@media (max-width: 1024px) {
    .theme-settings-page[b-va196nfe9f] {
        grid-template-columns: 1fr;
    }

    .theme-preview-card[b-va196nfe9f] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .theme-settings-page[b-va196nfe9f] {
        padding: 1rem;
    }

    .theme-options[b-va196nfe9f] {
        grid-template-columns: 1fr;
    }

    .theme-section--actions[b-va196nfe9f] {
        flex-direction: column;
    }

    .theme-radio-group[b-va196nfe9f] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/WaitingList.razor.rz.scp.css */
.wl-page-header[b-cfvjflxpif] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.wl-page-header__title[b-cfvjflxpif] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.wl-page-header__subtitle[b-cfvjflxpif] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.wl-email-link[b-cfvjflxpif] {
    color: #667eea;
    text-decoration: none;
}

.wl-email-link:hover[b-cfvjflxpif] {
    text-decoration: underline;
}

/* /Components/Shared/AccessibilityTools.razor.rz.scp.css */
/* ============================================
   ENTERPRISE ACCESSIBILITY STYLES
   ============================================ */

/* ============================================
   SKIP LINKS
   ============================================ */
.skip-links[b-zsuf1l8z5j] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

.skip-link[b-zsuf1l8z5j] {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color, #3b82f6);
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: top 0.2s ease;
    z-index: 99999;
}

.skip-link:focus[b-zsuf1l8z5j] {
    top: 0;
    outline: 2px solid white;
    outline-offset: 2px;
}

.skip-link:hover[b-zsuf1l8z5j] {
    background: var(--primary-hover, #2563eb);
}

/* Multiple skip links stacking */
.skip-link:nth-child(2)[b-zsuf1l8z5j] {
    left: auto;
    right: 0;
    border-radius: 0 0 0 0.5rem;
}

/* ============================================
   VISUALLY HIDDEN (Screen Reader Only)
   ============================================ */
.visually-hidden[b-zsuf1l8z5j],
.sr-only[b-zsuf1l8z5j] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Show on focus for keyboard users */
.visually-hidden-focusable:focus[b-zsuf1l8z5j],
.visually-hidden-focusable:active[b-zsuf1l8z5j] {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ============================================
   FOCUS INDICATORS
   ============================================ */

/* Global focus indicator for keyboard navigation */
*:focus-visible[b-zsuf1l8z5j] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible)[b-zsuf1l8z5j] {
    outline: none;
}

/* Enhanced focus for interactive elements */
a:focus-visible[b-zsuf1l8z5j],
button:focus-visible[b-zsuf1l8z5j],
input:focus-visible[b-zsuf1l8z5j],
select:focus-visible[b-zsuf1l8z5j],
textarea:focus-visible[b-zsuf1l8z5j],
[tabindex]:focus-visible[b-zsuf1l8z5j] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Focus ring for cards/containers */
.card:focus-visible[b-zsuf1l8z5j],
.list-group-item:focus-visible[b-zsuf1l8z5j],
.nav-link:focus-visible[b-zsuf1l8z5j] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* High contrast focus for buttons */
.btn:focus-visible[b-zsuf1l8z5j] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* ============================================
   KEYBOARD NAVIGATION HELPERS
   ============================================ */

/* Focus trap indicator */
[data-focus-trap="true"][b-zsuf1l8z5j] {
    position: relative;
}

[data-focus-trap="true"][b-zsuf1l8z5j]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px dashed var(--primary-color, #3b82f6);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

[data-focus-trap="true"]:focus-within[b-zsuf1l8z5j]::before {
    opacity: 0.5;
}

/* Arrow key navigation indicator */
[data-arrow-nav="true"] [aria-selected="true"][b-zsuf1l8z5j],
[data-arrow-nav="true"] [data-active="true"][b-zsuf1l8z5j] {
    background: var(--hover-bg, rgba(59, 130, 246, 0.1));
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: -2px;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *[b-zsuf1l8z5j],
    *[b-zsuf1l8z5j]::before,
    *[b-zsuf1l8z5j]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .skip-link[b-zsuf1l8z5j] {
        transition: none;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
    *:focus-visible[b-zsuf1l8z5j] {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
    }
    
    .skip-link[b-zsuf1l8z5j] {
        border: 2px solid white;
    }
    
    .btn[b-zsuf1l8z5j] {
        border: 2px solid currentColor !important;
    }
}

/* ============================================
   TOUCH TARGET SIZES (WCAG 2.5.5)
   ============================================ */
@media (pointer: coarse) {
    /* Ensure minimum 44x44px touch targets */
    button[b-zsuf1l8z5j],
    [role="button"][b-zsuf1l8z5j],
    a[b-zsuf1l8z5j],
    input[type="checkbox"][b-zsuf1l8z5j],
    input[type="radio"][b-zsuf1l8z5j],
    select[b-zsuf1l8z5j] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Spacing for touch targets */
    .btn[b-zsuf1l8z5j] {
        padding: 0.75rem 1.25rem;
    }
    
    /* Form controls */
    .form-control[b-zsuf1l8z5j],
    .form-select[b-zsuf1l8z5j] {
        min-height: 44px;
        padding: 0.625rem 1rem;
    }
    
    /* Checkboxes and radios */
    .form-check-input[b-zsuf1l8z5j] {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ============================================
   LANDMARK REGIONS STYLING
   ============================================ */
[role="main"][b-zsuf1l8z5j],
#main-content[b-zsuf1l8z5j] {
    scroll-margin-top: 5rem; /* Account for fixed header */
}

[role="navigation"][b-zsuf1l8z5j],
#main-navigation[b-zsuf1l8z5j] {
    scroll-margin-top: 1rem;
}

/* ============================================
   ERROR/VALIDATION ACCESSIBILITY
   ============================================ */
[aria-invalid="true"][b-zsuf1l8z5j] {
    border-color: var(--danger-color, #ef4444) !important;
}

[aria-invalid="true"]:focus[b-zsuf1l8z5j] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

.field-validation-error[b-zsuf1l8z5j],
[role="alert"][b-zsuf1l8z5j] {
    color: var(--danger-color, #ef4444);
}

/* Required field indicator */
[aria-required="true"][b-zsuf1l8z5j]::after,
.required[b-zsuf1l8z5j]::after {
    content: ' *';
    color: var(--danger-color, #ef4444);
}

/* ============================================
   LOADING STATES ACCESSIBILITY
   ============================================ */
[aria-busy="true"][b-zsuf1l8z5j] {
    cursor: wait;
    pointer-events: none;
    opacity: 0.7;
}

[aria-busy="true"][b-zsuf1l8z5j]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: a11ySpinner-b-zsuf1l8z5j 0.6s linear infinite;
}

@keyframes a11ySpinner-b-zsuf1l8z5j {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   DISABLED STATE ACCESSIBILITY
   ============================================ */
[aria-disabled="true"][b-zsuf1l8z5j],
[disabled][b-zsuf1l8z5j] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   EXPANDED/COLLAPSED INDICATORS
   ============================================ */
[aria-expanded="false"][b-zsuf1l8z5j]::before {
    content: '?';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

[aria-expanded="true"][b-zsuf1l8z5j]::before {
    content: '?';
}

/* ============================================
   DIALOG/MODAL ACCESSIBILITY
   ============================================ */
[role="dialog"][b-zsuf1l8z5j],
[role="alertdialog"][b-zsuf1l8z5j] {
    /* Ensure modals have proper focus indication */
}

[role="dialog"]:focus[b-zsuf1l8z5j],
[role="alertdialog"]:focus[b-zsuf1l8z5j] {
    outline: none;
}

/* Backdrop for focus trapping visual indicator */
.modal-backdrop[b-zsuf1l8z5j] {
    background: rgba(0, 0, 0, 0.5);
}

@media (prefers-contrast: high) {
    .modal-backdrop[b-zsuf1l8z5j] {
        background: rgba(0, 0, 0, 0.8);
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* ============================================
   ENTERPRISE EMPTY STATE STYLES
   ============================================ */

.empty-state[b-xd6qi96zmz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    min-height: 300px;
    
    /* CSS Variables for illustrations */
    --empty-bg: var(--bg-secondary, #f8fafc);
    --empty-stroke: var(--border-color, #e2e8f0);
    --empty-accent: var(--primary-color, #3b82f6);
    --empty-line: var(--text-secondary, #94a3b8);
    --empty-error: #ef4444;
    --empty-error-bg: rgba(239, 68, 68, 0.1);
}

/* Size Variants */
.empty-state-sm[b-xd6qi96zmz] {
    padding: 1.5rem 1rem;
    min-height: 200px;
}

.empty-state-sm .empty-state-illustration[b-xd6qi96zmz] {
    width: 120px;
    height: 90px;
    margin-bottom: 1rem;
}

.empty-state-sm .empty-state-title[b-xd6qi96zmz] {
    font-size: 1rem;
}

.empty-state-sm .empty-state-description[b-xd6qi96zmz] {
    font-size: 0.8125rem;
}

.empty-state-lg[b-xd6qi96zmz] {
    padding: 4rem 2rem;
    min-height: 400px;
}

.empty-state-lg .empty-state-illustration[b-xd6qi96zmz] {
    width: 280px;
    height: 210px;
    margin-bottom: 2rem;
}

.empty-state-lg .empty-state-title[b-xd6qi96zmz] {
    font-size: 1.5rem;
}

/* Illustration Container */
.empty-state-illustration[b-xd6qi96zmz] {
    width: 200px;
    height: 150px;
    margin-bottom: 1.5rem;
    animation: emptyStateFadeIn-b-xd6qi96zmz 0.5s ease-out;
}

.empty-illustration[b-xd6qi96zmz] {
    width: 100%;
    height: 100%;
}

.empty-illustration svg[b-xd6qi96zmz] {
    width: 100%;
    height: 100%;
}

/* Custom Icon */
.empty-state-icon[b-xd6qi96zmz] {
    font-size: 4rem;
    line-height: 1;
    display: block;
    animation: emptyStateBounce-b-xd6qi96zmz 2s ease-in-out infinite;
}

@keyframes emptyStateFadeIn-b-xd6qi96zmz {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes emptyStateBounce-b-xd6qi96zmz {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Content */
.empty-state-content[b-xd6qi96zmz] {
    max-width: 400px;
    animation: emptyStateFadeIn-b-xd6qi96zmz 0.5s ease-out 0.1s both;
}

.empty-state-title[b-xd6qi96zmz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.empty-state-description[b-xd6qi96zmz] {
    font-size: 0.9375rem;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.empty-state-custom[b-xd6qi96zmz] {
    margin-bottom: 1.5rem;
}

/* Actions */
.empty-state-actions[b-xd6qi96zmz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    animation: emptyStateFadeIn-b-xd6qi96zmz 0.5s ease-out 0.2s both;
}

.empty-state-actions .btn[b-xd6qi96zmz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Illustration Animation on Hover */
.empty-state:hover .empty-illustration svg[b-xd6qi96zmz] {
    animation: emptyStateWiggle-b-xd6qi96zmz 0.5s ease-in-out;
}

@keyframes emptyStateWiggle-b-xd6qi96zmz {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(2deg);
    }
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
[data-theme="dark"] .empty-state[b-xd6qi96zmz],
[data-bs-theme="dark"] .empty-state[b-xd6qi96zmz] {
    --empty-bg: var(--bg-secondary, #1e293b);
    --empty-stroke: var(--border-color, #334155);
    --empty-line: var(--text-secondary, #64748b);
    --empty-error-bg: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .empty-state-title[b-xd6qi96zmz],
[data-bs-theme="dark"] .empty-state-title[b-xd6qi96zmz] {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .empty-state-description[b-xd6qi96zmz],
[data-bs-theme="dark"] .empty-state-description[b-xd6qi96zmz] {
    color: var(--text-secondary, #94a3b8);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .empty-state[b-xd6qi96zmz] {
        padding: 2rem 1rem;
        min-height: 250px;
    }
    
    .empty-state-illustration[b-xd6qi96zmz] {
        width: 160px;
        height: 120px;
    }
    
    .empty-state-title[b-xd6qi96zmz] {
        font-size: 1.125rem;
    }
    
    .empty-state-description[b-xd6qi96zmz] {
        font-size: 0.875rem;
    }
    
    .empty-state-actions[b-xd6qi96zmz] {
        flex-direction: column;
        width: 100%;
    }
    
    .empty-state-actions .btn[b-xd6qi96zmz] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .empty-state-illustration[b-xd6qi96zmz],
    .empty-state-content[b-xd6qi96zmz],
    .empty-state-actions[b-xd6qi96zmz] {
        animation: none;
    }
    
    .empty-state-icon[b-xd6qi96zmz] {
        animation: none;
    }
    
    .empty-state:hover .empty-illustration svg[b-xd6qi96zmz] {
        animation: none;
    }
}
/* /Components/Shared/ErrorBoundary.razor.rz.scp.css */
/* ============================================
   ENTERPRISE ERROR BOUNDARY STYLES
   ============================================ */

.error-boundary[b-cyh28bgvkh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-primary, #f8fafc) 100%);
    border-radius: 1rem;
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: errorBoundaryFadeIn-b-cyh28bgvkh 0.4s ease-out;
}

@keyframes errorBoundaryFadeIn-b-cyh28bgvkh {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.error-boundary-content[b-cyh28bgvkh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
}

/* Icon */
.error-boundary-icon[b-cyh28bgvkh] {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    color: #ef4444;
    animation: errorBoundaryPulse-b-cyh28bgvkh 2s ease-in-out infinite;
}

.error-boundary-icon svg[b-cyh28bgvkh] {
    width: 100%;
    height: 100%;
}

@keyframes errorBoundaryPulse-b-cyh28bgvkh {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Text Content */
.error-boundary-text[b-cyh28bgvkh] {
    margin-bottom: 2rem;
}

.error-boundary-title[b-cyh28bgvkh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.error-boundary-message[b-cyh28bgvkh] {
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.error-boundary-id[b-cyh28bgvkh] {
    font-size: 0.875rem;
    color: var(--text-secondary, #9ca3af);
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.error-boundary-id code[b-cyh28bgvkh] {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

/* Details Section */
.error-boundary-details[b-cyh28bgvkh] {
    margin-top: 1rem;
    width: 100%;
    text-align: left;
}

.error-boundary-details summary[b-cyh28bgvkh] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.error-boundary-details summary:hover[b-cyh28bgvkh] {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.error-boundary-details pre[b-cyh28bgvkh] {
    font-size: 0.75rem;
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #e2e8f0);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Actions */
.error-boundary-actions[b-cyh28bgvkh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.error-boundary-actions .btn[b-cyh28bgvkh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

/* Dark Theme */
[data-theme="dark"] .error-boundary[b-cyh28bgvkh],
[data-bs-theme="dark"] .error-boundary[b-cyh28bgvkh] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-primary, #0f172a) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .error-boundary-title[b-cyh28bgvkh],
[data-bs-theme="dark"] .error-boundary-title[b-cyh28bgvkh] {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .error-boundary-id[b-cyh28bgvkh],
[data-bs-theme="dark"] .error-boundary-id[b-cyh28bgvkh] {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .error-boundary-details pre[b-cyh28bgvkh],
[data-bs-theme="dark"] .error-boundary-details pre[b-cyh28bgvkh] {
    background: #0f172a;
}

/* Responsive */
@media (max-width: 480px) {
    .error-boundary[b-cyh28bgvkh] {
        padding: 1.5rem;
        min-height: 300px;
    }
    
    .error-boundary-icon[b-cyh28bgvkh] {
        width: 60px;
        height: 60px;
    }
    
    .error-boundary-title[b-cyh28bgvkh] {
        font-size: 1.25rem;
    }
    
    .error-boundary-message[b-cyh28bgvkh] {
        font-size: 0.9375rem;
    }
    
    .error-boundary-actions[b-cyh28bgvkh] {
        flex-direction: column;
        width: 100%;
    }
    
    .error-boundary-actions .btn[b-cyh28bgvkh] {
        width: 100%;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .error-boundary[b-cyh28bgvkh] {
        animation: none;
    }
    
    .error-boundary-icon[b-cyh28bgvkh] {
        animation: none;
    }
}
/* /Components/Shared/InvitationToastListener.razor.rz.scp.css */
/* ── Stack container ──────────────────────────────────────────────────────── */
.inv-stack[b-crqba1cpsi] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}

/* ── Individual toast ─────────────────────────────────────────────────────── */
.inv-toast[b-crqba1cpsi] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--surface-1, #fff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #3b82f6;
    pointer-events: auto;
    overflow: hidden;
}

.inv-toast--enter[b-crqba1cpsi] {
    animation: inv-slide-in-b-crqba1cpsi 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes inv-slide-in-b-crqba1cpsi {
    from { opacity: 0; transform: translateX(100%) scale(0.9); }
    to   { opacity: 1; transform: translateX(0)    scale(1);   }
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.inv-toast__icon[b-crqba1cpsi] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.inv-toast__body[b-crqba1cpsi] {
    flex: 1;
    min-width: 0;
}

.inv-toast__title[b-crqba1cpsi] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    margin-bottom: 0.2rem;
}

.inv-toast__msg[b-crqba1cpsi] {
    font-size: 0.8rem;
    color: var(--text-secondary, #718096);
    line-height: 1.4;
}

/* ── Action button ────────────────────────────────────────────────────────── */
.inv-toast__action[b-crqba1cpsi] {
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    align-self: center;
}

.inv-toast__action:hover[b-crqba1cpsi] {
    background: #1d4ed8;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.inv-toast__close[b-crqba1cpsi] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--surface-hover, rgba(0,0,0,.06));
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #718096);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    transition: background 0.15s;
}

.inv-toast__close:hover[b-crqba1cpsi] {
    background: var(--surface-active, rgba(0,0,0,.12));
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .inv-toast[b-crqba1cpsi] {
    background: var(--surface-2, #1e293b);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ── Success (acceptance) toast ───────────────────────────────────────────── */
.inv-toast--success[b-crqba1cpsi] {
    border-left-color: #16a34a;
}

:root[data-theme="dark"] .inv-toast--success[b-crqba1cpsi] {
    border-left-color: #22c55e;
}

/* ── Danger (decline) toast ───────────────────────────────────────────────── */
.inv-toast--danger[b-crqba1cpsi] {
    border-left-color: #dc2626;
}

:root[data-theme="dark"] .inv-toast--danger[b-crqba1cpsi] {
    border-left-color: #f87171;
}

/* ── Confirmation state ───────────────────────────────────────────────────── */
.inv-toast--confirming[b-crqba1cpsi] {
    border-left-color: #f59e0b;
    flex-wrap: wrap;
}

.inv-toast__confirm-actions[b-crqba1cpsi] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-secondary, #e2e8f0);
}

.inv-toast__action--yes[b-crqba1cpsi] {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.inv-toast__action--yes:hover[b-crqba1cpsi] { background: #15803d; }

.inv-toast__action--no[b-crqba1cpsi] {
    background: transparent;
    color: var(--text-secondary, #718096);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.inv-toast__action--no:hover[b-crqba1cpsi] {
    background: var(--surface-hover, rgba(0,0,0,.06));
}

:root[data-theme="dark"] .inv-toast__confirm-actions[b-crqba1cpsi] {
    border-top-color: var(--border-primary, #334155);
}

/* ── Full-screen centered confirmation modal ──────────────────────────────── */
.inv-modal-overlay[b-crqba1cpsi] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(2px);
    animation: inv-fade-in-b-crqba1cpsi 0.15s ease forwards;
}

@keyframes inv-fade-in-b-crqba1cpsi {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.inv-modal[b-crqba1cpsi] {
    background: var(--surface-1, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    animation: inv-modal-in-b-crqba1cpsi 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes inv-modal-in-b-crqba1cpsi {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.inv-modal__header[b-crqba1cpsi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-secondary, #e2e8f0);
}

.inv-modal__header--success[b-crqba1cpsi] {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    border-bottom-color: #86efac;
}

:root[data-theme="dark"] .inv-modal__header--success[b-crqba1cpsi] {
    background: linear-gradient(135deg, rgba(22,163,74,.15), rgba(22,163,74,.05));
    border-bottom-color: rgba(34,197,94,.3);
}

.inv-modal--success[b-crqba1cpsi] { border-top: 3px solid #16a34a; }

.inv-modal__header--danger[b-crqba1cpsi] {
    background: linear-gradient(135deg, #fee2e2, #fff5f5);
    border-bottom-color: #fca5a5;
}

:root[data-theme="dark"] .inv-modal__header--danger[b-crqba1cpsi] {
    background: linear-gradient(135deg, rgba(220,38,38,.15), rgba(220,38,38,.05));
    border-bottom-color: rgba(248,113,113,.3);
}

.inv-modal--danger[b-crqba1cpsi] { border-top: 3px solid #dc2626; }

.inv-modal__more[b-crqba1cpsi] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #718096);
}

.inv-modal__icon[b-crqba1cpsi] { font-size: 1.5rem; flex-shrink: 0; }

.inv-modal__title[b-crqba1cpsi] {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
}

.inv-modal__close[b-crqba1cpsi] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface-hover, rgba(0,0,0,.06));
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #718096);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.inv-modal__close:hover[b-crqba1cpsi] { background: var(--surface-active, rgba(0,0,0,.12)); }

.inv-modal__body[b-crqba1cpsi] {
    padding: 1.25rem 1.5rem;
    font-size: 0.925rem;
    color: var(--text-primary, #1a202c);
    line-height: 1.55;
}

.inv-modal__body p[b-crqba1cpsi] { margin: 0; }

.inv-modal__footer[b-crqba1cpsi] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border-secondary, #e2e8f0);
}

.inv-modal__btn[b-crqba1cpsi] {
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    font-family: inherit;
}

.inv-modal__btn--confirm[b-crqba1cpsi] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}

.inv-modal__btn--confirm:hover[b-crqba1cpsi] { box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35); }

.inv-modal__btn--cancel[b-crqba1cpsi] {
    background: transparent;
    color: var(--text-secondary, #718096);
    border-color: var(--border-primary, #e2e8f0);
}

.inv-modal__btn--cancel:hover[b-crqba1cpsi] {
    background: var(--surface-hover, rgba(0,0,0,.06));
    color: var(--text-primary, #1a202c);
}

:root[data-theme="dark"] .inv-modal[b-crqba1cpsi] {
    background: var(--surface-2, #1e293b);
}

:root[data-theme="dark"] .inv-modal__header[b-crqba1cpsi],
:root[data-theme="dark"] .inv-modal__footer[b-crqba1cpsi] {
    border-color: var(--border-primary, #334155);
}

/* /Components/Shared/LoadingSkeleton.razor.rz.scp.css */
/* ============================================
   ENTERPRISE LOADING SKELETON STYLES
   ============================================ */

.skeleton-container[b-x1ti1g943b] {
    width: 100%;
}

/* Base Skeleton Animation */
.skeleton[b-x1ti1g943b] {
    background: linear-gradient(
        90deg,
        var(--skeleton-base, rgba(0, 0, 0, 0.08)) 0%,
        var(--skeleton-shine, rgba(0, 0, 0, 0.04)) 50%,
        var(--skeleton-base, rgba(0, 0, 0, 0.08)) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer-b-x1ti1g943b 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

@keyframes skeletonShimmer-b-x1ti1g943b {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   SKELETON TEXT
   ============================================ */
.skeleton-text[b-x1ti1g943b] {
    height: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-text-short[b-x1ti1g943b] {
    width: 60%;
}

.skeleton-text-medium[b-x1ti1g943b] {
    width: 80%;
}

.skeleton-text-block[b-x1ti1g943b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-title[b-x1ti1g943b] {
    height: 1.25rem;
    width: 70%;
    margin-bottom: 0.5rem;
}

.skeleton-subtitle[b-x1ti1g943b] {
    height: 0.875rem;
    width: 50%;
}

.skeleton-label[b-x1ti1g943b] {
    height: 0.875rem;
    width: 30%;
    margin-bottom: 0.5rem;
}

/* ============================================
   SKELETON AVATAR
   ============================================ */
.skeleton-avatar[b-x1ti1g943b] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar-sm[b-x1ti1g943b] {
    width: 2rem;
    height: 2rem;
}

.skeleton-avatar-lg[b-x1ti1g943b] {
    width: 4rem;
    height: 4rem;
}

.skeleton-avatar-xl[b-x1ti1g943b] {
    width: 6rem;
    height: 6rem;
}

/* ============================================
   SKELETON BUTTON
   ============================================ */
.skeleton-button[b-x1ti1g943b] {
    height: 2.5rem;
    width: 6rem;
    border-radius: 0.5rem;
}

.skeleton-button-sm[b-x1ti1g943b] {
    height: 2rem;
    width: 4rem;
}

.skeleton-button-lg[b-x1ti1g943b] {
    height: 3rem;
    width: 8rem;
}

.skeleton-button-secondary[b-x1ti1g943b] {
    width: 5rem;
}

/* ============================================
   SKELETON INPUT
   ============================================ */
.skeleton-input[b-x1ti1g943b] {
    height: 2.5rem;
    width: 100%;
    border-radius: 0.5rem;
}

/* ============================================
   SKELETON IMAGE
   ============================================ */
.skeleton-image[b-x1ti1g943b] {
    width: 100%;
    height: 200px;
    border-radius: 0.5rem;
}

/* ============================================
   SKELETON CARD
   ============================================ */
.skeleton-card[b-x1ti1g943b] {
    background: var(--card-bg, #ffffff);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-card-header[b-x1ti1g943b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-card-info[b-x1ti1g943b] {
    flex: 1;
}

.skeleton-card-body[b-x1ti1g943b] {
    margin-bottom: 1rem;
}

.skeleton-card-footer[b-x1ti1g943b] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* ============================================
   SKELETON TABLE
   ============================================ */
.skeleton-table[b-x1ti1g943b] {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-table-header[b-x1ti1g943b] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.skeleton-table-header .skeleton-table-cell[b-x1ti1g943b] {
    height: 1rem;
}

.skeleton-table-row[b-x1ti1g943b] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-table-row:last-child[b-x1ti1g943b] {
    border-bottom: none;
}

.skeleton-table-cell[b-x1ti1g943b] {
    flex: 1;
    height: 0.875rem;
}

/* ============================================
   SKELETON LIST
   ============================================ */
.skeleton-list[b-x1ti1g943b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-list-item[b-x1ti1g943b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg, #ffffff);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-list-content[b-x1ti1g943b] {
    flex: 1;
}

/* ============================================
   SKELETON FORM
   ============================================ */
.skeleton-form[b-x1ti1g943b] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.skeleton-form-group[b-x1ti1g943b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-form-actions[b-x1ti1g943b] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* ============================================
   SKELETON PROFILE
   ============================================ */
.skeleton-profile[b-x1ti1g943b] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--card-bg, #ffffff);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-profile-info[b-x1ti1g943b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ============================================
   SKELETON STATS
   ============================================ */
.skeleton-stats[b-x1ti1g943b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.skeleton-stat-card[b-x1ti1g943b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--card-bg, #ffffff);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
}

.skeleton-stat-icon[b-x1ti1g943b] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
}

.skeleton-stat-value[b-x1ti1g943b] {
    height: 2rem;
    width: 60%;
}

.skeleton-stat-label[b-x1ti1g943b] {
    height: 0.875rem;
    width: 80%;
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
[data-theme="dark"] .skeleton[b-x1ti1g943b],
[data-bs-theme="dark"] .skeleton[b-x1ti1g943b] {
    --skeleton-base: rgba(255, 255, 255, 0.08);
    --skeleton-shine: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .skeleton-card[b-x1ti1g943b],
[data-bs-theme="dark"] .skeleton-card[b-x1ti1g943b],
[data-theme="dark"] .skeleton-list-item[b-x1ti1g943b],
[data-bs-theme="dark"] .skeleton-list-item[b-x1ti1g943b],
[data-theme="dark"] .skeleton-profile[b-x1ti1g943b],
[data-bs-theme="dark"] .skeleton-profile[b-x1ti1g943b],
[data-theme="dark"] .skeleton-stat-card[b-x1ti1g943b],
[data-bs-theme="dark"] .skeleton-stat-card[b-x1ti1g943b] {
    background: var(--card-bg, #1e2328);
    border-color: var(--border-color, #2d3339);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.visually-hidden[b-x1ti1g943b] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton[b-x1ti1g943b] {
        animation: none;
        background: var(--skeleton-base, rgba(0, 0, 0, 0.08));
    }
}
/* /Components/Shared/QuickGridFilter.razor.rz.scp.css */
/* ═══════════════════════════════════════
   QuickGridFilter — Scoped Styles
   Uses app CSS design tokens (no Bootstrap)
   ═══════════════════════════════════════ */

.quick-grid-filter-container[b-447yviqab8] {
    display: inline-block;
}

/* ── Filter Toggle Button ── */
.quick-grid-filter-container .dropdown-toggle[b-447yviqab8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--text-secondary);
    background-color: var(--bg-elevated);
    border: 1.5px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-xs);
}

.quick-grid-filter-container .dropdown-toggle:hover[b-447yviqab8] {
    color: var(--text-primary);
    background-color: var(--surface-hover);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-glow);
}

.quick-grid-filter-container .dropdown-toggle.has-active-filters[b-447yviqab8] {
    color: var(--gold-800);
    background-color: rgba(var(--gold-rgb), 0.08);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-glow);
}

[data-theme="dark"] .quick-grid-filter-container .dropdown-toggle.has-active-filters[b-447yviqab8] {
    color: var(--gold-300);
    background-color: rgba(var(--gold-rgb), 0.12);
}

.quick-grid-filter-container .dropdown-toggle .badge[b-447yviqab8] {
    font-size: 0.65rem;
    padding: 0.15em 0.45em;
    border-radius: var(--radius-full);
}

/* ── Dropdown Panel ── */
.quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
    min-width: 340px;
    max-width: 420px;
    padding: 1rem !important;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
    overflow: hidden;
}

/* Ensure dropdown stays within viewport */
.quick-grid-filter-container .dropdown-menu[b-447yviqab8] {
    position: absolute !important;
}

/* Align right on large screens */
@media (min-width: 992px) {
    .quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
        right: 0 !important;
        left: auto !important;
    }
}

/* Center on smaller screens */
@media (max-width: 991px) {
    .quick-grid-filter-container[b-447yviqab8] {
        position: relative;
    }
    .quick-grid-filter-container .dropdown[b-447yviqab8] {
        position: static;
    }
    .quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 2rem);
        margin-top: 0.5rem;
    }
}

@media (max-width: 767px) {
    .quick-grid-filter-container .dropdown-toggle[b-447yviqab8] {
        font-size: 0.75rem;
        padding: 0.3rem 0.625rem;
    }
    .quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
        min-width: 280px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 1rem);
    }
    .quick-grid-filter-container .filter-content[b-447yviqab8] {
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 641px) {
    .quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        width: min(320px, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
    }
}

@media (max-width: 575px) {
    .quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
        min-width: 260px;
        max-width: calc(100vw - 1rem);
    }
    .quick-grid-filter-container .dropdown-toggle[b-447yviqab8] {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    .quick-grid-filter-container .dropdown-toggle .bi[b-447yviqab8] {
        font-size: 0.8rem;
    }
}

/* ── Filter Content Area ── */
.quick-grid-filter-container .filter-content[b-447yviqab8] {
    max-height: min(500px, calc(100vh - 140px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Show scrollbar thumb only when hovering the content area */
.quick-grid-filter-container .filter-content:hover[b-447yviqab8] {
    scrollbar-color: var(--border-primary) transparent;
}

/* Webkit scrollbar — hidden by default, visible on content hover */
.quick-grid-filter-container .filter-content[b-447yviqab8]::-webkit-scrollbar {
    width: 5px;
}

.quick-grid-filter-container .filter-content[b-447yviqab8]::-webkit-scrollbar-track {
    background: transparent;
}

.quick-grid-filter-container .filter-content[b-447yviqab8]::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

.quick-grid-filter-container .filter-content:hover[b-447yviqab8]::-webkit-scrollbar-thumb {
    background: var(--border-primary);
}

/* ── Section Heading (h6) ── */
.quick-grid-filter-container h6[b-447yviqab8] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Filter Chips ── */
.quick-grid-filter-container .filter-chip[b-447yviqab8] {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.quick-grid-filter-container .filter-chip:hover[b-447yviqab8] {
    border-color: var(--accent-primary);
}

.quick-grid-filter-container .filter-chip strong[b-447yviqab8] {
    color: var(--text-primary);
    font-weight: 600;
}

.quick-grid-filter-container .filter-chip .text-primary[b-447yviqab8] {
    color: var(--accent-primary) !important;
    font-weight: 500;
}

/* ── Filter Groups ── */
.quick-grid-filter-container .filter-group[b-447yviqab8] {
    background-color: var(--bg-secondary);
    border: 1px dashed var(--accent-primary) !important;
    border-radius: var(--radius-md);
    position: relative;
}

.quick-grid-filter-container .filter-group .filter-chip[b-447yviqab8] {
    margin-bottom: 0.25rem;
}

.quick-grid-filter-container .filter-group.bg-light[b-447yviqab8] {
    background-color: rgba(var(--gold-rgb), 0.04) !important;
    border: 2px solid rgba(var(--gold-rgb), 0.25) !important;
    border-radius: var(--radius-md) !important;
}

.quick-grid-filter-container .filter-group-header[b-447yviqab8] {
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 0.25rem;
}

.quick-grid-filter-container .filter-group-header i[b-447yviqab8] {
    color: var(--accent-primary);
}

/* ── Badges (AND / OR operators) ── */
.quick-grid-filter-container .badge.bg-info[b-447yviqab8] {
    background-color: var(--color-info) !important;
    color: #fff !important;
    padding: 0.35em 0.65em;
    font-weight: 600;
    font-size: 0.75rem;
}

.quick-grid-filter-container .badge.bg-warning[b-447yviqab8] {
    background-color: var(--color-warning) !important;
    color: #fff !important;
    padding: 0.35em 0.65em;
    font-weight: 600;
    font-size: 0.75rem;
}

.quick-grid-filter-container .badge.bg-secondary[b-447yviqab8] {
    background-color: var(--text-tertiary) !important;
    color: #fff !important;
    padding: 0.25em 0.5em;
    font-weight: 600;
    font-size: 0.7rem;
}

.quick-grid-filter-container .badge.bg-primary[b-447yviqab8] {
    background-color: var(--gold-500) !important;
    color: #fff !important;
    padding: 0.25em 0.5em;
    font-weight: 600;
    font-size: 0.7rem;
}

/* ── Alerts ── */
.quick-grid-filter-container .alert[b-447yviqab8] {
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.quick-grid-filter-container .alert-info[b-447yviqab8] {
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    color: var(--text-primary);
}

/* ── Filter Mode Selection ── */
.quick-grid-filter-container .filter-mode-selection .btn-group[b-447yviqab8] {
    box-shadow: var(--shadow-sm);
}

.quick-grid-filter-container .filter-mode-selection .btn[b-447yviqab8] {
    font-weight: 600;
    transition: all 0.2s ease;
}

.quick-grid-filter-container .filter-mode-selection .btn:hover[b-447yviqab8] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ── Filter Form Animation ── */
.quick-grid-filter-container .filter-form[b-447yviqab8] {
    animation: slideDown-b-447yviqab8 0.2s ease-out;
}

@keyframes slideDown-b-447yviqab8 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quick-grid-filter-container .active-filters[b-447yviqab8] {
    animation: fadeIn-b-447yviqab8 0.2s ease-out;
}

@keyframes fadeIn-b-447yviqab8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Form Labels ── */
.quick-grid-filter-container .form-label[b-447yviqab8] {
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ── Links ── */
.quick-grid-filter-container .btn-link[b-447yviqab8] {
    text-decoration: none;
    color: var(--text-link);
}

.quick-grid-filter-container .btn-link:hover[b-447yviqab8] {
    text-decoration: underline;
    color: var(--text-link-hover);
}

/* ── Separator ── */
.quick-grid-filter-container hr[b-447yviqab8] {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 0.75rem 0;
    opacity: 0.6;
}

/* ── Dark Mode Overrides ── */
[data-theme="dark"] .quick-grid-filter-container .filter-dropdown[b-447yviqab8] {
    background-color: var(--bg-elevated);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-2xl);
}

[data-theme="dark"] .quick-grid-filter-container .filter-chip[b-447yviqab8] {
    background-color: var(--surface-3);
    border-color: var(--border-primary);
}

[data-theme="dark"] .quick-grid-filter-container .filter-group.bg-light[b-447yviqab8] {
    background-color: rgba(var(--gold-rgb), 0.06) !important;
    border-color: rgba(var(--gold-rgb), 0.3) !important;
}

[data-theme="dark"] .quick-grid-filter-container .filter-group-header[b-447yviqab8] {
    border-bottom-color: var(--border-primary);
}

/* /Components/Shared/ServiceHealthWidget.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   SERVICE HEALTH WIDGET
   Shows the status of all registered ASP.NET Core health checks.
   Status colours: Healthy = green · Degraded = amber · Unhealthy = red
   ═══════════════════════════════════════════════════════════ */

/* ── Outer container ─────────────────────────────────────── */
.svc-health[b-efz2p7m92i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Header ──────────────────────────────────────────────── */
.svc-health__header[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.svc-health__left[b-efz2p7m92i] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.svc-health__title[b-efz2p7m92i] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.svc-health__sub[b-efz2p7m92i] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.svc-health__right[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.svc-health__time[b-efz2p7m92i] {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ── Overall status badge ────────────────────────────────── */
.svc-overall[b-efz2p7m92i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.svc-overall__dot[b-efz2p7m92i] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.svc-overall--healthy[b-efz2p7m92i]  { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.svc-overall--healthy .svc-overall__dot[b-efz2p7m92i]  { background: #34d399; box-shadow: 0 0 6px #34d39966; }

.svc-overall--degraded[b-efz2p7m92i] { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.svc-overall--degraded .svc-overall__dot[b-efz2p7m92i] { background: #fbbf24; box-shadow: 0 0 6px #fbbf2466; }

.svc-overall--unhealthy[b-efz2p7m92i] { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.svc-overall--unhealthy .svc-overall__dot[b-efz2p7m92i] { background: #f87171; box-shadow: 0 0 6px #f8717166; }

/* ── Refresh button ──────────────────────────────────────── */
.svc-refresh-btn[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.svc-refresh-btn:hover:not(:disabled)[b-efz2p7m92i] {
    background: var(--surface-hover);
    color: var(--gold-500);
    border-color: var(--gold-500);
}

.svc-refresh-btn:disabled[b-efz2p7m92i] {
    opacity: 0.45;
    cursor: not-allowed;
}

.svc-refresh-btn svg[b-efz2p7m92i] {
    width: 14px;
    height: 14px;
}

/* Spin animation on the SVG inside the button */
.svc-spin[b-efz2p7m92i] {
    animation: svc-rotate-b-efz2p7m92i 0.8s linear infinite;
}

@keyframes svc-rotate-b-efz2p7m92i {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Card grid ───────────────────────────────────────────── */
.svc-grid[b-efz2p7m92i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

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

@media (max-width: 580px) {
    .svc-grid[b-efz2p7m92i] {
        grid-template-columns: 1fr;
    }
}

/* ── Service card ────────────────────────────────────────── */
.svc-card[b-efz2p7m92i] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    border-left-width: 3px;
    padding: 1rem 1.1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: box-shadow 0.2s ease;
}

.svc-card:hover[b-efz2p7m92i] {
    box-shadow: var(--shadow-md);
}

.svc-card--healthy[b-efz2p7m92i]   { border-left-color: #34d399; }
.svc-card--degraded[b-efz2p7m92i]  { border-left-color: #fbbf24; }
.svc-card--unhealthy[b-efz2p7m92i] { border-left-color: #f87171; }

/* Card header: icon + name + badge */
.svc-card__head[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.svc-card__icon[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
}

.svc-card__icon--healthy[b-efz2p7m92i]   { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.svc-card__icon--degraded[b-efz2p7m92i]  { background: rgba(251, 191, 36, 0.12);  color: #fbbf24; }
.svc-card__icon--unhealthy[b-efz2p7m92i] { background: rgba(248, 113, 113, 0.12); color: #f87171; }

.svc-card__icon svg[b-efz2p7m92i] {
    width: 16px;
    height: 16px;
}

.svc-card__name[b-efz2p7m92i] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Status badge ────────────────────────────────────────── */
.svc-badge[b-efz2p7m92i] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.svc-badge--healthy[b-efz2p7m92i]   { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.svc-badge--degraded[b-efz2p7m92i]  { background: rgba(251, 191, 36, 0.15);  color: #fbbf24; }
.svc-badge--unhealthy[b-efz2p7m92i] { background: rgba(248, 113, 113, 0.15); color: #f87171; }

/* ── Description ─────────────────────────────────────────── */
.svc-card__desc[b-efz2p7m92i] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ── Data key-value table ────────────────────────────────── */
.svc-data[b-efz2p7m92i] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin: 0;
}

.svc-data__row[b-efz2p7m92i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.svc-data__row dt[b-efz2p7m92i] {
    font-size: 0.73rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.svc-data__row dd[b-efz2p7m92i] {
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Exception message ───────────────────────────────────── */
.svc-card__exc[b-efz2p7m92i] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    font-size: 0.73rem;
    color: #f87171;
    line-height: 1.4;
}

.svc-card__exc svg[b-efz2p7m92i] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Card footer: duration ───────────────────────────────── */
.svc-card__foot[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-secondary);
}

.svc-card__foot-icon[b-efz2p7m92i] {
    width: 12px;
    height: 12px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.svc-card__foot span[b-efz2p7m92i] {
    font-size: 0.71rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ── Loading skeleton ────────────────────────────────────── */
.svc-skeleton[b-efz2p7m92i] {
    height: 160px;
    background: var(--bg-secondary);
    border-radius: 12px;
    animation: svc-pulse-b-efz2p7m92i 1.4s ease-in-out infinite;
    border-left: 3px solid var(--border-primary);
}

@keyframes svc-pulse-b-efz2p7m92i {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

/* ── Empty / error state ─────────────────────────────────── */
.svc-empty[b-efz2p7m92i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 0.75rem 0;
}

.svc-empty__icon[b-efz2p7m92i] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #fbbf24;
}

.svc-link-btn[b-efz2p7m92i] {
    background: none;
    border: none;
    padding: 0;
    color: var(--gold-500);
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.svc-link-btn:hover[b-efz2p7m92i] {
    color: var(--gold-600);
}
/* /Components/Shared/SweetAlert.razor.rz.scp.css */
/* SweetAlert2 CSS - Pure Blazor Implementation - Compact & Modern */

.swal2-container[b-qyn148eyhd] {
    display: flex;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    overflow-x: hidden;
    transition: background-color .2s ease;
    background-color: transparent;
}

.swal2-backdrop-show[b-qyn148eyhd] {
    background-color: rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
}

/* Dark theme backdrop */
[data-theme="dark"] .swal2-backdrop-show[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-backdrop-show[b-qyn148eyhd] {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1px);
}

.swal2-center[b-qyn148eyhd] {
    align-items: center;
}

.swal2-popup[b-qyn148eyhd] {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: 28rem;
    max-width: 100%;
    padding: 0 0 0.875rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    background: #ffffff;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9375rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Dark theme popup */
[data-theme="dark"] .swal2-popup[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-popup[b-qyn148eyhd] {
    background: linear-gradient(145deg, #1e2530 0%, #252b38 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e4e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}


.swal2-show[b-qyn148eyhd] {
    display: grid;
    animation: swal2-show-b-qyn148eyhd 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes swal2-show-b-qyn148eyhd {
    0% {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.swal2-title[b-qyn148eyhd] {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 1.25rem 0;
    color: #111827;
    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
    line-height: 1.3;
}

[data-theme="dark"] .swal2-title[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-title[b-qyn148eyhd] {
    color: #f3f4f6;
}

.swal2-html-container[b-qyn148eyhd] {
    z-index: 1;
    justify-content: center;
    margin: 0.5rem 1.25rem 0.25rem;
    padding: 0;
    overflow: auto;
    color: #4b5563;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
}

[data-theme="dark"] .swal2-html-container[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-html-container[b-qyn148eyhd] {
    color: #d1d5db;
}

.swal2-icon[b-qyn148eyhd] {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin: 1.25rem auto 0.5rem;
    border: 0.1875rem solid transparent;
    border-radius: 50%;
    font-family: inherit;
    line-height: 3.75rem;
    cursor: default;
    user-select: none;
}

.swal2-icon-show[b-qyn148eyhd] {
    display: flex;
    animation: swal2-animate-icon-b-qyn148eyhd 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes swal2-animate-icon-b-qyn148eyhd {
    0% {
        transform: scale(0) rotateZ(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotateZ(10deg);
    }
    100% {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
}



/* Success Icon - Modern gradient style */
.swal2-icon.swal2-success[b-qyn148eyhd] {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .swal2-icon.swal2-success[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-icon.swal2-success[b-qyn148eyhd] {
    border-color: #34d399;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.15) 100%);
    color: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
}

.swal2-success-circular-line-left[b-qyn148eyhd],
.swal2-success-circular-line-right[b-qyn148eyhd] {
    position: absolute;
    width: 2.8125rem;
    height: 5.625rem;
    transform: rotate(45deg);
    border-radius: 50%;
}

.swal2-success-circular-line-left[b-qyn148eyhd] {
    top: -0.328rem;
    left: -1.547rem;
    transform: rotate(-45deg);
    transform-origin: 2.8125rem 2.8125rem;
    border-radius: 5.625rem 0 0 5.625rem;
}

.swal2-success-circular-line-right[b-qyn148eyhd] {
    top: -0.516rem;
    left: 1.406rem;
    transform: rotate(-45deg);
    transform-origin: 0 2.8125rem;
    border-radius: 0 5.625rem 5.625rem 0;
}

.swal2-success-ring[b-qyn148eyhd] {
    position: absolute;
    z-index: 2;
    top: -0.1875rem;
    left: -0.1875rem;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: 0.1875rem solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
}

[data-theme="dark"] .swal2-success-ring[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-success-ring[b-qyn148eyhd] {
    border-color: rgba(52, 211, 153, 0.25);
}

.swal2-success-fix[b-qyn148eyhd] {
    position: absolute;
    z-index: 1;
    top: 0.375rem;
    left: 1.219rem;
    width: 0.328rem;
    height: 4.219rem;
    transform: rotate(-45deg);
}

.swal2-success-line-tip[b-qyn148eyhd] {
    position: absolute;
    z-index: 2;
    top: 2.156rem;
    left: 0.656rem;
    width: 1.172rem;
    height: 0.234rem;
    transform: rotate(45deg);
    background-color: #10b981;
    border-radius: 0.094rem;
    animation: swal2-animate-success-line-tip-b-qyn148eyhd 0.65s;
}

[data-theme="dark"] .swal2-success-line-tip[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-success-line-tip[b-qyn148eyhd] {
    background-color: #34d399;
}

@keyframes swal2-animate-success-line-tip-b-qyn148eyhd {
    0% {
        top: 0.891rem;
        left: 0.047rem;
        width: 0;
    }
    54% {
        top: 0.797rem;
        left: 0.094rem;
        width: 0;
    }
    70% {
        top: 1.641rem;
        left: -0.375rem;
        width: 2.344rem;
    }
    84% {
        top: 2.25rem;
        left: 0.797rem;
        width: 0.797rem;
    }
    100% {
        top: 2.109rem;
        left: 0.656rem;
        width: 1.172rem;
    }
}

.swal2-success-line-long[b-qyn148eyhd] {
    position: absolute;
    z-index: 2;
    top: 1.781rem;
    right: 0.375rem;
    width: 2.203rem;
    height: 0.234rem;
    transform: rotate(-45deg);
    background-color: #10b981;
    border-radius: 0.094rem;
    animation: swal2-animate-success-line-long-b-qyn148eyhd 0.65s;
}

[data-theme="dark"] .swal2-success-line-long[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-success-line-long[b-qyn148eyhd] {
    background-color: #34d399;
}

@keyframes swal2-animate-success-line-long-b-qyn148eyhd {
    0% {
        top: 2.531rem;
        right: 2.156rem;
        width: 0;
    }
    65% {
        top: 2.531rem;
        right: 2.156rem;
        width: 0;
    }
    84% {
        top: 1.641rem;
        right: 0;
        width: 2.578rem;
    }
    100% {
        top: 1.781rem;
        right: 0.375rem;
        width: 2.203rem;
    }
}

/* Error Icon - Enhanced with gradient */
.swal2-icon.swal2-error[b-qyn148eyhd] {
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .swal2-icon.swal2-error[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-icon.swal2-error[b-qyn148eyhd] {
    border-color: #f87171;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.15) 100%);
    color: #f87171;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
}

.swal2-x-mark[b-qyn148eyhd] {
    position: relative;
    display: block;
    flex-grow: 1;
}

.swal2-x-mark-line-left[b-qyn148eyhd],
.swal2-x-mark-line-right[b-qyn148eyhd] {
    position: absolute;
    top: 1.734rem;
    width: 2.203rem;
    height: 0.234rem;
    background-color: #ef4444;
    border-radius: 0.094rem;
}

[data-theme="dark"] .swal2-x-mark-line-left[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-x-mark-line-left[b-qyn148eyhd],
[data-theme="dark"] .swal2-x-mark-line-right[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-x-mark-line-right[b-qyn148eyhd] {
    background-color: #f87171;
}

.swal2-x-mark-line-left[b-qyn148eyhd] {
    left: 0.75rem;
    transform: rotate(45deg);
    animation: swal2-animate-error-x-mark-b-qyn148eyhd 0.45s;
}

.swal2-x-mark-line-right[b-qyn148eyhd] {
    right: 0.75rem;
    transform: rotate(-45deg);
    animation: swal2-animate-error-x-mark-b-qyn148eyhd 0.45s;
}

@keyframes swal2-animate-error-x-mark-b-qyn148eyhd {
    0% {
        transform: scale(0.3) rotate(45deg);
        opacity: 0;
    }
    50% {
        transform: scale(0.5) rotate(45deg);
        opacity: 0.5;
    }
    80% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(45deg);
        opacity: 1;
    }
}

/* Warning Icon - Vibrant gradient */
.swal2-icon.swal2-warning[b-qyn148eyhd] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .swal2-icon.swal2-warning[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-icon.swal2-warning[b-qyn148eyhd] {
    border-color: #fbbf24;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.15) 100%);
    color: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15);
}

.swal2-warning-icon[b-qyn148eyhd] {
    font-size: 2.8125rem;
    font-weight: 700;
    animation: swal2-pulse-warning-b-qyn148eyhd 0.85s infinite alternate;
}

@keyframes swal2-pulse-warning-b-qyn148eyhd {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* Info Icon - Modern blue gradient */
.swal2-icon.swal2-info[b-qyn148eyhd] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.1) 100%);
    color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .swal2-icon.swal2-info[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-icon.swal2-info[b-qyn148eyhd] {
    border-color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%);
    color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

.swal2-info-icon[b-qyn148eyhd] {
    font-size: 2.8125rem;
    font-weight: 700;
    animation: swal2-rotate-info-b-qyn148eyhd 1s ease-in-out;
}

@keyframes swal2-rotate-info-b-qyn148eyhd {
    0% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Question Icon - Modern purple gradient */
.swal2-icon.swal2-question[b-qyn148eyhd] {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
    color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .swal2-icon.swal2-question[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-icon.swal2-question[b-qyn148eyhd] {
    border-color: #a78bfa;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);
    color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.15);
}

.swal2-question-icon[b-qyn148eyhd] {
    font-size: 2.8125rem;
    font-weight: 700;
    animation: swal2-bounce-question-b-qyn148eyhd 0.6s;
}

@keyframes swal2-bounce-question-b-qyn148eyhd {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}


/* Actions (buttons) - Modern & Compact */
.swal2-actions[b-qyn148eyhd] {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0.875rem auto 0;
    padding: 0;
    gap: 0.5rem;
}

.swal2-styled[b-qyn148eyhd] {
    margin: 0;
    padding: 0.5rem 1.25rem;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 0.875rem;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.swal2-styled:not([disabled]):hover[b-qyn148eyhd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.swal2-styled:not([disabled]):active[b-qyn148eyhd] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.swal2-confirm[b-qyn148eyhd] {
    order: 1;
}

.swal2-deny[b-qyn148eyhd] {
    order: 2;
}

.swal2-cancel[b-qyn148eyhd] {
    order: 3;
}

.swal2-confirm-success[b-qyn148eyhd] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.swal2-confirm-success:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"] .swal2-confirm-success[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-success[b-qyn148eyhd] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .swal2-confirm-success:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-success:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4);
}

.swal2-confirm-error[b-qyn148eyhd] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.swal2-confirm-error:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

[data-theme="dark"] .swal2-confirm-error[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-error[b-qyn148eyhd] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .swal2-confirm-error:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-error:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.4);
}

.swal2-confirm-warning[b-qyn148eyhd] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.swal2-confirm-warning:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

[data-theme="dark"] .swal2-confirm-warning[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-warning[b-qyn148eyhd] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .swal2-confirm-warning:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-warning:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.swal2-confirm-info[b-qyn148eyhd] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.swal2-confirm-info:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

[data-theme="dark"] .swal2-confirm-info[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-info[b-qyn148eyhd] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .swal2-confirm-info:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-info:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

.swal2-confirm-question[b-qyn148eyhd] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
}

.swal2-confirm-question:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

[data-theme="dark"] .swal2-confirm-question[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-question[b-qyn148eyhd] {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .swal2-confirm-question:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-question:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
}

.swal2-confirm-default[b-qyn148eyhd] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
}

.swal2-confirm-default:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

[data-theme="dark"] .swal2-confirm-default[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-default[b-qyn148eyhd] {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

[data-theme="dark"] .swal2-confirm-default:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-confirm-default:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.4);
}

.swal2-deny-default[b-qyn148eyhd] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.swal2-deny-default:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

[data-theme="dark"] .swal2-deny-default[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-deny-default[b-qyn148eyhd] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .swal2-deny-default:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-deny-default:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

.swal2-cancel-default[b-qyn148eyhd] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #fff;
}

.swal2-cancel-default:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
}

[data-theme="dark"] .swal2-cancel-default[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-cancel-default[b-qyn148eyhd] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.3);
}

[data-theme="dark"] .swal2-cancel-default:not([disabled]):hover[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-cancel-default:not([disabled]):hover[b-qyn148eyhd] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.4);
}

/* Input - Compact & Modern */
.swal2-input[b-qyn148eyhd] {
    box-sizing: border-box;
    width: 100%;
    margin: 0.75rem auto 0.25rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
    border: 1.5px solid #d1d5db;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #1f2937;
    font-size: 0.9375rem;
}

[data-theme="dark"] .swal2-input[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-input[b-qyn148eyhd] {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.swal2-input:focus[b-qyn148eyhd] {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .swal2-input:focus[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-input:focus[b-qyn148eyhd] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.swal2-input[b-qyn148eyhd]::placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .swal2-input[b-qyn148eyhd]::placeholder,
[data-bs-theme="dark"] .swal2-input[b-qyn148eyhd]::placeholder {
    color: #6b7280;
}

/* Timer progress bar - Modern & Eye-catching */
.swal2-timer-progress-bar-container[b-qyn148eyhd] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-column: auto !important;
    height: 0.1875rem;
    overflow: hidden;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .swal2-timer-progress-bar-container[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-timer-progress-bar-container[b-qyn148eyhd] {
    background: rgba(255, 255, 255, 0.05);
}

.swal2-timer-progress-bar[b-qyn148eyhd] {
    width: 100%;
    height: 0.1875rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

[data-theme="dark"] .swal2-timer-progress-bar[b-qyn148eyhd],
[data-bs-theme="dark"] .swal2-timer-progress-bar[b-qyn148eyhd] {
    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 100%);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
}

/* /Components/Shared/SystemHealthWidget.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   SYSTEM HEALTH WIDGET
   Matches the dark card design from the reference image:
   CPU (white/steel), Memory (green), Disk (red), Network (blue)
   ═══════════════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────────────── */
.sh-card[b-49k4rjv7lk] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 1.25rem 1.5rem 1rem;
    min-width: 0;
    width: 100%;
}

[data-bs-theme="light"] .sh-card[b-49k4rjv7lk],
[data-theme="light"] .sh-card[b-49k4rjv7lk] {
    background: #1a2235;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Header ──────────────────────────────────────────────── */
.sh-card__header[b-49k4rjv7lk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.35rem;
}

.sh-card__title[b-49k4rjv7lk] {
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}

.sh-card__timestamp[b-49k4rjv7lk] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    font-variant-numeric: tabular-nums;
}

/* ── Metric rows ─────────────────────────────────────────── */
.sh-metrics[b-49k4rjv7lk] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.sh-metric[b-49k4rjv7lk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sh-metric__header[b-49k4rjv7lk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sh-metric__label[b-49k4rjv7lk] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    font-weight: 500;
}

.sh-metric__value[b-49k4rjv7lk] {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
    text-align: right;
}

/* Per-metric value colours — matches the reference image */
.sh-metric__value--cpu[b-49k4rjv7lk]     { color: #e2e8f0; }
.sh-metric__value--memory[b-49k4rjv7lk]  { color: #34d399; }
.sh-metric__value--disk[b-49k4rjv7lk]    { color: #f87171; }
.sh-metric__value--network[b-49k4rjv7lk] { color: #60a5fa; }

.sh-metric__detail[b-49k4rjv7lk] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.28);
    line-height: 1;
}

/* ── Progress track & bar ────────────────────────────────── */
.sh-track[b-49k4rjv7lk] {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.sh-bar[b-49k4rjv7lk] {
    height: 100%;
    border-radius: 999px;
    /* Smooth width animation on data refresh */
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

/* Bar colours per metric */
.sh-bar--cpu[b-49k4rjv7lk] {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

.sh-bar--memory[b-49k4rjv7lk] {
    background: linear-gradient(90deg, #059669, #34d399);
}

.sh-bar--disk[b-49k4rjv7lk] {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.sh-bar--network[b-49k4rjv7lk] {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/* ── Loading skeleton ────────────────────────────────────── */
.sh-loading[b-49k4rjv7lk] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.25rem 0 0.5rem;
}

.sh-loading__bar[b-49k4rjv7lk] {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    animation: sh-pulse-b-49k4rjv7lk 1.4s ease-in-out infinite;
}

.sh-loading__bar--1[b-49k4rjv7lk] { width: 45%; animation-delay: 0s;    }
.sh-loading__bar--2[b-49k4rjv7lk] { width: 62%; animation-delay: 0.15s; }
.sh-loading__bar--3[b-49k4rjv7lk] { width: 78%; animation-delay: 0.3s;  }
.sh-loading__bar--4[b-49k4rjv7lk] { width: 32%; animation-delay: 0.45s; }

@keyframes sh-pulse-b-49k4rjv7lk {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.9; }
}

/* ── Error state ─────────────────────────────────────────── */
.sh-error[b-49k4rjv7lk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.sh-error__icon[b-49k4rjv7lk] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #f87171;
}
/* /Components/Shared/ToastContainer.razor.rz.scp.css */
/* ============================================
   ENTERPRISE TOAST NOTIFICATION STYLES
   ============================================ */

.toast-container[b-08dzsdnnoo] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 420px;
    width: 100%;
    pointer-events: none;
}

.toast[b-08dzsdnnoo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Toast Enter Animation */
.toast-enter[b-08dzsdnnoo] {
    animation: toastSlideIn-b-08dzsdnnoo 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Toast Exit Animation */
.toast-exit[b-08dzsdnnoo] {
    animation: toastSlideOut-b-08dzsdnnoo 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideIn-b-08dzsdnnoo {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut-b-08dzsdnnoo {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

/* Toast Type Styles */
.toast-success[b-08dzsdnnoo] {
    border-left-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, var(--card-bg, #ffffff) 100%);
}

.toast-success .toast-icon[b-08dzsdnnoo] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.toast-error[b-08dzsdnnoo] {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--card-bg, #ffffff) 100%);
}

.toast-error .toast-icon[b-08dzsdnnoo] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.toast-warning[b-08dzsdnnoo] {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--card-bg, #ffffff) 100%);
}

.toast-warning .toast-icon[b-08dzsdnnoo] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.toast-info[b-08dzsdnnoo] {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, var(--card-bg, #ffffff) 100%);
}

.toast-info .toast-icon[b-08dzsdnnoo] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.toast-loading[b-08dzsdnnoo] {
    border-left-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, var(--card-bg, #ffffff) 100%);
}

.toast-loading .toast-icon[b-08dzsdnnoo] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

/* Toast Icon */
.toast-icon[b-08dzsdnnoo] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Toast Spinner */
.toast-spinner[b-08dzsdnnoo] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-08dzsdnnoo 0.8s linear infinite;
}

@keyframes spin-b-08dzsdnnoo {
    to {
        transform: rotate(360deg);
    }
}

/* Toast Content */
.toast-content[b-08dzsdnnoo] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-08dzsdnnoo] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #1f2937);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.toast-message[b-08dzsdnnoo] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
    word-break: break-word;
}

/* Toast Action Button */
.toast-action[b-08dzsdnnoo] {
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toast-action:hover[b-08dzsdnnoo] {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.toast-action:focus[b-08dzsdnnoo] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* Toast Close Button */
.toast-close[b-08dzsdnnoo] {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.25rem;
    line-height: 1;
}

.toast-close:hover[b-08dzsdnnoo] {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #1f2937);
}

.toast-close:focus[b-08dzsdnnoo] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* Toast Progress Bar */
.toast-progress[b-08dzsdnnoo] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.toast-progress-bar[b-08dzsdnnoo] {
    height: 100%;
    background: currentColor;
    animation: progressShrink-b-08dzsdnnoo linear forwards;
    transform-origin: left;
}

.toast-success .toast-progress-bar[b-08dzsdnnoo] {
    background: #10b981;
}

.toast-error .toast-progress-bar[b-08dzsdnnoo] {
    background: #ef4444;
}

.toast-warning .toast-progress-bar[b-08dzsdnnoo] {
    background: #f59e0b;
}

.toast-info .toast-progress-bar[b-08dzsdnnoo] {
    background: #3b82f6;
}

@keyframes progressShrink-b-08dzsdnnoo {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .toast[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast[b-08dzsdnnoo] {
    background: var(--card-bg, #1e2328);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toast-success[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast-success[b-08dzsdnnoo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--card-bg, #1e2328) 100%);
}

[data-theme="dark"] .toast-error[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast-error[b-08dzsdnnoo] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--card-bg, #1e2328) 100%);
}

[data-theme="dark"] .toast-warning[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast-warning[b-08dzsdnnoo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, var(--card-bg, #1e2328) 100%);
}

[data-theme="dark"] .toast-info[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast-info[b-08dzsdnnoo] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, var(--card-bg, #1e2328) 100%);
}

[data-theme="dark"] .toast-loading[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast-loading[b-08dzsdnnoo] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, var(--card-bg, #1e2328) 100%);
}

[data-theme="dark"] .toast-close:hover[b-08dzsdnnoo],
[data-bs-theme="dark"] .toast-close:hover[b-08dzsdnnoo] {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 480px) {
    .toast-container[b-08dzsdnnoo] {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
    
    .toast[b-08dzsdnnoo] {
        padding: 0.875rem;
    }
    
    .toast-icon[b-08dzsdnnoo] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}

/* Focus visible for accessibility */
.toast:focus-visible[b-08dzsdnnoo] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}
/* /Components/Shared/UniversalDataGrid.razor.rz.scp.css */
/* UniversalDataGrid Common Styles */

.container-fluid[b-1l5ahinqim] {
    padding: 0;
    max-width: 100%;
    overflow: visible;
}

.card-header[b-1l5ahinqim] {
    padding-bottom: 0.9625rem;
    border-bottom: 0px !important;
}

/* Responsive header layout */
.card-header .d-flex.justify-content-between[b-1l5ahinqim] {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

.card-header .d-flex.justify-content-between > *[b-1l5ahinqim] {
    flex-shrink: 0 !important;
}

/* Keep buttons and inline alert on the same row */
.btn-toolbar[b-1l5ahinqim] {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Ensure filter button stays visible on smaller screens */
@media (max-width: 991px) {
    .card-header .d-flex.justify-content-between[b-1l5ahinqim] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .btn-toolbar[b-1l5ahinqim] {
        width: 100% !important;
    }

    .quick-grid-filter-container[b-1l5ahinqim] {
        margin-top: 0.5rem;
    }
}

@media (max-width: 767px) {
    .btn-group[b-1l5ahinqim] {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .action-btn[b-1l5ahinqim] {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

[b-1l5ahinqim] .quickgrid {
    color: var(--text-primary) !important;
    margin: 0 !important;
    font-size: 0.8125rem;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    /* ── Header ── */
    [b-1l5ahinqim] .quickgrid .col-title {
        gap: 0.25rem;
        font-weight: 600;
    }

    /* Remove default QuickGrid hover/focus effects from header buttons */
    [b-1l5ahinqim] .quickgrid .col-title:hover,
    [b-1l5ahinqim] .quickgrid .col-title:focus,
    [b-1l5ahinqim] .quickgrid .col-title:active,
    [b-1l5ahinqim] .quickgrid button.col-title:hover,
    [b-1l5ahinqim] .quickgrid button.col-title:focus,
    [b-1l5ahinqim] .quickgrid button.col-title:active {
        background: transparent !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    [b-1l5ahinqim] .quickgrid .col-title-text {
        color: var(--text-primary) !important;
        padding: 0 !important;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    [b-1l5ahinqim] .quickgrid .sort-indicator {
        color: var(--text-primary) !important;
        font-size: 0.65rem;
    }

    [b-1l5ahinqim] .quickgrid thead th:first-child {
        border-top-left-radius: 0 !important;
    }

    [b-1l5ahinqim] .quickgrid thead th:last-child {
        border-top-right-radius: 0 !important;
    }

    [b-1l5ahinqim] .quickgrid thead th {
        position: relative !important;
        overflow: visible !important;
        vertical-align: middle !important;
        padding: 0.4375rem 0.625rem !important;
        border-bottom: 2px solid var(--accent-primary) !important;
        background: rgba(var(--gold-rgb, 251, 176, 64), 0.15) !important;
        color: var(--text-primary) !important;
        white-space: nowrap;
    }

    [b-1l5ahinqim] .quickgrid thead tr {
        height: auto !important;
    }

    /* ── Body ── */
    [b-1l5ahinqim] .quickgrid tbody tr.selected-row td {
        background-color: rgba(var(--gold-rgb, 74, 158, 255), 0.12) !important;
    }

    [b-1l5ahinqim] .quickgrid tbody tr td {
        padding: 0.3125rem 0.625rem !important;
        vertical-align: middle !important;
        border-bottom: 1px solid var(--border-primary);
        color: var(--text-primary);
        font-size: 0.8125rem;
        line-height: 1.45;
        transition: background-color 0.1s ease;
    }

    /* Zebra striping — subtle alternate row shading */
    [b-1l5ahinqim] .quickgrid tbody tr:nth-child(even) td {
        background-color: var(--surface-2, var(--bg-secondary));
    }

    [b-1l5ahinqim] .quickgrid tbody tr:nth-child(odd) td {
        background-color: var(--bg-elevated, var(--bg-primary));
    }

/* Loading overlay - overflows parent when needed */
.loading-overlay[b-1l5ahinqim] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

[data-theme="dark"] .loading-overlay[b-1l5ahinqim],
[data-bs-theme="dark"] .loading-overlay[b-1l5ahinqim] {
    background: rgba(15, 20, 25, 0.9);
}

.loading-content[b-1l5ahinqim] {
    text-align: center;
    padding: 2rem;
}

    .loading-content p[b-1l5ahinqim] {
        margin: 0;
        color: #6c757d;
        font-size: 0.95rem;
    }

[data-theme="dark"] .loading-content p[b-1l5ahinqim],
[data-bs-theme="dark"] .loading-content p[b-1l5ahinqim] {
    color: #adb5bd;
}

[b-1l5ahinqim] nav button {
    background-color: #adb5bd5c;
}

/* Prevent card body from causing layout shifts */
.card-body[b-1l5ahinqim] {
    contain: layout style;
    overflow: hidden;
}

/* Grid table wrapper - only the table area scrolls horizontally */
.grid-container[b-1l5ahinqim] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

/* Ensure smooth visual experience during state changes */
.card[b-1l5ahinqim] {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Inline Alert - Pill Style */
.grid-inline-alert[b-1l5ahinqim] {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    height: 31px;
    align-items: center;
}

.grid-inline-alert__icon[b-1l5ahinqim] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.grid-inline-alert__text[b-1l5ahinqim] {
    line-height: 1.2;
}

/* Info Alert (Default) */
.grid-inline-alert--info[b-1l5ahinqim] {
    border: 1px solid rgba(13, 202, 240, 0.4);
    background: rgba(13, 202, 240, 0.12);
    color: var(--bs-body-color);
}

.grid-inline-alert--info .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(13, 202, 240, 0.25);
    color: #0dcaf0;
}

/* Warning Alert */
.grid-inline-alert--warning[b-1l5ahinqim] {
    border: 1px solid rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.12);
    color: var(--bs-body-color);
}

.grid-inline-alert--warning .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(255, 193, 7, 0.25);
    color: #ffc107;
}

/* Danger Alert */
.grid-inline-alert--danger[b-1l5ahinqim] {
    border: 1px solid rgba(220, 53, 69, 0.4);
    background: rgba(220, 53, 69, 0.12);
    color: var(--bs-body-color);
}

.grid-inline-alert--danger .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(220, 53, 69, 0.25);
    color: #dc3545;
}

/* Success Alert */
.grid-inline-alert--success[b-1l5ahinqim] {
    border: 1px solid rgba(25, 135, 84, 0.4);
    background: rgba(25, 135, 84, 0.12);
    color: var(--bs-body-color);
}

.grid-inline-alert--success .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(25, 135, 84, 0.25);
    color: #198754;
}

/* Dark Theme Adjustments */
[data-bs-theme="dark"] .grid-inline-alert--info[b-1l5ahinqim] {
    border-color: rgba(13, 202, 240, 0.55);
    background: rgba(13, 202, 240, 0.18);
    box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .grid-inline-alert--info .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(13, 202, 240, 0.3);
    color: #6edff6;
}

[data-bs-theme="dark"] .grid-inline-alert--warning[b-1l5ahinqim] {
    border-color: rgba(255, 193, 7, 0.55);
    background: rgba(255, 193, 7, 0.18);
    box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .grid-inline-alert--warning .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(255, 193, 7, 0.3);
    color: #ffda6a;
}

[data-bs-theme="dark"] .grid-inline-alert--danger[b-1l5ahinqim] {
    border-color: rgba(220, 53, 69, 0.55);
    background: rgba(220, 53, 69, 0.18);
    box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .grid-inline-alert--danger .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(220, 53, 69, 0.3);
    color: #ea868f;
}

[data-bs-theme="dark"] .grid-inline-alert--success[b-1l5ahinqim] {
    border-color: rgba(25, 135, 84, 0.55);
    background: rgba(25, 135, 84, 0.18);
    box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .grid-inline-alert--success .grid-inline-alert__icon[b-1l5ahinqim] {
    background: rgba(25, 135, 84, 0.3);
    color: #75b798;
}

/* Action Buttons Styling */
.btn-group[b-1l5ahinqim] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
}

.action-btn[b-1l5ahinqim] {
    border-radius: 0.5rem !important;
    font-weight: 600;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.813rem !important;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-xs[b-1l5ahinqim] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Light Theme - Action Buttons */
.action-btn.btn-primary[b-1l5ahinqim] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.3);
}

    .action-btn.btn-primary:hover:not(:disabled)[b-1l5ahinqim] {
        background: #0d6efd;
        color: white;
        border-color: #0d6efd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }

.action-btn.btn-success[b-1l5ahinqim] {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    border-color: rgba(25, 135, 84, 0.3);
}

    .action-btn.btn-success:hover:not(:disabled)[b-1l5ahinqim] {
        background: #198754;
        color: white;
        border-color: #198754;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
    }

.action-btn.btn-danger[b-1l5ahinqim] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.3);
}

    .action-btn.btn-danger:hover:not(:disabled)[b-1l5ahinqim] {
        background: #dc3545;
        color: white;
        border-color: #dc3545;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

.action-btn.btn-warning[b-1l5ahinqim] {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

    .action-btn.btn-warning:hover:not(:disabled)[b-1l5ahinqim] {
        background: #ffc107;
        color: #000;
        border-color: #ffc107;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }

.action-btn.btn-info[b-1l5ahinqim] {
    background: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.3);
}

    .action-btn.btn-info:hover:not(:disabled)[b-1l5ahinqim] {
        background: #0dcaf0;
        color: #000;
        border-color: #0dcaf0;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3);
    }

.action-btn.btn-secondary[b-1l5ahinqim] {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border-color: rgba(108, 117, 125, 0.3);
}

    .action-btn.btn-secondary:hover:not(:disabled)[b-1l5ahinqim] {
        background: #6c757d;
        color: white;
        border-color: #6c757d;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }

/* Dark Theme - Action Buttons */
[data-theme="dark"] .action-btn.btn-primary[b-1l5ahinqim],
[data-bs-theme="dark"] .action-btn.btn-primary[b-1l5ahinqim] {
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
    border-color: rgba(74, 158, 255, 0.4);
}

    [data-theme="dark"] .action-btn.btn-primary:hover:not(:disabled)[b-1l5ahinqim],
    [data-bs-theme="dark"] .action-btn.btn-primary:hover:not(:disabled)[b-1l5ahinqim] {
        background: #4a9eff;
        color: #0f1419;
        border-color: #4a9eff;
    }

[data-theme="dark"] .action-btn.btn-success[b-1l5ahinqim],
[data-bs-theme="dark"] .action-btn.btn-success[b-1l5ahinqim] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
}

    [data-theme="dark"] .action-btn.btn-success:hover:not(:disabled)[b-1l5ahinqim],
    [data-bs-theme="dark"] .action-btn.btn-success:hover:not(:disabled)[b-1l5ahinqim] {
        background: #22c55e;
        color: #0f1419;
        border-color: #22c55e;
    }

[data-theme="dark"] .action-btn.btn-danger[b-1l5ahinqim],
[data-bs-theme="dark"] .action-btn.btn-danger[b-1l5ahinqim] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

    [data-theme="dark"] .action-btn.btn-danger:hover:not(:disabled)[b-1l5ahinqim],
    [data-bs-theme="dark"] .action-btn.btn-danger:hover:not(:disabled)[b-1l5ahinqim] {
        background: #ef4444;
        color: #0f1419;
        border-color: #ef4444;
    }

[data-theme="dark"] .action-btn.btn-warning[b-1l5ahinqim],
[data-bs-theme="dark"] .action-btn.btn-warning[b-1l5ahinqim] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}

    [data-theme="dark"] .action-btn.btn-warning:hover:not(:disabled)[b-1l5ahinqim],
    [data-bs-theme="dark"] .action-btn.btn-warning:hover:not(:disabled)[b-1l5ahinqim] {
        background: #fbbf24;
        color: #0f1419;
        border-color: #fbbf24;
    }

[data-theme="dark"] .action-btn.btn-info[b-1l5ahinqim],
[data-bs-theme="dark"] .action-btn.btn-info[b-1l5ahinqim] {
    background: rgba(34, 211, 238, 0.15);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.4);
}

    [data-theme="dark"] .action-btn.btn-info:hover:not(:disabled)[b-1l5ahinqim],
    [data-bs-theme="dark"] .action-btn.btn-info:hover:not(:disabled)[b-1l5ahinqim] {
        background: #22d3ee;
        color: #0f1419;
        border-color: #22d3ee;
    }

[data-theme="dark"] .action-btn.btn-secondary[b-1l5ahinqim],
[data-bs-theme="dark"] .action-btn.btn-secondary[b-1l5ahinqim] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.4);
}

    [data-theme="dark"] .action-btn.btn-secondary:hover:not(:disabled)[b-1l5ahinqim],
    [data-bs-theme="dark"] .action-btn.btn-secondary:hover:not(:disabled)[b-1l5ahinqim] {
        background: #94a3b8;
        color: #0f1419;
        border-color: #94a3b8;
    }

/* Disabled State */
.action-btn:disabled[b-1l5ahinqim] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Card Styling */
.card[b-1l5ahinqim] {
    border-radius: 0.5rem;
    /* Reserve space for box-shadow to prevent shift */
    margin: 0.125rem;
    /* Use transform for GPU acceleration */
    transform: translateZ(0);
    will-change: auto;
    /* Isolate rendering */
    contain: layout style;
}

.card-header[b-1l5ahinqim] {
    padding: 1rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

/* Empty State */
.text-center i[b-1l5ahinqim] {
    opacity: 0.5;
}

/* Row Selection Styling */
.clickable-row[b-1l5ahinqim] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .clickable-row:hover[b-1l5ahinqim] {
        background-color: var(--surface-active, #4a9eff20) !important; 
    }

/* Selected row styling with high specificity */
table tbody tr.selected-row[b-1l5ahinqim],
tbody tr.selected-row[b-1l5ahinqim] {
    background-color: rgba(13, 110, 253, 0.15) !important; 
}

    /* Ensure selected row takes precedence over hover */
    table tbody tr.selected-row:hover[b-1l5ahinqim],
    tbody tr.selected-row:hover[b-1l5ahinqim] {
        background-color: rgba(13, 110, 253, 0.2) !important;
    }

[data-theme="dark"] table tbody tr.selected-row[b-1l5ahinqim],
[data-theme="dark"] tbody tr.selected-row[b-1l5ahinqim],
[data-bs-theme="dark"] table tbody tr.selected-row[b-1l5ahinqim],
[data-bs-theme="dark"] tbody tr.selected-row[b-1l5ahinqim] {
    background-color: rgba(74, 158, 255, 0.2) !important;
}

    [data-theme="dark"] table tbody tr.selected-row:hover[b-1l5ahinqim],
    [data-theme="dark"] tbody tr.selected-row:hover[b-1l5ahinqim],
    [data-bs-theme="dark"] table tbody tr.selected-row:hover[b-1l5ahinqim],
    [data-bs-theme="dark"] tbody tr.selected-row:hover[b-1l5ahinqim] {
        background-color: rgba(74, 158, 255, 0.3) !important;
    }

/* Row-level interaction styles */
table tbody tr[b-1l5ahinqim] {
    cursor: pointer;
}

    table tbody tr td[b-1l5ahinqim] {
        user-select: none;
    }

/* Override QuickGrid row hover color */
[b-1l5ahinqim] .quickgrid tbody tr:hover td {
    background-color: var(--surface-active, #4a9eff20) !important;
}
}

/* Make entire cell clickable */
.cell-clickable[b-1l5ahinqim] {
    cursor: pointer;
    display: block;
    width: 100%;
    min-height: 100%;
}

/* ============================================
   FIX: Remove Extra Empty Rows in QuickGrid
   ============================================ */

/* Card body needs relative positioning and height to contain absolutely positioned grid */
[b-1l5ahinqim] .card-body.p-0 {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Prevent container from showing stripes when it has more height than content */
[b-1l5ahinqim] .grid-container {
    background: none !important;
    background-image: none !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Remove extra empty rows styling */
[b-1l5ahinqim] .quickgrid tbody tr:empty {
    display: none !important;
    height: 0 !important;
}

[b-1l5ahinqim] .quickgrid tbody tr td:empty:only-child {
    display: none !important;
}

/* Hide placeholder rows that QuickGrid may generate */
[b-1l5ahinqim] .quickgrid tbody tr:not(:has(td:not(:empty))) {
    display: none !important;
}

/* Remove any rows with only whitespace */
[b-1l5ahinqim] .quickgrid tbody tr:has(td:empty):not(:has(td:not(:empty))) {
    display: none !important;
}

/* Ensure tbody doesn't have minimum height creating empty space */
[b-1l5ahinqim] .quickgrid tbody {
    min-height: 0 !important;
    height: auto !important;
}

/* Force table to size to actual content only */
[b-1l5ahinqim] .quickgrid table {
    height: auto !important;
    min-height: 0 !important;
}

/* Remove striped background that creates visual blank rows when tbody has extra space */
[b-1l5ahinqim] .quickgrid.table-striped tbody {
    background-image: none !important;
    background-size: 0 !important;
}

/* Remove any spacer or placeholder rows */
[b-1l5ahinqim] .quickgrid tbody tr[role="presentation"] {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
}

[b-1l5ahinqim] .quickgrid tbody tr.placeholder-row,
[b-1l5ahinqim] .quickgrid tbody tr.spacer-row {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Hide any empty TR elements without content */
[b-1l5ahinqim] .quickgrid tbody tr:not(:has(*)) {
    display: none !important;
}

/* Prevent table-striped from showing stripes beyond actual data rows */
[b-1l5ahinqim] .quickgrid.table-striped > tbody > tr:nth-of-type(odd):empty {
    background-color: transparent !important;
}

[b-1l5ahinqim] .quickgrid.table-striped > tbody > tr:nth-of-type(even):empty {
    background-color: transparent !important;
}

/* Remove Bootstrap striped background pattern from showing below data rows */
[b-1l5ahinqim] .quickgrid.table-striped,
[b-1l5ahinqim] .table-striped.quickgrid {
    background: transparent !important;
    background-image: none !important;
}

    /* Ensure only actual TR elements with TD content get stripes, not container background */
    [b-1l5ahinqim] .quickgrid.table-striped tbody,
    [b-1l5ahinqim] .table-striped.quickgrid tbody {
        background: transparent !important;
        background-image: none !important;
    }

/* Remove any webkit or CSS-generated striping patterns */
[b-1l5ahinqim] .quickgrid tbody::before,
[b-1l5ahinqim] .quickgrid tbody::after {
    display: none !important;
    content: none !important;
}