/* /Components/Layout/AppShell.razor.rz.scp.css */
/*
 * AppShell Styles - Wealth Portal 2
 * ==================================
 * 3-Column CSS Grid Layout using design tokens
 *
 * Structure:
 * [240px Nav] [Flex Content] [0/380px AI Panel]
 */

/* ========================================
   ROOT SHELL - 3-Column Grid
   ======================================== */

.app-shell[b-x37lf8e5rk] {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr) 0;
    grid-template-rows: 100vh;
    background: var(--color-background);
    color: var(--color-text);
    overflow: hidden;
    font-family: var(--font-family);
}

/* When AI panel is open, allocate width to third column */
.app-shell.ai-open[b-x37lf8e5rk] {
    grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--ai-panel-width);
}

/* ========================================
   LEFT NAVIGATION
   ======================================== */

.shell-nav[b-x37lf8e5rk] {
    background: linear-gradient(180deg, var(--color-primary) 0%, #0f172a 100%);
    color: var(--color-text-inverse);
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Nav Header - User Profile */
.shell-nav-header[b-x37lf8e5rk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-4);
}

/* Avatar */
.shell-avatar[b-x37lf8e5rk] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: white;
    text-transform: uppercase;
}

/* Avatar color variants */
.shell-avatar.avatar-adviser[b-x37lf8e5rk] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.shell-avatar.avatar-client[b-x37lf8e5rk] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.shell-avatar.avatar-admin[b-x37lf8e5rk] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.shell-avatar img[b-x37lf8e5rk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

/* Avatar wrapper for badge positioning */
.shell-avatar-wrapper[b-x37lf8e5rk] {
    position: relative;
    display: inline-block;
}

/* Adviser badge overlay */
.shell-adviser-badge[b-x37lf8e5rk] {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 2px solid var(--nav-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    color: white;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shell-adviser-badge:hover[b-x37lf8e5rk] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.shell-adviser-badge img[b-x37lf8e5rk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

/* User info */
.shell-nav-user[b-x37lf8e5rk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.shell-nav-name[b-x37lf8e5rk] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-nav-role[b-x37lf8e5rk] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Nav Menu */
.shell-nav-menu[b-x37lf8e5rk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Nav Items */
.shell-nav-item[b-x37lf8e5rk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: left;
    text-decoration: none;
}

.shell-nav-item i[b-x37lf8e5rk] {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-base);
}

.shell-nav-item:hover[b-x37lf8e5rk] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Active state using Blazor's NavLink */
.shell-nav-item.active[b-x37lf8e5rk],
[b-x37lf8e5rk] .shell-nav-item.active {
    background: rgba(59, 130, 246, 0.2);
    color: white;
    font-weight: var(--font-weight-medium);
    border-left: 3px solid #3b82f6;
    padding-left: calc(var(--space-3) - 3px);
}

/* Nav Footer */
.shell-nav-footer[b-x37lf8e5rk] {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Nav Scrollbar */
.shell-nav[b-x37lf8e5rk]::-webkit-scrollbar {
    width: 6px;
}

.shell-nav[b-x37lf8e5rk]::-webkit-scrollbar-track {
    background: transparent;
}

.shell-nav[b-x37lf8e5rk]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.shell-nav[b-x37lf8e5rk]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   MAIN COLUMN
   ======================================== */

.shell-main[b-x37lf8e5rk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-background);
}

/* ========================================
   TOP BAR
   ======================================== */

.shell-topbar[b-x37lf8e5rk] {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 0 var(--content-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.shell-topbar-left[b-x37lf8e5rk] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.shell-logo[b-x37lf8e5rk] {
    height: 32px;
    width: auto;
}

.shell-firm-name[b-x37lf8e5rk] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.shell-title[b-x37lf8e5rk] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.shell-topbar-center[b-x37lf8e5rk] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 480px;
}

.shell-topbar-right[b-x37lf8e5rk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Search Box */
.shell-search[b-x37lf8e5rk] {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.shell-search input[b-x37lf8e5rk] {
    width: 100%;
    padding: var(--space-2) var(--space-4) var(--space-2) 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: all var(--transition-normal);
}

.shell-search input:focus[b-x37lf8e5rk] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    background: var(--color-surface);
}

.shell-search input[b-x37lf8e5rk]::placeholder {
    color: var(--color-text-tertiary);
}

.shell-search > i[b-x37lf8e5rk] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    pointer-events: none;
}

.shell-search-clear[b-x37lf8e5rk] {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    transition: all var(--transition-fast);
}

.shell-search-clear:hover[b-x37lf8e5rk] {
    background: var(--color-text-tertiary);
    color: white;
}

/* Top Bar Buttons */
.shell-topbar-btn[b-x37lf8e5rk] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    transition: all var(--transition-normal);
}

.shell-topbar-btn:hover[b-x37lf8e5rk] {
    background: var(--color-background);
    color: var(--color-text);
}

.shell-notification-badge[b-x37lf8e5rk] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-error);
    color: white;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   USER MENU DROPDOWN
   ======================================== */

.shell-user-menu[b-x37lf8e5rk] {
    position: relative;
}

.shell-user-btn[b-x37lf8e5rk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.shell-user-btn:hover[b-x37lf8e5rk] {
    background: var(--color-background);
}

.shell-user-avatar[b-x37lf8e5rk] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: white;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
}

/* Avatar color variants for topbar */
.shell-user-avatar.avatar-adviser[b-x37lf8e5rk] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.shell-user-avatar.avatar-client[b-x37lf8e5rk] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.shell-user-avatar.avatar-admin[b-x37lf8e5rk] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.shell-user-avatar img[b-x37lf8e5rk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.shell-user-chevron[b-x37lf8e5rk] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    transition: transform var(--transition-fast);
}

.shell-dropdown-overlay[b-x37lf8e5rk] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-dropdown) - 1);
}

.shell-user-dropdown[b-x37lf8e5rk] {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.shell-dropdown-header[b-x37lf8e5rk] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border-light);
}

.shell-dropdown-name[b-x37lf8e5rk] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.shell-dropdown-role[b-x37lf8e5rk] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.shell-dropdown-divider[b-x37lf8e5rk] {
    height: 1px;
    background: var(--color-border-light);
    margin: var(--space-1) 0;
}

.shell-dropdown-item[b-x37lf8e5rk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.shell-dropdown-item i[b-x37lf8e5rk] {
    width: 16px;
    text-align: center;
    color: var(--color-text-secondary);
}

.shell-dropdown-item:hover[b-x37lf8e5rk] {
    background: var(--color-background);
}

.shell-dropdown-item.shell-dropdown-logout[b-x37lf8e5rk] {
    color: var(--color-error);
}

.shell-dropdown-item.shell-dropdown-logout i[b-x37lf8e5rk] {
    color: var(--color-error);
}

/* AI Toggle Button */
.shell-ai-toggle[b-x37lf8e5rk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: none;
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.25);
    transition: all var(--transition-normal);
}

.shell-ai-toggle:hover[b-x37lf8e5rk] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35);
}

.shell-ai-toggle i[b-x37lf8e5rk] {
    font-size: var(--font-size-sm);
}

/* ========================================
   CONTENT AREA
   ======================================== */

.shell-content[b-x37lf8e5rk] {
    flex: 1;
    padding: var(--content-padding);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-background);
}

/* Content Scrollbar */
.shell-content[b-x37lf8e5rk]::-webkit-scrollbar {
    width: 8px;
}

.shell-content[b-x37lf8e5rk]::-webkit-scrollbar-track {
    background: transparent;
}

.shell-content[b-x37lf8e5rk]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 4px;
}

.shell-content[b-x37lf8e5rk]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

/* Firefox scrollbar */
.shell-content[b-x37lf8e5rk] {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

/* ========================================
   AI PANEL COLUMN
   ======================================== */

.shell-ai[b-x37lf8e5rk] {
    background: #020617;
    border-left: 1px solid var(--color-border);
    overflow: hidden;
}

.shell-ai > *[b-x37lf8e5rk] {
    height: 100%;
}

/* When AI is closed, hide the panel completely */
.app-shell:not(.ai-open) .shell-ai[b-x37lf8e5rk] {
    display: none;
}

/* ========================================
   THEME VARIANTS (Firm-Level Branding)
   ======================================== */

/* When --nav-background is set by theme, use it */
.app-shell.dark-nav .shell-nav[b-x37lf8e5rk] {
    background: var(--nav-background, linear-gradient(180deg, var(--color-primary) 0%, #0f172a 100%));
}

/* Active nav item uses primary color from theme */
.app-shell.dark-nav .shell-nav-item.active[b-x37lf8e5rk],
.app-shell.dark-nav[b-x37lf8e5rk]  .shell-nav-item.active {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--color-primary-hover, #3b82f6);
}

/* Dark top bar variant */
.app-shell.dark-topbar .shell-topbar[b-x37lf8e5rk] {
    background: var(--topbar-background, var(--color-primary));
    color: var(--topbar-text, var(--color-text-inverse));
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.app-shell.dark-topbar .shell-title[b-x37lf8e5rk] {
    color: var(--topbar-text, var(--color-text-inverse));
}

.app-shell.dark-topbar .shell-firm-name[b-x37lf8e5rk] {
    color: white;
}

.app-shell.dark-topbar .shell-topbar-btn[b-x37lf8e5rk] {
    color: rgba(255, 255, 255, 0.7);
}

.app-shell.dark-topbar .shell-topbar-btn:hover[b-x37lf8e5rk] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ========================================
   ROLE-SPECIFIC STYLES
   ======================================== */

/* Admin role gets a warmer sidebar gradient */
.app-shell.role-admin .shell-nav[b-x37lf8e5rk] {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

/* Client role gets a friendly green accent */
.app-shell.role-client .shell-nav-item.active[b-x37lf8e5rk],
.app-shell.role-client[b-x37lf8e5rk]  .shell-nav-item.active {
    background: rgba(34, 197, 94, 0.2);
    border-left-color: #22c55e;
}

/* ========================================
   RESPONSIVE - Tablet
   ======================================== */

@media (max-width: 1200px) {
    .app-shell[b-x37lf8e5rk] {
        grid-template-columns: var(--nav-width) minmax(0, 1fr);
    }

    .app-shell.ai-open[b-x37lf8e5rk] {
        grid-template-columns: var(--nav-width) minmax(0, 1fr);
    }

    /* AI panel becomes fixed overlay on tablet */
    .shell-ai[b-x37lf8e5rk] {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 90vw);
        z-index: var(--z-modal);
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    }

    .app-shell:not(.ai-open) .shell-ai[b-x37lf8e5rk] {
        display: none;
    }

    /* Shrink search on tablet */
    .shell-topbar-center[b-x37lf8e5rk] {
        max-width: 280px;
    }
}

/* ========================================
   RESPONSIVE - Mobile
   ======================================== */

@media (max-width: 768px) {
    .app-shell[b-x37lf8e5rk] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Hide nav on mobile - would need hamburger menu */
    .shell-nav[b-x37lf8e5rk] {
        display: none;
    }

    /* Full width content */
    .shell-content[b-x37lf8e5rk] {
        padding: var(--space-4);
    }

    /* Hide search on mobile */
    .shell-topbar-center[b-x37lf8e5rk] {
        display: none;
    }

    /* Smaller topbar */
    .shell-topbar[b-x37lf8e5rk] {
        padding: 0 var(--space-4);
    }

    /* Hide Charlie label on mobile */
    .shell-ai-toggle span[b-x37lf8e5rk] {
        display: none;
    }

    .shell-ai-toggle[b-x37lf8e5rk] {
        padding: var(--space-2);
        width: 40px;
        height: 40px;
        justify-content: center;
    }
}
/* /Components/Pages/Client/EstatePlanning.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   ESTATE PLANNING PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════════
   Used by: EstatePlanning.razor
   Tabs: Overview (dashboard), Gifts (7-year tracking), Wills & POAs, Trusts

   SESSION CONTEXT (January 2026):
   This was ABSENT from WP1. Estate planning for HNW clients is critical.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ===== OVERVIEW DASHBOARD ===== */
.estate-dashboard[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 28px;
    overflow-y: auto;
    background: #f1f5f9;
}

/* Top row: Key metrics */
.estate-metrics-row[b-9uch5uqeg2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.estate-metric-card[b-9uch5uqeg2] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}

.estate-metric-card.highlight[b-9uch5uqeg2] {
    border-left: 4px solid #f59e0b;
}

.estate-metric-card.highlight-danger[b-9uch5uqeg2] {
    border-left: 4px solid #ef4444;
}

.metric-icon[b-9uch5uqeg2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.metric-icon.blue[b-9uch5uqeg2] {
    background: #dbeafe;
    color: #2563eb;
}

.metric-icon.green[b-9uch5uqeg2] {
    background: #dcfce7;
    color: #16a34a;
}

.metric-icon.amber[b-9uch5uqeg2] {
    background: #fef3c7;
    color: #d97706;
}

.metric-icon.red[b-9uch5uqeg2] {
    background: #fee2e2;
    color: #dc2626;
}

.metric-content[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.metric-label[b-9uch5uqeg2] {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.metric-value[b-9uch5uqeg2] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.metric-value.danger[b-9uch5uqeg2] {
    color: #dc2626;
}

.metric-hint[b-9uch5uqeg2] {
    font-size: 12px;
    color: #94a3b8;
}

.metric-action[b-9uch5uqeg2] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.metric-action:hover[b-9uch5uqeg2] {
    background: #e2e8f0;
    color: #1e293b;
}

/* Status cards row */
.estate-status-row[b-9uch5uqeg2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.estate-status-card[b-9uch5uqeg2] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-header[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-header i[b-9uch5uqeg2] {
    font-size: 18px;
    color: #64748b;
}

.status-header h3[b-9uch5uqeg2] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    flex: 1;
}

.status-badge[b-9uch5uqeg2] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.green[b-9uch5uqeg2] {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.amber[b-9uch5uqeg2] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.red[b-9uch5uqeg2] {
    background: #fee2e2;
    color: #dc2626;
}

.status-content[b-9uch5uqeg2] {
    flex: 1;
}

.status-detail[b-9uch5uqeg2] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.status-detail:last-child[b-9uch5uqeg2] {
    border-bottom: none;
}

.detail-label[b-9uch5uqeg2] {
    font-size: 13px;
    color: #64748b;
}

.detail-value[b-9uch5uqeg2] {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}

.status-empty[b-9uch5uqeg2] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    padding: 8px 0;
}

.status-action[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: #f8fafc;
    border-radius: 8px;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.status-action:hover[b-9uch5uqeg2] {
    background: #f1f5f9;
}

.status-action i[b-9uch5uqeg2] {
    font-size: 12px;
}

/* Insights card */
.estate-insights-card[b-9uch5uqeg2] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.insights-header[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.insights-header i[b-9uch5uqeg2] {
    color: #f59e0b;
    font-size: 18px;
}

.insights-header h3[b-9uch5uqeg2] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.insight-list[b-9uch5uqeg2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insight-item[b-9uch5uqeg2] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
}

.insight-item i[b-9uch5uqeg2] {
    margin-top: 2px;
    flex-shrink: 0;
}

.insight-item.positive i[b-9uch5uqeg2] {
    color: #16a34a;
}

.insight-item.warning i[b-9uch5uqeg2] {
    color: #f59e0b;
}

.insight-item.danger i[b-9uch5uqeg2] {
    color: #dc2626;
}

.insight-item.info i[b-9uch5uqeg2] {
    color: #3b82f6;
}

/* ===== GIFTS TAB ===== */
.gifts-container[b-9uch5uqeg2] {
    padding: 24px 28px;
    overflow-y: auto;
    background: #f1f5f9;
    height: 100%;
}

.gifts-summary-bar[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 24px;
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.summary-stat[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-stat .stat-value[b-9uch5uqeg2] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.summary-stat .stat-label[b-9uch5uqeg2] {
    font-size: 12px;
    color: #64748b;
}

.summary-stat.highlight .stat-value[b-9uch5uqeg2] {
    color: #dc2626;
}

.gifts-summary-bar .btn-primary[b-9uch5uqeg2] {
    margin-left: auto;
}

/* Gift cards */
.gifts-list[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gift-card[b-9uch5uqeg2] {
    display: grid;
    grid-template-columns: 6px 1fr auto 140px auto;
    align-items: center;
    gap: 20px;
    background: white;
    border-radius: 12px;
    padding: 16px 20px 16px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.gift-status-indicator[b-9uch5uqeg2] {
    width: 6px;
    height: 100%;
    border-radius: 12px 0 0 12px;
    min-height: 80px;
}

.gift-card.red .gift-status-indicator[b-9uch5uqeg2] {
    background: #ef4444;
}

.gift-card.amber .gift-status-indicator[b-9uch5uqeg2] {
    background: #f59e0b;
}

.gift-card.green .gift-status-indicator[b-9uch5uqeg2] {
    background: #22c55e;
}

.gift-main[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gift-header[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gift-type[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.gift-type i[b-9uch5uqeg2] {
    color: #64748b;
}

.gift-date[b-9uch5uqeg2] {
    font-size: 13px;
    color: #64748b;
}

.gift-recipient[b-9uch5uqeg2] {
    font-size: 14px;
    color: #475569;
}

.gift-recipient strong[b-9uch5uqeg2] {
    color: #1e293b;
}

.gift-description[b-9uch5uqeg2] {
    font-size: 13px;
    color: #94a3b8;
}

.gift-values[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.gift-value-row[b-9uch5uqeg2] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.gift-value-row .value-label[b-9uch5uqeg2] {
    font-size: 12px;
    color: #94a3b8;
}

.gift-value-row .value-amount[b-9uch5uqeg2] {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.gift-value-row.exemptions .value-amount[b-9uch5uqeg2] {
    color: #16a34a;
}

.gift-value-row.chargeable .value-amount[b-9uch5uqeg2] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.gift-countdown[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    min-width: 100px;
}

.countdown-years[b-9uch5uqeg2] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.countdown-label[b-9uch5uqeg2] {
    font-size: 11px;
    color: #64748b;
    text-align: center;
}

.taper-relief[b-9uch5uqeg2] {
    font-size: 11px;
    color: #16a34a;
    font-weight: 500;
}

.exempt-badge[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-size: 14px;
    font-weight: 600;
}

.gift-actions[b-9uch5uqeg2] {
    display: flex;
    gap: 8px;
}

.icon-btn[b-9uch5uqeg2] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.icon-btn:hover[b-9uch5uqeg2] {
    background: #f1f5f9;
    color: #1e293b;
}

/* ===== WILLS & POAs TAB ===== */
.wills-container[b-9uch5uqeg2] {
    padding: 24px 28px;
    overflow-y: auto;
    background: #f1f5f9;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.estate-section[b-9uch5uqeg2] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.section-header[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-title-row[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title-row i[b-9uch5uqeg2] {
    font-size: 20px;
    color: #64748b;
}

.section-title-row h2[b-9uch5uqeg2] {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.will-details[b-9uch5uqeg2],
.lpa-details[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.estate-detail-grid[b-9uch5uqeg2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item .detail-label[b-9uch5uqeg2] {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item .detail-value[b-9uch5uqeg2] {
    font-size: 15px;
    color: #1e293b;
    font-weight: 500;
}

.people-section[b-9uch5uqeg2] {
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.people-section h3[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 12px 0;
}

.people-section h3 i[b-9uch5uqeg2] {
    color: #94a3b8;
}

.people-list[b-9uch5uqeg2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.people-list .person-card[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
}

.people-list .person-avatar[b-9uch5uqeg2] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.people-list .person-info[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.people-list .person-name[b-9uch5uqeg2] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.people-list .person-role[b-9uch5uqeg2] {
    font-size: 12px;
    color: #64748b;
}

.empty-hint[b-9uch5uqeg2] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.empty-hint.warning[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
    background: #fef3c7;
    padding: 12px 16px;
    border-radius: 8px;
}

/* Compact empty state for sections */
.empty-state.compact[b-9uch5uqeg2] {
    padding: 24px;
    text-align: center;
}

.empty-state.compact i[b-9uch5uqeg2] {
    font-size: 32px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-state.compact p[b-9uch5uqeg2] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px 0;
}

/* ===== TRUSTS TAB ===== */
.trusts-container[b-9uch5uqeg2] {
    padding: 24px 28px;
    overflow-y: auto;
    background: #f1f5f9;
    height: 100%;
}

.trusts-header[b-9uch5uqeg2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.trust-filters[b-9uch5uqeg2] {
    display: flex;
    gap: 8px;
}

.trust-filters .filter-btn[b-9uch5uqeg2] {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.trust-filters .filter-btn:hover[b-9uch5uqeg2] {
    border-color: #cbd5e1;
    color: #1e293b;
}

.trust-filters .filter-btn.active[b-9uch5uqeg2] {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: white;
}

.trusts-list[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trust-card[b-9uch5uqeg2] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 20px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.trust-icon[b-9uch5uqeg2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 20px;
}

.trust-info[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trust-name[b-9uch5uqeg2] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.trust-type[b-9uch5uqeg2] {
    font-size: 13px;
    color: #64748b;
}

.trust-role[b-9uch5uqeg2] {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 11px;
    color: #475569;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trust-value[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.trust-value .value-amount[b-9uch5uqeg2] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.trust-value .value-label[b-9uch5uqeg2] {
    font-size: 11px;
    color: #94a3b8;
}

.trust-anniversary[b-9uch5uqeg2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 16px;
    background: #fef3c7;
    border-radius: 8px;
}

.anniversary-date[b-9uch5uqeg2] {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

.anniversary-label[b-9uch5uqeg2] {
    font-size: 11px;
    color: #b45309;
}

/* ===== ESTATE RESPONSIVE ===== */
@media (max-width: 1200px) {
    .gift-card[b-9uch5uqeg2] {
        grid-template-columns: 6px 1fr auto auto;
    }

    .gift-countdown[b-9uch5uqeg2] {
        min-width: 80px;
    }
}

@media (max-width: 900px) {
    .estate-metrics-row[b-9uch5uqeg2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .estate-status-row[b-9uch5uqeg2] {
        grid-template-columns: 1fr;
    }

    .gift-card[b-9uch5uqeg2] {
        grid-template-columns: 6px 1fr;
        grid-template-rows: auto auto auto;
    }

    .gift-values[b-9uch5uqeg2],
    .gift-countdown[b-9uch5uqeg2],
    .gift-actions[b-9uch5uqeg2] {
        grid-column: 2;
        justify-self: start;
    }

    .gift-values[b-9uch5uqeg2] {
        flex-direction: row;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .estate-dashboard[b-9uch5uqeg2],
    .gifts-container[b-9uch5uqeg2],
    .wills-container[b-9uch5uqeg2],
    .trusts-container[b-9uch5uqeg2] {
        padding: 16px;
    }

    .estate-metrics-row[b-9uch5uqeg2] {
        grid-template-columns: 1fr;
    }

    .gifts-summary-bar[b-9uch5uqeg2] {
        flex-wrap: wrap;
    }

    .trust-card[b-9uch5uqeg2] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .trust-icon[b-9uch5uqeg2] {
        display: none;
    }
}
/* /Components/Pages/Client/PropertyView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   CAMERAS TAB (PropertyView)
   CCTV-style dashboard — all cameras stream simultaneously.
   Click any feed to expand to full-screen lightbox.
   Extracted from pages.css → scoped to PropertyView.razor
   ═══════════════════════════════════════════════════════════════════════════════ */

.cameras-tab[b-afg05vtkm2] {
    padding: 24px;
}

/* ─── Toolbar ───────────────────────────────────────────────────────────── */

.cameras-toolbar[b-afg05vtkm2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cameras-toolbar-left[b-afg05vtkm2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cameras-toolbar-right[b-afg05vtkm2] {
    display: flex;
    gap: 8px;
}

.cameras-count[b-afg05vtkm2] {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* ─── CCTV Grid ─────────────────────────────────────────────────────────── */

.cctv-grid[b-afg05vtkm2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.cctv-card[b-afg05vtkm2] {
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cctv-card:hover[b-afg05vtkm2] {
    border-color: #475569;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.cctv-card-live[b-afg05vtkm2] {
    border-color: #1e3a5f;
}

.cctv-card-live:hover[b-afg05vtkm2] {
    border-color: #38bdf8;
}

/* Video area */
.cctv-video-area[b-afg05vtkm2] {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.cctv-video[b-afg05vtkm2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.cctv-video-visible[b-afg05vtkm2] {
    display: block;
}

/* Placeholder when not streaming */
.cctv-placeholder[b-afg05vtkm2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.cctv-placeholder i[b-afg05vtkm2] {
    font-size: 36px;
    color: #334155;
}

.cctv-placeholder .fa-spinner[b-afg05vtkm2] {
    font-size: 24px;
    color: #38bdf8;
}

/* Name overlay at bottom of video */
.cctv-overlay[b-afg05vtkm2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cctv-overlay-left[b-afg05vtkm2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cctv-name[b-afg05vtkm2] {
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.cctv-live-dot[b-afg05vtkm2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: cameraPulse-b-afg05vtkm2 1.5s infinite;
    flex-shrink: 0;
}

/* Card mute button — appears on hover in bottom-right of overlay */
.cctv-mute-btn[b-afg05vtkm2] {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.2s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.cctv-card:hover .cctv-mute-btn[b-afg05vtkm2] {
    opacity: 1;
}

.cctv-mute-btn:hover[b-afg05vtkm2] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* When unmuted — always visible, even without hover */
.cctv-mute-btn-active[b-afg05vtkm2] {
    opacity: 1;
    color: #38bdf8;
}

.cctv-mute-btn-active:hover[b-afg05vtkm2] {
    color: #7dd3fc;
}

/* Hover overlay — fullscreen icon centered on hover */
.cctv-hover-overlay[b-afg05vtkm2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.cctv-card:hover .cctv-hover-overlay[b-afg05vtkm2] {
    opacity: 1;
}

.cctv-hover-overlay i[b-afg05vtkm2] {
    color: white;
    font-size: 32px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: transform 0.15s;
}

.cctv-card:hover .cctv-hover-overlay i[b-afg05vtkm2] {
    transform: scale(1.1);
}

@keyframes cameraPulse-b-afg05vtkm2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Full-Screen Lightbox ──────────────────────────────────────────────── */

.camera-lightbox[b-afg05vtkm2] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    animation: lightboxFadeIn-b-afg05vtkm2 0.2s ease;
}

@keyframes lightboxFadeIn-b-afg05vtkm2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.camera-lightbox-content[b-afg05vtkm2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
}

.camera-lightbox-header[b-afg05vtkm2] {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.camera-lightbox-title[b-afg05vtkm2] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.camera-lightbox-actions[b-afg05vtkm2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.camera-lightbox-btn[b-afg05vtkm2] {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
}

.camera-lightbox-btn:hover[b-afg05vtkm2] {
    background: rgba(255,255,255,0.2);
}

.camera-lightbox-btn .fa-volume-up[b-afg05vtkm2] {
    color: #38bdf8;
}

.camera-lightbox-video[b-afg05vtkm2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px 24px;
    min-height: 0;
}

.camera-lightbox-video video[b-afg05vtkm2] {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 100px);
    object-fit: contain;
    border-radius: 8px;
}

/* ─── Live Badge (reusable) ─────────────────────────────────────────────── */

.cameras-live-badge[b-afg05vtkm2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: #dc2626;
    color: white;
    flex-shrink: 0;
}

.cameras-live-badge .cameras-live-dot[b-afg05vtkm2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    animation: cameraPulse-b-afg05vtkm2 1.5s infinite;
}

/* ─── Assignment Panel ──────────────────────────────────────────────────── */

.cameras-assign-panel[b-afg05vtkm2] {
    margin-bottom: 24px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.cameras-assign-header[b-afg05vtkm2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cameras-assign-header h4[b-afg05vtkm2] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.cameras-assign-header .btn-icon[b-afg05vtkm2] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

.cameras-assign-section[b-afg05vtkm2] {
    margin-bottom: 16px;
}

.cameras-assign-section:last-child[b-afg05vtkm2] {
    margin-bottom: 0;
}

.cameras-assign-section h5[b-afg05vtkm2] {
    margin: 0 0 10px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
}

.cameras-assign-row[b-afg05vtkm2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
}

.cameras-assign-row:last-child[b-afg05vtkm2] {
    margin-bottom: 0;
}

.cameras-assign-info[b-afg05vtkm2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.cameras-assign-info i[b-afg05vtkm2] {
    color: #1e3a5f;
    font-size: 16px;
}

.cameras-assign-badge[b-afg05vtkm2] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: #f0fdf4;
    color: #166534;
}

.cameras-assign-empty[b-afg05vtkm2] {
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
    padding: 12px;
}

/* ─── Button variants ───────────────────────────────────────────────────── */

.btn-sm[b-afg05vtkm2] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.btn-secondary[b-afg05vtkm2] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-afg05vtkm2] {
    background: #e2e8f0;
}

.btn-danger[b-afg05vtkm2] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.btn-danger:hover[b-afg05vtkm2] {
    background: #fee2e2;
}
/* /Components/Pages/Firm/Calendar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Calendar.razor — scoped styles
   Extracted from firm.css (CALENDAR PAGE section)
   ═══════════════════════════════════════════════════════════════════════════ */

.calendar-page[b-zhbavhqvtf] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

/* Loading state */
.calendar-loading[b-zhbavhqvtf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    font-size: 14px;
    color: #64748b;
}

.calendar-loading i[b-zhbavhqvtf] {
    font-size: 18px;
    color: #0078d4;
}

/* No Graph configured state */
.calendar-no-graph[b-zhbavhqvtf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
}

.calendar-no-graph-icon[b-zhbavhqvtf] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.calendar-no-graph-icon i[b-zhbavhqvtf] {
    font-size: 28px;
    color: #94a3b8;
}

.calendar-no-graph h4[b-zhbavhqvtf] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
}

.calendar-no-graph p[b-zhbavhqvtf] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* ── SfSchedule theme overrides ──
   ::deep required because SyncFusion generates its own DOM */

/* Only kill the top border so schedule flows from breadcrumb. Keep sides + bottom. */
[b-zhbavhqvtf] .e-schedule {
    border-top: none !important;
}

/* Light toolbar background */
[b-zhbavhqvtf] .e-schedule .e-schedule-toolbar .e-toolbar-items {
    background: #f8fafc;
}

/* Header cells (day names) */
[b-zhbavhqvtf] .e-schedule .e-header-cells {
    font-weight: 600;
    font-size: 12px;
    color: #475569;
}

/* Current day highlight */
[b-zhbavhqvtf] .e-schedule .e-header-cells.e-current-day {
    color: #0078d4;
}

/* ── Soft pastel appointment palette (matches Outlook) ── */

/* Base appointment: pastel background, dark text, left accent border */
[b-zhbavhqvtf] .e-schedule .e-appointment {
    border: none;
    border-radius: 4px;
    border-left: 3px solid transparent;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Default: Teams meeting — soft blue */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-teams {
    background: #dbeafe !important;
    border-left-color: #3b82f6;
    color: #1e3a5f !important;
}

/* Default: non-Teams — soft grey-blue */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-default {
    background: #e2e8f0 !important;
    border-left-color: #64748b;
    color: #334155 !important;
}

/* Blue category */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-blue {
    background: #dbeafe !important;
    border-left-color: #3b82f6;
    color: #1e3a5f !important;
}

/* Green category */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-green {
    background: #dcfce7 !important;
    border-left-color: #22c55e;
    color: #14532d !important;
}

/* Purple category */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-purple {
    background: #ede9fe !important;
    border-left-color: #8b5cf6;
    color: #3b0764 !important;
}

/* Red category */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-red {
    background: #fee2e2 !important;
    border-left-color: #ef4444;
    color: #7f1d1d !important;
}

/* Orange category */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-orange {
    background: #ffedd5 !important;
    border-left-color: #f97316;
    color: #7c2d12 !important;
}

/* Yellow category */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-yellow {
    background: #fef9c3 !important;
    border-left-color: #eab308;
    color: #713f12 !important;
}

/* Client-linked event — soft teal */
[b-zhbavhqvtf] .e-schedule .e-appointment.cat-linked {
    background: #ccfbf1 !important;
    border-left-color: #0d9488;
    color: #134e4a !important;
}

/* Work hours cell background */
[b-zhbavhqvtf] .e-schedule .e-work-hours {
    background: #fafbfc;
}

/* Non-work hours */
[b-zhbavhqvtf] .e-schedule .e-work-cells:not(.e-work-hours) {
    background: #f1f5f9;
}

/* Time indicator (red line) */
[b-zhbavhqvtf] .e-schedule .e-current-timeline {
    border-top: 2px solid #ef4444;
}

[b-zhbavhqvtf] .e-schedule .e-current-time {
    color: #ef4444;
    font-weight: 600;
}

/* ── Editor dialog overrides ── */

[b-zhbavhqvtf] .e-schedule .e-popup.e-popup-open.e-dialog {
    width: 780px !important;
    max-width: 90vw;
    border-radius: 12px;
    overflow: hidden;
}

[b-zhbavhqvtf] .e-schedule .e-dlg-header-content {
    background: #0f172a !important;
    padding: 10px 20px !important;
}

[b-zhbavhqvtf] .e-schedule .e-dlg-header,
[b-zhbavhqvtf] .e-schedule .e-dlg-header * {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

[b-zhbavhqvtf] .e-schedule .e-dlg-content {
    padding: 0 !important;
}

/* ── Calendar editor form ── */

.calendar-editor[b-zhbavhqvtf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px;
}

.calendar-editor-group[b-zhbavhqvtf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendar-editor-label[b-zhbavhqvtf] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.calendar-editor-row[b-zhbavhqvtf] {
    display: flex;
    gap: 12px;
}

.calendar-editor-half[b-zhbavhqvtf] {
    flex: 1;
    min-width: 0;
}

/* Category colour picker — row of swatches */
.calendar-category-picker[b-zhbavhqvtf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.calendar-cat-swatch[b-zhbavhqvtf] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.calendar-cat-swatch:hover[b-zhbavhqvtf] {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.calendar-cat-swatch.active[b-zhbavhqvtf] {
    border-color: #475569;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #94a3b8;
    transform: scale(1.1);
}

.calendar-cat-clear[b-zhbavhqvtf] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px dashed #cbd5e1;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 11px;
    padding: 0;
    transition: all 0.15s ease;
    margin-left: 4px;
}

.calendar-cat-clear:hover[b-zhbavhqvtf] {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

/* Teams meeting toggle */
.calendar-teams-toggle[b-zhbavhqvtf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.calendar-teams-label[b-zhbavhqvtf] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

.calendar-teams-join[b-zhbavhqvtf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #6264a7;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}

.calendar-teams-join:hover[b-zhbavhqvtf] {
    background: #4b4d8a;
    color: #fff;
    text-decoration: none;
}

/* ── Join Meeting button (sits in colour swatch row) ── */

.calendar-join-btn[b-zhbavhqvtf] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #5b5fc7;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.calendar-join-btn:hover[b-zhbavhqvtf] {
    background: #4b4d8a;
    color: #fff;
    text-decoration: none;
}

.calendar-join-btn i[b-zhbavhqvtf] {
    font-size: 12px;
}

/* ── Editor footer ── */

.calendar-editor-footer[b-zhbavhqvtf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: transparent;
}

.calendar-editor-footer-left[b-zhbavhqvtf],
.calendar-editor-footer-right[b-zhbavhqvtf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-btn[b-zhbavhqvtf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.calendar-btn-primary[b-zhbavhqvtf] {
    background: #0f172a;
    color: #fff;
}

.calendar-btn-primary:hover:not(:disabled)[b-zhbavhqvtf] {
    background: #1e293b;
}

.calendar-btn-secondary[b-zhbavhqvtf] {
    background: #e2e8f0;
    color: #475569;
}

.calendar-btn-secondary:hover:not(:disabled)[b-zhbavhqvtf] {
    background: #cbd5e1;
}

.calendar-btn-danger[b-zhbavhqvtf] {
    background: transparent;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.calendar-btn-danger:hover:not(:disabled)[b-zhbavhqvtf] {
    background: #fef2f2;
}

/* ── SfSchedule input overrides to match Perpetual style ── */

[b-zhbavhqvtf] .calendar-editor .e-input-group {
    border-radius: 6px;
}

[b-zhbavhqvtf] .calendar-editor .e-textbox,
[b-zhbavhqvtf] .calendar-editor .e-input {
    font-size: 13px;
}

/* RichTextEditor in editor */
[b-zhbavhqvtf] .calendar-editor .e-richtexteditor {
    border-radius: 6px;
    overflow: hidden;
}
/* /Components/Pages/Firm/Clients.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Clients.razor — scoped styles
   Extracted from firm.css (CLIENTS GRID section)
   ═══════════════════════════════════════════════════════════════════════════ */

.firm-clients-grid[b-b8u8szmcyv] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

@media (max-width: 1400px) {
    .firm-clients-grid[b-b8u8szmcyv] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .firm-clients-grid[b-b8u8szmcyv] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .firm-clients-grid[b-b8u8szmcyv] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .firm-clients-grid[b-b8u8szmcyv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .firm-page-header[b-b8u8szmcyv] {
        flex-direction: column;
        align-items: stretch;
    }

    .firm-page-actions[b-b8u8szmcyv] {
        flex-direction: column;
    }

    .firm-client-search input[b-b8u8szmcyv] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .firm-clients-grid[b-b8u8szmcyv] {
        grid-template-columns: 1fr;
    }
}

/* Client Card */
.firm-client-card[b-b8u8szmcyv] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow:
        0 4px 24px rgba(30, 58, 95, 0.06),
        0 1px 3px rgba(30, 58, 95, 0.04);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.firm-client-card:hover[b-b8u8szmcyv] {
    transform: translateY(-8px);
    box-shadow:
        0 24px 48px rgba(30, 58, 95, 0.15),
        0 12px 24px rgba(30, 58, 95, 0.08);
}

/* Client Avatar */
.firm-client-avatar[b-b8u8szmcyv] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    color: white;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.firm-client-avatar img[b-b8u8szmcyv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.firm-client-card:hover .firm-client-avatar[b-b8u8szmcyv] {
    transform: scale(1.12);
}

/* Avatar Colors */
.firm-client-avatar.blue[b-b8u8szmcyv] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}
.firm-client-card:hover .firm-client-avatar.blue[b-b8u8szmcyv] {
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.5);
}

.firm-client-avatar.green[b-b8u8szmcyv] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}
.firm-client-card:hover .firm-client-avatar.green[b-b8u8szmcyv] {
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5);
}

.firm-client-avatar.violet[b-b8u8szmcyv] {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}
.firm-client-card:hover .firm-client-avatar.violet[b-b8u8szmcyv] {
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.5);
}

.firm-client-avatar.amber[b-b8u8szmcyv] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}
.firm-client-card:hover .firm-client-avatar.amber[b-b8u8szmcyv] {
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.5);
}

.firm-client-avatar.rose[b-b8u8szmcyv] {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35);
}
.firm-client-card:hover .firm-client-avatar.rose[b-b8u8szmcyv] {
    box-shadow: 0 12px 32px rgba(225, 29, 72, 0.5);
}

.firm-client-avatar.cyan[b-b8u8szmcyv] {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
}
.firm-client-card:hover .firm-client-avatar.cyan[b-b8u8szmcyv] {
    box-shadow: 0 12px 32px rgba(6, 182, 212, 0.5);
}

/* Client Name */
.firm-client-name[b-b8u8szmcyv] {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Client Details */
.firm-client-detail[b-b8u8szmcyv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
}

.firm-client-partner[b-b8u8szmcyv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ec4899;
}

.firm-client-partner i[b-b8u8szmcyv] {
    font-size: 10px;
}

/* Client Actions */
.firm-client-actions[b-b8u8szmcyv] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

.firm-client-action[b-b8u8szmcyv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
}

.firm-client-action:hover[b-b8u8szmcyv] {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}
/* /Components/Pages/Firm/Providers.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Providers.razor — scoped styles
   Extracted from firm.css (PROVIDERS PAGE section)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page container */
.providers-page[b-jxc6tge8tg] {
    padding: 32px;
}

/* Filter Select */
.firm-filter-select[b-jxc6tge8tg] {
    padding: 10px 36px 10px 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    transition: all 0.2s ease;
}

.firm-filter-select:hover[b-jxc6tge8tg] {
    border-color: #cbd5e1;
}

.firm-filter-select:focus[b-jxc6tge8tg] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Providers Grid */
.firm-providers-grid[b-jxc6tge8tg] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

@media (max-width: 1600px) {
    .firm-providers-grid[b-jxc6tge8tg] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1400px) {
    .firm-providers-grid[b-jxc6tge8tg] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1100px) {
    .firm-providers-grid[b-jxc6tge8tg] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .firm-providers-grid[b-jxc6tge8tg] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .firm-providers-grid[b-jxc6tge8tg] {
        grid-template-columns: 1fr;
    }
}

/* Provider Card */
.firm-provider-card[b-jxc6tge8tg] {
    background: white;
    border-radius: 20px;
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}

.firm-provider-card:hover[b-jxc6tge8tg] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Provider Logo */
.firm-provider-logo[b-jxc6tge8tg] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease;
    overflow: hidden;
}

.firm-provider-logo img[b-jxc6tge8tg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.firm-provider-card:hover .firm-provider-logo[b-jxc6tge8tg] {
    transform: scale(1.08);
}

/* Logo Colors */
.firm-provider-logo.blue[b-jxc6tge8tg] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}
.firm-provider-card:hover .firm-provider-logo.blue[b-jxc6tge8tg] {
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.5);
}

.firm-provider-logo.green[b-jxc6tge8tg] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}
.firm-provider-card:hover .firm-provider-logo.green[b-jxc6tge8tg] {
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5);
}

.firm-provider-logo.violet[b-jxc6tge8tg] {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}
.firm-provider-card:hover .firm-provider-logo.violet[b-jxc6tge8tg] {
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.5);
}

.firm-provider-logo.amber[b-jxc6tge8tg] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}
.firm-provider-card:hover .firm-provider-logo.amber[b-jxc6tge8tg] {
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.5);
}

.firm-provider-logo.rose[b-jxc6tge8tg] {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35);
}
.firm-provider-card:hover .firm-provider-logo.rose[b-jxc6tge8tg] {
    box-shadow: 0 12px 32px rgba(225, 29, 72, 0.5);
}

.firm-provider-logo.cyan[b-jxc6tge8tg] {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
}
.firm-provider-card:hover .firm-provider-logo.cyan[b-jxc6tge8tg] {
    box-shadow: 0 12px 32px rgba(6, 182, 212, 0.5);
}

/* Provider Name */
.firm-provider-name[b-jxc6tge8tg] {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Provider Type Badge */
.firm-provider-type[b-jxc6tge8tg] {
    margin-bottom: 10px;
}

.firm-provider-type-badge[b-jxc6tge8tg] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.firm-provider-type-badge.blue[b-jxc6tge8tg] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.firm-provider-type-badge.green[b-jxc6tge8tg] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.firm-provider-type-badge.violet[b-jxc6tge8tg] {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.firm-provider-type-badge.amber[b-jxc6tge8tg] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.firm-provider-type-badge.rose[b-jxc6tge8tg] {
    background: rgba(225, 29, 72, 0.12);
    color: #be123c;
}

.firm-provider-type-badge.cyan[b-jxc6tge8tg] {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}

/* Provider Description */
.firm-provider-desc[b-jxc6tge8tg] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Pages/Firm/TeamsHub.razor.rz.scp.css */
/* =====================================================
   TEAMS HUB — In-canvas colleague messaging
   Extracted from firm.css → component-scoped
   ===================================================== */

/* ── Hub container ── */
.teams-hub[b-wafceau4ka] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0;
}

/* ── Search bar ── */
.teams-hub-search[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #e8ecf0;
    background: #fafbfc;
    flex-shrink: 0;
}

.teams-search-input-wrap[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    flex: 1;
    max-width: 320px;
}

.teams-search-input-wrap i[b-wafceau4ka] {
    color: #94a3b8;
    font-size: 13px;
}

.teams-search-input-wrap input[b-wafceau4ka] {
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
    background: transparent;
    color: #1e293b;
}

.teams-search-filters[b-wafceau4ka] {
    display: flex;
    gap: 4px;
}

.teams-filter-pill[b-wafceau4ka] {
    padding: 4px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.teams-filter-pill.active[b-wafceau4ka] {
    background: #6264a7;
    color: #fff;
    border-color: #6264a7;
}

.teams-filter-pill:hover:not(.active)[b-wafceau4ka] {
    border-color: #6264a7;
    color: #6264a7;
}

.teams-external-link[b-wafceau4ka] {
    margin-left: auto;
    font-size: 12px;
    color: #6264a7;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.teams-external-link:hover[b-wafceau4ka] {
    text-decoration: underline;
}

.teams-external-link i[b-wafceau4ka] {
    font-size: 10px;
    margin-left: 3px;
}

/* ── Two-column body ── */
.teams-hub-body[b-wafceau4ka] {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ── Left: Chat list ── */
.teams-chat-list[b-wafceau4ka] {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid #e8ecf0;
    overflow-y: auto;
    background: #fafbfc;
    scrollbar-width: thin;
}

.teams-list-loading[b-wafceau4ka],
.teams-list-empty[b-wafceau4ka] {
    padding: 32px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

.teams-section-header[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    cursor: pointer;
    user-select: none;
}

.teams-section-header i[b-wafceau4ka] {
    font-size: 10px;
    transition: transform 0.2s;
}

.teams-section-header i.collapsed[b-wafceau4ka] {
    transform: rotate(-90deg);
}

/* Contact row */
.teams-contact[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-left: 3px solid transparent;
}

.teams-contact:hover[b-wafceau4ka] {
    background: #f1f3f5;
}

.teams-contact.active[b-wafceau4ka] {
    background: rgba(98, 100, 167, 0.08);
    border-left-color: #6264a7;
}

.teams-contact-presence[b-wafceau4ka] {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.teams-presence[b-wafceau4ka] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
}

.teams-presence.online[b-wafceau4ka] {
    background: #10b981;
}

.teams-presence.busy[b-wafceau4ka] {
    background: #ef4444;
}

.teams-presence.away[b-wafceau4ka] {
    background: #f59e0b;
}

.teams-contact-info[b-wafceau4ka] {
    flex: 1;
    min-width: 0;
}

.teams-contact-name[b-wafceau4ka] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teams-contact-preview[b-wafceau4ka] {
    font-size: 12px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.teams-contact-time[b-wafceau4ka] {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Right: Conversation ── */
.teams-conversation[b-wafceau4ka] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

/* Empty state */
.teams-empty-state[b-wafceau4ka] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    gap: 8px;
}

.teams-empty-state i[b-wafceau4ka] {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.4;
}

.teams-empty-state h3[b-wafceau4ka] {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.teams-empty-state p[b-wafceau4ka] {
    font-size: 13px;
    margin: 0;
}

/* Conversation header */
.teams-conv-header[b-wafceau4ka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e8ecf0;
    flex-shrink: 0;
    gap: 12px;
}

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

.teams-conv-title[b-wafceau4ka] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teams-conv-participants[b-wafceau4ka] {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teams-conv-header-actions[b-wafceau4ka] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.teams-header-action[b-wafceau4ka] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}

.teams-header-action:hover:not(:disabled)[b-wafceau4ka] {
    background: #f1f3f5;
    color: #6264a7;
}

.teams-header-action:disabled[b-wafceau4ka] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Messages area ── */
.teams-conv-messages[b-wafceau4ka] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
}

.teams-messages-loading[b-wafceau4ka],
.teams-messages-empty[b-wafceau4ka] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #94a3b8;
    font-size: 14px;
    gap: 8px;
}

/* Pending approval notice */
.teams-pending-notice[b-wafceau4ka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    margin: auto;
    max-width: 400px;
}

.teams-pending-icon[b-wafceau4ka] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.teams-pending-icon i[b-wafceau4ka] {
    font-size: 24px;
    color: #6264a7;
}

.teams-pending-notice h4[b-wafceau4ka] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
}

.teams-pending-notice p[b-wafceau4ka] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.teams-pending-sub[b-wafceau4ka] {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
}

/* Date divider */
.teams-date-divider[b-wafceau4ka] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}

.teams-date-divider span[b-wafceau4ka] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    background: #fff;
    padding: 0 12px;
}

.teams-date-divider[b-wafceau4ka]::before,
.teams-date-divider[b-wafceau4ka]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* Message rows */
.teams-msg[b-wafceau4ka] {
    display: flex;
    gap: 10px;
    max-width: 70%;
    margin-bottom: 4px;
}

.teams-msg.own[b-wafceau4ka] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.teams-msg.other[b-wafceau4ka] {
    align-self: flex-start;
}

/* Avatar circles */
.teams-msg-avatar[b-wafceau4ka] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: white;
    background: linear-gradient(135deg, #6264a7 0%, #4f46e5 100%);
    overflow: hidden;
}

.teams-msg-avatar img[b-wafceau4ka] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Message content wrapper */
.teams-msg-content[b-wafceau4ka] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Message bubbles */
.teams-msg-bubble[b-wafceau4ka] {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    background: #f1f3f5;
    color: #1e293b;
}

.teams-msg-bubble.own[b-wafceau4ka] {
    background: linear-gradient(135deg, #6264a7 0%, #4f46e5 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.teams-msg.other .teams-msg-bubble[b-wafceau4ka] {
    border-bottom-left-radius: 4px;
}

.teams-msg-sender[b-wafceau4ka] {
    font-size: 12px;
    font-weight: 600;
    color: #6264a7;
    margin-bottom: 3px;
}

.teams-msg-time[b-wafceau4ka] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.teams-msg.own .teams-msg-time[b-wafceau4ka] {
    text-align: right;
}

/* ── Compose area ── */
.teams-conv-compose[b-wafceau4ka] {
    border-top: 1px solid #e8ecf0;
    padding: 12px 20px;
    background: #fafbfc;
    flex-shrink: 0;
}

.teams-compose-error[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 8px;
}

.teams-compose-error button[b-wafceau4ka] {
    margin-left: auto;
    border: none;
    background: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 12px;
}

.teams-compose-row[b-wafceau4ka] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.teams-compose-mic[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.teams-compose-input[b-wafceau4ka] {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    background: white;
    transition: border-color 0.15s, height 0.1s;
    box-sizing: border-box;
    min-height: 40px;
    max-height: 160px;
    line-height: 1.4;
    overflow-y: auto;
}

.teams-compose-input:focus[b-wafceau4ka] {
    border-color: #6264a7;
    box-shadow: 0 0 0 3px rgba(98, 100, 167, 0.1);
}

/* Mic button */
.teams-mic-btn[b-wafceau4ka] {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
}

.teams-mic-btn:hover[b-wafceau4ka] {
    background: #e2e8f0;
    color: #6264a7;
}

.teams-mic-btn.recording[b-wafceau4ka] {
    background: #ef4444;
    color: white;
    animation: teams-pulse-mic-b-wafceau4ka 1.5s infinite;
}

@keyframes teams-pulse-mic-b-wafceau4ka {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Done button (during dictation) */
.teams-done-btn[b-wafceau4ka] {
    width: 38px;
    height: 38px;
    border: none;
    background: #10b981;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}

.teams-done-btn:hover[b-wafceau4ka] {
    background: #059669;
}

/* Polish indicator */
.teams-polish-indicator[b-wafceau4ka] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    font-size: 13px;
    color: #6264a7;
    font-weight: 500;
}

/* Send button */
.teams-send-btn[b-wafceau4ka] {
    width: 38px;
    height: 38px;
    background: #6264a7;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.teams-send-btn:hover:not(:disabled)[b-wafceau4ka] {
    background: #4f46e5;
}

.teams-send-btn:disabled[b-wafceau4ka] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Pages/Help/HelpPage.razor.rz.scp.css */
/* =====================================================
   HELP PAGE
   Used by: HelpPage.razor (/help)
   The 2030 Operations Manual - reader view
   ===================================================== */

.help-page[b-s3lycob72b] {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100%;
    overflow: hidden;
}

/* ===== HELP SIDEBAR ===== */

.help-sidebar[b-s3lycob72b] {
    border-right: 1px solid var(--color-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface, #fff);
}

.help-sidebar-header[b-s3lycob72b] {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.help-sidebar-header h2[b-s3lycob72b] {
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #1e293b);
    margin: 0 0 12px;
}

.help-search[b-s3lycob72b] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px 12px;
}

.help-search i[b-s3lycob72b] {
    position: absolute;
    left: 24px;
    color: var(--color-text-tertiary, #94a3b8);
    font-size: 12px;
    pointer-events: none;
}

.help-search input[b-s3lycob72b] {
    width: 100%;
    padding: 8px 8px 8px 30px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: var(--font-size-sm, 13px);
    background: var(--color-background, #f8fafc);
    color: var(--color-text, #1e293b);
}

.help-search input:focus[b-s3lycob72b] {
    outline: none;
    border-color: var(--color-primary, #1e3a5f);
    background: #fff;
}

.help-search-clear[b-s3lycob72b] {
    position: absolute;
    right: 24px;
    background: none;
    border: none;
    color: var(--color-text-tertiary, #94a3b8);
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
}

.help-search-clear:hover[b-s3lycob72b] {
    color: var(--color-text, #1e293b);
}

/* ===== HELP NAV ===== */

.help-nav[b-s3lycob72b] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.help-nav-loading[b-s3lycob72b],
.help-nav-empty[b-s3lycob72b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--color-text-tertiary, #94a3b8);
    font-size: var(--font-size-sm, 13px);
}

.help-nav-loading i[b-s3lycob72b],
.help-nav-empty i[b-s3lycob72b] {
    font-size: 24px;
}

.help-nav-category-header[b-s3lycob72b] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #475569);
    cursor: pointer;
    text-align: left;
}

.help-nav-category-header:hover[b-s3lycob72b] {
    background: var(--color-background, #f8fafc);
}

.help-nav-chevron[b-s3lycob72b] {
    font-size: 10px;
    transition: transform 0.15s ease;
    margin-left: auto;
}

.help-nav-category-header.expanded .help-nav-chevron[b-s3lycob72b] {
    transform: rotate(180deg);
}

.help-nav-count[b-s3lycob72b] {
    font-size: var(--font-size-xs, 11px);
    font-weight: 400;
    color: var(--color-text-tertiary, #94a3b8);
    background: var(--color-background, #f8fafc);
    padding: 1px 6px;
    border-radius: 10px;
}

.help-nav-items[b-s3lycob72b] {
    padding: 2px 0 6px;
}

.help-nav-item[b-s3lycob72b] {
    display: block;
    width: 100%;
    padding: 6px 16px 6px 28px;
    background: none;
    border: none;
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-secondary, #475569);
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
}

.help-nav-item:hover[b-s3lycob72b] {
    background: var(--color-background, #f8fafc);
    color: var(--color-text, #1e293b);
}

.help-nav-item.active[b-s3lycob72b] {
    background: var(--color-primary-light, #e8eef5);
    color: var(--color-primary, #1e3a5f);
    font-weight: var(--font-weight-medium, 500);
}

/* ===== HELP CONTENT ===== */

.help-content[b-s3lycob72b] {
    flex: 1;
    overflow-y: auto;
    background: var(--color-background, #f8fafc);
}

.help-article[b-s3lycob72b] {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 48px;
}

.help-article-header[b-s3lycob72b] {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.help-article-breadcrumb[b-s3lycob72b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.help-article-breadcrumb i[b-s3lycob72b] {
    font-size: 8px;
}

.help-article-header h1[b-s3lycob72b] {
    font-size: 24px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #1e293b);
    margin: 0 0 8px;
    line-height: 1.3;
}

.help-article-summary[b-s3lycob72b] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, #475569);
    margin: 0 0 12px;
    line-height: 1.6;
}

.help-article-meta[b-s3lycob72b] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-tertiary, #94a3b8);
}

.help-audience-badge[b-s3lycob72b] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.help-audience-badge.all[b-s3lycob72b] { background: #f0f9ff; color: #0369a1; }
.help-audience-badge.client[b-s3lycob72b] { background: #f0fdf4; color: #15803d; }
.help-audience-badge.staff[b-s3lycob72b] { background: #fff7ed; color: #c2410c; }
.help-audience-badge.dev[b-s3lycob72b] { background: #faf5ff; color: #7c3aed; }

.help-version[b-s3lycob72b] {
    color: var(--color-text-tertiary, #94a3b8);
}

.help-updated[b-s3lycob72b] {
    color: var(--color-text-tertiary, #94a3b8);
}

/* ===== HELP ARTICLE BODY (rendered markdown via MarkupString — needs ::deep) ===== */

.help-article-body[b-s3lycob72b] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text, #1e293b);
    line-height: 1.7;
}

[b-s3lycob72b] .help-article-body h1 {
    font-size: 22px;
    font-weight: var(--font-weight-semibold, 600);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

[b-s3lycob72b] .help-article-body h2 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    margin: 24px 0 8px;
    color: var(--color-text, #1e293b);
}

[b-s3lycob72b] .help-article-body h3 {
    font-size: 15px;
    font-weight: var(--font-weight-semibold, 600);
    margin: 20px 0 6px;
    color: var(--color-text, #1e293b);
}

[b-s3lycob72b] .help-article-body p {
    margin: 0 0 12px;
}

[b-s3lycob72b] .help-article-body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

[b-s3lycob72b] .help-article-body li {
    margin-bottom: 4px;
}

[b-s3lycob72b] .help-article-body strong {
    font-weight: var(--font-weight-semibold, 600);
}

[b-s3lycob72b] .help-article-body code {
    background: var(--color-background, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}

[b-s3lycob72b] .help-article-body pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
}

[b-s3lycob72b] .help-article-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.5;
}

[b-s3lycob72b] .help-article-body hr {
    border: none;
    border-top: 1px solid var(--color-border, #e2e8f0);
    margin: 24px 0;
}

[b-s3lycob72b] .help-article-body a {
    color: var(--color-primary, #1e3a5f);
    text-decoration: none;
}

[b-s3lycob72b] .help-article-body a:hover {
    text-decoration: underline;
}

/* ===== ARTICLE TAGS ===== */

.help-article-tags[b-s3lycob72b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.help-tag[b-s3lycob72b] {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-background, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-secondary, #475569);
}

/* ===== HELP WELCOME (no article selected) ===== */

.help-welcome[b-s3lycob72b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 32px;
    min-height: 400px;
}

.help-welcome-icon[b-s3lycob72b] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-light, #e8eef5);
    color: var(--color-primary, #1e3a5f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 20px;
}

.help-welcome h2[b-s3lycob72b] {
    font-size: var(--font-size-xl, 18px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #1e293b);
    margin: 0 0 8px;
}

.help-welcome p[b-s3lycob72b] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, #475569);
    margin: 0;
}

/* ===== FEATURED ARTICLES ===== */

.help-featured[b-s3lycob72b] {
    margin-top: 32px;
    width: 100%;
    max-width: 700px;
}

.help-featured h3[b-s3lycob72b] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.help-featured-grid[b-s3lycob72b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.help-featured-card[b-s3lycob72b] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.help-featured-card:hover[b-s3lycob72b] {
    border-color: var(--color-primary, #1e3a5f);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.help-featured-category[b-s3lycob72b] {
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.help-featured-title[b-s3lycob72b] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #1e293b);
    margin-bottom: 4px;
}

.help-featured-summary[b-s3lycob72b] {
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-secondary, #475569);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== HELP PAGE RESPONSIVE ===== */

@media (max-width: 768px) {
    .help-page[b-s3lycob72b] {
        grid-template-columns: 1fr;
    }

    .help-sidebar[b-s3lycob72b] {
        display: none; /* On mobile, could be a slide-over panel later */
    }

    .help-article[b-s3lycob72b] {
        padding: 20px 16px;
    }
}
/* /Components/Pages/Pws/PwsAccountAction.razor.rz.scp.css */
    /* Page container - matches SecclClientEdit */
    .action-page[b-4dg65yg6ex] {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #f8fafc;
        overflow: hidden;
    }

    /* Content max-width */
    .form-content[b-4dg65yg6ex] {
        max-width: 700px;
    }

    .loading-state[b-4dg65yg6ex], .error-state[b-4dg65yg6ex], .success-state[b-4dg65yg6ex] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: #64748b;
        gap: 16px;
    }

    .loading-state i[b-4dg65yg6ex], .error-state i[b-4dg65yg6ex] { font-size: 48px; }
    .error-state i[b-4dg65yg6ex] { color: #ef4444; }
    .error-state h3[b-4dg65yg6ex] { margin: 0; color: #1e293b; }

    .success-actions[b-4dg65yg6ex] {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }

    /* Back button */
    .back-btn[b-4dg65yg6ex] {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        cursor: pointer;
        color: #64748b;
        font-size: 12px;
        transition: all 0.15s;
    }
    .back-btn:hover[b-4dg65yg6ex] {
        background: #f1f5f9;
        border-color: #94a3b8;
        color: #475569;
    }

    /* Resubmit rejection banner */
    .resubmit-banner[b-4dg65yg6ex] {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
    }

    .resubmit-banner-header[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #c2410c;
        margin-bottom: 8px;
        font-size: 15px;
    }

    .resubmit-banner-reason[b-4dg65yg6ex] {
        margin: 0 0 8px 0;
        color: #9a3412;
        font-size: 14px;
        line-height: 1.5;
    }

    .resubmit-banner-detail[b-4dg65yg6ex] {
        margin: 0;
        color: #78716c;
        font-size: 13px;
        line-height: 1.5;
    }

    .resubmit-banner-detail .mono[b-4dg65yg6ex] {
        font-family: monospace;
        color: #1e3a5f;
        font-weight: 600;
    }

    /* ============================================
       FORM SECTIONS - Matches SecclClientEdit
       ============================================ */
    .form-section[b-4dg65yg6ex] {
        margin-bottom: 48px;
        scroll-margin-top: 24px;
        scroll-snap-align: start;
    }

    .section-header[b-4dg65yg6ex] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .section-header h2[b-4dg65yg6ex] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
    }

    .section-status[b-4dg65yg6ex] {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-status.complete[b-4dg65yg6ex] {
        color: #10b981;
    }

    .section-status.complete[b-4dg65yg6ex]::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #10b981;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .section-status.in-progress[b-4dg65yg6ex] {
        color: #2563eb;
    }

    .section-status.in-progress[b-4dg65yg6ex]::after {
        content: '';
        width: 10px;
        height: 10px;
        background: #3b82f6;
        border-radius: 50%;
    }

    .section-status.not-started[b-4dg65yg6ex] {
        color: #94a3b8;
    }

    .section-status.not-started[b-4dg65yg6ex]::after {
        content: '';
        width: 10px;
        height: 10px;
        background: #cbd5e1;
        border-radius: 50%;
    }

    .section-divider[b-4dg65yg6ex] {
        height: 1px;
        background: #e2e8f0;
        margin-bottom: 24px;
    }

    /* ============================================
       FORM GROUPS - Matches SecclClientEdit
       ============================================ */
    .form-group[b-4dg65yg6ex] {
        margin-bottom: 20px;
    }

    .form-group label[b-4dg65yg6ex] {
        display: block;
        font-size: 14px;
        color: #475569;
        margin-bottom: 8px;
    }

    .form-group input[type="text"][b-4dg65yg6ex],
    .form-group input[type="email"][b-4dg65yg6ex],
    .form-group input[type="tel"][b-4dg65yg6ex],
    .form-group input[type="date"][b-4dg65yg6ex],
    .form-group input[type="number"][b-4dg65yg6ex],
    .form-group select[b-4dg65yg6ex] {
        width: 100%;
        max-width: 400px;
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 14px;
        color: #1e293b;
        transition: border-color 0.15s;
    }

    .form-group input:focus[b-4dg65yg6ex],
    .form-group select:focus[b-4dg65yg6ex] {
        outline: none;
        border-color: #1e3a5f;
    }

    .form-select[b-4dg65yg6ex] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px;
    }

    .locked-value[b-4dg65yg6ex] {
        padding: 10px 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 14px;
        color: #475569;
        max-width: 280px;
    }

    .form-hint[b-4dg65yg6ex] {
        display: block;
        font-size: 13px;
        color: #64748b;
        margin-top: 6px;
    }

    .required[b-4dg65yg6ex] {
        color: #ef4444;
    }

    /* ============================================
       INPUT GROUPS (for currency prefix)
       ============================================ */
    .input-group[b-4dg65yg6ex] {
        display: flex;
        align-items: stretch;
    }

    .input-group input[b-4dg65yg6ex] {
        flex: 1;
        min-width: 0;
        border-radius: 0 6px 6px 0 !important;
        border-left: none !important;
    }

    .input-prefix[b-4dg65yg6ex] {
        padding: 10px 12px;
        font-size: 14px;
        color: #64748b;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-right: none;
        border-radius: 6px 0 0 6px;
        display: flex;
        align-items: center;
    }

    /* ============================================
       RADIO GROUPS - Matches SecclClientEdit
       ============================================ */
    .radio-group[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .radio-option[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-weight: 400 !important;
    }

    .radio-option input[type="radio"][b-4dg65yg6ex] {
        width: 18px;
        height: 18px;
        accent-color: #1e3a5f;
    }

    /* ============================================
       CHECKBOX GROUPS - Matches SecclClientEdit
       ============================================ */
    .checkbox-group[b-4dg65yg6ex] {
        margin-top: 8px;
    }

    .checkbox-option[b-4dg65yg6ex] {
        display: grid;
        grid-template-columns: 20px 1fr;
        gap: 12px;
        cursor: pointer;
        font-weight: 400 !important;
        line-height: 1.5;
        align-items: start;
    }

    .checkbox-option input[type="checkbox"][b-4dg65yg6ex] {
        width: 18px;
        height: 18px;
        margin-top: 3px;
        accent-color: #1e3a5f;
    }

    .checkbox-option span[b-4dg65yg6ex] {
        display: block;
    }

    /* ============================================
       INFO & WARNING BANNERS
       ============================================ */
    .info-banner[b-4dg65yg6ex] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        color: #1e40af;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .warning-banner[b-4dg65yg6ex] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 8px;
        color: #92400e;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .alert-error[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 8px;
        color: #dc2626;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .danger-banner[b-4dg65yg6ex] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 8px;
        color: #dc2626;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .info-banner i[b-4dg65yg6ex], .warning-banner i[b-4dg65yg6ex], .alert-error i[b-4dg65yg6ex], .danger-banner i[b-4dg65yg6ex] {
        flex-shrink: 0;
    }

    /* ============================================
       HOLDINGS LIST (for sell)
       ============================================ */
    .holdings-list[b-4dg65yg6ex] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
    }

    /* ============================================
       BUTTONS
       ============================================ */
    .btn-primary[b-4dg65yg6ex] {
        padding: 10px 20px;
        background: #1e3a5f;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: white;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-primary:hover[b-4dg65yg6ex] { background: #152d4a; }

    /* ============================================
       REVIEW PAGE - matches SecclClientEdit
       ============================================ */
    .review-page[b-4dg65yg6ex] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        position: relative;
    }

    /* ── Submitting overlay ────────────────────────── */
    .submitting-overlay[b-4dg65yg6ex] {
        position: absolute;
        inset: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(248, 250, 252, 0.92);
        backdrop-filter: blur(2px);
    }

    .submitting-content[b-4dg65yg6ex] {
        text-align: center;
        max-width: 360px;
    }

    .submitting-content .bounce-dots[b-4dg65yg6ex] {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-bottom: 20px;
    }

    .submitting-content .bounce-dots .dot[b-4dg65yg6ex] {
        width: 10px;
        height: 10px;
        background: #3b82f6;
        border-radius: 50%;
        animation: bounce-b-4dg65yg6ex 1.4s ease-in-out infinite;
    }

    .submitting-content .bounce-dots .dot:nth-child(1)[b-4dg65yg6ex] { animation-delay: 0s; }
    .submitting-content .bounce-dots .dot:nth-child(2)[b-4dg65yg6ex] { animation-delay: 0.2s; }
    .submitting-content .bounce-dots .dot:nth-child(3)[b-4dg65yg6ex] { animation-delay: 0.4s; }

    @keyframes bounce-b-4dg65yg6ex {
        0%, 80%, 100% {
            transform: translateY(0);
            opacity: 0.5;
        }
        40% {
            transform: translateY(-12px);
            opacity: 1;
        }
    }

    .submitting-content h2[b-4dg65yg6ex] {
        margin: 0 0 8px;
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
    }

    .submitting-content p[b-4dg65yg6ex] {
        margin: 0;
        font-size: 0.85rem;
        color: #64748b;
        line-height: 1.5;
    }

    .review-header[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 24px;
        background: #f1f5f9;
        border-bottom: 1px solid #e2e8f0;
    }

    .review-header h1[b-4dg65yg6ex] {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #1e293b;
        flex: 1;
    }

    .edit-btn[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: white;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        color: #475569;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
    }

    .edit-btn:hover[b-4dg65yg6ex] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #1e293b;
    }

    /* Override .centered-scroll to not create a scroll container - page scrolls instead */
    .review-page .centered-scroll[b-4dg65yg6ex] {
        flex: none;
        overflow: visible;
        padding: 32px 48px;
    }

    .review-page .centered-scroll-inner[b-4dg65yg6ex] {
        max-width: 700px;
    }

    /* Review actions footer bar */
    .review-page .review-actions[b-4dg65yg6ex] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        padding: 16px 48px;
        background: white;
        border-top: 1px solid #e2e8f0;
    }

    /* Review step uses firm-review-* classes from forms.css */

    /* Bank confirm card styles now in forms.css (shared) */

    /* Change strategy */
    .strategy-current[b-4dg65yg6ex] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .strategy-risk[b-4dg65yg6ex] {
        font-size: 0.8rem;
        font-weight: 500;
        color: #64748b;
        background: #f1f5f9;
        padding: 2px 10px;
        border-radius: 100px;
    }

    .strategy-aim[b-4dg65yg6ex] {
        font-size: 0.85rem;
        color: #64748b;
        margin: 0.5rem 0 0.75rem;
        line-height: 1.5;
    }

    .strategy-composition[b-4dg65yg6ex] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }

    .strategy-composition thead th[b-4dg65yg6ex] {
        padding: 0.5rem 0.75rem;
        text-align: left;
        font-weight: 600;
        color: #64748b;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 2px solid #e2e8f0;
    }

    .strategy-composition tbody td[b-4dg65yg6ex] {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        color: #1e293b;
    }

    .strategy-composition .pct-col[b-4dg65yg6ex] {
        text-align: right;
        width: 80px;
        font-weight: 500;
    }

    .strategy-composition .cash-row td[b-4dg65yg6ex] {
        font-weight: 600;
        color: #475569;
        border-top: 2px solid #e2e8f0;
    }

    /* ============================================
       TRANSFER DOCUMENT THUMBNAILS
       ============================================ */
    .transfer-doc-thumb[b-4dg65yg6ex] {
        width: 160px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .transfer-doc-thumb:hover[b-4dg65yg6ex] {
        border-color: #94a3b8;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .transfer-doc-delete[b-4dg65yg6ex] {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.5);
        color: white;
        font-size: 11px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.15s;
    }

    .transfer-doc-thumb:hover .transfer-doc-delete[b-4dg65yg6ex] {
        opacity: 1;
    }

    .transfer-doc-delete:hover[b-4dg65yg6ex] {
        background: #dc2626;
    }
/* /Components/Pages/Pws/PwsAccountCrystallise.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   PwsAccountCrystallise — Scoped Styles
   Only page-specific styles — SmartForm provides section, banner, button,
   review, hint, and form styles via ::deep rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Info Icons ─────────────────────────────────────────────────────── */

.info-icon[b-xvvv6efhq9] {
    color: #94a3b8;
    font-size: 0.85em;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

.info-icon:hover[b-xvvv6efhq9] {
    color: #3b82f6;
}

/* Bank confirm card styles moved to forms.css (shared) */

/* ── Loading & Error States ──────────────────────────────────────────── */

.loading-state[b-xvvv6efhq9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: #64748b;
    font-size: 16px;
}

.error-page[b-xvvv6efhq9] {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
}

/* ── Section Tag ────────────────────────────────────────────────────── */

.section-tag[b-xvvv6efhq9] {
    font-size: 14px;
    font-weight: 400;
    color: #94a3b8;
}

/* ── Danger Banners (not in SmartForm — help-banner.warning covers warnings) ── */

.danger-banner[b-xvvv6efhq9] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #991b1b;
    font-size: 14px;
    line-height: 1.5;
}

.danger-banner i[b-xvvv6efhq9] {
    flex-shrink: 0;
    margin-top: 2px;
    color: #ef4444;
}

.danger-banner strong[b-xvvv6efhq9] {
    display: block;
    margin-bottom: 4px;
}

.danger-banner p[b-xvvv6efhq9] {
    margin: 0 0 4px;
}

.warning-banner[b-xvvv6efhq9] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #92400e;
    font-size: 14px;
    line-height: 1.5;
}

.warning-banner i[b-xvvv6efhq9] {
    flex-shrink: 0;
    margin-top: 2px;
    color: #f59e0b;
}

.warning-banner strong[b-xvvv6efhq9] {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

.warning-banner p[b-xvvv6efhq9] {
    margin: 4px 0 0;
}

/* ── Conditional Fields ──────────────────────────────────────────────── */

.conditional-fields[b-xvvv6efhq9] {
    margin-left: 24px;
    padding-left: 16px;
    border-left: 3px solid #e2e8f0;
    margin-bottom: 20px;
}

/* ── Value Display ───────────────────────────────────────────────────── */

.value-display[b-xvvv6efhq9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

.value-label[b-xvvv6efhq9] {
    font-size: 14px;
    color: #64748b;
}

.value-amount[b-xvvv6efhq9] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

/* ── Calculation Box ─────────────────────────────────────────────────── */

.calculation-box[b-xvvv6efhq9] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.calc-row[b-xvvv6efhq9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #475569;
}

.calc-value[b-xvvv6efhq9] {
    font-weight: 600;
    color: #1e293b;
}

.calc-value.highlight[b-xvvv6efhq9] {
    font-size: 16px;
    color: #1e3a5f;
}

.calc-divider[b-xvvv6efhq9] {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
}

.calc-row.hint[b-xvvv6efhq9] {
    color: #94a3b8;
    font-size: 13px;
}

/* ── LSA Table ───────────────────────────────────────────────────────── */

.lsa-table[b-xvvv6efhq9] {
    margin-bottom: 24px;
}

.lsa-table h3[b-xvvv6efhq9] {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 12px;
}

.lsa-table table[b-xvvv6efhq9] {
    width: 100%;
    border-collapse: collapse;
}

.lsa-table th[b-xvvv6efhq9] {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.lsa-table td[b-xvvv6efhq9] {
    padding: 10px 12px;
    font-size: 14px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Protection Entry ────────────────────────────────────────────────── */

.protection-entry[b-xvvv6efhq9] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

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

.protection-header h4[b-xvvv6efhq9] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.remove-btn[b-xvvv6efhq9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: none;
    color: #ef4444;
    font-size: 13px;
    cursor: pointer;
}

.remove-btn:hover[b-xvvv6efhq9] {
    text-decoration: underline;
}

.link-btn[b-xvvv6efhq9] {
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.link-btn:hover[b-xvvv6efhq9] {
    text-decoration: underline;
}

/* ── Method Cards (FAD/UFPLS selection — matches illustration pattern) ── */

.method-panel[b-xvvv6efhq9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.method-cards[b-xvvv6efhq9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.method-card[b-xvvv6efhq9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.method-card:hover[b-xvvv6efhq9] {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.method-card.selected[b-xvvv6efhq9] {
    border-color: #1e3a5f;
    background: #f0f7ff;
}

.method-card.disabled[b-xvvv6efhq9] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.method-icon[b-xvvv6efhq9] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #64748b;
    border-radius: 50%;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.method-card.selected .method-icon[b-xvvv6efhq9] {
    background: #1e3a5f;
    color: white;
}

.method-info h3[b-xvvv6efhq9] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.method-info p[b-xvvv6efhq9] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.method-card .selected-check[b-xvvv6efhq9] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    background: #1e3a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
}

/* ── Bank Details Display ────────────────────────────────────────────── */

.bank-details-display[b-xvvv6efhq9] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

/* ── Success Page ────────────────────────────────────────────────────── */

.success-page[b-xvvv6efhq9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.success-content[b-xvvv6efhq9] {
    text-align: center;
    max-width: 500px;
}

.success-details[b-xvvv6efhq9] {
    margin: 24px 0;
}

.success-summary-card[b-xvvv6efhq9] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    text-align: left;
}

.summary-row[b-xvvv6efhq9] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.summary-label[b-xvvv6efhq9] {
    color: #64748b;
}

.summary-value[b-xvvv6efhq9] {
    font-weight: 600;
    color: #1e293b;
}

.success-actions[b-xvvv6efhq9] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

/* ── Intent Cards (the fork — 3-column grid) ────────────────────────── */

.intent-cards[b-xvvv6efhq9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 20px;
}

.intent-card[b-xvvv6efhq9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.intent-card:hover[b-xvvv6efhq9] {
    border-color: #cbd5e1;
    background: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.intent-card.selected[b-xvvv6efhq9] {
    border-color: #1e3a5f;
    background: #f0f7ff;
}

.intent-icon[b-xvvv6efhq9] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #64748b;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.intent-card.selected .intent-icon[b-xvvv6efhq9] {
    background: #1e3a5f;
    color: white;
}

.intent-card h3[b-xvvv6efhq9] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.intent-tag[b-xvvv6efhq9] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 8px;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.intent-card.selected .intent-tag[b-xvvv6efhq9] {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.intent-card p[b-xvvv6efhq9] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.intent-detail[b-xvvv6efhq9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #475569;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    width: 100%;
}

.intent-detail strong[b-xvvv6efhq9] {
    color: #1e3a5f;
}

.intent-card .selected-check[b-xvvv6efhq9] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    background: #1e3a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .intent-cards[b-xvvv6efhq9] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .intent-cards[b-xvvv6efhq9] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Early Access Warning (under planned retirement age) ───────────── */

.early-access-warning[b-xvvv6efhq9] {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #1e40af;
    font-size: 14px;
    line-height: 1.6;
}

.early-access-warning i[b-xvvv6efhq9] {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 16px;
    color: #3b82f6;
}

/* ── MPAA Warning Banner ────────────────────────────────────────────── */

.mpaa-warning-banner[b-xvvv6efhq9] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #fff7ed;
    border: 2px solid #fed7aa;
    border-radius: 10px;
    margin-bottom: 24px;
}

.mpaa-warning-icon[b-xvvv6efhq9] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ea580c;
    color: white;
    border-radius: 50%;
    font-size: 1rem;
}

.mpaa-warning-content[b-xvvv6efhq9] {
    color: #9a3412;
    font-size: 14px;
    line-height: 1.6;
}

.mpaa-warning-content strong[b-xvvv6efhq9] {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
    color: #7c2d12;
}

.mpaa-warning-content p[b-xvvv6efhq9] {
    margin: 0 0 6px;
}
/* /Components/Pages/Pws/PwsAccountView.razor.rz.scp.css */
    /* account-content wraps header + tab content below the nav bar */
    .account-content[b-i80j6rse6n] {
        padding: 24px;
    }

    .loading-state[b-i80j6rse6n], .error-state[b-i80j6rse6n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: #64748b;
        gap: 16px;
    }

    .loading-state i[b-i80j6rse6n], .error-state i[b-i80j6rse6n] { font-size: 48px; }
    .error-state i[b-i80j6rse6n] { color: #ef4444; }
    .error-state h3[b-i80j6rse6n] { margin: 0; color: #1e293b; }

    /* Header */
    .account-header[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 24px;
    }

    .back-btn[b-i80j6rse6n] {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: #64748b;
        transition: all 0.15s;
    }

    .back-btn:hover[b-i80j6rse6n] {
        background: #e2e8f0;
        color: #1e293b;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .back-btn:active[b-i80j6rse6n] {
        transform: translateY(0);
        box-shadow: none;
    }

    .account-icon-large[b-i80j6rse6n] {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        flex-shrink: 0;
    }

    /* Pastel backgrounds with accent-coloured icons */
    .account-icon-large.isa[b-i80j6rse6n]                  { background: #dcfce7; color: #16a34a; }
    .account-icon-large.gia[b-i80j6rse6n]                  { background: #dbeafe; color: #2563eb; }
    .account-icon-large.pension[b-i80j6rse6n],
    .account-icon-large.sipp[b-i80j6rse6n]                 { background: #ede9fe; color: #7c3aed; }
    .account-icon-large.pension-accumulation[b-i80j6rse6n] { background: #d1fae5; color: #059669; }
    .account-icon-large.pension-drawdown[b-i80j6rse6n]     { background: #fef3c7; color: #d97706; }
    .account-icon-large.pension-beneficiary[b-i80j6rse6n]  { background: #cffafe; color: #0891b2; }
    .account-icon-large.jisa[b-i80j6rse6n]                 { background: #fce7f3; color: #db2777; }
    .account-icon-large.default[b-i80j6rse6n]              { background: #f1f5f9; color: #64748b; }

    .account-info[b-i80j6rse6n] {
        flex: 1;
    }

    .account-name-row[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .account-name-row h1[b-i80j6rse6n] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #1e293b;
    }

    .account-meta[b-i80j6rse6n] {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .meta-item[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        font-size: 14px;
    }

    .meta-item i[b-i80j6rse6n] {
        color: #94a3b8;
    }

    .meta-item.clickable[b-i80j6rse6n] {
        cursor: pointer;
        transition: color 0.15s;
    }

    .meta-item.clickable:hover[b-i80j6rse6n] {
        color: #1e3a5f;
    }

    .meta-item.clickable:hover i[b-i80j6rse6n] {
        color: #1e3a5f;
    }

    .header-actions[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .btn-primary[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: #1e3a5f;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: white;
        font-weight: 500;
        transition: all 0.15s ease;
    }

    .btn-primary:hover[b-i80j6rse6n] {
        background: #152d4a;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(30, 58, 95, 0.3);
    }

    .btn-primary:active[b-i80j6rse6n] {
        transform: translateY(0);
        box-shadow: none;
    }

    /* Value Cards */
    .value-cards[b-i80j6rse6n] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        margin-bottom: 24px;
    }

    .value-card[b-i80j6rse6n] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: box-shadow 0.2s ease;
    }

    .value-card:hover[b-i80j6rse6n] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .value-card.primary[b-i80j6rse6n] {
        background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
        color: white;
    }

    .value-card.primary .card-label[b-i80j6rse6n] { color: rgba(255,255,255,0.8); }
    .value-card.primary .card-subtext[b-i80j6rse6n] { color: rgba(255,255,255,0.7); }

    .card-label[b-i80j6rse6n] {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .card-value[b-i80j6rse6n] {
        font-size: 28px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .value-card.primary .card-value[b-i80j6rse6n] { color: white; }

    .card-value.positive[b-i80j6rse6n] { color: #059669; }
    .card-value.negative[b-i80j6rse6n] { color: #dc2626; }

    .card-subtext[b-i80j6rse6n] {
        font-size: 13px;
        color: #64748b;
    }

    .card-subtext .positive[b-i80j6rse6n] { color: #059669; }
    .card-subtext .negative[b-i80j6rse6n] { color: #dc2626; }

    /* Tab content area */
    .tab-content[b-i80j6rse6n] {
        background: transparent;
        min-height: 400px;
        animation: fadeSlideIn-b-i80j6rse6n 0.25s ease-out;
    }

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

    /* Refresh icon button in nav bar */
    .refresh-icon-btn[b-i80j6rse6n] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        cursor: pointer;
        color: #64748b;
        font-size: 14px;
        transition: all 0.15s ease;
    }

    .refresh-icon-btn:hover[b-i80j6rse6n] {
        background: #f1f5f9;
        color: #1e293b;
        border-color: #cbd5e1;
    }

    /* Table card — match the header card's visual weight on this detail page */
    .table-card[b-i80j6rse6n] {
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Holdings tfoot */
    [b-i80j6rse6n] .std-table tfoot td {
        border-top: 2px solid #e2e8f0;
        border-bottom: none;
        background: #f8fafc;
    }

    .asset-name[b-i80j6rse6n] {
        font-weight: 500;
        color: #1e293b;
    }

    .asset-isin[b-i80j6rse6n] {
        font-size: 12px;
        color: #94a3b8;
        font-family: monospace;
    }

    .value-col[b-i80j6rse6n] {
        font-weight: 600;
    }

    .growth-pct[b-i80j6rse6n] {
        font-size: 12px;
        opacity: 0.8;
        margin-left: 4px;
    }

    .positive[b-i80j6rse6n] { color: #059669; }
    .negative[b-i80j6rse6n] { color: #dc2626; }

    .empty-holdings[b-i80j6rse6n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: #94a3b8;
        gap: 12px;
    }

    .empty-holdings i[b-i80j6rse6n] { font-size: 48px; }
    .empty-holdings p[b-i80j6rse6n] {
        margin: 0;
        font-size: 16px;
        color: #64748b;
    }
    .empty-hint[b-i80j6rse6n] {
        font-size: 14px;
    }

    /* Loading compact */
    .loading-state.compact[b-i80j6rse6n] {
        padding: 40px;
    }

    /* ── Transaction Card ── */
    .tx-card[b-i80j6rse6n] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    /* ── Date Range Filter ── */
    .tx-date-filter[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        margin-bottom: 8px;
        gap: 16px;
    }

    .tx-date-quick[b-i80j6rse6n] {
        display: flex;
        gap: 4px;
    }

    .tx-range-btn[b-i80j6rse6n] {
        padding: 6px 14px;
        border: 1px solid #e2e8f0;
        background: white;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #64748b;
        cursor: pointer;
        transition: all 0.15s;
    }

    .tx-range-btn:hover[b-i80j6rse6n] {
        background: #f1f5f9;
        color: #1e293b;
        border-color: #cbd5e1;
    }

    .tx-range-btn.active[b-i80j6rse6n] {
        background: #1e293b;
        color: white;
        border-color: #1e293b;
    }

    .tx-date-custom[b-i80j6rse6n] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tx-date-input[b-i80j6rse6n] {
        padding: 6px 10px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 13px;
        color: #1e293b;
        background: white;
        outline: none;
    }

    .tx-date-input:focus[b-i80j6rse6n] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }

    .tx-date-sep[b-i80j6rse6n] {
        font-size: 13px;
        color: #94a3b8;
    }

    /* ── Transaction Table ── */
    .tx-table[b-i80j6rse6n] {
        width: 100%;
        border-collapse: collapse;
    }

    .tx-table th[b-i80j6rse6n],
    .tx-table td[b-i80j6rse6n] {
        padding: 12px 16px;
        text-align: left;
    }

    .tx-table th[b-i80j6rse6n] {
        background: #f8fafc;
        font-weight: 600;
        color: #64748b;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 1px solid #e2e8f0;
        user-select: none;
    }

    .tx-table th.tx-col-date[b-i80j6rse6n] {
        cursor: pointer;
        white-space: nowrap;
    }

    .tx-table th.tx-col-date:hover[b-i80j6rse6n] {
        color: #1e293b;
    }

    .sort-icon[b-i80j6rse6n] {
        font-size: 10px;
        margin-left: 4px;
        opacity: 0.5;
    }

    .tx-col-date[b-i80j6rse6n] { width: 120px; }
    .tx-col-amount[b-i80j6rse6n] { width: 130px; }
    .tx-col-status[b-i80j6rse6n] { width: 110px; }

    .tx-table td[b-i80j6rse6n] {
        border-bottom: 1px solid #f1f5f9;
    }

    .tx-row[b-i80j6rse6n] {
        cursor: pointer;
        transition: background 0.15s;
    }

    .tx-row:hover td[b-i80j6rse6n] {
        background: #f8fafc;
    }

    .tx-row.tx-pending td[b-i80j6rse6n] {
        background: #fffbeb;
    }

    .tx-row.tx-pending:hover td[b-i80j6rse6n] {
        background: #fef3c7;
    }

    .tx-date[b-i80j6rse6n] {
        color: #64748b;
        font-size: 14px;
        white-space: nowrap;
    }

    .tx-desc[b-i80j6rse6n] {
        color: #1e293b;
        font-weight: 500;
    }

    .tx-desc-text[b-i80j6rse6n] {
        display: block;
    }

    .tx-isin[b-i80j6rse6n] {
        display: block;
        font-size: 12px;
        color: #94a3b8;
        font-family: monospace;
        font-weight: 400;
        margin-top: 2px;
    }

    .tx-amount[b-i80j6rse6n] {
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
    }

    .amount-in[b-i80j6rse6n] { color: #059669; }
    .amount-out[b-i80j6rse6n] { color: #dc2626; }
    .amount-cancelled[b-i80j6rse6n] { color: #94a3b8; text-decoration: line-through; }

    .tx-status-badge[b-i80j6rse6n] {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .tx-status-badge.large[b-i80j6rse6n] {
        font-size: 13px;
        padding: 5px 12px;
    }

    .status-pending[b-i80j6rse6n] { background: #fef3c7; color: #d97706; }
    .status-completed[b-i80j6rse6n] { background: #d1fae5; color: #059669; }
    .status-cancelled[b-i80j6rse6n] { background: #f1f5f9; color: #64748b; }
    .status-cancelling[b-i80j6rse6n] { background: #fff7ed; color: #d97706; }
    .status-failed[b-i80j6rse6n] { background: #fee2e2; color: #dc2626; }
    .status-manual[b-i80j6rse6n] { background: #fef3c7; color: #92400e; }
    .status-neutral[b-i80j6rse6n] { background: #f1f5f9; color: #64748b; }

    .empty-transactions[b-i80j6rse6n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: #94a3b8;
        gap: 12px;
    }

    .empty-transactions i[b-i80j6rse6n] { font-size: 48px; }
    .empty-transactions p[b-i80j6rse6n] {
        margin: 0;
        font-size: 16px;
        color: #64748b;
    }

    .muted[b-i80j6rse6n] { color: #94a3b8; }

    /* ── Transaction Detail Modal ──
       Styles moved to TransactionDetailModal.razor.css (shared component).
       Cancel button styles flow through via ::deep in the shared CSS. */

    /* Info Cards */
    .info-cards-row[b-i80j6rse6n] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .info-card[b-i80j6rse6n] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        transition: box-shadow 0.2s ease;
    }

    .info-card:hover[b-i80j6rse6n] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .info-card-title[b-i80j6rse6n] {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-row[b-i80j6rse6n] {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .info-row:last-child[b-i80j6rse6n] {
        border-bottom: none;
    }

    .info-row .label[b-i80j6rse6n] {
        color: #64748b;
        font-size: 14px;
    }

    .info-row .value[b-i80j6rse6n] {
        color: #1e293b;
        font-weight: 500;
        font-size: 14px;
    }

    .info-row .value.mono[b-i80j6rse6n] {
        font-family: monospace;
    }

    .info-card-empty[b-i80j6rse6n] {
        color: #94a3b8;
        font-style: italic;
        font-size: 14px;
        margin: 0;
    }

    /* Recurring Payments */
    .recurring-payment-item[b-i80j6rse6n] {
        padding: 12px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .recurring-payment-item:last-child[b-i80j6rse6n] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .recurring-payment-item:first-child[b-i80j6rse6n] {
        padding-top: 0;
    }

    .withdrawal-amount[b-i80j6rse6n] {
        color: #dc2626 !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .withdrawal-amount i[b-i80j6rse6n] { font-size: 12px; }

    .contribution-amount[b-i80j6rse6n] {
        color: #059669 !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .contribution-amount i[b-i80j6rse6n] { font-size: 12px; }

    .next-collection[b-i80j6rse6n] {
        color: #059669 !important;
        font-weight: 600 !important;
    }

    .next-withdrawal[b-i80j6rse6n] {
        color: #dc2626 !important;
        font-weight: 600 !important;
    }

    /* Status badges */
    .info-badge[b-i80j6rse6n] {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .info-badge.active[b-i80j6rse6n] {
        background: #d1fae5;
        color: #059669;
    }

    .info-badge.open[b-i80j6rse6n] {
        background: #d1fae5;
        color: #059669;
    }

    .info-badge.pending[b-i80j6rse6n] {
        background: #fef3c7;
        color: #d97706;
    }

    .info-badge.suspended[b-i80j6rse6n] {
        background: #fee2e2;
        color: #dc2626;
    }

    .info-badge.neutral[b-i80j6rse6n] {
        background: #f1f5f9;
        color: #64748b;
    }
/* /Components/Pages/Pws/PwsClientDetail.razor.rz.scp.css */
    .client-detail-content[b-qlgosgrm9u] {
        padding: 24px;
        overflow-y: auto;
    }

    .loading-state[b-qlgosgrm9u], .error-state[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: #64748b;
        gap: 16px;
    }

    .loading-state i[b-qlgosgrm9u], .error-state i[b-qlgosgrm9u] { font-size: 48px; }
    .error-state i[b-qlgosgrm9u] { color: #ef4444; }
    .error-state h3[b-qlgosgrm9u] { margin: 0; color: #1e293b; }

    /* Header */
    .client-header[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 24px;
    }

    .back-btn[b-qlgosgrm9u] {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: #64748b;
        transition: all 0.15s;
    }

    .back-btn:hover[b-qlgosgrm9u] {
        background: #e2e8f0;
        color: #1e293b;
    }

    .client-avatar[b-qlgosgrm9u] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .client-avatar-img[b-qlgosgrm9u] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 2px solid #1e3a5f;
        box-sizing: border-box;
    }

    .client-info[b-qlgosgrm9u] {
        flex: 1;
    }

    .client-name-row[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .client-name-row h1[b-qlgosgrm9u] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #1e293b;
    }

    .client-meta[b-qlgosgrm9u] {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .meta-item[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        font-size: 14px;
    }

    .meta-item i[b-qlgosgrm9u] {
        color: #94a3b8;
    }

    /* Quick Links in client header */
    .quick-links[b-qlgosgrm9u] {
        display: flex;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }

    .quick-link[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        color: #475569;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.15s ease;
    }

    .quick-link:hover[b-qlgosgrm9u] {
        background: #e2e8f0;
        border-color: #cbd5e1;
        color: #1e293b;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .quick-link:active[b-qlgosgrm9u] {
        transform: translateY(0);
        box-shadow: none;
    }

    .quick-link i[b-qlgosgrm9u] {
        font-size: 14px;
        color: #64748b;
    }

    .quick-link:hover i[b-qlgosgrm9u] {
        color: #1e3a5f;
    }

    /* Add Money — green */
    .ql-pay-in[b-qlgosgrm9u] { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
    .ql-pay-in i[b-qlgosgrm9u] { color: #16a34a; }
    .ql-pay-in:hover[b-qlgosgrm9u] { background: #dcfce7; border-color: #86efac; color: #14532d; }
    .ql-pay-in:hover i[b-qlgosgrm9u] { color: #15803d; }

    /* Withdraw — red */
    .ql-withdraw[b-qlgosgrm9u] { border-color: #fecdd3; background: #fff1f2; color: #9f1239; }
    .ql-withdraw i[b-qlgosgrm9u] { color: #dc2626; }
    .ql-withdraw:hover[b-qlgosgrm9u] { background: #ffe4e6; border-color: #fda4af; color: #881337; }
    .ql-withdraw:hover i[b-qlgosgrm9u] { color: #b91c1c; }

    /* Open Account — blue */
    .ql-open[b-qlgosgrm9u] { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
    .ql-open i[b-qlgosgrm9u] { color: #2563eb; }
    .ql-open:hover[b-qlgosgrm9u] { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
    .ql-open:hover i[b-qlgosgrm9u] { color: #1d4ed8; }

    /* Disabled quick-links — greyed out for non-Active clients */
    .quick-link:disabled[b-qlgosgrm9u] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

    .header-actions[b-qlgosgrm9u] {
        display: flex;
        gap: 12px;
    }

    .btn-secondary[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        color: #475569;
        font-weight: 500;
        transition: all 0.15s ease;
    }

    .btn-secondary:hover[b-qlgosgrm9u] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .btn-secondary:active[b-qlgosgrm9u] {
        transform: translateY(0);
        box-shadow: none;
    }

    .btn-primary[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: #1e3a5f;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: white;
        font-weight: 500;
        transition: all 0.15s ease;
    }

    .btn-primary:hover[b-qlgosgrm9u] {
        background: #152d4a;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(30, 58, 95, 0.3);
    }

    .btn-primary:active[b-qlgosgrm9u] {
        transform: translateY(0);
        box-shadow: none;
    }

    /* Value Cards */
    .value-cards[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 24px;
    }

    .value-card[b-qlgosgrm9u] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .value-card.primary[b-qlgosgrm9u] {
        background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
        color: white;
    }

    .value-card.primary .card-label[b-qlgosgrm9u] { color: rgba(255,255,255,0.8); }
    .value-card.primary .card-subtext[b-qlgosgrm9u] { color: rgba(255,255,255,0.7); }

    .card-label[b-qlgosgrm9u] {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .card-value[b-qlgosgrm9u] {
        font-size: 32px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .value-card.primary .card-value[b-qlgosgrm9u] { color: white; }

    .card-value.positive[b-qlgosgrm9u] { color: #059669; }
    .card-value.negative[b-qlgosgrm9u] { color: #dc2626; }

    .card-subtext[b-qlgosgrm9u] {
        font-size: 13px;
        color: #64748b;
    }

    .card-subtext .positive[b-qlgosgrm9u] { color: #059669; }
    .card-subtext .negative[b-qlgosgrm9u] { color: #dc2626; }

    /* ===== DASHBOARD — PREMIUM BRITISH PRIVATE BANK ===== */
    .dashboard-section[b-qlgosgrm9u] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .dashboard-row[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    /* Responsive rules are in the @media blocks at the bottom of this file */

    .widget-card[b-qlgosgrm9u] {
        background: #f8fafc;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        box-shadow: none;
        padding: 24px 28px;
        transition: box-shadow 0.2s ease;
    }

    .widget-card:hover[b-qlgosgrm9u] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .widget-title[b-qlgosgrm9u] {
        margin: 0 0 4px 0;
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        letter-spacing: 0.02em;
    }

    .widget-empty[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 60px 20px;
        color: #8494a7;
        font-size: 14px;
    }

    .widget-empty i[b-qlgosgrm9u] { font-size: 24px; }

    /* ===== DOUGHNUT — CENTRED, PREMIUM ===== */
    .css-doughnut-wrap[b-qlgosgrm9u] {
        display: flex;
        justify-content: center;
        padding: 8px 0 20px;
    }

    .css-doughnut[b-qlgosgrm9u] {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: relative;
        flex-shrink: 0;
    }

    .css-doughnut-hole[b-qlgosgrm9u] {
        position: absolute;
        inset: 24%;
        border-radius: 50%;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .doughnut-label[b-qlgosgrm9u] {
        font-size: 10px;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
    }

    .doughnut-value[b-qlgosgrm9u] {
        font-size: 18px;
        font-weight: 600;
        color: #475569;
        letter-spacing: -0.02em;
    }

    /* Allocation legend — below the doughnut */
    .allocation-legend[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .legend-item[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
    }

    .legend-dot[b-qlgosgrm9u] {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .legend-label[b-qlgosgrm9u] {
        flex: 1;
        color: #4b5c72;
    }

    .legend-pct[b-qlgosgrm9u] {
        font-weight: 500;
        color: #1e293b;
        font-variant-numeric: tabular-nums;
    }

    .legend-item.zero[b-qlgosgrm9u] {
        opacity: 0.4;
    }

    .legend-item.zero .legend-dot[b-qlgosgrm9u] {
        background: #c0c9d4 !important;
    }

    /* ===== HOLDINGS LIST — CLEAN DOT + NAME + VALUE ===== */
    .holdings-list[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .holding-row[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid #f0f3f6;
    }

    .holding-row:last-child[b-qlgosgrm9u] {
        border-bottom: none;
    }

    .holding-dot[b-qlgosgrm9u] {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .holding-name[b-qlgosgrm9u] {
        flex: 1;
        font-size: 13.5px;
        color: #2d3748;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        cursor: pointer;
    }

    .holding-name:hover[b-qlgosgrm9u] {
        color: #1e3a5f;
        text-decoration: underline;
    }

    .holding-value[b-qlgosgrm9u] {
        font-size: 13.5px;
        font-weight: 600;
        color: #1e293b;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }

    /* Account summary tiles */
    .account-tiles[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .account-tile[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .account-tile:hover[b-qlgosgrm9u] {
        border-color: #1e3a5f;
        background: #f0f4f8;
        transform: translateX(4px);
    }

    .tile-icon[b-qlgosgrm9u] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
    }

    /* Product palette — tile icons (premium bank) */
    .tile-icon.isa[b-qlgosgrm9u],
    .tile-icon.jisa[b-qlgosgrm9u]                 { background: #e8eef4; color: #2c5f8a; }
    .tile-icon.gia[b-qlgosgrm9u]                  { background: #e4eaf0; color: #0f2440; }
    .tile-icon.pension[b-qlgosgrm9u],
    .tile-icon.sipp[b-qlgosgrm9u]                 { background: #e9e5ee; color: #453960; }
    .tile-icon.pension-accumulation[b-qlgosgrm9u] { background: #eae6f0; color: #4a3d6b; }
    .tile-icon.pension-drawdown[b-qlgosgrm9u]     { background: #f0ebe2; color: #8a6d35; }
    .tile-icon.pension-beneficiary[b-qlgosgrm9u]  { background: #e4ecee; color: #3a6470; }
    .tile-icon.cash-account[b-qlgosgrm9u]         { background: #ebeef1; color: #4b5c72; }
    .tile-icon.offshore-bond[b-qlgosgrm9u]        { background: #ede8e4; color: #6b4f3d; }
    .tile-icon.default[b-qlgosgrm9u]              { background: #ebeef1; color: #4b5c72; }

    .tile-info[b-qlgosgrm9u] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .tile-name[b-qlgosgrm9u] {
        font-weight: 600;
        font-size: 14px;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tile-type[b-qlgosgrm9u] {
        font-size: 12px;
        color: #64748b;
    }

    .tile-value[b-qlgosgrm9u] {
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex-shrink: 0;
    }

    .tile-amount[b-qlgosgrm9u] {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
    }

    .tile-growth[b-qlgosgrm9u] {
        font-size: 12px;
        font-weight: 500;
    }

    .tile-growth.positive[b-qlgosgrm9u] { color: #059669; }
    .tile-growth.negative[b-qlgosgrm9u] { color: #dc2626; }

    .tile-loading[b-qlgosgrm9u] {
        color: #94a3b8;
        font-size: 14px;
    }

    /* Accounts Section - white box with grey cards inside */
    .accounts-section[b-qlgosgrm9u] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Accounts Grid */
    .accounts-grid[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .account-card[b-qlgosgrm9u] {
        background: #f8fafc;
        border-radius: 12px;
        padding: 22px 20px 20px;
        border: 1px solid #e2e8f0;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .account-card:hover[b-qlgosgrm9u] {
        border-color: #cbd5e1;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .account-card.suspended[b-qlgosgrm9u] {
        opacity: 0.6;
    }

    .account-header[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .account-icon[b-qlgosgrm9u] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex-shrink: 0;
    }

    /* Product palette — account card icons (premium bank) */
    .account-icon.isa[b-qlgosgrm9u],
    .account-icon.jisa[b-qlgosgrm9u]                 { background: #e8eef4; color: #2c5f8a; }
    .account-icon.gia[b-qlgosgrm9u]                  { background: #e4eaf0; color: #0f2440; }
    .account-icon.pension[b-qlgosgrm9u],
    .account-icon.sipp[b-qlgosgrm9u]                 { background: #e9e5ee; color: #453960; }
    .account-icon.pension-accumulation[b-qlgosgrm9u] { background: #eae6f0; color: #4a3d6b; }
    .account-icon.pension-drawdown[b-qlgosgrm9u]     { background: #f0ebe2; color: #8a6d35; }
    .account-icon.pension-beneficiary[b-qlgosgrm9u]  { background: #e4ecee; color: #3a6470; }
    .account-icon.cash-account[b-qlgosgrm9u]         { background: #ebeef1; color: #4b5c72; }
    .account-icon.offshore-bond[b-qlgosgrm9u]        { background: #ede8e4; color: #6b4f3d; }
    .account-icon.default[b-qlgosgrm9u]              { background: #ebeef1; color: #4b5c72; }

    .account-info[b-qlgosgrm9u] { flex: 1; min-width: 0; }
    .account-name[b-qlgosgrm9u] { font-weight: 600; color: #1e293b; font-size: 14px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .account-type[b-qlgosgrm9u] { font-size: 12px; color: #94a3b8; }

    .account-strategy-row[b-qlgosgrm9u] {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 16px;
    }

    .strategy-label[b-qlgosgrm9u] {
        font-size: 11px;
        color: #b0b8c4;
    }

    .strategy-name[b-qlgosgrm9u] {
        font-size: 12px;
        color: #64748b;
    }

    .recurring-indicators[b-qlgosgrm9u] {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-left: auto;
    }

    .recurring-in[b-qlgosgrm9u], .recurring-out[b-qlgosgrm9u] {
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    .recurring-in[b-qlgosgrm9u] {
        color: #059669;
    }

    .recurring-out[b-qlgosgrm9u] {
        color: #dc2626;
    }

    .recurring-in i[b-qlgosgrm9u], .recurring-out i[b-qlgosgrm9u] {
        font-size: 9px;
        margin-right: 2px;
    }

    .recurring-freq[b-qlgosgrm9u] {
        color: #94a3b8;
        font-weight: 400;
    }

    .status-badge[b-qlgosgrm9u] {
        flex-shrink: 0;
        align-self: flex-start;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 10px;
    }

    .status-badge.active[b-qlgosgrm9u], .status-badge.open[b-qlgosgrm9u] {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.suspended[b-qlgosgrm9u] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.closed[b-qlgosgrm9u] {
        background: #f1f5f9;
        color: #64748b;
    }

    .status-badge.registered[b-qlgosgrm9u], .status-badge.pending[b-qlgosgrm9u] {
        background: #e0f2fe;
        color: #0369a1;
    }

    .status-dot[b-qlgosgrm9u] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .status-dot.open[b-qlgosgrm9u], .status-dot.active[b-qlgosgrm9u] { background: #10b981; }
    .status-dot.suspended[b-qlgosgrm9u] { background: #f59e0b; }
    .status-dot.closed[b-qlgosgrm9u] { background: #94a3b8; }

    .status-active[b-qlgosgrm9u] {
        color: #10b981;
        font-weight: 500;
    }

    .account-values[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding-top: 14px;
        border-top: 1px solid #e2e8f0;
    }

    .account-value-item .value[b-qlgosgrm9u] {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.2;
    }

    .account-value-item .label[b-qlgosgrm9u] {
        display: block;
        font-size: 10px;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }

    .account-value-item .value.positive[b-qlgosgrm9u] { color: #059669; }
    .account-value-item .value.negative[b-qlgosgrm9u] { color: #dc2626; }

    .account-positions[b-qlgosgrm9u] {
        padding-top: 12px;
    }

    .positions-header[b-qlgosgrm9u] {
        font-size: 12px;
        color: #64748b;
        margin-bottom: 8px;
    }

    .position-row[b-qlgosgrm9u] {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        font-size: 13px;
    }

    .position-name[b-qlgosgrm9u] {
        color: #475569;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70%;
    }

    .position-value[b-qlgosgrm9u] {
        color: #1e293b;
        font-weight: 500;
    }

    .positions-more[b-qlgosgrm9u] {
        font-size: 12px;
        color: #64748b;
        padding-top: 8px;
    }

    .account-loading[b-qlgosgrm9u] {
        padding: 20px;
        text-align: center;
        color: #94a3b8;
    }

    .empty-accounts[b-qlgosgrm9u], .empty-holdings[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px;
        color: #94a3b8;
        gap: 12px;
    }

    .empty-accounts i[b-qlgosgrm9u], .empty-holdings i[b-qlgosgrm9u] { font-size: 48px; }

    /* Details Grid - override to grey-tinted cards on white background */
    .info-card[b-qlgosgrm9u] {
        background: #f8fafc;
        box-shadow: none;
        border: 1px solid #e2e8f0;
        transition: box-shadow 0.2s ease;
    }

    .info-card:hover[b-qlgosgrm9u] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    /* ===== COMPLIANCE & DOCUMENTS SECTION ===== */
    .compliance-docs-section[b-qlgosgrm9u] {
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .compliance-panel-title[b-qlgosgrm9u] {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        padding-bottom: 12px;
        border-bottom: 1px solid #e2e8f0;
    }

    .compliance-docs-body[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 180px;
    }

    .compliance-status-panel[b-qlgosgrm9u] {
        padding: 20px 24px;
        border-right: 1px solid #e2e8f0;
    }

    .compliance-items[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .compliance-item[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
    }

    .compliance-label[b-qlgosgrm9u] {
        font-size: 14px;
        color: #64748b;
    }

    .compliance-value[b-qlgosgrm9u] {
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .compliance-value.yes[b-qlgosgrm9u] { color: #059669; }
    .compliance-value.yes i[b-qlgosgrm9u] { color: #10b981; }
    .compliance-value.no[b-qlgosgrm9u] { color: #94a3b8; }
    .compliance-value.no i[b-qlgosgrm9u] { color: #cbd5e1; }

    .compliance-docs-panel[b-qlgosgrm9u] {
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .compliance-no-link[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px;
        color: #94a3b8;
        font-size: 0.875rem;
    }

    .doc-drop-zone[b-qlgosgrm9u] {
        border: 2px dashed #cbd5e1;
        border-radius: 10px;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        background: #fafbfc;
    }

    .doc-drop-zone:hover[b-qlgosgrm9u],
    .doc-drop-zone.drag-over[b-qlgosgrm9u] {
        border-color: #1e3a5f;
        background: #f0f4f8;
    }

    .doc-drop-content[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: #94a3b8;
        font-size: 13px;
    }

    .doc-drop-content i[b-qlgosgrm9u] {
        font-size: 24px;
        color: #cbd5e1;
    }

    .doc-drop-zone:hover .doc-drop-content i[b-qlgosgrm9u],
    .doc-drop-zone.drag-over .doc-drop-content i[b-qlgosgrm9u] {
        color: #1e3a5f;
    }

    .doc-drop-hint[b-qlgosgrm9u] {
        font-size: 12px;
        color: #cbd5e1;
    }

    .doc-list[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .doc-item[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .doc-item:hover[b-qlgosgrm9u] {
        border-color: #1e3a5f;
        background: #f0f4f8;
    }

    .doc-item i[b-qlgosgrm9u] {
        color: #dc2626;
        font-size: 16px;
    }

    .doc-name[b-qlgosgrm9u] {
        flex: 1;
        color: #1e293b;
        font-weight: 500;
    }

    .doc-date[b-qlgosgrm9u] {
        color: #94a3b8;
        font-size: 12px;
    }

    /* ===== CLIENT DETAILS SECTION ===== */
    .details-section[b-qlgosgrm9u] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .details-cards-grid[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    .asset-name[b-qlgosgrm9u] {
        font-weight: 500;
        color: #1e293b;
    }

    .asset-isin[b-qlgosgrm9u] {
        font-size: 12px;
        color: #94a3b8;
        font-family: monospace;
    }

    .account-col[b-qlgosgrm9u] {
        font-size: 13px;
        color: #64748b;
    }

    .positive[b-qlgosgrm9u] { color: #059669; }
    .negative[b-qlgosgrm9u] { color: #dc2626; }

    /* ===== SHIMMER LOADING ===== */
    .shimmer-page[b-qlgosgrm9u] {
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .shimmer-header[b-qlgosgrm9u] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .shimmer-circle[b-qlgosgrm9u] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }

    .shimmer-circle[b-qlgosgrm9u]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-qlgosgrm9u 1.5s ease-in-out infinite;
    }

    .shimmer-header-text[b-qlgosgrm9u] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .shimmer-quick-links[b-qlgosgrm9u] {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }

    .shimmer-pill[b-qlgosgrm9u] {
        width: 100px;
        height: 40px;
        border-radius: 8px;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
    }

    .shimmer-pill[b-qlgosgrm9u]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-qlgosgrm9u 1.5s ease-in-out infinite;
    }

    .shimmer-line[b-qlgosgrm9u] {
        height: 14px;
        border-radius: 6px;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
    }

    .shimmer-line[b-qlgosgrm9u]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-qlgosgrm9u 1.5s ease-in-out infinite;
    }

    .shimmer-line.large[b-qlgosgrm9u] { height: 28px; border-radius: 8px; }
    .shimmer-line.w30[b-qlgosgrm9u] { width: 30%; }
    .shimmer-line.w40[b-qlgosgrm9u] { width: 40%; }
    .shimmer-line.w50[b-qlgosgrm9u] { width: 50%; }
    .shimmer-line.w55[b-qlgosgrm9u] { width: 55%; }
    .shimmer-line.w60[b-qlgosgrm9u] { width: 60%; }
    .shimmer-line.w65[b-qlgosgrm9u] { width: 65%; }
    .shimmer-line.w70[b-qlgosgrm9u] { width: 70%; }
    .shimmer-line.w75[b-qlgosgrm9u] { width: 75%; }
    .shimmer-line.w80[b-qlgosgrm9u] { width: 80%; }
    .shimmer-line.w85[b-qlgosgrm9u] { width: 85%; }
    .shimmer-line.w90[b-qlgosgrm9u] { width: 90%; }

    .shimmer-line.light[b-qlgosgrm9u] {
        background: rgba(255,255,255,0.12);
    }

    .shimmer-line.light[b-qlgosgrm9u]::after {
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-qlgosgrm9u 1.5s ease-in-out infinite;
    }

    .shimmer-value-cards[b-qlgosgrm9u] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    .shimmer-value-card[b-qlgosgrm9u] {
        background: white;
        border-radius: 12px;
        padding: 24px;
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .shimmer-value-card.primary[b-qlgosgrm9u] {
        background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
        border: none;
    }

    .shimmer-chart-circle[b-qlgosgrm9u] {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        margin: 12px auto 16px;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
    }

    .shimmer-chart-circle[b-qlgosgrm9u]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-qlgosgrm9u 1.5s ease-in-out infinite;
    }

    .shimmer-tabs[b-qlgosgrm9u] {
        display: flex;
        gap: 8px;
    }

    .shimmer-tab[b-qlgosgrm9u] {
        width: 90px;
        height: 36px;
        border-radius: 6px;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
    }

    .shimmer-tab[b-qlgosgrm9u]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-qlgosgrm9u 1.5s ease-in-out infinite;
    }

    .shimmer-tab:nth-child(2)[b-qlgosgrm9u]::after { animation-delay: 0.1s; }
    .shimmer-tab:nth-child(3)[b-qlgosgrm9u]::after { animation-delay: 0.2s; }
    .shimmer-tab:nth-child(4)[b-qlgosgrm9u]::after { animation-delay: 0.3s; }

    .shimmer-legend[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 8px;
    }

    .shimmer-holdings[b-qlgosgrm9u] {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 12px;
    }

    /* Stagger shimmer animations for a natural feel */
    .shimmer-pill:nth-child(2)[b-qlgosgrm9u]::after { animation-delay: 0.2s; }
    .shimmer-pill:nth-child(3)[b-qlgosgrm9u]::after { animation-delay: 0.4s; }
    .shimmer-holdings .shimmer-line:nth-child(2)[b-qlgosgrm9u]::after { animation-delay: 0.15s; }
    .shimmer-holdings .shimmer-line:nth-child(3)[b-qlgosgrm9u]::after { animation-delay: 0.3s; }
    .shimmer-holdings .shimmer-line:nth-child(4)[b-qlgosgrm9u]::after { animation-delay: 0.45s; }
    .shimmer-holdings .shimmer-line:nth-child(5)[b-qlgosgrm9u]::after { animation-delay: 0.6s; }
    .shimmer-holdings .shimmer-line:nth-child(6)[b-qlgosgrm9u]::after { animation-delay: 0.75s; }
    .shimmer-holdings .shimmer-line:nth-child(7)[b-qlgosgrm9u]::after { animation-delay: 0.9s; }
    .shimmer-holdings .shimmer-line:nth-child(8)[b-qlgosgrm9u]::after { animation-delay: 1.05s; }

    @keyframes shimmer-b-qlgosgrm9u {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ===== FADE IN (data loaded) ===== */
    .fade-in[b-qlgosgrm9u] {
        animation: fadeIn-b-qlgosgrm9u 0.4s ease-out;
    }

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

/* ===== RESPONSIVE — SECCL CLIENT DETAIL PAGE ===== */
/* Extracted from pages.css → scoped to PwsClientDetail.razor */

/* Tablet (768-1280): quick links drop to own row, value cards 2-col */
@media (max-width: 1280px) {
    .client-detail-content .client-header[b-qlgosgrm9u] {
        flex-wrap: wrap;
    }

    .client-detail-content .quick-links[b-qlgosgrm9u] {
        width: 100%;
        margin-left: 0;
        padding-top: 16px;
        border-top: 1px solid #f1f5f9;
        margin-top: 4px;
    }

    .client-detail-content .value-cards[b-qlgosgrm9u] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .client-detail-content .card-value[b-qlgosgrm9u] {
        font-size: 26px;
    }

    .client-detail-content .accounts-grid[b-qlgosgrm9u] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dashboard widget cards: 2-col on tablet landscape */
    .client-detail-content .dashboard-row[b-qlgosgrm9u] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .client-detail-content .compliance-docs-body[b-qlgosgrm9u] {
        grid-template-columns: 1fr;
    }

    .client-detail-content .compliance-status-panel[b-qlgosgrm9u] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* Phone (<768): single column everything, tighter spacing */
@media (max-width: 767px) {
    .client-detail-content[b-qlgosgrm9u] {
        padding: 16px;
        min-width: 0 !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .client-detail-content .client-header[b-qlgosgrm9u] {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .client-detail-content .back-btn[b-qlgosgrm9u] {
        width: 36px;
        height: 36px;
    }

    .client-detail-content .client-avatar[b-qlgosgrm9u],
    .client-detail-content .client-avatar-img[b-qlgosgrm9u] {
        width: 48px;
        height: 48px;
    }

    .client-detail-content .client-name-row h1[b-qlgosgrm9u] {
        font-size: 18px;
    }

    .client-detail-content .client-name-row[b-qlgosgrm9u] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .client-detail-content .client-meta[b-qlgosgrm9u] {
        gap: 12px;
        font-size: 12px;
    }

    .client-detail-content .quick-links[b-qlgosgrm9u] {
        width: 100%;
        margin-left: 0;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
        margin-top: 4px;
    }

    .client-detail-content .quick-link[b-qlgosgrm9u] {
        flex: 1 !important;
        justify-content: center !important;
        padding: 8px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    .client-detail-content .value-cards[b-qlgosgrm9u] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .client-detail-content .value-card[b-qlgosgrm9u] {
        padding: 18px;
    }

    .client-detail-content .card-value[b-qlgosgrm9u] {
        font-size: 24px;
    }

    .client-detail-content .dashboard-section[b-qlgosgrm9u] {
        padding: 16px;
    }

    .client-detail-content .dashboard-row[b-qlgosgrm9u] {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .client-detail-content .widget-card[b-qlgosgrm9u] {
        padding: 18px 20px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .client-detail-content .css-doughnut[b-qlgosgrm9u] {
        width: 160px;
        height: 160px;
    }

    .client-detail-content .doughnut-value[b-qlgosgrm9u] {
        font-size: 16px;
    }

    .client-detail-content .accounts-grid[b-qlgosgrm9u] {
        grid-template-columns: 1fr;
    }

    .client-detail-content .account-card[b-qlgosgrm9u] {
        padding: 16px;
    }

    .client-detail-content .account-header[b-qlgosgrm9u] {
        margin-bottom: 14px;
    }

    .client-detail-content .account-name[b-qlgosgrm9u] {
        font-size: 13px;
    }

    .client-detail-content .account-strategy-row[b-qlgosgrm9u] {
        margin-bottom: 14px;
        padding: 6px 10px;
    }

    .client-detail-content .account-value-item .value[b-qlgosgrm9u] {
        font-size: 14px;
    }

    .client-detail-content .details-cards-grid[b-qlgosgrm9u] {
        grid-template-columns: 1fr;
    }

    .client-detail-content .holdings-table th[b-qlgosgrm9u],
    .client-detail-content .holdings-table td[b-qlgosgrm9u] {
        padding: 10px 12px;
        font-size: 13px;
    }
}
/* /Components/Pages/Pws/PwsClientEdit.razor.rz.scp.css */
    /* Page container - constrained height for SmartForm to work */
    .edit-page[b-fuepdrwzrq] {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #f8fafc;
        overflow: hidden;
    }

    .loading-state[b-fuepdrwzrq], .error-state[b-fuepdrwzrq] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: #64748b;
        gap: 16px;
    }

    .loading-state i[b-fuepdrwzrq], .error-state i[b-fuepdrwzrq] { font-size: 48px; }
    .error-state i[b-fuepdrwzrq] { color: #ef4444; }
    .error-state h3[b-fuepdrwzrq] { margin: 0; color: #1e293b; }

    /* Back button in SmartForm header - subtle, not prominent */
    .back-btn[b-fuepdrwzrq] {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        cursor: pointer;
        color: #64748b;
        font-size: 12px;
        transition: all 0.15s;
    }

    .back-btn:hover[b-fuepdrwzrq] {
        background: #f1f5f9;
        border-color: #94a3b8;
        color: #475569;
    }

    /* Form Content */
    .form-content[b-fuepdrwzrq] {
        max-width: 900px;
    }

    .form-hint[b-fuepdrwzrq] {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 32px;
    }

    /* Form Groups - page-specific overrides only */
    /* Note: .required, .form-section, .section-header, .section-status, .section-divider, .section-intro
       are all in SmartForm.razor.css - DO NOT duplicate here */
    .form-group[b-fuepdrwzrq] {
        margin-bottom: 20px;
    }

    .form-group label[b-fuepdrwzrq] {
        display: block;
        font-size: 14px;
        color: #475569;
        margin-bottom: 8px;
        font-weight: 500;
    }

    /* Override for checkbox labels - use grid layout */
    .form-group label.checkbox-option[b-fuepdrwzrq] {
        display: grid;
        grid-template-columns: 20px 1fr;
        gap: 12px;
        align-items: start;  /* Top-align checkbox with first line of text */
        margin-bottom: 0;
    }

    .form-group input[type="text"][b-fuepdrwzrq],
    .form-group input[type="email"][b-fuepdrwzrq],
    .form-group input[type="tel"][b-fuepdrwzrq],
    .form-group input[type="date"][b-fuepdrwzrq],
    .form-group input[type="number"][b-fuepdrwzrq],
    .form-group select[b-fuepdrwzrq] {
        width: 100%;
        max-width: 400px;
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 14px;
        color: #1e293b;
        background: white;
        transition: border-color 0.15s;
    }

    .form-group input:focus[b-fuepdrwzrq],
    .form-group select:focus[b-fuepdrwzrq] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-group input[b-fuepdrwzrq]::placeholder {
        color: #94a3b8;
    }

    .input-short[b-fuepdrwzrq] {
        max-width: 200px !important;
    }

    .form-select[b-fuepdrwzrq] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px;
    }

    .input-with-icon[b-fuepdrwzrq] {
        display: flex;
        gap: 8px;
        max-width: 400px;
    }

    .input-with-icon input[b-fuepdrwzrq] {
        flex: 1;
        max-width: none !important;
    }

    .icon-btn[b-fuepdrwzrq] {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        cursor: pointer;
        color: #64748b;
    }

    .icon-btn:hover[b-fuepdrwzrq] {
        background: #e2e8f0;
        color: #1e293b;
    }

    .input-with-action[b-fuepdrwzrq] {
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 400px;
    }

    .input-with-action input[b-fuepdrwzrq] {
        flex: 1;
    }

    .companies-house-link[b-fuepdrwzrq] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: #1d4ed8;
        text-decoration: none;
        transition: color 0.15s;
    }

    .companies-house-link:hover[b-fuepdrwzrq] {
        color: #1e40af;
    }

    .companies-house-link i[b-fuepdrwzrq] {
        font-size: 1.1rem;
    }

    .field-hint[b-fuepdrwzrq] {
        font-size: 12px;
        color: #94a3b8;
        margin-top: 6px;
    }

    .field-error[b-fuepdrwzrq] {
        font-size: 12px;
        color: #dc2626;
        margin-top: 6px;
    }

    .field-success[b-fuepdrwzrq] {
        font-size: 12px;
        color: #10b981;
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .input-error[b-fuepdrwzrq] {
        border-color: #dc2626 !important;
    }

    .input-error:focus[b-fuepdrwzrq] {
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
    }

    .address-results[b-fuepdrwzrq] {
        margin-top: 12px;
        width: 100%;
        max-width: 400px;
    }

    /* Phone input with country code */
    .phone-input-row[b-fuepdrwzrq] {
        display: flex;
        gap: 8px;
        max-width: 400px;
    }

    .phone-input-row .country-code-select[b-fuepdrwzrq] {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        flex-shrink: 0;
        padding: 10px 8px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        background: #f9fafb;
        color: #374151;
    }

    .phone-input-row .country-code-select:focus[b-fuepdrwzrq] {
        outline: none;
        border-color: #1e3a5f;
        box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    }

    .phone-input-row input[type="tel"][b-fuepdrwzrq] {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 14px;
        color: #1e293b;
        background: white;
    }

    .phone-input-row input[type="tel"]:focus[b-fuepdrwzrq] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .phone-input-row input[type="tel"][b-fuepdrwzrq]::placeholder {
        color: #94a3b8;
    }

    /* Multi-select rows (nationalities, etc.) */
    .multi-select-row[b-fuepdrwzrq] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .multi-select-row:last-child[b-fuepdrwzrq] {
        margin-bottom: 0;
    }

    .multi-select-row .form-select[b-fuepdrwzrq] {
        flex: 1;
    }

    .remove-btn[b-fuepdrwzrq] {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.15s;
        flex-shrink: 0;
    }

    .remove-btn:hover[b-fuepdrwzrq] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #ef4444;
    }

    .nationality-row[b-fuepdrwzrq] {
        margin-bottom: 12px;
    }

    .nationality-row:last-child[b-fuepdrwzrq] {
        margin-bottom: 0;
    }

    .passport-field[b-fuepdrwzrq] {
        margin-top: 8px;
        margin-left: 16px;
        padding-left: 12px;
        border-left: 2px solid #e2e8f0;
    }

    .passport-field label[b-fuepdrwzrq] {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 4px;
        display: block;
    }

    .passport-detail[b-fuepdrwzrq] {
        color: #64748b;
        font-size: 13px;
    }

    .link-btn[b-fuepdrwzrq] {
        background: transparent;
        border: none;
        color: #3b82f6;
        font-size: 14px;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .link-btn:hover[b-fuepdrwzrq] {
        text-decoration: underline;
    }

    .info-icon[b-fuepdrwzrq] {
        color: #94a3b8;
        font-size: 12px;
        margin-left: 4px;
        cursor: help;
    }

    /* Radio Groups */
    .radio-group[b-fuepdrwzrq] {
        display: flex;
        flex-direction: column;
    }

    .radio-group > label:first-child[b-fuepdrwzrq] {
        display: block;
        margin-bottom: 8px;
    }

    .radio-options[b-fuepdrwzrq] {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .radio-option[b-fuepdrwzrq] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-weight: 400 !important;
        line-height: 1;
    }

    .radio-option input[type="radio"][b-fuepdrwzrq] {
        width: 18px;
        height: 18px;
        margin: 0;
        flex-shrink: 0;
        accent-color: #1e3a5f;
        cursor: pointer;
    }

    .radio-option span[b-fuepdrwzrq] {
        line-height: 1;
    }

    /* Checkbox Groups */
    .checkbox-group[b-fuepdrwzrq] {
        margin-top: 8px;
    }

    .checkbox-option[b-fuepdrwzrq] {
        display: grid;
        grid-template-columns: 20px 1fr;
        gap: 12px;
        cursor: pointer;
        font-weight: 400 !important;
        line-height: 1.5;
        align-items: start;
    }

    .checkbox-option input[type="checkbox"][b-fuepdrwzrq] {
        width: 18px;
        height: 18px;
        margin-top: 3px;
        accent-color: #1e3a5f;
    }

    .checkbox-option span[b-fuepdrwzrq] {
        display: block;
    }

    .aml-checkbox span[b-fuepdrwzrq] {
        font-size: 13px;
        color: #475569;
    }

    /* Info Box (FCA support etc.) */
    .info-box[b-fuepdrwzrq] {
        background: #f0f9ff;
        border-left: 4px solid #3b82f6;
        padding: 16px;
        border-radius: 0 8px 8px 0;
        margin: 16px 0;
    }

    .info-box-header[b-fuepdrwzrq] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: #1e3a5f;
    }

    .info-box-header i[b-fuepdrwzrq] {
        color: #3b82f6;
    }

    .info-box p[b-fuepdrwzrq] {
        margin: 0;
        font-size: 14px;
        color: #475569;
    }

    .info-box a[b-fuepdrwzrq] {
        color: #3b82f6;
    }

    .info-box-light[b-fuepdrwzrq] {
        background: #f8fafc;
        border-left-color: #94a3b8;
    }

    .info-box-light .info-box-header i[b-fuepdrwzrq] {
        color: #64748b;
    }

    /* Passport section for non-GB nationalities */
    .passport-section[b-fuepdrwzrq] {
        margin-top: 12px;
        margin-left: 24px;
        padding-left: 16px;
        border-left: 2px solid #e2e8f0;
    }

    .passport-question[b-fuepdrwzrq] {
        margin-bottom: 12px;
    }

    .passport-question label[b-fuepdrwzrq] {
        font-size: 14px;
        font-weight: 500;
        color: #334155;
    }

    .passport-section .radio-options.inline[b-fuepdrwzrq] {
        display: flex;
        gap: 24px;
        margin-top: 8px;
    }

    .passport-section .passport-field[b-fuepdrwzrq] {
        margin-top: 12px;
    }

    .passport-section .info-box[b-fuepdrwzrq] {
        margin-top: 8px;
        margin-bottom: 0;
    }

    /* Checkbox List (vertical stack for support reasons) */
    .checkbox-list[b-fuepdrwzrq] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 8px;
    }

    /* Review mode styling is handled by SmartForm.razor.css */

    /* Success Animation - uses shared SuccessAnimation component */
    .success-overlay-inline[b-fuepdrwzrq] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        padding: 48px;
    }
/* /Components/Pages/Pws/PwsCompliance.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   SUMMARY CARDS — matches PwsSign pattern
   ═══════════════════════════════════════════════════════ */

.pws-summary-cards[b-x8xe59avwq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.pws-summary-card[b-x8xe59avwq] {
    background: white;
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: default;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.pws-summary-card:hover[b-x8xe59avwq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pws-summary-icon[b-x8xe59avwq] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.pws-summary-card.total .pws-summary-icon[b-x8xe59avwq] { background: #e0e7ff; color: #4f46e5; }
.pws-summary-card.passed .pws-summary-icon[b-x8xe59avwq] { background: #d1fae5; color: #059669; }
.pws-summary-card.failed .pws-summary-icon[b-x8xe59avwq] { background: #fee2e2; color: #dc2626; }

.pws-summary-value[b-x8xe59avwq] { font-size: 36px; font-weight: 700; color: #1e293b; line-height: 1; }
.pws-summary-label[b-x8xe59avwq] { font-size: 15px; color: #64748b; margin-top: 6px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════
   TABLE — matches PwsSign pattern
   ═══════════════════════════════════════════════════════ */

.pws-table-container[b-x8xe59avwq] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.pws-table[b-x8xe59avwq] { width: 100%; border-collapse: collapse; }

.pws-table th[b-x8xe59avwq] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.pws-table th.sortable[b-x8xe59avwq] { cursor: pointer; }
.pws-table th.sortable:hover[b-x8xe59avwq] { color: #1e293b; }
.pws-table th i[b-x8xe59avwq] { font-size: 10px; margin-left: 4px; opacity: 0.4; }
.pws-table th.sort-asc i[b-x8xe59avwq], .pws-table th.sort-desc i[b-x8xe59avwq] { opacity: 1; color: #1e3a5f; }

.pws-table td[b-x8xe59avwq] {
    padding: 14px 16px;
    font-size: 14px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

.pws-table tr[b-x8xe59avwq] { cursor: pointer; }
.pws-table tr:hover[b-x8xe59avwq] { background: #f8fafc; }

.pws-client-link[b-x8xe59avwq] { color: #1e3a5f; font-weight: 500; }
.sub-text[b-x8xe59avwq] { font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* ── Status badges ── */
.pws-badge[b-x8xe59avwq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pws-badge.pass[b-x8xe59avwq] {
    background: #d1fae5;
    color: #059669;
}

.pws-badge.fail[b-x8xe59avwq] {
    background: #fee2e2;
    color: #dc2626;
}

/* Summary cell truncation */
.summary-cell[b-x8xe59avwq] {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading / empty states */
.loading-state[b-x8xe59avwq], .empty-state[b-x8xe59avwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px;
    color: #64748b;
    gap: 12px;
}

.empty-state h3[b-x8xe59avwq] { margin: 0 0 8px; font-size: 18px; color: #64748b; }
.empty-state p[b-x8xe59avwq] { margin: 0; font-size: 14px; }

/* ═══════════════════════════════════════════════════════
   DETAIL SLIDE-OVER PANEL
   ═══════════════════════════════════════════════════════ */

.detail-overlay[b-x8xe59avwq] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-modal[b-x8xe59avwq] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: 90vw;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

.detail-header[b-x8xe59avwq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #e2e8f0;
}

.detail-header h2[b-x8xe59avwq] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
}

.detail-close[b-x8xe59avwq] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.detail-close:hover[b-x8xe59avwq] {
    background: #e2e8f0;
    color: #1e293b;
}

.detail-body[b-x8xe59avwq] {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
}

.detail-row[b-x8xe59avwq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.detail-label[b-x8xe59avwq] {
    color: #64748b;
    font-weight: 500;
}

.detail-section[b-x8xe59avwq] {
    margin-top: 24px;
}

.detail-section h3[b-x8xe59avwq] {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.detail-section p[b-x8xe59avwq] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* ── Check detail items ── */
.check-item[b-x8xe59avwq] {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
}

.check-item.check-pass[b-x8xe59avwq] { background: #f0fdf4; border-color: #bbf7d0; }
.check-item.check-fail[b-x8xe59avwq] { background: #fef2f2; border-color: #fecaca; }
.check-item.check-info[b-x8xe59avwq] { background: #eff6ff; border-color: #bfdbfe; }

.check-item-header[b-x8xe59avwq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.check-item-detail[b-x8xe59avwq] {
    margin-top: 6px;
    padding-left: 24px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* ── Responsive ── */
@@media (max-width: 1024px) {
    .pws-summary-cards[b-x8xe59avwq] { grid-template-columns: repeat(2, 1fr); }
}
@@media (max-width: 640px) {
    .pws-summary-cards[b-x8xe59avwq] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Pws/PwsCreateIllustration.razor.rz.scp.css */
/* SecclCreateIllustration Page Styles */

.illustration-page[b-sgensnxpnd] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-header[b-sgensnxpnd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.header-content[b-sgensnxpnd] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-content h1[b-sgensnxpnd] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
}

.client-badge[b-sgensnxpnd] {
    padding: 0.375rem 0.75rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRODUCT SELECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.product-selection[b-sgensnxpnd] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 2rem;
}

.product-selection h2[b-sgensnxpnd] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.product-selection p[b-sgensnxpnd] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.product-cards[b-sgensnxpnd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.product-card[b-sgensnxpnd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.product-card:hover[b-sgensnxpnd] {
    border-color: var(--primary-color, #1e3a5f);
    background: #f0f9ff;
}

.product-icon[b-sgensnxpnd] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.product-icon.gia[b-sgensnxpnd] {
    background: #dbeafe;
    color: #2563eb;
}

.product-icon.isa[b-sgensnxpnd] {
    background: #dcfce7;
    color: #16a34a;
}

.product-icon.pension[b-sgensnxpnd] {
    background: #fef3c7;
    color: #d97706;
}

.product-icon.drawdown[b-sgensnxpnd] {
    background: #fce7f3;
    color: #db2777;
}

.product-info[b-sgensnxpnd] {
    flex: 1;
}

.product-name[b-sgensnxpnd] {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.product-desc[b-sgensnxpnd] {
    font-size: 0.875rem;
    color: #64748b;
}

.product-card > i:last-child[b-sgensnxpnd] {
    color: #cbd5e1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.product-card:hover > i:last-child[b-sgensnxpnd] {
    color: var(--primary-color, #1e3a5f);
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INLINE STYLES (merged from .razor file)
   ═══════════════════════════════════════════════════════════════════════════════ */

    /* Loading and Error States */
    .loading-state[b-sgensnxpnd] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 4rem;
        color: #64748b;
    }

    .error-page[b-sgensnxpnd], .success-page[b-sgensnxpnd] {
        padding: 2rem;
    }

    .error-banner[b-sgensnxpnd] {
        padding: 1.25rem 1.5rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 8px;
        color: #dc2626;
    }

    .error-banner-header[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 600;
        font-size: 16px;
    }

    .error-banner-message[b-sgensnxpnd] {
        margin: 8px 0 0 0;
        color: #1e293b;
        font-size: 14px;
    }

    .error-field-list[b-sgensnxpnd] {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #fecaca;
        color: #1e293b;
        font-size: 14px;
    }

    .error-field-list ul[b-sgensnxpnd] {
        margin: 6px 0 0 0;
        padding-left: 20px;
    }

    .error-field-list li[b-sgensnxpnd] {
        margin-bottom: 4px;
    }

    .error-actions[b-sgensnxpnd] {
        margin-top: 16px;
        display: flex;
        justify-content: center;
    }

    .success-content[b-sgensnxpnd] {
        text-align: center;
        padding: 2rem;
    }

    .success-actions[b-sgensnxpnd] {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
        flex-wrap: wrap;
    }

    .success-actions .btn-primary[b-sgensnxpnd],
    .success-actions .btn-secondary[b-sgensnxpnd],
    .success-actions .btn-outline[b-sgensnxpnd] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
    }

    .success-actions .btn-primary[b-sgensnxpnd] {
        background: var(--primary-color, #1e3a5f);
        color: white;
        border: none;
    }

    .success-actions .btn-secondary[b-sgensnxpnd] {
        background: #f1f5f9;
        color: #1e293b;
        border: 1px solid #e2e8f0;
    }

    .success-actions .btn-outline[b-sgensnxpnd] {
        background: transparent;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }

    /* Product Selection Page */
    /* Wrapper Cards (Product Type Selection) */
    .wrapper-cards[b-sgensnxpnd] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .wrapper-card[b-sgensnxpnd] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .wrapper-card:hover[b-sgensnxpnd] {
        border-color: #cbd5e1;
        background: #f1f5f9;
    }

    .wrapper-card.selected[b-sgensnxpnd] {
        border-color: #1e3a5f;
        background: #f0f7ff;
    }

    .wrapper-icon[b-sgensnxpnd] {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1e3a5f;
        color: white;
        border-radius: 12px;
        font-size: 24px;
        margin-bottom: 16px;
    }

    .wrapper-icon.isa[b-sgensnxpnd] { background: #059669; }
    .wrapper-icon.pension[b-sgensnxpnd] { background: #7c3aed; }
    .wrapper-icon.drawdown[b-sgensnxpnd] { background: #0891b2; }

    .wrapper-info h3[b-sgensnxpnd] {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .wrapper-info p[b-sgensnxpnd] {
        font-size: 13px;
        color: #64748b;
        margin: 0;
        line-height: 1.4;
    }

    .selected-check[b-sgensnxpnd] {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1e3a5f;
        color: white;
        border-radius: 50%;
        font-size: 12px;
    }

    .back-btn[b-sgensnxpnd] {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: white;
        color: #64748b;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .back-btn:hover[b-sgensnxpnd] {
        background: #f8fafc;
        color: #1e293b;
    }

    /* Section Content */
    .section-content[b-sgensnxpnd] {
        padding: 1.5rem;
    }

    .section-header h2[b-sgensnxpnd] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
    }

    .section-divider[b-sgensnxpnd] {
        height: 1px;
        background: #e2e8f0;
        margin: 1rem 0;
    }

    .section-intro[b-sgensnxpnd] {
        color: #64748b;
        margin-bottom: 1.5rem;
    }

    /* Client Summary */
    .client-summary[b-sgensnxpnd] {
        margin-bottom: 2rem;
    }

    .client-card[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .client-avatar[b-sgensnxpnd] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--primary-color, #1e3a5f);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.125rem;
    }

    .client-info[b-sgensnxpnd] {
        flex: 1;
    }

    .client-name[b-sgensnxpnd] {
        font-weight: 600;
        font-size: 1.125rem;
        color: #1e293b !important;
        margin-bottom: 0.25rem;
    }

    .client-meta[b-sgensnxpnd] {
        display: flex;
        gap: 1.5rem;
        color: #64748b;
        font-size: 0.875rem;
    }

    .client-meta span[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .client-meta i[b-sgensnxpnd] {
        color: #94a3b8;
    }

    /* Investment Step */
    .model-selection[b-sgensnxpnd],
    .bespoke-allocation[b-sgensnxpnd],
    .scheme-section[b-sgensnxpnd],
    .payment-section[b-sgensnxpnd] {
        padding: 1.5rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        margin-bottom: 1.5rem;
    }

    .loading-inline[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #64748b;
    }

    .warning-box[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 6px;
        color: #92400e;
    }

    .error-box[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        color: #dc2626;
        margin-top: 1rem;
    }

    .allocation-row[b-sgensnxpnd] {
        display: flex;
        gap: 0.75rem;
        align-items: flex-end;
        margin-bottom: 0.75rem;
    }

    .allocation-row .firm-form-group:first-child[b-sgensnxpnd] {
        flex: 2;
    }

    .allocation-row .firm-form-group:nth-child(2)[b-sgensnxpnd] {
        flex: 1;
    }

    /* btn-add and btn-remove defined in firm.css */

    .allocation-total[b-sgensnxpnd] {
        margin-top: 1rem;
        font-size: 0.875rem;
        color: #64748b;
    }

    .allocation-total.over[b-sgensnxpnd] {
        color: #dc2626;
        font-weight: 600;
    }

    .over-warning[b-sgensnxpnd] {
        color: #dc2626;
    }

    .scheme-section h4[b-sgensnxpnd],
    .payment-section h4[b-sgensnxpnd] {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .scheme-section h4 i[b-sgensnxpnd],
    .payment-section h4 i[b-sgensnxpnd] {
        color: var(--primary-color, #1e3a5f);
    }

    /* Payment Row */
    .payment-row[b-sgensnxpnd] {
        display: flex;
        gap: 0.75rem;
        align-items: flex-end;
        margin-bottom: 0.75rem;
    }

    .payment-row .firm-form-group[b-sgensnxpnd] {
        flex: 1;
    }

    .regular-payment-card[b-sgensnxpnd] {
        padding: 1rem;
        background: white;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        margin-bottom: 0.75rem;
    }

    /* Fees */
    .fees-grid[b-sgensnxpnd] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .fees-summary[b-sgensnxpnd] {
        margin-top: 1.5rem;
        padding: 1rem;
        background: #f1f5f9;
        border-radius: 8px;
    }

    .total-fee[b-sgensnxpnd] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
    }

    .total-fee strong[b-sgensnxpnd] {
        font-size: 1.25rem;
        color: var(--primary-color, #1e3a5f);
    }

    /* Review uses standard firm-review-* classes from forms.css */
    /* Total row styling - no extra border */
    .firm-review-total[b-sgensnxpnd] {
        font-weight: 600;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
    }

    .required[b-sgensnxpnd] {
        color: #dc2626;
    }

    .is-invalid[b-sgensnxpnd] {
        border-color: #dc2626 !important;
    }

    /* PCLS Indicator (Drawdown Position Step) */
    .pcls-indicator[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: #fef3c7;
        border-radius: 6px;
        color: #92400e;
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .pcls-indicator i[b-sgensnxpnd] {
        color: #d97706;
        font-size: 1rem;
    }

    /* Method Panel - wraps FAD/UFPLS choice and PCLS options */
    .method-panel[b-sgensnxpnd] {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Method Cards (Drawdown Steps) */
    .method-cards[b-sgensnxpnd] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .method-card[b-sgensnxpnd] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .method-card:hover[b-sgensnxpnd] {
        border-color: #cbd5e1;
        background: #f1f5f9;
    }

    .method-card.selected[b-sgensnxpnd] {
        border-color: #1e3a5f;
        background: #f0f7ff;
    }

    .method-icon[b-sgensnxpnd] {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e2e8f0;
        color: #64748b;
        border-radius: 50%;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .method-card.selected .method-icon[b-sgensnxpnd] {
        background: #1e3a5f;
        color: white;
    }

    .method-info h3[b-sgensnxpnd] {
        font-size: 1rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 0.5rem 0;
    }

    .method-info p[b-sgensnxpnd] {
        font-size: 0.875rem;
        color: #64748b;
        margin: 0;
    }

    .pcls-amount-section[b-sgensnxpnd],
    .income-setup-section[b-sgensnxpnd] {
        margin-top: 1.5rem;
        padding: 1.5rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .pcls-section[b-sgensnxpnd] {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
    }

    .pcls-section h4[b-sgensnxpnd] {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1e3a5f;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .pcls-section h4 i[b-sgensnxpnd] {
        color: #10b981;
    }

    .pcls-cards[b-sgensnxpnd] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pcls-card[b-sgensnxpnd] {
        position: relative;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
    }

    .pcls-card:hover[b-sgensnxpnd] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .pcls-card.selected[b-sgensnxpnd] {
        border-color: #10b981;
        background: #f0fdf4;
    }

    .pcls-card-icon[b-sgensnxpnd] {
        font-size: 1.5rem;
        color: #64748b;
        margin-bottom: 0.5rem;
    }

    .pcls-card.selected .pcls-card-icon[b-sgensnxpnd] {
        color: #10b981;
    }

    .pcls-card-content h5[b-sgensnxpnd] {
        margin: 0 0 0.25rem 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
    }

    .pcls-card-amount[b-sgensnxpnd] {
        margin: 0.5rem 0 0.25rem 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #10b981;
    }

    .pcls-card-hint[b-sgensnxpnd] {
        margin: 0;
        font-size: 0.75rem;
        color: #64748b;
    }

    .pcls-card .selected-check[b-sgensnxpnd] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 20px;
        height: 20px;
        background: #10b981;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.75rem;
    }

    .ufpls-info[b-sgensnxpnd] {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
    }

    .ufpls-split[b-sgensnxpnd] {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .split-box[b-sgensnxpnd] {
        text-align: center;
        padding: 1rem 2rem;
        border-radius: 8px;
        min-width: 100px;
    }

    .split-box.tax-free[b-sgensnxpnd] {
        background: #dcfce7;
        border: 1px solid #86efac;
    }

    .split-box.taxable[b-sgensnxpnd] {
        background: #fef3c7;
        border: 1px solid #fcd34d;
    }

    .split-percent[b-sgensnxpnd] {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
    }

    .split-label[b-sgensnxpnd] {
        font-size: 0.875rem;
        color: #64748b;
    }

    .ufpls-note[b-sgensnxpnd] {
        text-align: center;
        color: #64748b;
        font-size: 0.875rem;
        margin: 0;
    }

    .income-preview[b-sgensnxpnd] {
        margin-top: 1rem;
        padding: 1rem;
        background: #f0f7ff;
        border-radius: 6px;
        text-align: center;
    }

    .preview-title[b-sgensnxpnd] {
        font-size: 0.875rem;
        color: #64748b;
        margin-bottom: 0.5rem;
    }

    .preview-amount[b-sgensnxpnd] {
        font-size: 1.25rem;
        color: #1e3a5f;
    }

    .preview-amount strong[b-sgensnxpnd] {
        font-size: 1.5rem;
    }

    .ufpls-breakdown[b-sgensnxpnd] {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 0.75rem;
        font-size: 0.875rem;
    }

    .ufpls-breakdown .tax-free-amount[b-sgensnxpnd] {
        color: #16a34a;
        font-weight: 500;
    }

    .ufpls-breakdown .taxable-amount[b-sgensnxpnd] {
        color: #dc2626;
        font-weight: 500;
    }

    /* DocVault Confirmation */
    .docvault-confirmation[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        background: #f0fdf4;
        border: 1px solid #86efac;
        border-radius: 8px;
        margin: 1.5rem auto;
        max-width: 400px;
    }

    .docvault-icon[b-sgensnxpnd] {
        width: 48px;
        height: 48px;
        background: #dcfce7;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #16a34a;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .docvault-message[b-sgensnxpnd] {
        text-align: left;
    }

    .docvault-message strong[b-sgensnxpnd] {
        display: block;
        color: #166534;
        font-weight: 600;
    }

    .docvault-message p[b-sgensnxpnd] {
        margin: 0.25rem 0 0 0;
        font-size: 0.875rem;
        color: #15803d;
    }

    /* Download Error */
    .download-error[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        color: #dc2626;
        font-size: 0.875rem;
        margin-top: 1rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Disabled button state */
    .success-actions .btn-primary:disabled[b-sgensnxpnd] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* ===== Generation Progress Overlay ===== */
    .generation-overlay[b-sgensnxpnd] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        animation: fadeIn-b-sgensnxpnd 0.3s ease;
    }

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

    .generation-content[b-sgensnxpnd] {
        text-align: center;
        color: #1e293b;
        max-width: 450px;
        padding: 48px 40px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .generation-title[b-sgensnxpnd] {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #1e293b;
    }

    .generation-subtitle[b-sgensnxpnd] {
        font-size: 15px;
        color: #64748b;
        margin-bottom: 32px;
        min-height: 24px;
    }

    .generation-steps[b-sgensnxpnd] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        text-align: left;
        margin-bottom: 32px;
    }

    .gen-step[b-sgensnxpnd] {
        display: flex;
        align-items: center;
        gap: 16px;
        opacity: 0.4;
        transition: opacity 0.3s ease;
    }

    .gen-step.active[b-sgensnxpnd] {
        opacity: 1;
    }

    .gen-step.complete[b-sgensnxpnd] {
        opacity: 0.7;
    }

    .step-indicator[b-sgensnxpnd] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .gen-step.active .step-indicator[b-sgensnxpnd] {
        background: #3b82f6;
        color: white;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }

    .gen-step.complete .step-indicator[b-sgensnxpnd] {
        background: #22c55e;
        color: white;
    }

    .step-spinner[b-sgensnxpnd] {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin-b-sgensnxpnd 0.8s linear infinite;
    }

    @keyframes spin-b-sgensnxpnd {
        to { transform: rotate(360deg); }
    }

    .step-text[b-sgensnxpnd] {
        display: flex;
        flex-direction: column;
    }

    .step-label[b-sgensnxpnd] {
        font-weight: 500;
        font-size: 15px;
        color: #1e293b;
    }

    .step-desc[b-sgensnxpnd] {
        font-size: 13px;
        color: #64748b;
    }

    .generation-reassurance[b-sgensnxpnd] {
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid #e2e8f0;
        text-align: center;
    }

    .bounce-dots[b-sgensnxpnd] {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-bottom: 12px;
    }

    .bounce-dots .dot[b-sgensnxpnd] {
        width: 8px;
        height: 8px;
        background: #94a3b8;
        border-radius: 50%;
        animation: bounce-b-sgensnxpnd 1.4s ease-in-out infinite;
    }

    .bounce-dots .dot:nth-child(1)[b-sgensnxpnd] {
        animation-delay: 0s;
    }

    .bounce-dots .dot:nth-child(2)[b-sgensnxpnd] {
        animation-delay: 0.2s;
    }

    .bounce-dots .dot:nth-child(3)[b-sgensnxpnd] {
        animation-delay: 0.4s;
    }

    @keyframes bounce-b-sgensnxpnd {
        0%, 80%, 100% {
            transform: translateY(0);
            opacity: 0.5;
        }
        40% {
            transform: translateY(-12px);
            opacity: 1;
        }
    }

    .generation-note[b-sgensnxpnd] {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 4px 0;
    }

    .generation-note-sub[b-sgensnxpnd] {
        font-size: 13px;
        color: #64748b;
        margin: 0;
    }
/* /Components/Pages/Pws/PwsDashboard.razor.rz.scp.css */
    .seccl-platform[b-a8vlrpk1mb] {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #f1f5f9;
    }

    .platform-content[b-a8vlrpk1mb] {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        animation: fadeSlideIn-b-a8vlrpk1mb 0.25s ease-out;
    }

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

    /* Dashboard Header Banner — mirrors client-header */
    .dashboard-header[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 24px;
    }

    .dashboard-avatar[b-a8vlrpk1mb] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }

    .dashboard-info[b-a8vlrpk1mb] {
        flex: 1;
        min-width: 0;
    }

    .dashboard-info h1[b-a8vlrpk1mb] {
        margin: 0 0 8px 0;
        font-size: 20px;
        font-weight: 600;
        color: #1e293b;
    }

    .dashboard-meta[b-a8vlrpk1mb] {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        font-size: 13px;
        color: #64748b;
    }

    .dashboard-meta .meta-item[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dashboard-meta .meta-item i[b-a8vlrpk1mb] {
        color: #94a3b8;
    }

    .dashboard-meta .meta-item.error[b-a8vlrpk1mb] {
        color: #dc2626;
    }

    .dashboard-meta .meta-item.error i[b-a8vlrpk1mb] {
        color: #dc2626;
    }

    .dashboard-actions[b-a8vlrpk1mb] {
        display: flex;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* View toggle buttons */
    .view-toggle-btn[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        color: #94a3b8;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.15s;
    }

    .view-toggle-btn:hover[b-a8vlrpk1mb] {
        color: #475569;
        background: #e2e8f0;
    }

    .view-toggle-btn.active[b-a8vlrpk1mb] {
        background: #1e3a5f;
        color: white;
        border-color: #1e3a5f;
    }

    .config-required[b-a8vlrpk1mb] {
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 12px;
        padding: 32px;
        text-align: center;
    }

    .config-icon[b-a8vlrpk1mb] {
        font-size: 48px;
        color: #d97706;
        margin-bottom: 16px;
    }

    .config-required h3[b-a8vlrpk1mb] {
        margin: 0 0 8px 0;
        color: #92400e;
    }

    .config-required p[b-a8vlrpk1mb] {
        color: #78350f;
        margin: 0 0 16px 0;
    }

    .config-example[b-a8vlrpk1mb] {
        background: #1e293b;
        color: #e2e8f0;
        padding: 16px;
        border-radius: 8px;
        text-align: left;
        overflow-x: auto;
        font-size: 13px;
    }


    .refresh-btn[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        color: #475569;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.15s;
    }

    .refresh-btn:hover:not(:disabled)[b-a8vlrpk1mb] {
        background: #e2e8f0;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .refresh-btn:active:not(:disabled)[b-a8vlrpk1mb] {
        transform: translateY(0);
        box-shadow: none;
    }

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

    .stats-grid[b-a8vlrpk1mb] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .stat-card[b-a8vlrpk1mb] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: box-shadow 0.2s ease;
    }

    .stat-card:hover[b-a8vlrpk1mb] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .stat-icon[b-a8vlrpk1mb] {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #1e3a5f;
    }

    .stat-value[b-a8vlrpk1mb] {
        font-size: 28px;
        font-weight: 700;
        color: #1e293b;
    }

    .stat-label[b-a8vlrpk1mb] {
        color: #64748b;
        font-size: 14px;
    }

    .quick-links[b-a8vlrpk1mb] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 24px;
    }

    .quick-links h3[b-a8vlrpk1mb] {
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 16px 0;
    }

    .link-grid[b-a8vlrpk1mb] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    .quick-link[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        color: #475569;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.15s;
    }

    .quick-link:hover[b-a8vlrpk1mb] {
        background: #1e3a5f;
        color: white;
        border-color: #1e3a5f;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .quick-link:active[b-a8vlrpk1mb] {
        transform: translateY(0);
        box-shadow: none;
    }

    .quick-link i[b-a8vlrpk1mb] {
        font-size: 18px;
    }



    /* Dashboard Sections */
    .dashboard-section[b-a8vlrpk1mb] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 24px;
    }

    .dashboard-section h3[b-a8vlrpk1mb] {
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Exception / Transfer Cards */
    .exception-cards[b-a8vlrpk1mb] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 12px;
    }

    .exception-card[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        transition: box-shadow 0.15s ease;
    }

    .exception-card:hover[b-a8vlrpk1mb] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .exception-icon[b-a8vlrpk1mb] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .exception-info[b-a8vlrpk1mb] {
        flex: 1;
    }

    .exception-count[b-a8vlrpk1mb] {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
    }

    .exception-label[b-a8vlrpk1mb] {
        font-size: 13px;
        color: #64748b;
    }

    .exception-action[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        color: #1e3a5f;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.15s ease;
    }

    .exception-action:hover[b-a8vlrpk1mb] {
        background: #1e3a5f;
        color: white;
        border-color: #1e3a5f;
    }

    .toggle-count[b-a8vlrpk1mb] {
        font-weight: 400;
        color: #94a3b8;
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* ===== SHIMMER LOADING — matches client detail ===== */
    .shimmer-page[b-a8vlrpk1mb] {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .shimmer-header[b-a8vlrpk1mb] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .shimmer-circle[b-a8vlrpk1mb] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }

    .shimmer-circle[b-a8vlrpk1mb]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-a8vlrpk1mb 1.5s ease-in-out infinite;
    }

    .shimmer-header-text[b-a8vlrpk1mb] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .shimmer-quick-links[b-a8vlrpk1mb] {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }

    .shimmer-pill[b-a8vlrpk1mb] {
        width: 44px;
        height: 40px;
        border-radius: 8px;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
    }

    .shimmer-pill[b-a8vlrpk1mb]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-a8vlrpk1mb 1.5s ease-in-out infinite;
    }

    .shimmer-pill:nth-child(2)[b-a8vlrpk1mb]::after { animation-delay: 0.2s; }
    .shimmer-pill:nth-child(3)[b-a8vlrpk1mb]::after { animation-delay: 0.4s; }

    .shimmer-line[b-a8vlrpk1mb] {
        height: 14px;
        border-radius: 6px;
        background: #e8edf2;
        position: relative;
        overflow: hidden;
    }

    .shimmer-line[b-a8vlrpk1mb]::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: shimmer-b-a8vlrpk1mb 1.5s ease-in-out infinite;
    }

    .shimmer-line.large[b-a8vlrpk1mb] { height: 28px; border-radius: 8px; }
    .shimmer-line.w30[b-a8vlrpk1mb] { width: 30%; }
    .shimmer-line.w40[b-a8vlrpk1mb] { width: 40%; }
    .shimmer-line.w50[b-a8vlrpk1mb] { width: 50%; }
    .shimmer-line.w60[b-a8vlrpk1mb] { width: 60%; }
    .shimmer-line.w70[b-a8vlrpk1mb] { width: 70%; }
    .shimmer-line.w80[b-a8vlrpk1mb] { width: 80%; }
    .shimmer-line.w85[b-a8vlrpk1mb] { width: 85%; }
    .shimmer-line.w90[b-a8vlrpk1mb] { width: 90%; }

    .shimmer-stats-grid[b-a8vlrpk1mb] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .shimmer-stat-card[b-a8vlrpk1mb] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .shimmer-section-block[b-a8vlrpk1mb] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .shimmer-exception-row[b-a8vlrpk1mb] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    @keyframes shimmer-b-a8vlrpk1mb {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Hierarchy tree view */
    .hierarchy-container[b-a8vlrpk1mb] {
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .hierarchy-header[b-a8vlrpk1mb] {
        padding: 16px 20px;
        border-bottom: 1px solid #e2e8f0;
    }

    .hierarchy-header h3[b-a8vlrpk1mb] {
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tree-content[b-a8vlrpk1mb] {
        padding: 20px 24px;
    }

    /* CSS Tree with connecting lines — ::deep needed because tree HTML is injected via MarkupString */
    [b-a8vlrpk1mb] .org-tree,
    [b-a8vlrpk1mb] .org-tree ul {
        list-style: none;
        margin: 0;
        padding: 0 0 0 28px;
        position: relative;
    }

    [b-a8vlrpk1mb] .org-tree {
        padding-left: 0;
    }

    [b-a8vlrpk1mb] .org-tree li {
        position: relative;
        padding: 4px 0;
    }

    /* Gap between top-level clusters */
    [b-a8vlrpk1mb] .org-tree > li + li {
        margin-top: 28px;
    }

    /* Breathing room between child groups and their parent */
    [b-a8vlrpk1mb] .org-tree ul {
        margin-top: 6px;
    }

    /* Extra gap between sibling nodes that have their own children */
    [b-a8vlrpk1mb] .org-tree ul > li:has(> ul) + li {
        margin-top: 12px;
    }

    /* Vertical line running down from parent */
    [b-a8vlrpk1mb] .org-tree ul > li::before {
        content: '';
        position: absolute;
        left: -16px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #cbd5e1;
    }

    /* Horizontal connector to each node */
    [b-a8vlrpk1mb] .org-tree ul > li::after {
        content: '';
        position: absolute;
        left: -16px;
        top: 22px;
        width: 16px;
        height: 1px;
        background: #cbd5e1;
    }

    /* Last child — vertical line stops at the connector */
    [b-a8vlrpk1mb] .org-tree ul > li:last-child::before {
        bottom: calc(100% - 22px);
    }

    /* Node card */
    [b-a8vlrpk1mb] .org-node {
        display: inline-flex;
        flex-direction: column;
        padding: 8px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        border-left: 3px solid #94a3b8;
        transition: all 0.15s;
        cursor: default;
        max-width: 320px;
    }

    [b-a8vlrpk1mb] .org-node:hover {
        background: #f1f5f9;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        transform: translateX(2px);
    }

    /* Root node — slightly bigger */
    [b-a8vlrpk1mb] .org-tree > li > .org-node {
        padding: 12px 18px;
        background: white;
        border: 1px solid #cbd5e1;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    [b-a8vlrpk1mb] .org-node-type {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 2px;
    }

    [b-a8vlrpk1mb] .org-node-name {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.3;
    }

    [b-a8vlrpk1mb] .org-node-id {
        font-size: 10px;
        color: #94a3b8;
        margin-top: 1px;
    }
/* /Components/Pages/Pws/PwsOpenAccount.razor.rz.scp.css */
/*
    PwsOpenAccount.razor.css - Page-specific styles only
    Shell and common form styles are in SmartForm.razor.css
*/

/* ============================================
   PAGE STATES
   ============================================ */

.loading-state[b-2qva6kjgan], .error-page[b-2qva6kjgan] {
    padding: 24px;
}

.loading-state[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
}

.error-banner[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 12px;
}

/* ============================================
   WRAPPER TYPE SELECTION CARDS
   ============================================ */
.wrapper-cards[b-2qva6kjgan] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wrapper-card[b-2qva6kjgan] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.wrapper-card:hover[b-2qva6kjgan] {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.wrapper-card.selected[b-2qva6kjgan] {
    border-color: #1e3a5f;
    background: #f0f7ff;
}

/* Activation banner — shown when client isn't Active */
.activation-banner[b-2qva6kjgan] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 20px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #92400e;
}

.activation-banner > i[b-2qva6kjgan] {
    font-size: 20px;
    margin-top: 2px;
    color: #d97706;
}

.activation-banner strong[b-2qva6kjgan] {
    display: block;
    margin-bottom: 4px;
    color: #78350f;
}

.activation-banner p[b-2qva6kjgan] {
    margin: 0 0 8px;
    font-size: 14px;
}

.activation-link[b-2qva6kjgan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1e3a5f;
    text-decoration: none;
    font-size: 14px;
}

.activation-link:hover[b-2qva6kjgan] {
    text-decoration: underline;
}

/* Greyed-out cards for non-Active clients */
.cards-disabled[b-2qva6kjgan] {
    opacity: 0.4;
    pointer-events: none;
}

.wrapper-icon[b-2qva6kjgan] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e3a5f;
    color: white;
    border-radius: 12px;
    font-size: 24px;
    margin-bottom: 16px;
}

.wrapper-icon.isa[b-2qva6kjgan] { background: #059669; }
.wrapper-icon.pension[b-2qva6kjgan] { background: #7c3aed; }
.wrapper-icon.pension.drawdown[b-2qva6kjgan] { background: #dc2626; }
.wrapper-icon.pension.beneficiary[b-2qva6kjgan] { background: #9333ea; }
.wrapper-icon.cash[b-2qva6kjgan] { background: #f59e0b; }
.wrapper-icon.bond[b-2qva6kjgan] { background: #0891b2; }

.wrapper-info h3[b-2qva6kjgan] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.wrapper-info p[b-2qva6kjgan] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.selected-check[b-2qva6kjgan] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e3a5f;
    color: white;
    border-radius: 50%;
    font-size: 12px;
}

/* ============================================
   FORM HELPERS (page-specific)
   ============================================ */

.readonly-input[b-2qva6kjgan] {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.form-row[b-2qva6kjgan] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-group[b-2qva6kjgan] {
    display: flex;
}

.input-group input[b-2qva6kjgan] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.input-suffix[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-left: none;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: #64748b;
}

/* ============================================
   UPLOAD ZONE (beneficiary pension transfer forms)
   ============================================ */

.upload-zone[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.upload-zone:hover[b-2qva6kjgan] {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.upload-zone i[b-2qva6kjgan] {
    font-size: 28px;
    color: #94a3b8;
}

.upload-zone p[b-2qva6kjgan] {
    margin: 0;
    font-size: 14px;
    color: #475569;
}

.upload-zone small[b-2qva6kjgan] {
    font-size: 12px;
    color: #94a3b8;
}

.upload-file-list[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.upload-file-item[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.upload-file-item i[b-2qva6kjgan] {
    color: #3b82f6;
    font-size: 16px;
    flex-shrink: 0;
}

.upload-file-item .file-name[b-2qva6kjgan] {
    flex: 1;
    font-size: 14px;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-file-item .file-size[b-2qva6kjgan] {
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
}

.upload-file-item .remove-file-btn[b-2qva6kjgan] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.upload-file-item .remove-file-btn:hover[b-2qva6kjgan] {
    color: #dc2626;
}

/* ============================================
   BENEFICIARIES LIST (SIPP only)
   ============================================ */
.beneficiary-list[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.beneficiary-row[b-2qva6kjgan] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.beneficiary-fields[b-2qva6kjgan] {
    display: flex;
    gap: 12px;
    flex: 1;
}

.beneficiary-fields > input[b-2qva6kjgan],
.beneficiary-fields > select[b-2qva6kjgan] {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
}

.beneficiary-fields > input:first-child[b-2qva6kjgan] {
    flex: 1;
}

.beneficiary-fields > select[b-2qva6kjgan] {
    width: 140px;
}

.percentage-input[b-2qva6kjgan] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    width: 90px;
    flex-shrink: 0;
}

.percentage-input input[b-2qva6kjgan] {
    width: 55px !important;
    flex: 0 0 55px !important;
    padding: 10px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px 0 0 6px !important;
    border-right: none;
    font-size: 14px;
    text-align: right;
}

.percentage-suffix[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    flex: 0 0 35px;
    padding: 10px 0;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: #64748b;
}

.remove-btn[b-2qva6kjgan] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    color: #dc2626;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.remove-btn:hover[b-2qva6kjgan] {
    background: #fee2e2;
    border-color: #f87171;
    color: #dc2626;
}

.percentage-warning[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fef3c7;
    border-radius: 6px;
    font-size: 13px;
    color: #92400e;
}

.percentage-warning.error[b-2qva6kjgan] {
    background: #fef2f2;
    color: #dc2626;
}

.percentage-warning.highlighted[b-2qva6kjgan] {
    animation: shake-b-2qva6kjgan 0.5s ease-in-out;
}

/* Field validation error highlighting */
.field-error[b-2qva6kjgan],
input.field-error[b-2qva6kjgan],
select.field-error[b-2qva6kjgan],
.percentage-input.field-error[b-2qva6kjgan] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    animation: shake-b-2qva6kjgan 0.5s ease-in-out;
}

.percentage-input.field-error input[b-2qva6kjgan] {
    background-color: #fef2f2;
}

@keyframes shake-b-2qva6kjgan {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Review step uses firm-review-* classes from forms.css */

/* Submit error styling */
.submit-error[b-2qva6kjgan] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #dc2626;
}

.submit-error i[b-2qva6kjgan] {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 2px;
}

.submit-error .error-content[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submit-error strong[b-2qva6kjgan] {
    font-weight: 600;
}

.submit-error span[b-2qva6kjgan] {
    font-size: 14px;
    color: #b91c1c;
}

/* Edit link button */
.edit-link[b-2qva6kjgan] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

.edit-link:hover[b-2qva6kjgan] {
    text-decoration: underline;
}

/* Debug section styling */
.debug-section[b-2qva6kjgan] {
    background: #1e293b;
    border-radius: 8px;
    padding: 16px;
    margin-top: 32px;
}

.debug-section-header[b-2qva6kjgan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.debug-section .debug-title[b-2qva6kjgan] {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-section .debug-title i[b-2qva6kjgan] {
    color: #60a5fa;
}

.debug-section .edit-link[b-2qva6kjgan] {
    color: #60a5fa;
    font-size: 13px;
}

/* Error message styling */
.submit-error .error-message[b-2qva6kjgan] {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 14px;
    color: #b91c1c;
    background: transparent;
    border: none;
    padding: 0;
}

.submit-error .error-status[b-2qva6kjgan] {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    background: #991b1b;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* JSON Preview inside debug section */
.payload-label[b-2qva6kjgan] {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #60a5fa;
    font-family: 'Consolas', 'Monaco', monospace;
}

.payload-label:first-of-type[b-2qva6kjgan] {
    margin-top: 0;
}

.json-preview[b-2qva6kjgan] {
    margin-top: 8px;
    margin-bottom: 16px;
    padding: 16px;
    background: #0f172a;
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Review Actions - debug toggle and submit */
.review-actions[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.debug-toggle[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    margin-right: auto;
}

.debug-toggle input[b-2qva6kjgan] {
    cursor: pointer;
}

/* Debug Panel */
.debug-panel[b-2qva6kjgan] {
    margin-top: 32px;
    margin-bottom: 48px;
    background: #1e293b;
    border-radius: 8px;
    color: #e2e8f0;
}

.debug-panel-header[b-2qva6kjgan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.debug-panel-header:hover[b-2qva6kjgan] {
    background: #334155;
    border-radius: 8px 8px 0 0;
}

.debug-panel h4[b-2qva6kjgan] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-collapse-btn[b-2qva6kjgan] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    transition: color 0.15s;
}

.debug-collapse-btn:hover[b-2qva6kjgan] {
    color: #e2e8f0;
}

.debug-panel-content[b-2qva6kjgan] {
    padding: 0 20px 20px 20px;
}

.debug-section-block[b-2qva6kjgan] {
    margin-bottom: 20px;
    background: #0f172a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #334155;
}

.debug-section-block:last-child[b-2qva6kjgan] {
    margin-bottom: 0;
}

.debug-section-block.success[b-2qva6kjgan] {
    border-color: #22c55e;
}

.debug-section-block.success .debug-block-header[b-2qva6kjgan] {
    background: #166534;
}

.debug-section-block.error[b-2qva6kjgan] {
    border-color: #ef4444;
}

.debug-section-block.error .debug-block-header[b-2qva6kjgan] {
    background: #991b1b;
}

.debug-block-header[b-2qva6kjgan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #334155;
    font-size: 13px;
}

.debug-method[b-2qva6kjgan] {
    color: #a5f3fc;
    font-family: 'Consolas', 'Monaco', monospace;
}

.debug-status[b-2qva6kjgan] {
    color: #fef9c3;
}

.debug-header-right[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payload-header[b-2qva6kjgan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.copy-btn[b-2qva6kjgan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.copy-btn:hover[b-2qva6kjgan] {
    background: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.copy-btn i.fa-check[b-2qva6kjgan] {
    color: #22c55e;
}

.debug-json[b-2qva6kjgan] {
    padding: 14px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    color: #a5f3fc;
    background: #0f172a;
}

/* Success page */
.success-page[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 48px 24px;
    background: #f8fafc;
}

.success-content[b-2qva6kjgan] {
    text-align: center;
    max-width: 400px;
}

.success-icon[b-2qva6kjgan] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    border-radius: 50%;
}

.success-icon i[b-2qva6kjgan] {
    font-size: 40px;
    color: #059669;
}

.success-content h1[b-2qva6kjgan] {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px;
}

.success-content p[b-2qva6kjgan] {
    color: #64748b;
    margin: 0 0 32px;
}

.success-actions[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.success-actions .btn-primary[b-2qva6kjgan],
.success-actions .btn-secondary[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.success-actions .btn-primary[b-2qva6kjgan] {
    background: #1e3a5f;
    color: white;
    border: none;
}

.success-actions .btn-primary:hover[b-2qva6kjgan] {
    background: #2d5a87;
}

.success-actions .btn-secondary[b-2qva6kjgan] {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.success-actions .btn-secondary:hover[b-2qva6kjgan] {
    background: #f8fafc;
}

/* Primary button in banner */
.banner-content .btn-primary[b-2qva6kjgan] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #1e3a5f;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
}

/* ============================================
   REGULAR CONTRIBUTIONS
   ============================================ */

.regular-payments-list[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.regular-payment-row[b-2qva6kjgan] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    flex-wrap: wrap;
}

.regular-payment-row .payment-label[b-2qva6kjgan] {
    font-weight: 600;
    color: #1e293b;
    min-width: 80px;
    padding-bottom: 8px;
}

.regular-payment-row .firm-form-group[b-2qva6kjgan] {
    margin-bottom: 0;
    flex: 1;
    min-width: 120px;
}

.regular-payment-row .firm-form-group label[b-2qva6kjgan] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.regular-payment-row select[b-2qva6kjgan],
.regular-payment-row input[b-2qva6kjgan] {
    width: 100%;
}

.regular-payment-row .remove-btn[b-2qva6kjgan] {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    padding: 8px;
    font-size: 14px;
}

.regular-payment-row .remove-btn:hover[b-2qva6kjgan] {
    color: #1d4ed8;
    text-decoration: underline;
}

.add-payment-btn[b-2qva6kjgan] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #3b82f6;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}

.add-payment-btn:hover[b-2qva6kjgan] {
    background: #f8fafc;
    border-color: #3b82f6;
}

.add-payment-btn.disabled[b-2qva6kjgan] {
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.6;
}

.add-payment-btn.disabled:hover[b-2qva6kjgan] {
    background: none;
    border-color: #e2e8f0;
}

/* ============================================
   TRANSFERS LIST (multiple transfers)
   ============================================ */
.transfers-list[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.transfer-card[b-2qva6kjgan] {
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.transfer-header[b-2qva6kjgan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.transfer-title[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transfer-label[b-2qva6kjgan] {
    font-weight: 600;
    color: #64748b;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transfer-provider-badge[b-2qva6kjgan] {
    font-weight: 600;
    color: #1e3a5f;
    font-size: 16px;
    padding: 4px 12px;
    background: #e0f2fe;
    border-radius: 6px;
}

.transfer-header .remove-btn[b-2qva6kjgan] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.transfer-header .remove-btn:hover[b-2qva6kjgan] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.transfer-card .firm-form-group[b-2qva6kjgan] {
    margin-bottom: 16px;
}

.transfer-card .firm-form-group:last-child[b-2qva6kjgan] {
    margin-bottom: 0;
}

/* Review section subheader for multiple items */
.firm-review-subheader[b-2qva6kjgan] {
    font-weight: 600;
    font-size: 13px;
    color: #1e3a5f;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-top: 16px;
    padding-left: 16px;
    border-top: 1px solid #e2e8f0;
}

.firm-review-section .firm-review-subheader:first-of-type[b-2qva6kjgan] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Provider search (transfers step) */
.provider-search[b-2qva6kjgan] {
    position: relative;
    max-width: 400px;
}

.search-input-wrapper[b-2qva6kjgan] {
    position: relative;
    width: 100%;
}

.search-input-wrapper input[b-2qva6kjgan] {
    width: 100%;
    padding-right: 40px;
}

.search-input-wrapper > i.fa-search[b-2qva6kjgan],
.search-input-wrapper > i.searching-spinner[b-2qva6kjgan] {
    position: absolute;
    right: 12px;
    top: 44%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.search-input-wrapper > i.searching-spinner[b-2qva6kjgan] {
    color: #3b82f6;
}

.provider-results[b-2qva6kjgan] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}

.provider-result[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.provider-result:last-child[b-2qva6kjgan] {
    border-bottom: none;
}

.provider-result:hover[b-2qva6kjgan] {
    background: #f8fafc;
}

.provider-result strong[b-2qva6kjgan] {
    font-size: 14px;
    color: #1e293b;
}

.provider-address[b-2qva6kjgan] {
    font-size: 12px;
    color: #64748b;
}

.provider-type[b-2qva6kjgan] {
    font-size: 12px;
    color: #3b82f6;
    font-weight: 500;
}

.more-results[b-2qva6kjgan] {
    padding: 10px 12px;
    font-size: 12px;
    color: #64748b;
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.no-results[b-2qva6kjgan] {
    padding: 12px;
    font-size: 14px;
    color: #64748b;
    text-align: center;
}

.selected-provider[b-2qva6kjgan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.provider-info[b-2qva6kjgan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.provider-info strong[b-2qva6kjgan] {
    font-size: 14px;
    color: #1e293b;
}

.change-provider-btn[b-2qva6kjgan] {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
    color: #3b82f6;
    font-size: 13px;
    cursor: pointer;
}

.change-provider-btn:hover[b-2qva6kjgan] {
    background: #f1f5f9;
}

@media (max-width: 768px) {
    .wrapper-cards[b-2qva6kjgan] {
        grid-template-columns: 1fr;
    }

    .form-row[b-2qva6kjgan] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-2qva6kjgan] {
        max-height: 90vh;
    }

    .allocation-col[b-2qva6kjgan] {
        width: 120px;
    }

    .regular-payment-row[b-2qva6kjgan] {
        flex-direction: column;
        align-items: stretch;
    }

    .regular-payment-row .firm-form-group[b-2qva6kjgan] {
        min-width: 100%;
    }
}
/* /Components/Pages/Pws/PwsTransferCreate.razor.rz.scp.css */
/* PwsTransferCreate — scoped CSS
   Matches PwsAccountAction patterns for consistency */

/* Page container */
.action-page[b-2vn32zce4k] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    overflow: hidden;
}

.form-content[b-2vn32zce4k] {
    max-width: 700px;
}

.loading-state[b-2vn32zce4k], .error-state[b-2vn32zce4k], .success-state[b-2vn32zce4k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px;
    color: #64748b;
    gap: 16px;
}

.loading-state i[b-2vn32zce4k], .error-state i[b-2vn32zce4k] { font-size: 48px; }
.error-state i[b-2vn32zce4k] { color: #ef4444; }
.error-state h3[b-2vn32zce4k] { margin: 0; color: #1e293b; }

.success-actions[b-2vn32zce4k] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Back button */
.back-btn[b-2vn32zce4k] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    font-size: 12px;
    transition: all 0.15s;
}
.back-btn:hover[b-2vn32zce4k] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
}

/* Alert */
.alert-error[b-2vn32zce4k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
    margin-bottom: 20px;
}

.alert-error i[b-2vn32zce4k] {
    flex-shrink: 0;
}

/* Buttons */
.btn-primary[b-2vn32zce4k] {
    padding: 10px 20px;
    background: #1e3a5f;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-primary:hover[b-2vn32zce4k] { background: #152d4a; }
.btn-primary:disabled[b-2vn32zce4k] { opacity: 0.6; cursor: not-allowed; }

.btn-secondary[b-2vn32zce4k] {
    padding: 10px 20px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    color: #475569;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-secondary:hover[b-2vn32zce4k] { background: #f8fafc; border-color: #94a3b8; }

.btn-text[b-2vn32zce4k] {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    border-radius: 4px;
}
.btn-text:hover[b-2vn32zce4k] { color: #ef4444; }

/* ============================================
   REVIEW PAGE
   ============================================ */
.review-page[b-2vn32zce4k] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

.submitting-overlay[b-2vn32zce4k] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(2px);
}

.submitting-content[b-2vn32zce4k] {
    text-align: center;
    max-width: 360px;
}

.submitting-content .bounce-dots[b-2vn32zce4k] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.submitting-content .bounce-dots .dot[b-2vn32zce4k] {
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-radius: 50%;
    animation: bounce-b-2vn32zce4k 1.4s ease-in-out infinite;
}

.submitting-content .bounce-dots .dot:nth-child(1)[b-2vn32zce4k] { animation-delay: 0s; }
.submitting-content .bounce-dots .dot:nth-child(2)[b-2vn32zce4k] { animation-delay: 0.2s; }
.submitting-content .bounce-dots .dot:nth-child(3)[b-2vn32zce4k] { animation-delay: 0.4s; }

@keyframes bounce-b-2vn32zce4k {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-12px);
        opacity: 1;
    }
}

.submitting-content h2[b-2vn32zce4k] {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.submitting-content p[b-2vn32zce4k] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.review-header[b-2vn32zce4k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.review-header h1[b-2vn32zce4k] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.edit-btn[b-2vn32zce4k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.edit-btn:hover[b-2vn32zce4k] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

.review-page .centered-scroll[b-2vn32zce4k] {
    flex: none;
    overflow: visible;
    padding: 32px 48px;
}

.review-page .centered-scroll-inner[b-2vn32zce4k] {
    max-width: 700px;
}

.review-page .review-actions[b-2vn32zce4k] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    margin-top: 8px;
}

/* ============================================
   DOCUMENT PICKER — select from DocVault
   ============================================ */
.document-picker[b-2vn32zce4k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px;
    background: #f8fafc;
}

.document-picker-item[b-2vn32zce4k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: white;
    border: 1px solid transparent;
}

.document-picker-item:hover[b-2vn32zce4k] {
    background: #f1f5f9;
}

.document-picker-item.selected[b-2vn32zce4k] {
    background: #eff6ff;
    border-color: #3b82f6;
}

.document-picker-item > i:first-child[b-2vn32zce4k] {
    font-size: 18px;
    color: #94a3b8;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.document-picker-item.selected > i:first-child[b-2vn32zce4k] {
    color: #3b82f6;
}

.document-picker-info[b-2vn32zce4k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-name[b-2vn32zce4k] {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta[b-2vn32zce4k] {
    font-size: 12px;
    color: #94a3b8;
}

.doc-selected-icon[b-2vn32zce4k] {
    color: #3b82f6;
    font-size: 16px;
    flex-shrink: 0;
}

/* Selected document banner */
.selected-document-banner[b-2vn32zce4k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 14px;
    color: #1e40af;
}

.selected-document-banner i:first-child[b-2vn32zce4k] {
    font-size: 16px;
}

.selected-document-banner span[b-2vn32zce4k] {
    flex: 1;
    font-weight: 500;
}

/* Loading inline */
.loading-inline[b-2vn32zce4k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: #64748b;
    font-size: 14px;
}
/* /Components/Shared/AttendeePicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   AttendeePicker.razor — scoped styles
   Extracted from firm.css (Attendee Picker section within CALENDAR PAGE)
   ═══════════════════════════════════════════════════════════════════════════ */

.attendee-picker[b-hwn1whgnuz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendee-chips[b-hwn1whgnuz] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.attendee-chip[b-hwn1whgnuz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: #e8f0fe;
    border-radius: 16px;
    font-size: 12px;
    color: #1e3a5f;
    line-height: 1.3;
    max-width: 280px;
}

.attendee-chip.response-accepted[b-hwn1whgnuz] {
    background: #dcfce7;
    color: #14532d;
}

.attendee-chip.response-declined[b-hwn1whgnuz] {
    background: #fef2f2;
    color: #991b1b;
    opacity: 0.7;
}

.attendee-chip.response-tentative[b-hwn1whgnuz] {
    background: #fef9c3;
    color: #713f12;
}

.attendee-chip-name[b-hwn1whgnuz] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendee-chip-email[b-hwn1whgnuz] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendee-chip-status[b-hwn1whgnuz] {
    font-size: 10px;
    flex-shrink: 0;
}

.attendee-chip-status .fa-check[b-hwn1whgnuz] { color: #16a34a; }
.attendee-chip-status .fa-xmark[b-hwn1whgnuz] { color: #dc2626; }
.attendee-chip-status .fa-question[b-hwn1whgnuz] { color: #ca8a04; }

.attendee-chip-remove[b-hwn1whgnuz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s ease;
}

.attendee-chip-remove:hover[b-hwn1whgnuz] {
    background: rgba(0, 0, 0, 0.1);
    color: #ef4444;
}

.attendee-search-wrap[b-hwn1whgnuz] {
    position: relative;
}

.attendee-search-input[b-hwn1whgnuz] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.attendee-search-input:focus[b-hwn1whgnuz] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.attendee-search-input[b-hwn1whgnuz]::placeholder {
    color: #94a3b8;
}

.attendee-dropdown[b-hwn1whgnuz] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
}

.attendee-dropdown-item[b-hwn1whgnuz] {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.attendee-dropdown-item:hover[b-hwn1whgnuz] {
    background: #f1f5f9;
}

.attendee-dropdown-item:first-child[b-hwn1whgnuz] {
    border-radius: 8px 8px 0 0;
}

.attendee-dropdown-item:last-child[b-hwn1whgnuz] {
    border-radius: 0 0 8px 8px;
}

.attendee-dropdown-name[b-hwn1whgnuz] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

.attendee-dropdown-detail[b-hwn1whgnuz] {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
}

.attendee-dropdown-external[b-hwn1whgnuz] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 500;
}

.attendee-dropdown-external i[b-hwn1whgnuz] {
    font-size: 12px;
}

.attendee-dropdown-loading[b-hwn1whgnuz] {
    padding: 12px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.attendee-dropdown-empty[b-hwn1whgnuz] {
    padding: 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}
/* /Components/Shared/DebugPanel.razor.rz.scp.css */
/* ============================================
   DEBUG PANEL — Shared component styles
   ============================================ */

/* Pre-submit payload preview */
.debug-section[b-fijw56iplg] {
    background: #1e293b;
    border-radius: 8px;
    padding: 16px;
    margin-top: 32px;
}

.debug-section-header[b-fijw56iplg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.debug-title[b-fijw56iplg] {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-title i[b-fijw56iplg] {
    color: #60a5fa;
}

.debug-toggle-btn[b-fijw56iplg] {
    color: #60a5fa;
    font-size: 13px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.debug-toggle-btn:hover[b-fijw56iplg] {
    color: #93c5fd;
}

.payload-header[b-fijw56iplg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.payload-label[b-fijw56iplg] {
    font-size: 13px;
    font-weight: 600;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payload-header .debug-copy-btn[b-fijw56iplg] {
    padding: 4px 8px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 4px;
    color: #60a5fa;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.payload-header .debug-copy-btn:hover[b-fijw56iplg] {
    background: rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
}

.json-preview[b-fijw56iplg] {
    margin-top: 8px;
    padding: 12px;
    background: #0f172a;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: #94a3b8;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Debug mode toggle */
.debug-toggle[b-fijw56iplg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    margin-right: auto;
}

.debug-toggle input[b-fijw56iplg] {
    cursor: pointer;
}

/* Post-submit debug panel */
.debug-panel[b-fijw56iplg] {
    margin-top: 32px;
    margin-bottom: 48px;
    background: #1e293b;
    border-radius: 8px;
    color: #e2e8f0;
}

.debug-panel-header[b-fijw56iplg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    border-radius: 8px;
}

.debug-panel-header:hover[b-fijw56iplg] {
    background: #334155;
    border-radius: 8px 8px 0 0;
}

.debug-panel h4[b-fijw56iplg] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-collapse-btn[b-fijw56iplg] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.debug-collapse-btn:hover[b-fijw56iplg] {
    color: #e2e8f0;
}

.debug-panel-content[b-fijw56iplg] {
    padding: 0 20px 20px 20px;
}

.debug-section-block[b-fijw56iplg] {
    margin-bottom: 20px;
    background: #0f172a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #334155;
}

.debug-section-block:last-child[b-fijw56iplg] {
    margin-bottom: 0;
}

.debug-section-block.success[b-fijw56iplg] {
    border-color: #22c55e;
}

.debug-section-block.success .debug-block-header[b-fijw56iplg] {
    background: #166534;
}

.debug-section-block.error[b-fijw56iplg] {
    border-color: #ef4444;
}

.debug-section-block.error .debug-block-header[b-fijw56iplg] {
    background: #991b1b;
}

.debug-block-header[b-fijw56iplg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #334155;
    font-size: 13px;
}

.debug-block-header strong[b-fijw56iplg] {
    flex-shrink: 0;
}

.debug-block-header .debug-method[b-fijw56iplg],
.debug-block-header .debug-status[b-fijw56iplg] {
    margin-left: auto;
}

.debug-copy-btn[b-fijw56iplg] {
    background: transparent;
    border: 1px solid #475569;
    border-radius: 4px;
    color: #94a3b8;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.debug-copy-btn:hover[b-fijw56iplg] {
    background: #475569;
    color: #e2e8f0;
}

.debug-copy-btn .fa-check[b-fijw56iplg] {
    color: #4ade80;
}

.debug-method[b-fijw56iplg] {
    color: #a5f3fc;
    font-family: 'Consolas', 'Monaco', monospace;
}

.debug-status[b-fijw56iplg] {
    color: #fef9c3;
}

.debug-json[b-fijw56iplg] {
    padding: 14px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #94a3b8;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
}
/* /Components/Shared/M365ConnectButton.razor.rz.scp.css */
/* M365 Connect Button — extracted from firm.css → component-scoped */

.m365-connect-btn[b-cf2aeo5f6a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #0078d4;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.m365-connect-btn:hover[b-cf2aeo5f6a] {
    background: #106ebe;
    color: #fff;
    text-decoration: none;
}

.m365-connect-status[b-cf2aeo5f6a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.m365-connected[b-cf2aeo5f6a] {
    color: #16a34a;
}
/* /Components/Shared/M365IconBar.razor.rz.scp.css */
/* =====================================================
   M365 ICON BAR — Microsoft 365 top bar integration
   Extracted from firm.css → component-scoped
   ===================================================== */

.m365-icon-bar[b-rcvkr54q9h] {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 9999;
}

.m365-icon-bar .firm-icon-btn[b-rcvkr54q9h] {
    width: 36px;
    height: 36px;
    font-size: 14px;
    position: relative;
    z-index: 9999;
}

.m365-icon-bar .firm-icon-btn.m365-active[b-rcvkr54q9h] {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.3);
}

.topbar-separator[b-rcvkr54q9h] {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.15);
    margin: 0 4px;
}

/* Flyout overlay — catches outside clicks */
.m365-flyout-overlay[b-rcvkr54q9h] {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

/* Flyout panel */
.m365-flyout-panel[b-rcvkr54q9h] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.m365-flyout-header[b-rcvkr54q9h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #e8ecf0;
}

.m365-flyout-title[b-rcvkr54q9h] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.m365-flyout-link[b-rcvkr54q9h] {
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.m365-flyout-link:hover[b-rcvkr54q9h] {
    text-decoration: underline;
}

.m365-flyout-content[b-rcvkr54q9h] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Day headers (calendar) */
.m365-day-header[b-rcvkr54q9h] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 10px 18px 4px;
}

/* Individual list items */
.m365-item[b-rcvkr54q9h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.1s;
}

.m365-item:hover[b-rcvkr54q9h] {
    background: #f8fafc;
}

.m365-item-icon[b-rcvkr54q9h] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.m365-item-body[b-rcvkr54q9h] {
    flex: 1;
    min-width: 0;
}

.m365-item-title[b-rcvkr54q9h] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m365-item-meta[b-rcvkr54q9h] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading & empty states */
.m365-loading[b-rcvkr54q9h] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #94a3b8;
    font-size: 13px;
}

.m365-empty[b-rcvkr54q9h] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

/* ── Mail specific ── */

.m365-mail-item[b-rcvkr54q9h] {
    gap: 8px;
}

.m365-unread .m365-item-title[b-rcvkr54q9h],
.m365-unread .m365-mail-from[b-rcvkr54q9h] {
    font-weight: 600;
}

.m365-unread-dot[b-rcvkr54q9h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
    margin-top: 6px;
}

.m365-mail-from[b-rcvkr54q9h] {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.m365-mail-time[b-rcvkr54q9h] {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Tasks specific ── */

.m365-task-item[b-rcvkr54q9h] {
    gap: 10px;
}

.m365-task-circle[b-rcvkr54q9h] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    margin-top: 2px;
}

.m365-task-list[b-rcvkr54q9h] {
    color: #0078d4;
    font-weight: 500;
}

.m365-overdue[b-rcvkr54q9h] {
    color: #dc2626;
    font-weight: 600;
}
/* /Components/Shared/Pws/TransactionDetailModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   TransactionDetailModal — scoped styles
   Modal chrome (.editor-overlay etc) comes from editors.css.
   These are content-specific styles only.
   ═══════════════════════════════════════════════════════════ */

/* Summary row */
.tx-detail-summary[b-gmcxpqlmf0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tx-detail-amount[b-gmcxpqlmf0] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.tx-detail-amount.amount-in[b-gmcxpqlmf0] { color: #059669; }
.tx-detail-amount.amount-out[b-gmcxpqlmf0] { color: #dc2626; }
.tx-detail-amount.amount-cancelled[b-gmcxpqlmf0] { color: #94a3b8; text-decoration: line-through; }

.tx-detail-actions[b-gmcxpqlmf0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tx-detail-desc[b-gmcxpqlmf0] {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 20px 0;
}

/* Status badge */
[b-gmcxpqlmf0] .tx-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
}

[b-gmcxpqlmf0] .tx-status-badge.large {
    padding: 6px 12px;
    font-size: 13px;
}

[b-gmcxpqlmf0] .tx-status-badge.status-pending { background: #fef3c7; color: #92400e; }
[b-gmcxpqlmf0] .tx-status-badge.status-completed { background: #d1fae5; color: #065f46; }
[b-gmcxpqlmf0] .tx-status-badge.status-cancelled { background: #f1f5f9; color: #64748b; }
[b-gmcxpqlmf0] .tx-status-badge.status-failed { background: #fee2e2; color: #991b1b; }
[b-gmcxpqlmf0] .tx-status-badge.status-neutral { background: #f1f5f9; color: #475569; }

.cancel-pending-note[b-gmcxpqlmf0] {
    font-size: 12px;
    color: #d97706;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Destination account card */
.tx-dest-account[b-gmcxpqlmf0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 20px;
}

.tx-dest-account > i[b-gmcxpqlmf0] { color: #94a3b8; margin-top: 3px; }
.tx-dest-info[b-gmcxpqlmf0] { display: flex; flex-direction: column; gap: 2px; }
.tx-dest-name[b-gmcxpqlmf0] { font-weight: 600; color: #1e293b; font-size: 14px; }
.tx-dest-type[b-gmcxpqlmf0] { font-size: 12px; color: #3b82f6; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.tx-dest-client[b-gmcxpqlmf0] { font-size: 13px; color: #64748b; }
.tx-dest-id[b-gmcxpqlmf0] { font-size: 12px; color: #94a3b8; font-family: monospace; }

/* Rejection note */
.tx-rejection-note[b-gmcxpqlmf0] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.tx-rejection-header[b-gmcxpqlmf0] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dc2626;
    margin-bottom: 8px;
}

.tx-rejection-note p[b-gmcxpqlmf0] {
    margin: 0;
    color: #991b1b;
    font-size: 14px;
    line-height: 1.5;
}

.tx-resubmit-link[b-gmcxpqlmf0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: none;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.tx-resubmit-link:hover[b-gmcxpqlmf0] {
    color: #2563eb;
    text-decoration: underline;
}

/* Detail sections */
.tx-detail-section[b-gmcxpqlmf0] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.tx-detail-section:last-child[b-gmcxpqlmf0] {
    border-bottom: none;
    margin-bottom: 0;
}

.tx-detail-section h4[b-gmcxpqlmf0] {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Detail rows */
.tx-detail-row[b-gmcxpqlmf0] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.tx-detail-row .label[b-gmcxpqlmf0] {
    color: #64748b;
    font-size: 14px;
}

.tx-detail-row .value[b-gmcxpqlmf0] {
    color: #1e293b;
    font-weight: 500;
    font-size: 14px;
    text-align: right;
}

.tx-detail-row .value.mono[b-gmcxpqlmf0] {
    font-family: monospace;
    font-size: 13px;
}

/* Links in detail rows */
.tx-detail-link[b-gmcxpqlmf0] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.tx-detail-link:hover[b-gmcxpqlmf0] {
    text-decoration: underline;
    color: #1d4ed8;
}

/* Status history timeline */
.tx-status-history[b-gmcxpqlmf0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tx-status-entry[b-gmcxpqlmf0] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tx-status-dot[b-gmcxpqlmf0] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3b82f6;
    margin-top: 5px;
    flex-shrink: 0;
}

.tx-status-entry:not(:first-child) .tx-status-dot[b-gmcxpqlmf0] {
    background: #cbd5e1;
}

.tx-status-info[b-gmcxpqlmf0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-status-label[b-gmcxpqlmf0] {
    font-weight: 500;
    color: #1e293b;
    font-size: 14px;
}

.tx-status-date[b-gmcxpqlmf0] {
    font-size: 13px;
    color: #64748b;
}

.tx-status-note[b-gmcxpqlmf0] {
    font-size: 13px;
    color: #94a3b8;
}

/* Cancel footer (passed via FooterActions render fragment) */
[b-gmcxpqlmf0] .tx-cancel-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

[b-gmcxpqlmf0] .tx-cancel-actions { display: flex; gap: 8px; }

[b-gmcxpqlmf0] .btn-cancel-transfer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    color: #dc2626;
    background: white;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

[b-gmcxpqlmf0] .btn-cancel-transfer:hover { background: #fef2f2; border-color: #dc2626; }

[b-gmcxpqlmf0] .cancel-confirm-prompt { font-size: 13px; color: #dc2626; font-weight: 500; }

[b-gmcxpqlmf0] .btn-cancel-confirm {
    padding: 8px 14px; font-size: 13px; color: white;
    background: #dc2626; border: none; border-radius: 6px; cursor: pointer;
}

[b-gmcxpqlmf0] .btn-cancel-confirm:hover { background: #b91c1c; }
[b-gmcxpqlmf0] .btn-cancel-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

[b-gmcxpqlmf0] .btn-cancel-dismiss {
    padding: 8px 14px; font-size: 13px; color: #64748b;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer;
}

[b-gmcxpqlmf0] .btn-cancel-dismiss:hover { background: #e2e8f0; }

[b-gmcxpqlmf0] .cancel-error {
    padding: 8px 12px; background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: 6px; color: #dc2626; font-size: 13px;
}

[b-gmcxpqlmf0] .cancel-success {
    padding: 8px 12px; background: #f0fdf4; border: 1px solid #86efac;
    border-radius: 6px; color: #059669; font-size: 13px;
}

/* Send rejected transfer to Seccl support */
[b-gmcxpqlmf0] .btn-send-seccl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    color: #1e3a5f;
    background: white;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

[b-gmcxpqlmf0] .btn-send-seccl:hover { background: #eff6ff; border-color: #3b82f6; }
[b-gmcxpqlmf0] .btn-send-seccl:disabled { opacity: 0.6; cursor: not-allowed; }

[b-gmcxpqlmf0] .send-seccl-hint {
    font-size: 12px;
    color: #94a3b8;
    display: block;
    margin-top: 6px;
}
/* /Components/Shared/Seccl/IllustrationWizard.razor.rz.scp.css */
/* IllustrationWizard Scoped Styles */

.illustration-wizard[b-8ba0077x7w] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WIZARD HEADER & STEPS
   ═══════════════════════════════════════════════════════════════════════════════ */

.wizard-header[b-8ba0077x7w] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.5rem 2rem;
}

.wizard-steps[b-8ba0077x7w] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: space-between;
}

.wizard-step[b-8ba0077x7w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    position: relative;
}

.wizard-step:not(:last-child)[b-8ba0077x7w]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% - 1rem);
    width: calc(100% - 3rem);
    height: 2px;
    background: #e2e8f0;
    transform: translateY(-50%);
}

.wizard-step.completed:not(:last-child)[b-8ba0077x7w]::after {
    background: var(--primary-color, #1e3a5f);
}

.step-number[b-8ba0077x7w] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.wizard-step.active .step-number[b-8ba0077x7w] {
    background: var(--primary-color, #1e3a5f);
    color: white;
}

.wizard-step.completed .step-number[b-8ba0077x7w] {
    background: var(--primary-color, #1e3a5f);
    color: white;
}

.step-title[b-8ba0077x7w] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
}

.wizard-step.active .step-title[b-8ba0077x7w] {
    color: var(--primary-color, #1e3a5f);
    font-weight: 600;
}

.wizard-step.completed .step-title[b-8ba0077x7w] {
    color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WIZARD CONTENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.wizard-content[b-8ba0077x7w] {
    padding: 2rem;
    min-height: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WIZARD FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */

.wizard-footer[b-8ba0077x7w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer-nav[b-8ba0077x7w] {
    display: flex;
    gap: 0.75rem;
}

.btn-primary[b-8ba0077x7w],
.btn-secondary[b-8ba0077x7w],
.btn-outline[b-8ba0077x7w] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.btn-primary[b-8ba0077x7w] {
    background: var(--primary-color, #1e3a5f);
    color: white;
}

.btn-primary:hover[b-8ba0077x7w] {
    background: var(--primary-color-dark, #152a45);
}

.btn-primary:disabled[b-8ba0077x7w] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-8ba0077x7w] {
    background: #e2e8f0;
    color: #475569;
}

.btn-secondary:hover[b-8ba0077x7w] {
    background: #cbd5e1;
}

.btn-secondary:disabled[b-8ba0077x7w] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline[b-8ba0077x7w] {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.btn-outline:hover[b-8ba0077x7w] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.generate-btn[b-8ba0077x7w] {
    background: #059669;
}

.generate-btn:hover[b-8ba0077x7w] {
    background: #047857;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR DISPLAY
   ═══════════════════════════════════════════════════════════════════════════════ */

.wizard-error[b-8ba0077x7w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.875rem;
}

.wizard-error i[b-8ba0077x7w] {
    color: #dc2626;
}

.wizard-error span[b-8ba0077x7w] {
    flex: 1;
}

.error-dismiss[b-8ba0077x7w] {
    background: none;
    border: none;
    color: #991b1b;
    cursor: pointer;
    padding: 0.25rem;
}

.error-dismiss:hover[b-8ba0077x7w] {
    color: #7f1d1d;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OVERLAY SCREENS (PROGRESS & SUCCESS)
   ═══════════════════════════════════════════════════════════════════════════════ */

.illustration-overlay[b-8ba0077x7w] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 3rem 2rem;
    text-align: center;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.illustration-progress h2[b-8ba0077x7w],
.illustration-success h2[b-8ba0077x7w] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
}

.progress-message[b-8ba0077x7w] {
    color: #64748b;
    margin-bottom: 2rem;
}

.progress-steps[b-8ba0077x7w] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 300px;
    margin: 0 auto 2rem;
    text-align: left;
}

.progress-step[b-8ba0077x7w] {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.5;
}

.progress-step.active[b-8ba0077x7w] {
    opacity: 1;
}

.progress-step.complete[b-8ba0077x7w] {
    opacity: 1;
}

.progress-step .step-indicator[b-8ba0077x7w] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.progress-step.active .step-indicator[b-8ba0077x7w] {
    background: var(--primary-color, #1e3a5f);
    color: white;
}

.progress-step.complete .step-indicator[b-8ba0077x7w] {
    background: #059669;
    color: white;
}

.progress-step .step-text[b-8ba0077x7w] {
    font-size: 0.875rem;
    color: #475569;
}

.progress-note[b-8ba0077x7w] {
    color: #94a3b8;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUCCESS SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */

.success-icon[b-8ba0077x7w] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #dcfce7;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
}

.success-info[b-8ba0077x7w] {
    color: #64748b;
    margin-bottom: 2rem;
}

.success-actions[b-8ba0077x7w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 280px;
    margin: 0 auto;
}

.success-actions .btn-primary[b-8ba0077x7w] {
    justify-content: center;
    padding: 0.875rem 1.5rem;
}

.success-actions .btn-secondary[b-8ba0077x7w],
.success-actions .btn-outline[b-8ba0077x7w] {
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DEBUG SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.debug-section[b-8ba0077x7w] {
    border-top: 1px solid #e2e8f0;
    padding: 1rem 2rem;
    background: #fafafa;
}

.debug-header[b-8ba0077x7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.debug-toggle[b-8ba0077x7w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
}

.debug-toggle input[type="checkbox"][b-8ba0077x7w] {
    width: 14px;
    height: 14px;
}

.debug-copy-btn[b-8ba0077x7w] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
    color: #475569;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.debug-copy-btn:hover[b-8ba0077x7w] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.debug-content[b-8ba0077x7w] {
    margin-top: 0.75rem;
}

.debug-label[b-8ba0077x7w] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.375rem;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.debug-label.success[b-8ba0077x7w] {
    color: #059669;
}

.debug-label.error[b-8ba0077x7w] {
    color: #dc2626;
}

.debug-json[b-8ba0077x7w] {
    margin: 0 0 1rem 0;
    padding: 0.75rem;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 6px;
    font-size: 0.7rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 300px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}
/* /Components/Shared/Seccl/RecurringPaymentsEditor.razor.rz.scp.css */
/* RecurringPaymentsEditor - Manage recurring payments inline */

.recurring-payments-editor[b-iqvt7ra83w] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payments-list[b-iqvt7ra83w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Payment Card */
.payment-card[b-iqvt7ra83w] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.payment-card.editing[b-iqvt7ra83w],
.payment-card.adding[b-iqvt7ra83w] {
    background: white;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.payment-header[b-iqvt7ra83w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.payment-type[b-iqvt7ra83w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.payment-type.contribution[b-iqvt7ra83w] {
    color: #059669;
}

.payment-type.contribution i[b-iqvt7ra83w] {
    color: #10b981;
}

.payment-type.withdrawal[b-iqvt7ra83w] {
    color: #dc2626;
}

.payment-type.withdrawal i[b-iqvt7ra83w] {
    color: #ef4444;
}

.payment-actions[b-iqvt7ra83w] {
    display: flex;
    gap: 4px;
}

.action-btn[b-iqvt7ra83w] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.action-btn:hover[b-iqvt7ra83w] {
    background: #f1f5f9;
    color: #1e293b;
}

.action-btn.delete:hover[b-iqvt7ra83w] {
    background: #fef2f2;
    color: #dc2626;
}

.payment-body[b-iqvt7ra83w] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-row[b-iqvt7ra83w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.detail-row .label[b-iqvt7ra83w] {
    color: #64748b;
}

.detail-row .value[b-iqvt7ra83w] {
    color: #1e293b;
    font-weight: 500;
}

.detail-row .value.amount[b-iqvt7ra83w] {
    font-weight: 600;
    color: #0f172a;
}

/* Form Layout */
.payment-form[b-iqvt7ra83w] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-iqvt7ra83w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row.two-col[b-iqvt7ra83w] {
    flex-direction: row;
    gap: 16px;
}

.form-row.two-col > .firm-form-group[b-iqvt7ra83w] {
    flex: 1;
}

.form-actions[b-iqvt7ra83w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

/* Empty State */
.empty-state[b-iqvt7ra83w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
}

.empty-state i[b-iqvt7ra83w] {
    color: #94a3b8;
}

/* Add Button */
.add-payment-btn[b-iqvt7ra83w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #e8f4fc;
    border: 1px solid #c5dff0;
    border-radius: 8px;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-payment-btn:hover[b-iqvt7ra83w] {
    background: #d1ebfa;
    border-color: #9ecae8;
}

/* Toggle Group */
[b-iqvt7ra83w] .firm-toggle-group {
    display: flex;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

[b-iqvt7ra83w] .firm-toggle-btn {
    flex: 1;
    padding: 8px 12px;
    background: white;
    border: none;
    border-right: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

[b-iqvt7ra83w] .firm-toggle-btn:last-child {
    border-right: none;
}

[b-iqvt7ra83w] .firm-toggle-btn:hover {
    background: #f8fafc;
}

[b-iqvt7ra83w] .firm-toggle-btn.active {
    background: #3b82f6;
    color: white;
}

/* Button styles */
.btn-primary[b-iqvt7ra83w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

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

.btn-primary:disabled[b-iqvt7ra83w] {
    background: #94a3b8;
    cursor: not-allowed;
}

.btn-secondary[b-iqvt7ra83w] {
    padding: 8px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-secondary:hover[b-iqvt7ra83w] {
    background: #f8fafc;
    border-color: #cbd5e1;
}
/* /Components/Shared/SmartForm/SmartForm.razor.rz.scp.css */
/*
    SmartForm.razor.css - Single source of truth for SmartForm styling

    Both Scroll and Wizard modes share this styling.
    Mode-specific differences are minimal and handled with .wizard-mode / .scroll-mode
*/

/* ============================================
   MAIN CONTAINER
   ============================================ */

.smart-form[b-tnv5iph7lp] {
    background: #f8fafc;
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.smart-form.hidden[b-tnv5iph7lp] {
    display: none;
}

/* ============================================
   SUCCESS OVERLAY
   ============================================ */

.success-overlay[b-tnv5iph7lp] {
    flex: 1;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-tnv5iph7lp 0.3s ease;
}

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

/* ============================================
   HEADER BANNER
   ============================================ */

.smart-form-header[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.header-content h1[b-tnv5iph7lp] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
}

.header-content .subtitle[b-tnv5iph7lp] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #64748b;
}

/* Subtitle as first meta-item — slightly bolder to distinguish client name */
.header-detail :deep .subtitle-item[b-tnv5iph7lp] {
    font-weight: 500;
}

/* Header detail — metadata chips below subtitle (matches account-meta on PwsAccountView) */
.header-detail[b-tnv5iph7lp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 6px;
}

.header-detail :deep .meta-item[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
}

.header-detail :deep .meta-item i[b-tnv5iph7lp] {
    color: #94a3b8;
}

/* Header avatar */
.header-avatar[b-tnv5iph7lp] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-avatar img[b-tnv5iph7lp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-avatar .avatar-initials[b-tnv5iph7lp] {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
}

.header-avatar:has(i)[b-tnv5iph7lp] {
    border-radius: 12px;
    background: #ede9fe;
}

.header-avatar i[b-tnv5iph7lp] {
    font-size: 20px;
    color: #7c3aed;
}

.header-actions[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* SmartForm branding badge - positioned right */
.smartform-badge[b-tnv5iph7lp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 20px;
    font-size: 12px;
    color: #0369a1;
}

.smartform-badge i[b-tnv5iph7lp] {
    font-size: 14px;
    color: #0284c7;
}

.smartform-badge strong[b-tnv5iph7lp] {
    font-weight: 600;
    color: #0c4a6e;
}

/* Back button in header */
[b-tnv5iph7lp] .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s;
}

[b-tnv5iph7lp] .back-btn:hover {
    background: #f8fafc;
    color: #1e293b;
}

/* ============================================
   TWO-COLUMN LAYOUT
   ============================================ */

.smart-form-layout[b-tnv5iph7lp] {
    display: grid;
    grid-template-columns: 240px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================
   LEFT NAVIGATION SIDEBAR
   ============================================ */

.smart-form-nav[b-tnv5iph7lp] {
    background: white;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
}

.nav-items[b-tnv5iph7lp] {
    padding: 24px 0;
}

.nav-section-wrapper[b-tnv5iph7lp] {
    position: relative;
}

.nav-item[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    position: relative;
    z-index: 0;
}

.nav-item:hover:not(:disabled)[b-tnv5iph7lp] {
    background: #f8fafc;
}

.nav-item.active[b-tnv5iph7lp] {
    background: #f1f5f9;
    border-left-color: #1e3a5f;
}

.nav-item.completed[b-tnv5iph7lp] {
    cursor: pointer;
}

.nav-item:disabled[b-tnv5iph7lp] {
    cursor: not-allowed;
    opacity: 0.7;
}

.nav-item.child-item[b-tnv5iph7lp] {
    padding-left: 44px;
}

.nav-icon[b-tnv5iph7lp] {
    width: 16px;
    color: #94a3b8;
    font-size: 14px;
}

.nav-item.active .nav-icon[b-tnv5iph7lp] {
    color: #64748b;
}

.nav-item.completed .nav-icon[b-tnv5iph7lp] {
    color: #10b981;
}

.nav-label[b-tnv5iph7lp] {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

.nav-item.active .nav-label[b-tnv5iph7lp] {
    color: #1e293b;
    font-weight: 600;
}

.nav-item.completed .nav-label[b-tnv5iph7lp] {
    color: #1e293b;
}

/* ============================================
   PROGRESS RINGS (24px - shared)
   ============================================ */

.progress-ring[b-tnv5iph7lp] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Empty ring */
.ring-empty[b-tnv5iph7lp] {
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.ring-empty span[b-tnv5iph7lp] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

/* Complete ring - green checkmark */
.ring-complete[b-tnv5iph7lp] {
    width: 24px;
    height: 24px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* Progress ring - SVG arc */
.ring-progress[b-tnv5iph7lp] {
    width: 24px;
    height: 24px;
}

.ring-bg[b-tnv5iph7lp] {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 2;
}

.ring-fill[b-tnv5iph7lp] {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Number overlaid on progress ring */
.progress-ring[b-tnv5iph7lp] {
    position: relative;
}

.ring-number[b-tnv5iph7lp] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
}

/* ============================================
   TRACK LINE (Wizard mode only)
   ============================================ */

.track-line[b-tnv5iph7lp] {
    position: absolute;
    left: 38px; /* Center of ring: 3px border + 24px padding + 12px half ring - 1px */
    top: 36px;  /* Bottom of ring: 12px padding + 24px ring */
    width: 2px;
    height: 24px;
    background: #e2e8f0;
    z-index: 1;
}

.track-line.completed[b-tnv5iph7lp] {
    background: #10b981;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.smart-form-content[b-tnv5iph7lp] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content-area[b-tnv5iph7lp] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f8fafc;
}

/* Scroll mode: sections stacked with spacing */
.scroll-content[b-tnv5iph7lp] {
    display: flex;
    flex-direction: column;
    gap: 0;  /* Cards have their own margins now */
}

/* ============================================
   ACTION BAR
   ============================================ */

.smart-form-actions[b-tnv5iph7lp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: white;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.action-bar-left[b-tnv5iph7lp],
.action-bar-right[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Validation warning */
.validation-warning[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    color: #92400e;
    font-size: 14px;
    animation: fadeIn-b-tnv5iph7lp 0.2s ease-out;
}

.validation-warning i[b-tnv5iph7lp] {
    color: #f59e0b;
}

@keyframes fadeIn-b-tnv5iph7lp {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

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

.btn-primary[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled)[b-tnv5iph7lp] {
    background: #2563eb;
}

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

.btn-primary.btn-disabled[b-tnv5iph7lp] {
    background: #94a3b8;
    cursor: pointer;
}

.btn-primary.btn-disabled:hover[b-tnv5iph7lp] {
    background: #64748b;
}

.btn-secondary[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #475569;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-secondary:hover:not(:disabled)[b-tnv5iph7lp] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

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

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

@media (max-width: 768px) {
    .smart-form-layout[b-tnv5iph7lp] {
        grid-template-columns: 200px 1fr;
    }

    .content-area[b-tnv5iph7lp] {
        padding: 16px 24px;
    }
}

@media (max-width: 600px) {
    .smart-form-layout[b-tnv5iph7lp] {
        grid-template-columns: 1fr;
    }

    .smart-form-nav[b-tnv5iph7lp] {
        display: none;
    }
}

/* ============================================
   SECTION CONTENT STYLING
   ============================================ */

/* Section container */
[b-tnv5iph7lp] .section-content {
    max-width: 700px;
}

/* Section heading */
[b-tnv5iph7lp] .section-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

/* Intro text below heading */
[b-tnv5iph7lp] .section-intro {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 24px 0;
}

/* Help/info banners */
[b-tnv5iph7lp] .help-banner {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #0369a1;
}

[b-tnv5iph7lp] .help-banner.warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* Info banner (alias for help-banner with different color) */
[b-tnv5iph7lp] .info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #3b82f6;
    font-size: 14px;
    margin-bottom: 20px;
}

[b-tnv5iph7lp] .info-banner i {
    font-size: 16px;
    flex-shrink: 0;
}

[b-tnv5iph7lp] .help-banner i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Form fields container */
[b-tnv5iph7lp] .form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Toggle button groups */
[b-tnv5iph7lp] .toggle-group {
    display: flex;
    gap: 0;
}

[b-tnv5iph7lp] .toggle-btn {
    padding: 10px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    transition: all 0.15s;
}

[b-tnv5iph7lp] .toggle-btn:first-child {
    border-radius: 6px 0 0 6px;
}

[b-tnv5iph7lp] .toggle-btn:last-child {
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}

[b-tnv5iph7lp] .toggle-btn.active {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: white;
    z-index: 1;
}

[b-tnv5iph7lp] .toggle-btn:hover:not(.active) {
    background: #f8fafc;
}

/* Add button for lists */
[b-tnv5iph7lp] .add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #e8f4fc;
    border: 1px solid #c5dff0;
    border-radius: 8px;
    cursor: pointer;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}

[b-tnv5iph7lp] .add-btn:hover {
    background: #d1ebfa;
    border-color: #9ecae8;
}

/* Loading states */
[b-tnv5iph7lp] .loading-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
}

[b-tnv5iph7lp] .loading-inline i {
    color: #3b82f6;
}

/* Warning states */
[b-tnv5iph7lp] .no-schemes-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
    font-size: 14px;
}

/* ============================================
   FORM SECTIONS (Scroll mode)
   ============================================ */

[b-tnv5iph7lp] .form-section {
    max-width: 960px;
    margin-bottom: 24px;
    scroll-margin-top: 24px;
    scroll-snap-align: start;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    padding: 24px;
    border: 1px solid #e2e8f0;
}

[b-tnv5iph7lp] .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

[b-tnv5iph7lp] .section-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Changed badge for section headers */
[b-tnv5iph7lp] .section-changed-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #a16207;
    background: #fef08a;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-tnv5iph7lp] .section-status {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-tnv5iph7lp] .section-status.complete {
    color: #10b981;
}

[b-tnv5iph7lp] .section-status.complete::after {
    content: '';
    width: 16px;
    height: 16px;
    background: #10b981;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

[b-tnv5iph7lp] .section-status.not-started {
    color: #94a3b8;
}

[b-tnv5iph7lp] .section-status.not-started::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #cbd5e1;
    border-radius: 50%;
}

[b-tnv5iph7lp] .section-divider {
    height: 1px;
    background: #e2e8f0;
    margin-bottom: 24px;
}

/* ============================================
   FORM GROUPS & INPUTS
   Supports both .form-group and .firm-form-group
   ============================================ */

[b-tnv5iph7lp] .form-group,
[b-tnv5iph7lp] .firm-form-group {
    margin-bottom: 20px;
}

[b-tnv5iph7lp] .form-group label,
[b-tnv5iph7lp] .firm-form-group label {
    display: block;
    font-size: 14px;
    color: #475569;
    margin-bottom: 8px;
    font-weight: 500;
}

[b-tnv5iph7lp] .form-group label.checkbox-option,
[b-tnv5iph7lp] .firm-form-group label.checkbox-option {
    display: grid;
    margin-bottom: 0;
}

[b-tnv5iph7lp] .form-group input[type="text"],
[b-tnv5iph7lp] .form-group input[type="email"],
[b-tnv5iph7lp] .form-group input[type="tel"],
[b-tnv5iph7lp] .form-group input[type="date"],
[b-tnv5iph7lp] .form-group input[type="number"],
[b-tnv5iph7lp] .form-group select,
[b-tnv5iph7lp] .firm-form-group input[type="text"],
[b-tnv5iph7lp] .firm-form-group input[type="email"],
[b-tnv5iph7lp] .firm-form-group input[type="tel"],
[b-tnv5iph7lp] .firm-form-group input[type="date"],
[b-tnv5iph7lp] .firm-form-group input[type="number"],
[b-tnv5iph7lp] .firm-form-group select {
    width: 100%;
    max-width: 400px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    transition: border-color 0.15s;
}

/* Inputs inside firm-input-group must flex, not fill 100% width */
[b-tnv5iph7lp] .firm-input-group input[type="text"],
[b-tnv5iph7lp] .firm-input-group input[type="number"],
[b-tnv5iph7lp] .firm-input-group input[type="email"],
[b-tnv5iph7lp] .firm-input-group input[type="tel"] {
    flex: 1;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* The input-group itself should respect the max-width instead */
[b-tnv5iph7lp] .firm-input-group {
    max-width: 400px;
}

[b-tnv5iph7lp] .form-group input:focus,
[b-tnv5iph7lp] .form-group select:focus,
[b-tnv5iph7lp] .firm-form-group input:focus,
[b-tnv5iph7lp] .firm-form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[b-tnv5iph7lp] .form-group input::placeholder,
[b-tnv5iph7lp] .firm-form-group input::placeholder {
    color: #94a3b8;
}

[b-tnv5iph7lp] .input-short {
    max-width: 200px !important;
}

[b-tnv5iph7lp] .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

[b-tnv5iph7lp] .input-with-icon {
    display: flex;
    gap: 8px;
    max-width: 400px;
}

[b-tnv5iph7lp] .input-with-icon input {
    flex: 1;
    max-width: none !important;
}

[b-tnv5iph7lp] .icon-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
}

[b-tnv5iph7lp] .icon-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

[b-tnv5iph7lp] .input-with-action {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 400px;
}

[b-tnv5iph7lp] .input-with-action input {
    flex: 1;
}

/* Form hint and error text */
[b-tnv5iph7lp] .form-hint {
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
}

[b-tnv5iph7lp] .form-error {
    font-size: 13px;
    color: #ef4444;
    margin-top: 6px;
}

[b-tnv5iph7lp] .required {
    color: #ef4444;
}

/* Disabled/read-only inputs */
[b-tnv5iph7lp] .disabled-input {
    background-color: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

/* Radio groups */
[b-tnv5iph7lp] .radio-group {
    display: flex;
    gap: 24px;
    margin-top: 8px;
}

[b-tnv5iph7lp] .radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: normal;
}

[b-tnv5iph7lp] .radio-group input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* Checkbox groups */
[b-tnv5iph7lp] .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-tnv5iph7lp] .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: normal;
}

[b-tnv5iph7lp] .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* Form content wrapper */
[b-tnv5iph7lp] .form-content {
    max-width: 900px;
}

/* ============================================
   REVIEW MODE
   ============================================ */

.review-mode[b-tnv5iph7lp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f8fafc;
}

.review-header[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.review-header h1[b-tnv5iph7lp] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.review-header .back-btn[b-tnv5iph7lp] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s;
}

.review-header .back-btn:hover[b-tnv5iph7lp] {
    background: #f8fafc;
    color: #1e293b;
}

.edit-btn[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.edit-btn:hover[b-tnv5iph7lp] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

/* Review scroll area */
.review-scroll[b-tnv5iph7lp] {
    flex: 1;
    overflow-y: auto;
}

.review-content-inner[b-tnv5iph7lp] {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 48px;
}

/* Review sections - use firm-review-* classes from forms.css */
[b-tnv5iph7lp] .firm-review-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 14px;
    margin-bottom: 32px;
}

[b-tnv5iph7lp] .firm-review-banner i {
    color: #3b82f6;
    font-size: 16px;
}

[b-tnv5iph7lp] .firm-review-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

[b-tnv5iph7lp] .firm-review-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

[b-tnv5iph7lp] .firm-review-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

[b-tnv5iph7lp] .edit-link {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

[b-tnv5iph7lp] .edit-link:hover {
    background: #eff6ff;
    color: #2563eb;
}

[b-tnv5iph7lp] .firm-review-row {
    display: flex;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
}

[b-tnv5iph7lp] .firm-review-row:last-child {
    border-bottom: none;
}

[b-tnv5iph7lp] .firm-review-label {
    width: 200px;
    flex-shrink: 0;
    color: #64748b;
    font-size: 14px;
}

[b-tnv5iph7lp] .firm-review-value {
    flex: 1;
    color: #1e293b;
    font-size: 14px;
    font-weight: 500;
}

/* Changed row highlighting - oozing intelligence */
[b-tnv5iph7lp] .firm-review-row.changed {
    background: #fffbeb;
}

[b-tnv5iph7lp] .firm-review-row.changed .firm-review-value {
    color: #92400e;
}

[b-tnv5iph7lp] .firm-review-row.changed::after {
    content: 'Modified';
    margin-left: 12px;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Debug styles now in shared DebugPanel.razor.css */

/* ============================================
   REVIEW ACTIONS (footer bar)
   ============================================ */

.review-actions[b-tnv5iph7lp] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

/* Debug toggle/panel styles now in shared DebugPanel.razor.css */

/* /Components/Shared/SuccessAnimation.razor.rz.scp.css */
/* ===== Success Animation Component ===== */

.success-animation[b-aq74eyema6] {
    text-align: center;
    position: relative;
    padding: 1rem;
}

/* Checkmark container */
.checkmark-container[b-aq74eyema6] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    position: relative;
}

/* SVG checkmark */
.checkmark[b-aq74eyema6] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4ade80;
    stroke-miterlimit: 10;
    animation: scale-b-aq74eyema6 0.3s ease-in-out 0.9s both;
}

.checkmark-circle[b-aq74eyema6] {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4ade80;
    fill: none;
    animation: stroke-b-aq74eyema6 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check[b-aq74eyema6] {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    animation: stroke-b-aq74eyema6 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke-b-aq74eyema6 {
    100% { stroke-dashoffset: 0; }
}

@keyframes scale-b-aq74eyema6 {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

/* Particles */
.particles[b-aq74eyema6] {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
}

.particle[b-aq74eyema6] {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 1.25rem;
    opacity: 0;
    animation: explode-b-aq74eyema6 1s ease-out forwards;
}

.particle-0[b-aq74eyema6]  { animation-delay: 0.8s;  --angle: 0deg;   --distance: 70px; }
.particle-1[b-aq74eyema6]  { animation-delay: 0.85s; --angle: 30deg;  --distance: 80px; }
.particle-2[b-aq74eyema6]  { animation-delay: 0.9s;  --angle: 60deg;  --distance: 75px; }
.particle-3[b-aq74eyema6]  { animation-delay: 0.95s; --angle: 90deg;  --distance: 85px; }
.particle-4[b-aq74eyema6]  { animation-delay: 1s;    --angle: 120deg; --distance: 70px; }
.particle-5[b-aq74eyema6]  { animation-delay: 1.05s; --angle: 150deg; --distance: 80px; }
.particle-6[b-aq74eyema6]  { animation-delay: 1.1s;  --angle: 180deg; --distance: 75px; }
.particle-7[b-aq74eyema6]  { animation-delay: 1.15s; --angle: 210deg; --distance: 85px; }
.particle-8[b-aq74eyema6]  { animation-delay: 1.2s;  --angle: 240deg; --distance: 70px; }
.particle-9[b-aq74eyema6]  { animation-delay: 1.25s; --angle: 270deg; --distance: 80px; }
.particle-10[b-aq74eyema6] { animation-delay: 1.3s;  --angle: 300deg; --distance: 75px; }
.particle-11[b-aq74eyema6] { animation-delay: 1.35s; --angle: 330deg; --distance: 85px; }

@keyframes explode-b-aq74eyema6 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1));
    }
}

/* Title */
.success-title[b-aq74eyema6] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(90deg, #10b981, #0ea5e9, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slideUp-b-aq74eyema6 0.5s ease-out 1s both;
}

/* Subtitle */
.success-subtitle[b-aq74eyema6] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
    animation: slideUp-b-aq74eyema6 0.5s ease-out 1.1s both;
}

@keyframes slideUp-b-aq74eyema6 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}