/* /Components/AddressLookup.razor.rz.scp.css */
.address-lookup-container[b-wk0963rglz] {
    position: relative;
    width: 100%;
}

.address-lookup-field[b-wk0963rglz] {
    position: relative;
}

.address-lookup-spinner[b-wk0963rglz] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #6B7280);
    animation: addressSpinner-b-wk0963rglz 1s linear infinite;
    pointer-events: none;
}

@keyframes addressSpinner-b-wk0963rglz {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

.address-suggestions-dropdown[b-wk0963rglz] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 260px;
    overflow-y: auto;
}

.address-suggestion-item[b-wk0963rglz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary, #333F48);
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}

.address-suggestion-item:last-child[b-wk0963rglz] {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.address-suggestion-item:hover[b-wk0963rglz] {
    background-color: var(--primary-light, #EBF5FA);
    color: var(--primary, #3891BB);
}

.address-attribution[b-wk0963rglz] {
    font-size: 0.7rem;
    color: var(--text-muted, #9CA3AF);
    text-align: right;
    margin-top: 0.25rem;
}

.address-attribution a[b-wk0963rglz] {
    color: var(--text-muted, #9CA3AF);
    text-decoration: none;
}

.address-attribution a:hover[b-wk0963rglz] {
    color: var(--primary, #3891BB);
    text-decoration: underline;
}
/* /Components/AppSideNav.razor.rz.scp.css */
/* Professional Light Sidebar Styles */
.sidebar-container[b-2vqrrdaj7t] {
    display: flex;
    flex-direction: column;
    height: 93.5vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: var(--shadow-md);
    border-right: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.sidebar-container[b-2vqrrdaj7t]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

/* Single nav menu — all items in one list */
.nav-menu[b-2vqrrdaj7t] {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.nav-menu[b-2vqrrdaj7t]::-webkit-scrollbar {
    display: none;
}

/* Navigation Items */
.nav-item[b-2vqrrdaj7t] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin: 0 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    position: relative;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.025em;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.nav-item:hover[b-2vqrrdaj7t] {
    background: var(--background-light);
    color: var(--text-primary);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.nav-item.active[b-2vqrrdaj7t] {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(56, 145, 187, 0.2);
    box-shadow: var(--shadow-sm);
    transform: translateX(0);
}

.nav-item.active[b-2vqrrdaj7t]::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--primary);
    border-radius: 2px;
}

.nav-icon[b-2vqrrdaj7t] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    flex-shrink: 0;
}

.nav-icon i[b-2vqrrdaj7t] {
    font-size: 18px;
    transition: all 0.2s ease;
}

.nav-item:hover .nav-icon i[b-2vqrrdaj7t] {
    transform: scale(1.1);
}

.nav-item.active .nav-icon i[b-2vqrrdaj7t] {
    color: var(--primary-dark);
}

.nav-text[b-2vqrrdaj7t] {
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item.active .nav-text[b-2vqrrdaj7t] {
    color: var(--primary-dark);
    font-weight: 600;
}

/* Toggle Sidebar — pinned at bottom */
.sidebar-toggle[b-2vqrrdaj7t] {
    flex-shrink: 0;
    padding: 8px 0 12px 0;
    border-top: 1px solid var(--border-color);
    background: rgba(248, 250, 252, 0.8);
}

.toggle-sidebar[b-2vqrrdaj7t] {
    margin-top: 0;
}

.toggle-sidebar:hover[b-2vqrrdaj7t] {
    background: var(--secondary-hover);
}

/* Section Titles */
.nav-section-title[b-2vqrrdaj7t] {
    padding: 6px 20px 3px 20px;
    margin: 8px 0 4px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Divider (collapsed mode) */
.nav-divider[b-2vqrrdaj7t] {
    height: 1px;
    background: var(--border-color);
    margin: 8px 20px;
    flex-shrink: 0;
}

/* Brand/Logo Section */
.sidebar-brand[b-2vqrrdaj7t] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(248, 250, 252, 0.8);
    flex-shrink: 0;
}

.brand-content[b-2vqrrdaj7t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo[b-2vqrrdaj7t] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(56, 145, 187, 0.2);
}

.brand-logo-collapsed[b-2vqrrdaj7t] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(56, 145, 187, 0.2);
}

.brand-text[b-2vqrrdaj7t] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-title[b-2vqrrdaj7t] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.brand-subtitle[b-2vqrrdaj7t] {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Collapsed Sidebar Styles */
.sidebar-container.collapsed .nav-item[b-2vqrrdaj7t] {
    padding: 10px;
    margin: 0 8px;
    justify-content: center;
}

.sidebar-container.collapsed .nav-item.active[b-2vqrrdaj7t]::before {
    display: none;
}

.sidebar-container.collapsed .nav-icon[b-2vqrrdaj7t] {
    margin-right: 0;
}

.sidebar-container.collapsed .sidebar-brand[b-2vqrrdaj7t] {
    padding: 12px 8px;
    text-align: center;
}

/* Focus States */
.nav-item:focus-visible[b-2vqrrdaj7t] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Emergency Contacts Nav Item */
.emergency-contacts-nav[b-2vqrrdaj7t] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.emergency-contacts-nav:hover[b-2vqrrdaj7t] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3);
    transform: translateX(2px);
}

.emergency-contacts-nav.active[b-2vqrrdaj7t] {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4);
}

.emergency-contacts-nav .nav-icon.emergency[b-2vqrrdaj7t] {
    color: #dc2626;
}

.emergency-contacts-nav .nav-icon.emergency i[b-2vqrrdaj7t] {
    animation: pulse-emergency-b-2vqrrdaj7t 2s ease-in-out infinite;
}

.emergency-contacts-nav:hover .nav-icon.emergency i[b-2vqrrdaj7t] {
    animation: none;
    transform: scale(1.15);
}

@keyframes pulse-emergency-b-2vqrrdaj7t {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Mobile close button — hidden on desktop */
.mobile-close-btn[b-2vqrrdaj7t] {
    display: none;
}

/* Mobile & Tablet */
/* NOTE: .rz-sidebar positioning is handled in site.css (global CSS) because
   Blazor scoped CSS cannot pierce into Radzen component DOM. */
@media (max-width: 768px) {
    .sidebar-container[b-2vqrrdaj7t] {
        height: 100vh;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .nav-menu[b-2vqrrdaj7t] {
        padding: 8px 0;
        gap: 1px;
        overflow-y: auto;
    }

    .nav-item[b-2vqrrdaj7t] {
        margin: 0 8px;
        padding: 9px 16px;
        font-size: 14px;
        border-radius: 8px;
    }

    .nav-section-title[b-2vqrrdaj7t] {
        padding: 4px 20px 2px 20px;
        margin: 4px 0 3px 0;
        font-size: 10px;
    }

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

    .sidebar-brand[b-2vqrrdaj7t] {
        padding: 12px 20px;
    }

    .brand-title[b-2vqrrdaj7t] {
        font-size: 18px;
    }

    .brand-subtitle[b-2vqrrdaj7t] {
        font-size: 12px;
    }

    .nav-icon[b-2vqrrdaj7t] {
        margin-right: 14px;
        width: 24px;
        height: 24px;
    }

    .nav-icon i[b-2vqrrdaj7t] {
        font-size: 18px;
    }

    .mobile-close-btn[b-2vqrrdaj7t] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        min-width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-close-btn:hover[b-2vqrrdaj7t] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
    }

    .brand-content[b-2vqrrdaj7t] {
        position: relative;
    }
}

@media (max-width: 480px) {
    .nav-item[b-2vqrrdaj7t] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .brand-logo[b-2vqrrdaj7t] {
        width: 38px;
        height: 38px;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    .nav-item[b-2vqrrdaj7t] {
        border: 1px solid currentColor;
    }
}
/* /Components/BodyMapViewer.razor.rz.scp.css */
.bodymap-viewer[b-sxx24ojjz5] {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.viewer-loading[b-sxx24ojjz5],
.viewer-error[b-sxx24ojjz5] {
    text-align: center;
    padding: 40px;
    color: #666;
}

.viewer-loading p[b-sxx24ojjz5] {
    margin-top: 20px;
    font-size: 14px;
}

.viewer-error p[b-sxx24ojjz5] {
    color: #d32f2f;
}

/* Header */
.viewer-header[b-sxx24ojjz5] {
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.viewer-header h3[b-sxx24ojjz5] {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 20px;
    font-weight: 600;
}

.viewer-metadata[b-sxx24ojjz5] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
}

.metadata-item[b-sxx24ojjz5] {
    color: #666;
}

.metadata-item strong[b-sxx24ojjz5] {
    color: #333;
    margin-right: 5px;
}

/* 3D Viewer */
.viewer-3d[b-sxx24ojjz5] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    margin-bottom: 20px;
}

.viewer-canvas-container[b-sxx24ojjz5] {
    position: relative;
    background: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    min-height: 500px;
    overflow: hidden;
}

.bodymap-canvas[b-sxx24ojjz5] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: block;
}

.canvas-loading[b-sxx24ojjz5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Markings List */
.viewer-markings[b-sxx24ojjz5] {
    background: #fafafa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e0e0e0;
}

.viewer-markings h4[b-sxx24ojjz5] {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.markings-list[b-sxx24ojjz5] {
    display: grid;
    gap: 10px;
}

.marking-card[b-sxx24ojjz5] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    background: #fafafa;
}

.marking-header[b-sxx24ojjz5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.marking-color[b-sxx24ojjz5] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #ccc;
}

.marking-header strong[b-sxx24ojjz5] {
    color: #333;
    font-size: 14px;
}

.marking-details[b-sxx24ojjz5] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #666;
    margin-left: 30px;
}

.detail-item[b-sxx24ojjz5] {
    white-space: nowrap;
}

/* Info message */
.viewer-info[b-sxx24ojjz5] {
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .viewer-3d[b-sxx24ojjz5] {
        grid-template-columns: 1fr;
    }

    .viewer-markings[b-sxx24ojjz5] {
        order: 2;
    }

    .viewer-canvas-container[b-sxx24ojjz5] {
        order: 1;
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .viewer-metadata[b-sxx24ojjz5] {
        flex-direction: column;
        gap: 8px;
    }

    .marking-details[b-sxx24ojjz5] {
        flex-direction: column;
        gap: 5px;
    }

    .bodymap-canvas[b-sxx24ojjz5] {
        min-height: 350px;
    }
}

@media (max-width: 480px) {
    .bodymap-viewer[b-sxx24ojjz5] {
        padding: 15px;
    }

    .viewer-canvas-container[b-sxx24ojjz5] {
        min-height: 300px;
    }

    .bodymap-canvas[b-sxx24ojjz5] {
        min-height: 300px;
    }
}
/* /Components/ClientBar.razor.rz.scp.css */
/* Client Bar Main Container */
.client-bar[b-d2tcvunu8r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--secondary);
    border-bottom: 2px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    min-height: 80px;
}

/* Client Info Section */
.client-info-section[b-d2tcvunu8r] {
    display: flex;
    align-items: center;
    flex: 1;
}

/* Back Button */
.back-button[b-d2tcvunu8r] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
    color: var(--text-secondary);
}

.back-button:hover[b-d2tcvunu8r] {
    background-color: var(--secondary-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-2px);
}

/* Client Avatar */
.client-avatar[b-d2tcvunu8r] {
    margin-right: 1rem;
    flex-shrink: 0;
}

.avatar-circle[b-d2tcvunu8r] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    border: 2px solid var(--secondary);
}

.avatar-initials[b-d2tcvunu8r] {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Client Details */
.client-details[b-d2tcvunu8r] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.client-name-row[b-d2tcvunu8r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.client-name[b-d2tcvunu8r] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badges-container[b-d2tcvunu8r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 5rem;
    flex-shrink: 0;
    height: 36px; /* Match button height for alignment */
}

.client-id-badge[b-d2tcvunu8r] {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    font-weight: 500;
    font-family: monospace;
    font-size: 0.75rem;
}

.status-badge[b-d2tcvunu8r] {
    font-weight: 500;
    font-size: 0.75rem;
}

.client-info-row[b-d2tcvunu8r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-item[b-d2tcvunu8r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.info-icon[b-d2tcvunu8r] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.info-separator[b-d2tcvunu8r] {
    color: var(--text-muted);
    font-weight: 300;
}

/* Client Actions */
.client-actions[b-d2tcvunu8r] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Skeleton Loading Styles */
.skeleton[b-d2tcvunu8r] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-d2tcvunu8r 1.5s infinite;
    border-radius: var(--radius);
}

.skeleton-avatar .skeleton-circle[b-d2tcvunu8r] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-name[b-d2tcvunu8r] {
    height: 1.25rem;
    width: 200px;
    margin-bottom: 0.375rem;
}

.skeleton-details[b-d2tcvunu8r] {
    height: 0.875rem;
    width: 300px;
}

.skeleton-badge[b-d2tcvunu8r] {
    height: 1.25rem;
    width: 60px;
    border-radius: 0.75rem;
}

@keyframes loading-b-d2tcvunu8r {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .client-bar[b-d2tcvunu8r] {
        padding: 0.75rem 1rem;
        min-height: auto;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .client-name[b-d2tcvunu8r] {
        font-size: 1.125rem;
    }

    .client-info-row[b-d2tcvunu8r] {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .info-separator[b-d2tcvunu8r] {
        display: none;
    }

    .info-item[b-d2tcvunu8r] {
        font-size: 0.8125rem;
    }

    .badges-container[b-d2tcvunu8r] {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
        margin-right: 0;
    }

    .client-actions[b-d2tcvunu8r] {
        display: none;
    }
}

@media (max-width: 480px) {
    .client-bar[b-d2tcvunu8r] {
        padding: 0.5rem 0.75rem;
    }

    .client-avatar[b-d2tcvunu8r] {
        margin-right: 0.5rem;
    }

    .avatar-circle[b-d2tcvunu8r] {
        width: 40px;
        height: 40px;
    }

    .avatar-initials[b-d2tcvunu8r] {
        font-size: 0.875rem;
    }

    .back-button[b-d2tcvunu8r] {
        width: 32px;
        height: 32px;
        margin-right: 0.5rem;
    }

    .client-name[b-d2tcvunu8r] {
        font-size: 1rem;
    }

    .client-name-row[b-d2tcvunu8r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .badges-container[b-d2tcvunu8r] {
        flex-direction: row;
        align-self: flex-start;
    }
}
/* /Components/ClientList.razor.rz.scp.css */
/* Professional Client List Styles */
.client-list-container[b-2iq1ew0a6l] {
    padding: 24px;
    background: var(--background-light);
    min-height: 100vh;
}

/* Modern Header Section */
.list-header[b-2iq1ew0a6l] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.header-content[b-2iq1ew0a6l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-title-section[b-2iq1ew0a6l] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.page-title[b-2iq1ew0a6l] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.stats-badge[b-2iq1ew0a6l] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid rgba(56, 145, 187, 0.2);
}

.header-actions[b-2iq1ew0a6l] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.view-toggle[b-2iq1ew0a6l] {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    border-right: 1px solid var(--border-color);
}

[b-2iq1ew0a6l] .action-btn {
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

[b-2iq1ew0a6l] .refresh-btn {
    background: var(--background-light);
    color: var(--text-secondary);
}

[b-2iq1ew0a6l] .refresh-btn:hover {
    background: var(--secondary-hover);
    transform: translateY(-1px);
}

[b-2iq1ew0a6l] .primary-btn {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[b-2iq1ew0a6l] .primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

[b-2iq1ew0a6l] .toggle-btn {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

[b-2iq1ew0a6l] .toggle-btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Enhanced Search Section */
.search-section[b-2iq1ew0a6l] {
    margin-bottom: 24px;
}

.search-container[b-2iq1ew0a6l] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    max-width: 500px;
}

.search-container:focus-within[b-2iq1ew0a6l] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1);
}

.search-icon[b-2iq1ew0a6l] {
    margin: 0 12px 0 16px;
    color: var(--text-muted);
    font-size: 20px;
}

[b-2iq1ew0a6l] .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 8px;
    font-size: 15px;
    color: var(--text-primary);
}

[b-2iq1ew0a6l] .search-input:focus {
    outline: none;
    box-shadow: none;
}

[b-2iq1ew0a6l] .clear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px;
    border-radius: 8px;
    margin-right: 4px;
}

[b-2iq1ew0a6l] .clear-btn:hover {
    background: var(--background-light);
    color: var(--text-secondary);
}

.search-results-info[b-2iq1ew0a6l] {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Professional Card Layout */
.cards-container[b-2iq1ew0a6l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.client-card[b-2iq1ew0a6l] {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.client-card:hover[b-2iq1ew0a6l] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(56, 145, 187, 0.15);
    border-color: var(--primary-light);
}

.card-header[b-2iq1ew0a6l] {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: rgba(248, 250, 252, 0.5);
}

.client-avatar[b-2iq1ew0a6l] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(56, 145, 187, 0.2);
}

.client-info[b-2iq1ew0a6l] {
    flex: 1;
    min-width: 0;
}

.client-name[b-2iq1ew0a6l] {
    margin: 0 0 4px 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-meta[b-2iq1ew0a6l] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: 4px;
}

.client-type[b-2iq1ew0a6l] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.client-status[b-2iq1ew0a6l] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-active[b-2iq1ew0a6l] {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(21, 128, 61);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-inactive[b-2iq1ew0a6l] {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(185, 28, 28);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-unknown[b-2iq1ew0a6l] {
    background: rgba(107, 114, 128, 0.1);
    color: rgb(75, 85, 99);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.card-actions[b-2iq1ew0a6l] {
    flex-shrink: 0;
}

[b-2iq1ew0a6l] .view-btn {
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary-dark);
    padding: 8px;
}

[b-2iq1ew0a6l] .view-btn:hover {
    background: var(--primary);
    color: white;
}

.card-body[b-2iq1ew0a6l] {
    padding: 20px;
}

.client-details[b-2iq1ew0a6l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item[b-2iq1ew0a6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.detail-icon[b-2iq1ew0a6l] {
    color: var(--primary);
    font-size: 16px;
    width: 16px;
    flex-shrink: 0;
}

.detail-label[b-2iq1ew0a6l] {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 100px;
}

.detail-value[b-2iq1ew0a6l] {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

/* Empty State */
.empty-state[b-2iq1ew0a6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: white;
    border-radius: 16px;
    border: 2px dashed var(--border-color);
}

.empty-icon[b-2iq1ew0a6l] {
    font-size: 64px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-title[b-2iq1ew0a6l] {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-description[b-2iq1ew0a6l] {
    margin: 0 0 24px 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 400px;
}

[b-2iq1ew0a6l] .empty-action-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
}

[b-2iq1ew0a6l] .empty-action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Professional Pagination */
.pagination-container[b-2iq1ew0a6l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.pagination-info[b-2iq1ew0a6l] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-controls[b-2iq1ew0a6l] {
    display: flex;
    gap: 4px;
}

[b-2iq1ew0a6l] .page-btn {
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.2s ease;
}

[b-2iq1ew0a6l] .page-btn:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

[b-2iq1ew0a6l] .page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

[b-2iq1ew0a6l] .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .client-list-container[b-2iq1ew0a6l] {
        padding: 16px;
    }

    .header-content[b-2iq1ew0a6l] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .header-actions[b-2iq1ew0a6l] {
        justify-content: flex-end;
    }

    .view-toggle[b-2iq1ew0a6l],
    [b-2iq1ew0a6l] .refresh-btn {
        display: none;
    }

    .cards-container[b-2iq1ew0a6l] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pagination-container[b-2iq1ew0a6l] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .pagination-controls[b-2iq1ew0a6l] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .client-card[b-2iq1ew0a6l] {
        margin: 0 -4px;
    }

    .card-header[b-2iq1ew0a6l] {
        padding: 16px;
    }

    .card-body[b-2iq1ew0a6l] {
        padding: 16px;
    }

    .client-name[b-2iq1ew0a6l] {
        font-size: 1rem;
    }

    .page-title[b-2iq1ew0a6l] {
        font-size: 1.5rem;
    }
}

/* Professional Grid View Styles */
.grid-container[b-2iq1ew0a6l] {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

[b-2iq1ew0a6l] .modern-datagrid {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    border: none;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--primary);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-header th {
    padding: 16px 20px;
    border-right: 1px solid var(--border-color);
    vertical-align: middle;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-header th:last-child {
    border-right: none;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-data tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(241, 245, 249, 0.8);
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-data tr:hover {
    background: linear-gradient(135deg, rgba(56, 145, 187, 0.03) 0%, rgba(56, 145, 187, 0.08) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 145, 187, 0.1);
    cursor: pointer;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-data td {
    padding: 16px 20px;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 0.9rem;
    border-right: 1px solid rgba(241, 245, 249, 0.6);
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-data td:last-child {
    border-right: none;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-datatable-data tr.rz-state-highlight {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(56, 145, 187, 0.15) 100%);
    border-left: 4px solid var(--primary);
    color: var(--primary-dark);
}

[b-2iq1ew0a6l] .modern-datagrid .rz-paginator {
    background: rgba(248, 250, 252, 0.8);
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

[b-2iq1ew0a6l] .modern-datagrid .rz-paginator .rz-paginator-current {
    color: var(--primary);
    font-weight: 600;
}

/* Grid action button */
[b-2iq1ew0a6l] .grid-action-btn {
    background: var(--primary-light);
    border: 1px solid var(--primary);
    color: var(--primary-dark);
    border-radius: 6px;
    padding: 6px;
    min-width: 32px;
    height: 32px;
}

[b-2iq1ew0a6l] .grid-action-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}
/* /Components/CommunicationsClient.razor.rz.scp.css */
/* ==================== LAYOUT STYLES ==================== */
.communications-container[b-k9ke15npp5] {
    display: flex;
    min-height: 600px;
    max-height: calc(100vh - 270px);
    height: 100%;
    gap: 0;
}

.status-badge-container[b-k9ke15npp5] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.concern-container[b-k9ke15npp5] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==================== LEFT SIDEBAR STYLES ==================== */
.concerns-sidebar[b-k9ke15npp5] {
    flex: 0 0 300px;
    min-width: 250px;
    max-width: 350px;
    background-color: white;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.search-box[b-k9ke15npp5] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.search-input[b-k9ke15npp5] {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: #f1f5f9;
    font-size: 0.875rem;
}

    .search-input:focus[b-k9ke15npp5] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

/* ==================== CONCERN CARD STYLES ==================== */
.concern-item[b-k9ke15npp5] {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin: 0.5rem 1rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

    .concern-item:hover[b-k9ke15npp5] {
        background-color: #f1f5f9;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    .concern-item.active[b-k9ke15npp5] {
        background-color: #eff6ff;
        border-left: 4px solid #3b82f6;
        border-color: #3b82f6;
    }

    .concern-item.selected[b-k9ke15npp5] {
        background-color: #eff6ff;
        border-left: 4px solid #3b82f6;
        border-color: #3b82f6;
    }

    .concern-item.critical[b-k9ke15npp5] {
        background-color: #fef3c7;
        border-color: #fbbf24;
    }

    .concern-item.high[b-k9ke15npp5] {
        background-color: #fef3c1;
        border-color: #EA580C;
    }

    .concern-item.legal-concern[b-k9ke15npp5] {
        background-color: #f0f4ff;
        border-left: 4px solid #1E40AF;
        border-color: #1E40AF;
    }

.concern-header[b-k9ke15npp5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.concern-id[b-k9ke15npp5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.concern-subject[b-k9ke15npp5] {
    font-size: 0.75rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.concern-description[b-k9ke15npp5] {
    font-size: 0.6875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    /* Limit description to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.concern-meta[b-k9ke15npp5] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* ==================== PRIORITY BADGE STYLES ==================== */
.priority-badge[b-k9ke15npp5] {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
}

.priority-critical[b-k9ke15npp5] {
    background-color: #dc2626;
    color: white;
}

.priority-medium[b-k9ke15npp5] {
    background-color: #f59e0b;
    color: white;
}

.priority-high[b-k9ke15npp5] {
    background-color: #FB6514;
    color: white;
}

.priority-low[b-k9ke15npp5] {
    background-color: #10b981;
    color: white;
}

/* ==================== STATUS BADGE STYLES ==================== */
.status-badge[b-k9ke15npp5] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.status-open[b-k9ke15npp5] {
    background-color: #fef3c7;
    color: #92400e;
}

.status-under-review[b-k9ke15npp5] {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-resolved[b-k9ke15npp5] {
    background-color: #d1fae5;
    color: #065f46;
}

.status-escalated[b-k9ke15npp5] {
    background-color: #fee2e2;
    color: #dc2626;
}

.status-legal[b-k9ke15npp5] {
    background-color: #1E40AF;
    color: white;
    font-weight: 700;
}
.status-submitted[b-k9ke15npp5] {
    background-color: green;
    color: white;
    font-weight: 700;
}


/* Small status badges for sidebar */
.status-badge-small[b-k9ke15npp5] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    margin-left: 0.25rem;
}

/* ==================== MAIN CONTENT STYLES ==================== */
.main-content[b-k9ke15npp5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.concern-header-section[b-k9ke15npp5] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.concern-title[b-k9ke15npp5] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.legal-indicator[b-k9ke15npp5] {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: #1E40AF;
    font-weight: 600;
    margin-left: 0.5rem;
}

.concern-info[b-k9ke15npp5] {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 2;
}

.action-buttons[b-k9ke15npp5] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: center;
}

/* ==================== BUTTON STYLES ==================== */
.btn-primary[b-k9ke15npp5] {
    background-color: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-primary:hover[b-k9ke15npp5] {
        background-color: #059669;
    }

    .btn-primary:disabled[b-k9ke15npp5] {
        background-color: #9ca3af;
        cursor: not-allowed;
    }

.btn-secondary[b-k9ke15npp5] {
    background-color: white;
    color: #64748b;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-secondary:hover[b-k9ke15npp5] {
        background-color: #f1f5f9;
    }

/* ==================== RADZEN SPLIT BUTTON OVERRIDES ==================== */
.rz-splitbutton[b-k9ke15npp5] {
    height: 36px !important;
    font-size: 0.875rem !important;
}

    .rz-splitbutton .rz-button[b-k9ke15npp5] {
        height: 36px !important;
        padding: 0 0.75rem !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        border: none !important;
    }

    .rz-splitbutton .rz-button-icon-only[b-k9ke15npp5] {
        width: 36px !important;
        padding: 0 !important;
        border: none !important;
    }

/* Remove border from btn-secondary RadzenSplitButton */
.btn-secondary.rz-splitbutton[b-k9ke15npp5],
.btn-secondary.rz-splitbutton .rz-button[b-k9ke15npp5],
.btn-secondary.rz-splitbutton .rz-button-icon-only[b-k9ke15npp5] {
    border: none !important;
    box-shadow: none !important;
}

/* Modern dropdown menu styling */
.rz-dropdown-panel[b-k9ke15npp5] {
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem 0 !important;
    background: white !important;
    min-width: 200px !important;
    margin-top: 0.25rem !important;
}

.rz-dropdown-item[b-k9ke15npp5] {
    padding: 0.75rem 1rem !important;
    margin: 0 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

    .rz-dropdown-item:hover[b-k9ke15npp5] {
        background-color: #f3f4f6 !important;
        color: #1f2937 !important;
        transform: translateY(-1px) !important;
    }

    .rz-dropdown-item:active[b-k9ke15npp5],
    .rz-dropdown-item:focus[b-k9ke15npp5] {
        background-color: #e5e7eb !important;
        outline: none !important;
    }

    .rz-dropdown-item .rz-button-icon-left[b-k9ke15npp5] {
        color: #6b7280 !important;
        font-size: 1rem !important;
    }

    .rz-dropdown-item:hover .rz-button-icon-left[b-k9ke15npp5] {
        color: #374151 !important;
    }

/* Split button specific items */
.rz-splitbutton-menuitem[b-k9ke15npp5] {
    padding: 0.75rem 1rem !important;
    margin: 0 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

    .rz-splitbutton-menuitem:hover[b-k9ke15npp5] {
        background-color: #f3f4f6 !important;
        color: #1f2937 !important;
        transform: translateY(-1px) !important;
    }

    .rz-splitbutton-menuitem .rz-button-icon-left[b-k9ke15npp5] {
        color: #6b7280 !important;
        font-size: 1rem !important;
    }

    .rz-splitbutton-menuitem:hover .rz-button-icon-left[b-k9ke15npp5] {
        color: #374151 !important;
    }

/* Character count styling */
.character-count[b-k9ke15npp5] {
    font-size: 0.75rem;
    color: #64748b;
    margin-right: auto;
}

.button-group[b-k9ke15npp5] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ==================== LEGAL SECTION STYLES ==================== */
.legal-details-section[b-k9ke15npp5] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

.legal-notice[b-k9ke15npp5] {
    background-color: #1E40AF;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

    .legal-notice h4[b-k9ke15npp5] {
        margin: 0 0 0.5rem 0;
        font-size: 1rem;
        font-weight: 600;
    }

    .legal-notice p[b-k9ke15npp5] {
        margin: 0;
        font-size: 0.875rem;
        opacity: 0.9;
    }

.legal-reference[b-k9ke15npp5],
.legal-officer[b-k9ke15npp5] {
    background-color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border-left: 4px solid #1E40AF;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.legal-thread .message-item[b-k9ke15npp5] {
    border-left: 4px solid #1E40AF;
}

.legal-restriction-notice[b-k9ke15npp5] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem;
}

.restriction-content h4[b-k9ke15npp5] {
    color: #dc2626;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.restriction-content p[b-k9ke15npp5] {
    color: #7f1d1d;
    font-size: 0.875rem;
    margin: 0.5rem 0;
    line-height: 1.5;
}

/* ==================== MESSAGE THREAD STYLES ==================== */
.thread-container[b-k9ke15npp5] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #f8fafc;
}

.message-item[b-k9ke15npp5] {
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.legal-message[b-k9ke15npp5] {
    border-left: 4px solid #1E40AF !important;
}

.avatar[b-k9ke15npp5] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.avatar-purple[b-k9ke15npp5] {
    background-color: #8b5cf6;
}

.avatar-blue[b-k9ke15npp5] {
    background-color: #3b82f6;
}

.avatar-green[b-k9ke15npp5] {
    background-color: #10b981;
}

.avatar-gray[b-k9ke15npp5] {
    background-color: #6b7280;
}

.message-content[b-k9ke15npp5] {
    flex: 1;
}

.message-header[b-k9ke15npp5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.message-author[b-k9ke15npp5] {
    font-weight: bold;
    color: #1e293b;
    font-size: 0.875rem;
}

.message-time[b-k9ke15npp5] {
    color: #64748b;
    font-size: 0.75rem;
}

.message-badge[b-k9ke15npp5] {
    background-color: #fee2e2;
    color: #dc2626;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.response-badge[b-k9ke15npp5] {
    background-color: #dbeafe;
    color: #3b82f6;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.system-badge[b-k9ke15npp5] {
    background-color: #d1fae5;
    color: #065f46;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.message-text[b-k9ke15npp5] {
    color: #1e293b;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.message-actions[b-k9ke15npp5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-link[b-k9ke15npp5] {
    background-color: #dbeafe;
    color: #3b82f6;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

    .action-link:hover[b-k9ke15npp5] {
        background-color: #bfdbfe;
    }

.attachment-link[b-k9ke15npp5] {
    background-color: #f3f4f6;
    color: #64748b;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
}

/* ==================== RESPONSE INPUT STYLES ==================== */
.response-section[b-k9ke15npp5] {
    padding: 1.5rem;
    background-color: white;
    border-top: 1px solid #e2e8f0;
}

.response-section-resolved[b-k9ke15npp5] {
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f3f4f6;
    text-align: center;
    color: #6b7280;
}

.response-input[b-k9ke15npp5] {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

    .response-input:focus[b-k9ke15npp5] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.response-actions[b-k9ke15npp5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ==================== UTILITY STYLES ==================== */
.loading-message[b-k9ke15npp5] {
    text-align: center;
    color: #64748b;
    padding: 2rem;
    font-size: 0.875rem;
}

.no-results[b-k9ke15npp5] {
    text-align: center;
    color: #94a3b8;
    padding: 2rem;
    font-size: 0.875rem;
    font-style: italic;
}

/* Mobile back button - hidden on desktop */
.btn-mobile-back[b-k9ke15npp5] {
    display: none;
}

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

/* Tablet landscape (1200px and below) */
@media (max-width: 1200px) {
    .communications-container[b-k9ke15npp5] {
        min-height: 500px;
    }

    .concerns-sidebar[b-k9ke15npp5] {
        flex: 0 0 280px;
        min-width: 280px;
    }
}

/* Tablet portrait (900px and below) */
@media (max-width: 900px) {
    .communications-container[b-k9ke15npp5] {
        min-height: 500px;
    }

    .concerns-sidebar[b-k9ke15npp5] {
        flex: 0 0 250px;
        min-width: 250px;
    }

    .concern-header-section[b-k9ke15npp5] {
        padding: 1.25rem;
    }

    .action-buttons[b-k9ke15npp5] {
        flex-wrap: wrap;
    }

    .thread-container[b-k9ke15npp5] {
        padding: 1.25rem;
    }

    .response-section[b-k9ke15npp5] {
        padding: 1.25rem;
    }
}

/* Mobile landscape and small tablets (768px and below) */
@media (max-width: 768px) {
    .communications-container[b-k9ke15npp5] {
        min-height: auto;
        max-height: none;
        height: 100%;
    }

    /* Mobile list-detail: sidebar visible by default, main-content hidden */
    .concerns-sidebar[b-k9ke15npp5] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        max-height: none;
        border-right: none;
        overflow-y: auto;
    }

    .concerns-sidebar.mobile-hidden[b-k9ke15npp5] {
        display: none;
    }

    .main-content[b-k9ke15npp5] {
        display: none;
    }

    /* Full-screen overlay for chat on mobile */
    .main-content.mobile-visible[b-k9ke15npp5] {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background-color: white;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .btn-mobile-back[b-k9ke15npp5] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #f8fafc;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        color: #3891BB;
        font-size: 0.9375rem;
        font-weight: 600;
        padding: 0.875rem 1rem;
        cursor: pointer;
        width: 100%;
        flex-shrink: 0;
    }

    .btn-mobile-back:active[b-k9ke15npp5] {
        background-color: #e2e8f0;
    }

    .concern-header-section[b-k9ke15npp5] {
        padding: 1rem;
        flex-shrink: 0;
    }

    .concern-title[b-k9ke15npp5] {
        font-size: 1.0625rem;
    }

    .concern-container[b-k9ke15npp5] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .action-buttons[b-k9ke15npp5] {
        width: 100%;
        flex-direction: row;
        gap: 0.5rem;
    }

        .action-buttons .btn-primary[b-k9ke15npp5] {
            flex: 1;
        }

        .action-buttons .rz-splitbutton[b-k9ke15npp5] {
            flex: 1;
        }

    .thread-container[b-k9ke15npp5] {
        padding: 1rem;
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .message-item[b-k9ke15npp5] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .response-section[b-k9ke15npp5] {
        padding: 1rem;
        flex-shrink: 0;
        border-top: 1px solid #e2e8f0;
    }

    .response-input[b-k9ke15npp5] {
        min-height: 80px;
    }

    .response-actions[b-k9ke15npp5] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .character-count[b-k9ke15npp5] {
        flex: 0 0 100%;
        order: 2;
    }

    .button-group[b-k9ke15npp5] {
        flex: 1 1 100%;
        order: 1;
    }

    .response-section-resolved[b-k9ke15npp5] {
        flex-shrink: 0;
    }
}

/* Mobile portrait (600px and below) */
@media (max-width: 600px) {
    .communications-container[b-k9ke15npp5] {
        min-height: auto;
    }

    .search-box[b-k9ke15npp5] {
        padding: 0.875rem;
    }

    .concern-item[b-k9ke15npp5] {
        padding: 0.75rem;
        margin: 0.5rem;
    }

    .concern-header-section[b-k9ke15npp5] {
        padding: 0.875rem;
    }

    .concern-title[b-k9ke15npp5] {
        font-size: 1rem;
    }

    .concern-info[b-k9ke15npp5] {
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .action-buttons[b-k9ke15npp5] {
        flex-direction: column;
        gap: 0.625rem;
    }

        .action-buttons .btn-primary[b-k9ke15npp5],
        .action-buttons .rz-splitbutton[b-k9ke15npp5] {
            width: 100%;
            flex: none;
        }

    .thread-container[b-k9ke15npp5] {
        padding: 0.875rem;
    }

    .message-item[b-k9ke15npp5] {
        padding: 0.875rem;
        flex-direction: row;
        align-items: flex-start;
    }

    .avatar[b-k9ke15npp5] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }

    .message-header[b-k9ke15npp5] {
        flex-wrap: wrap;
    }

    .message-text[b-k9ke15npp5] {
        font-size: 0.875rem;
    }

    .response-section[b-k9ke15npp5] {
        padding: 0.875rem;
    }

    .response-input[b-k9ke15npp5] {
        min-height: 90px;
        font-size: 0.875rem;
    }

    .button-group[b-k9ke15npp5] {
        gap: 0.5rem;
    }

        .button-group .btn-primary[b-k9ke15npp5],
        .button-group .btn-secondary[b-k9ke15npp5] {
            flex: 1;
            min-width: 0;
        }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .search-box[b-k9ke15npp5] {
        padding: 0.75rem;
    }

    .concern-item[b-k9ke15npp5] {
        padding: 0.625rem;
        margin: 0.375rem;
    }

    .concern-id[b-k9ke15npp5] {
        font-size: 0.75rem;
    }

    .concern-subject[b-k9ke15npp5] {
        font-size: 0.6875rem;
    }

    .concern-description[b-k9ke15npp5] {
        font-size: 0.625rem;
        -webkit-line-clamp: 1;
    }

    .priority-badge[b-k9ke15npp5],
    .status-badge-small[b-k9ke15npp5] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
    }

    .concern-header-section[b-k9ke15npp5] {
        padding: 0.75rem;
    }

    .concern-title[b-k9ke15npp5] {
        font-size: 0.9375rem;
    }

    .action-buttons .btn-primary[b-k9ke15npp5],
    .action-buttons .rz-splitbutton[b-k9ke15npp5] {
        font-size: 0.875rem;
        height: 38px;
    }

    .message-item[b-k9ke15npp5] {
        padding: 0.75rem;
    }

    .avatar[b-k9ke15npp5] {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .message-text[b-k9ke15npp5] {
        font-size: 0.8125rem;
    }

    .response-section[b-k9ke15npp5] {
        padding: 0.75rem;
    }

    .response-input[b-k9ke15npp5] {
        min-height: 80px;
        padding: 0.75rem;
        font-size: 0.8125rem;
    }

    .button-group[b-k9ke15npp5] {
        flex-direction: column;
    }

        .button-group .btn-primary[b-k9ke15npp5],
        .button-group .btn-secondary[b-k9ke15npp5] {
            width: 100%;
        }
}

/* Very small mobile (360px and below) */
@media (max-width: 360px) {
    .concern-item[b-k9ke15npp5] {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    .status-container[b-k9ke15npp5] {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }

    .concern-title[b-k9ke15npp5] {
        font-size: 0.875rem;
    }

    .btn-primary[b-k9ke15npp5],
    .btn-secondary[b-k9ke15npp5],
    .rz-splitbutton .rz-button[b-k9ke15npp5] {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.625rem !important;
    }
}
/* /Components/CommunicationsEmployee.razor.rz.scp.css */
/* ==================== LAYOUT STYLES ==================== */
.communications-container[b-9mxa73cffy] {
    display: flex;
    height: calc(100vh - 270px);
}

.status-badge-container[b-9mxa73cffy] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.concern-container[b-9mxa73cffy] {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

/* ==================== LEFT SIDEBAR STYLES ==================== */
.concerns-sidebar[b-9mxa73cffy] {
    width: 300px;
    background-color: white;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    height: 40rem;
}

.search-box[b-9mxa73cffy] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.search-input[b-9mxa73cffy] {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: #f1f5f9;
    font-size: 0.875rem;
}

    .search-input:focus[b-9mxa73cffy] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

/* ==================== CONCERN CARD STYLES ==================== */
.concern-item[b-9mxa73cffy] {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin: 0.5rem 1rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

    .concern-item:hover[b-9mxa73cffy] {
        background-color: #f1f5f9;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    .concern-item.active[b-9mxa73cffy] {
        background-color: #eff6ff;
        border-left: 4px solid #3b82f6;
        border-color: #3b82f6;
    }

    .concern-item.selected[b-9mxa73cffy] {
        background-color: #eff6ff;
        border-left: 4px solid #3b82f6;
        border-color: #3b82f6;
    }

    .concern-item.critical[b-9mxa73cffy] {
        background-color: #fef3c7;
        border-color: #fbbf24;
    }

    .concern-item.high[b-9mxa73cffy] {
        background-color: #fef3c1;
        border-color: #EA580C;
    }

    .concern-item.legal-concern[b-9mxa73cffy] {
        background-color: #f0f4ff;
        border-left: 4px solid #1E40AF;
        border-color: #1E40AF;
    }

.concern-header[b-9mxa73cffy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.concern-id[b-9mxa73cffy] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.concern-subject[b-9mxa73cffy] {
    font-size: 0.75rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.concern-description[b-9mxa73cffy] {
    font-size: 0.6875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    /* Limit description to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.concern-meta[b-9mxa73cffy] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* ==================== PRIORITY BADGE STYLES ==================== */
.priority-badge[b-9mxa73cffy] {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
}

.priority-critical[b-9mxa73cffy] {
    background-color: #dc2626;
    color: white;
}

.priority-medium[b-9mxa73cffy] {
    background-color: #f59e0b;
    color: white;
}

.priority-high[b-9mxa73cffy] {
    background-color: #FB6514;
    color: white;
}

.priority-low[b-9mxa73cffy] {
    background-color: #10b981;
    color: white;
}

/* ==================== STATUS BADGE STYLES ==================== */
.status-badge[b-9mxa73cffy] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.status-open[b-9mxa73cffy] {
    background-color: #fef3c7;
    color: #92400e;
}

.status-under-review[b-9mxa73cffy] {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-resolved[b-9mxa73cffy] {
    background-color: #d1fae5;
    color: #065f46;
}

.status-escalated[b-9mxa73cffy] {
    background-color: #fee2e2;
    color: #dc2626;
}

.status-legal[b-9mxa73cffy] {
    background-color: #1E40AF;
    color: white;
    font-weight: 700;
}
.status-submitted[b-9mxa73cffy] {
    background-color: green;
    color: white;
    font-weight: 700;
}


/* Small status badges for sidebar */
.status-badge-small[b-9mxa73cffy] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    margin-left: 0.25rem;
}

/* ==================== MAIN CONTENT STYLES ==================== */
.main-content[b-9mxa73cffy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.concern-header-section[b-9mxa73cffy] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.concern-title[b-9mxa73cffy] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.legal-indicator[b-9mxa73cffy] {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: #1E40AF;
    font-weight: 600;
    margin-left: 0.5rem;
}

.concern-info[b-9mxa73cffy] {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 2;
}

.action-buttons[b-9mxa73cffy] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: center;
}

/* ==================== BUTTON STYLES ==================== */
.btn-primary[b-9mxa73cffy] {
    background-color: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-primary:hover[b-9mxa73cffy] {
        background-color: #059669;
    }

    .btn-primary:disabled[b-9mxa73cffy] {
        background-color: #9ca3af;
        cursor: not-allowed;
    }

.btn-secondary[b-9mxa73cffy] {
    background-color: white;
    color: #64748b;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-secondary:hover[b-9mxa73cffy] {
        background-color: #f1f5f9;
        border-color: #3b82f6;
    }

/* ==================== RADZEN SPLIT BUTTON OVERRIDES ==================== */
.rz-splitbutton[b-9mxa73cffy] {
    height: 36px !important;
    font-size: 0.875rem !important;
}

    .rz-splitbutton .rz-button[b-9mxa73cffy] {
        height: 36px !important;
        padding: 0 0.75rem !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }

    .rz-splitbutton .rz-button-icon-only[b-9mxa73cffy] {
        width: 36px !important;
        padding: 0 !important;
    }

/* Modern dropdown menu styling */
.rz-dropdown-panel[b-9mxa73cffy] {
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem 0 !important;
    background: white !important;
    min-width: 200px !important;
    margin-top: 0.25rem !important;
}

.rz-dropdown-item[b-9mxa73cffy] {
    padding: 0.75rem 1rem !important;
    margin: 0 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

    .rz-dropdown-item:hover[b-9mxa73cffy] {
        background-color: #f3f4f6 !important;
        color: #1f2937 !important;
        transform: translateY(-1px) !important;
    }

    .rz-dropdown-item:active[b-9mxa73cffy],
    .rz-dropdown-item:focus[b-9mxa73cffy] {
        background-color: #e5e7eb !important;
        outline: none !important;
    }

    .rz-dropdown-item .rz-button-icon-left[b-9mxa73cffy] {
        color: #6b7280 !important;
        font-size: 1rem !important;
    }

    .rz-dropdown-item:hover .rz-button-icon-left[b-9mxa73cffy] {
        color: #374151 !important;
    }

/* Split button specific items */
.rz-splitbutton-menuitem[b-9mxa73cffy] {
    padding: 0.75rem 1rem !important;
    margin: 0 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

    .rz-splitbutton-menuitem:hover[b-9mxa73cffy] {
        background-color: #f3f4f6 !important;
        color: #1f2937 !important;
        transform: translateY(-1px) !important;
    }

    .rz-splitbutton-menuitem .rz-button-icon-left[b-9mxa73cffy] {
        color: #6b7280 !important;
        font-size: 1rem !important;
    }

    .rz-splitbutton-menuitem:hover .rz-button-icon-left[b-9mxa73cffy] {
        color: #374151 !important;
    }

/* Character count styling */
.character-count[b-9mxa73cffy] {
    font-size: 0.75rem;
    color: #64748b;
    margin-right: auto;
}

.button-group[b-9mxa73cffy] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ==================== LEGAL SECTION STYLES ==================== */
.legal-details-section[b-9mxa73cffy] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

.legal-notice[b-9mxa73cffy] {
    background-color: #1E40AF;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

    .legal-notice h4[b-9mxa73cffy] {
        margin: 0 0 0.5rem 0;
        font-size: 1rem;
        font-weight: 600;
    }

    .legal-notice p[b-9mxa73cffy] {
        margin: 0;
        font-size: 0.875rem;
        opacity: 0.9;
    }

.legal-reference[b-9mxa73cffy],
.legal-officer[b-9mxa73cffy] {
    background-color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border-left: 4px solid #1E40AF;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.legal-thread .message-item[b-9mxa73cffy] {
    border-left: 4px solid #1E40AF;
}

.legal-restriction-notice[b-9mxa73cffy] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem;
}

.restriction-content h4[b-9mxa73cffy] {
    color: #dc2626;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.restriction-content p[b-9mxa73cffy] {
    color: #7f1d1d;
    font-size: 0.875rem;
    margin: 0.5rem 0;
    line-height: 1.5;
}

/* ==================== MESSAGE THREAD STYLES ==================== */
.thread-container[b-9mxa73cffy] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #f8fafc;
}

.message-item[b-9mxa73cffy] {
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.legal-message[b-9mxa73cffy] {
    border-left: 4px solid #1E40AF !important;
}

.avatar[b-9mxa73cffy] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.avatar-purple[b-9mxa73cffy] {
    background-color: #8b5cf6;
}

.avatar-blue[b-9mxa73cffy] {
    background-color: #3b82f6;
}

.avatar-green[b-9mxa73cffy] {
    background-color: #10b981;
}

.avatar-gray[b-9mxa73cffy] {
    background-color: #6b7280;
}

.message-content[b-9mxa73cffy] {
    flex: 1;
}

.message-header[b-9mxa73cffy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.message-author[b-9mxa73cffy] {
    font-weight: bold;
    color: #1e293b;
    font-size: 0.875rem;
}

.message-time[b-9mxa73cffy] {
    color: #64748b;
    font-size: 0.75rem;
}

.message-badge[b-9mxa73cffy] {
    background-color: #fee2e2;
    color: #dc2626;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.response-badge[b-9mxa73cffy] {
    background-color: #dbeafe;
    color: #3b82f6;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.system-badge[b-9mxa73cffy] {
    background-color: #d1fae5;
    color: #065f46;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.message-text[b-9mxa73cffy] {
    color: #1e293b;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.message-actions[b-9mxa73cffy] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-link[b-9mxa73cffy] {
    background-color: #dbeafe;
    color: #3b82f6;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

    .action-link:hover[b-9mxa73cffy] {
        background-color: #bfdbfe;
    }

.attachment-link[b-9mxa73cffy] {
    background-color: #f3f4f6;
    color: #64748b;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
}

/* ==================== RESPONSE INPUT STYLES ==================== */
.response-section[b-9mxa73cffy] {
    padding: 1.5rem;
    background-color: white;
    border-top: 1px solid #e2e8f0;
}

.response-section-resolved[b-9mxa73cffy] {
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f3f4f6;
    text-align: center;
    color: #6b7280;
}

.response-input[b-9mxa73cffy] {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

    .response-input:focus[b-9mxa73cffy] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.response-actions[b-9mxa73cffy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ==================== UTILITY STYLES ==================== */
.loading-message[b-9mxa73cffy] {
    text-align: center;
    color: #64748b;
    padding: 2rem;
    font-size: 0.875rem;
}

.no-results[b-9mxa73cffy] {
    text-align: center;
    color: #94a3b8;
    padding: 2rem;
    font-size: 0.875rem;
    font-style: italic;
}

/* Mobile back button - hidden on desktop */
.btn-mobile-back[b-9mxa73cffy] {
    display: none;
}

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

/* Tablet landscape (1200px and below) */
@media (max-width: 1200px) {
    .communications-container[b-9mxa73cffy] {
        min-height: 500px;
    }

    .concerns-sidebar[b-9mxa73cffy] {
        width: 280px;
    }
}

/* Tablet portrait (900px and below) */
@media (max-width: 900px) {
    .communications-container[b-9mxa73cffy] {
        min-height: 500px;
    }

    .concerns-sidebar[b-9mxa73cffy] {
        width: 250px;
    }

    .concern-header-section[b-9mxa73cffy] {
        padding: 1.25rem;
    }

    .action-buttons[b-9mxa73cffy] {
        flex-wrap: wrap;
    }

    .thread-container[b-9mxa73cffy] {
        padding: 1.25rem;
    }

    .response-section[b-9mxa73cffy] {
        padding: 1.25rem;
    }
}

/* Mobile landscape and small tablets (768px and below) */
@media (max-width: 768px) {
    .communications-container[b-9mxa73cffy] {
        min-height: auto;
        max-height: none;
        height: 100%;
    }

    /* Mobile list-detail: sidebar visible by default, main-content hidden */
    .concerns-sidebar[b-9mxa73cffy] {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        border-right: none;
        overflow-y: auto;
        height: auto;
    }

    .concerns-sidebar.mobile-hidden[b-9mxa73cffy] {
        display: none;
    }

    .main-content[b-9mxa73cffy] {
        display: none;
    }

    /* Full-screen overlay for chat on mobile */
    .main-content.mobile-visible[b-9mxa73cffy] {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background-color: white;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .btn-mobile-back[b-9mxa73cffy] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #f8fafc;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        color: #3891BB;
        font-size: 0.9375rem;
        font-weight: 600;
        padding: 0.875rem 1rem;
        cursor: pointer;
        width: 100%;
        flex-shrink: 0;
    }

    .btn-mobile-back:active[b-9mxa73cffy] {
        background-color: #e2e8f0;
    }

    .concern-header-section[b-9mxa73cffy] {
        padding: 1rem;
        flex-shrink: 0;
    }

    .concern-title[b-9mxa73cffy] {
        font-size: 1.0625rem;
    }

    .concern-container[b-9mxa73cffy] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .action-buttons[b-9mxa73cffy] {
        width: 100%;
        flex-direction: row;
        gap: 0.5rem;
    }

        .action-buttons .btn-primary[b-9mxa73cffy] {
            flex: 1;
        }

        .action-buttons .rz-splitbutton[b-9mxa73cffy] {
            flex: 1;
        }

    .thread-container[b-9mxa73cffy] {
        padding: 1rem;
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .message-item[b-9mxa73cffy] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .response-section[b-9mxa73cffy] {
        padding: 1rem;
        flex-shrink: 0;
        border-top: 1px solid #e2e8f0;
    }

    .response-input[b-9mxa73cffy] {
        min-height: 80px;
    }

    .response-actions[b-9mxa73cffy] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .character-count[b-9mxa73cffy] {
        flex: 0 0 100%;
        order: 2;
    }

    .button-group[b-9mxa73cffy] {
        flex: 1 1 100%;
        order: 1;
    }

    .response-section-resolved[b-9mxa73cffy] {
        flex-shrink: 0;
    }
}

/* Mobile portrait (600px and below) */
@media (max-width: 600px) {
    .communications-container[b-9mxa73cffy] {
        min-height: auto;
    }

    .search-box[b-9mxa73cffy] {
        padding: 0.875rem;
    }

    .concern-item[b-9mxa73cffy] {
        padding: 0.75rem;
        margin: 0.5rem;
    }

    .concern-header-section[b-9mxa73cffy] {
        padding: 0.875rem;
    }

    .concern-title[b-9mxa73cffy] {
        font-size: 1rem;
    }

    .concern-info[b-9mxa73cffy] {
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .action-buttons[b-9mxa73cffy] {
        flex-direction: column;
        gap: 0.625rem;
    }

        .action-buttons .btn-primary[b-9mxa73cffy],
        .action-buttons .rz-splitbutton[b-9mxa73cffy] {
            width: 100%;
            flex: none;
        }

    .thread-container[b-9mxa73cffy] {
        padding: 0.875rem;
    }

    .message-item[b-9mxa73cffy] {
        padding: 0.875rem;
        flex-direction: row;
        align-items: flex-start;
    }

    .avatar[b-9mxa73cffy] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }

    .message-header[b-9mxa73cffy] {
        flex-wrap: wrap;
    }

    .message-text[b-9mxa73cffy] {
        font-size: 0.875rem;
    }

    .response-section[b-9mxa73cffy] {
        padding: 0.875rem;
    }

    .response-input[b-9mxa73cffy] {
        min-height: 90px;
        font-size: 0.875rem;
    }

    .button-group[b-9mxa73cffy] {
        gap: 0.5rem;
    }

        .button-group .btn-primary[b-9mxa73cffy],
        .button-group .btn-secondary[b-9mxa73cffy] {
            flex: 1;
            min-width: 0;
        }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .search-box[b-9mxa73cffy] {
        padding: 0.75rem;
    }

    .concern-item[b-9mxa73cffy] {
        padding: 0.625rem;
        margin: 0.375rem;
    }

    .concern-id[b-9mxa73cffy] {
        font-size: 0.75rem;
    }

    .concern-subject[b-9mxa73cffy] {
        font-size: 0.6875rem;
    }

    .concern-description[b-9mxa73cffy] {
        font-size: 0.625rem;
        -webkit-line-clamp: 1;
    }

    .priority-badge[b-9mxa73cffy],
    .status-badge-small[b-9mxa73cffy] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
    }

    .concern-header-section[b-9mxa73cffy] {
        padding: 0.75rem;
    }

    .concern-title[b-9mxa73cffy] {
        font-size: 0.9375rem;
    }

    .action-buttons .btn-primary[b-9mxa73cffy],
    .action-buttons .rz-splitbutton[b-9mxa73cffy] {
        font-size: 0.875rem;
        height: 38px;
    }

    .message-item[b-9mxa73cffy] {
        padding: 0.75rem;
    }

    .avatar[b-9mxa73cffy] {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .message-text[b-9mxa73cffy] {
        font-size: 0.8125rem;
    }

    .response-section[b-9mxa73cffy] {
        padding: 0.75rem;
    }

    .response-input[b-9mxa73cffy] {
        min-height: 80px;
        padding: 0.75rem;
        font-size: 0.8125rem;
    }

    .button-group[b-9mxa73cffy] {
        flex-direction: column;
    }

        .button-group .btn-primary[b-9mxa73cffy],
        .button-group .btn-secondary[b-9mxa73cffy] {
            width: 100%;
        }
}

/* Very small mobile (360px and below) */
@media (max-width: 360px) {
    .concern-item[b-9mxa73cffy] {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    .status-container[b-9mxa73cffy] {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }

    .concern-title[b-9mxa73cffy] {
        font-size: 0.875rem;
    }

    .btn-primary[b-9mxa73cffy],
    .btn-secondary[b-9mxa73cffy],
    .rz-splitbutton .rz-button[b-9mxa73cffy] {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.625rem !important;
    }
}
/* /Components/ConnectionStatusIndicator.razor.rz.scp.css */
.connection-status-wrapper[b-l3ecb6ngmo] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.status-indicator[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
}

.status-indicator:hover[b-l3ecb6ngmo] {
    background: rgba(0, 0, 0, 0.05);
}

.status-dot[b-l3ecb6ngmo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.status-dot.large[b-l3ecb6ngmo] {
    width: 12px;
    height: 12px;
}

/* Status colors */
.status-indicator.online .status-dot[b-l3ecb6ngmo] {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.status-indicator.degraded .status-dot[b-l3ecb6ngmo] {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    animation: pulse-warning-b-l3ecb6ngmo 2s infinite;
}

.status-indicator.offline .status-dot[b-l3ecb6ngmo] {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    animation: pulse-danger-b-l3ecb6ngmo 1.5s infinite;
}

@keyframes pulse-warning-b-l3ecb6ngmo {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3);
    }
}

@keyframes pulse-danger-b-l3ecb6ngmo {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.3);
    }
}

.status-label[b-l3ecb6ngmo] {
    color: #374151;
}

.queue-badge[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #6366f1;
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

/* Details panel */
.status-details-panel[b-l3ecb6ngmo] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1001;
    animation: slideDown-b-l3ecb6ngmo 0.2s ease;
}

@keyframes slideDown-b-l3ecb6ngmo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-header[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: white;
}

.status-header.online[b-l3ecb6ngmo] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.status-header.degraded[b-l3ecb6ngmo] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.status-header.offline[b-l3ecb6ngmo] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.status-title[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.close-btn[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.close-btn:hover[b-l3ecb6ngmo] {
    background: rgba(255, 255, 255, 0.3);
}

.status-message[b-l3ecb6ngmo] {
    padding: 12px 16px;
    font-size: 13px;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.services-section[b-l3ecb6ngmo],
.queue-section[b-l3ecb6ngmo] {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.section-title[b-l3ecb6ngmo] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.service-row[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.service-dot[b-l3ecb6ngmo] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.service-row.healthy .service-dot[b-l3ecb6ngmo] {
    background: #10b981;
}

.service-row.unhealthy .service-dot[b-l3ecb6ngmo] {
    background: #ef4444;
}

.service-name[b-l3ecb6ngmo] {
    flex: 1;
    color: #374151;
}

.service-error[b-l3ecb6ngmo] {
    color: #ef4444;
    font-size: 16px;
    cursor: help;
}

.queue-info[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #374151;
}

.retry-btn[b-l3ecb6ngmo] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.retry-btn:hover:not(:disabled)[b-l3ecb6ngmo] {
    background: #4f46e5;
}

.retry-btn:disabled[b-l3ecb6ngmo] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinning[b-l3ecb6ngmo] {
    animation: spin-b-l3ecb6ngmo 1s linear infinite;
}

@keyframes spin-b-l3ecb6ngmo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.status-actions[b-l3ecb6ngmo] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}

.action-btn[b-l3ecb6ngmo] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-l3ecb6ngmo] {
    background: #e5e7eb;
}

.offline-notice[b-l3ecb6ngmo] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    line-height: 1.4;
}

.offline-notice .rzi[b-l3ecb6ngmo] {
    flex-shrink: 0;
    font-size: 18px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .status-details-panel[b-l3ecb6ngmo] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
        overflow-y: auto;
    }
}
/* /Components/CookieConsentBanner.razor.rz.scp.css */
/* Cookie Consent Banner Overlay */
.cookie-consent-overlay[b-8hcejiikf3] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(2px);
    animation: slideUp-b-8hcejiikf3 0.3s ease-out;
}

@keyframes slideUp-b-8hcejiikf3 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Banner Container */
.cookie-consent-banner[b-8hcejiikf3] {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color, #E5E7EB);
}

.cookie-consent-content[b-8hcejiikf3] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.cookie-consent-icon[b-8hcejiikf3] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light, #EBF5FA);
    border-radius: 8px;
}

.cookie-consent-text h4[b-8hcejiikf3] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #333F48);
    font-size: 1rem;
    font-weight: 600;
}

.cookie-consent-text p[b-8hcejiikf3] {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary, #6B7280);
    font-size: 0.875rem;
    line-height: 1.5;
}

.cookie-consent-detail[b-8hcejiikf3] {
    font-size: 0.8rem !important;
    color: var(--text-muted, #9CA3AF) !important;
}

.cookie-consent-actions[b-8hcejiikf3] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Cookie Details Dialog Overlay */
.cookie-details-overlay[b-8hcejiikf3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-8hcejiikf3 0.2s ease-out;
}

@keyframes fadeIn-b-8hcejiikf3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Details Dialog */
.cookie-details-dialog[b-8hcejiikf3] {
    background: #ffffff;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.cookie-details-header[b-8hcejiikf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

.cookie-details-header h3[b-8hcejiikf3] {
    margin: 0;
    color: var(--text-primary, #333F48);
    font-size: 1.125rem;
    font-weight: 600;
}

.cookie-details-body[b-8hcejiikf3] {
    padding: 1.5rem;
}

.cookie-details-body h4[b-8hcejiikf3] {
    color: var(--text-primary, #333F48);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.cookie-details-body p[b-8hcejiikf3] {
    color: var(--text-secondary, #6B7280);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

/* Cookie Table */
.cookie-table[b-8hcejiikf3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.cookie-table th[b-8hcejiikf3] {
    background: var(--primary-light, #EBF5FA);
    color: var(--text-primary, #333F48);
    font-weight: 600;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--border-color, #E5E7EB);
}

.cookie-table td[b-8hcejiikf3] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    color: var(--text-secondary, #6B7280);
}

.cookie-table code[b-8hcejiikf3] {
    background: #F3F4F6;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--primary-dark, #2A6D8E);
}

.cookie-details-footer[b-8hcejiikf3] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #E5E7EB);
    display: flex;
    justify-content: flex-end;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .cookie-consent-overlay[b-8hcejiikf3] {
        padding: 0.5rem;
    }

    .cookie-consent-banner[b-8hcejiikf3] {
        padding: 1rem;
    }

    .cookie-consent-content[b-8hcejiikf3] {
        flex-direction: column;
    }

    .cookie-consent-icon[b-8hcejiikf3] {
        display: none;
    }

    .cookie-consent-actions[b-8hcejiikf3] {
        flex-direction: column;
    }

    .cookie-details-dialog[b-8hcejiikf3] {
        max-height: 90vh;
    }

    .cookie-table th[b-8hcejiikf3],
    .cookie-table td[b-8hcejiikf3] {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}
/* /Components/Dialogs/BodyMapViewerDialog.razor.rz.scp.css */
.bodymap-viewer-overlay[b-1t3rm4wpo6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow: auto;
}

.bodymap-viewer-overlay.active[b-1t3rm4wpo6] {
    display: flex;
}

.bodymap-viewer-dialog[b-1t3rm4wpo6] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideDown-b-1t3rm4wpo6 0.3s ease-out;
}

@keyframes slideDown-b-1t3rm4wpo6 {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dialog Header */
.dialog-header[b-1t3rm4wpo6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.header-content[b-1t3rm4wpo6] {
    flex: 1;
}

.header-content h2[b-1t3rm4wpo6] {
    margin: 0 0 5px 0;
    font-size: 22px;
    font-weight: 600;
}

.patient-info[b-1t3rm4wpo6] {
    font-size: 14px;
    opacity: 0.9;
}

.close-btn[b-1t3rm4wpo6] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: white;
}

.close-btn:hover[b-1t3rm4wpo6] {
    background: rgba(255, 255, 255, 0.3);
}

.close-icon[b-1t3rm4wpo6] {
    font-size: 28px;
    line-height: 1;
}

/* Dialog Content */
.dialog-content[b-1t3rm4wpo6] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Dialog Footer */
.dialog-footer[b-1t3rm4wpo6] {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .bodymap-viewer-overlay[b-1t3rm4wpo6] {
        padding: 10px;
    }

    .bodymap-viewer-dialog[b-1t3rm4wpo6] {
        max-height: 95vh;
    }

    .dialog-header[b-1t3rm4wpo6] {
        padding: 16px;
    }

    .dialog-content[b-1t3rm4wpo6] {
        padding: 16px;
    }

    .header-content h2[b-1t3rm4wpo6] {
        font-size: 18px;
    }

    .patient-info[b-1t3rm4wpo6] {
        font-size: 13px;
    }
}
/* /Components/Dialogs/CreateTaskDialog.razor.rz.scp.css */
/* Override dialog mask opacity */
:deep(.rz-dialog-mask)[b-opaghfpn5c] {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Main container styling */
.task-form-container[b-opaghfpn5c] {
    background-color: var(--secondary) !important;
    box-shadow: var(--shadow-lg) !important;
    border-left: 1px solid var(--border-color) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    padding: 2rem;
    height: 100vh;
    overflow-y: auto;
    position: relative;
}

/* Form header styling */
.form-header[b-opaghfpn5c] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-header h3[b-opaghfpn5c] {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-header h3[b-opaghfpn5c]::before {
    content: "📋";
    font-size: 1.25rem;
}

.form-header p[b-opaghfpn5c] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Form section styling */
.task-form-container .form-section[b-opaghfpn5c] {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.form-section:hover[b-opaghfpn5c] {
    box-shadow: var(--shadow);
}

.form-section h4[b-opaghfpn5c] {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form group styling */
.form-group[b-opaghfpn5c] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-opaghfpn5c] {
    margin-bottom: 0;
}

.task-form-container .form-group.half-width[b-opaghfpn5c] {
    flex: 1;
}

.form-row[b-opaghfpn5c] {
    display: flex;
    gap: 1rem;
}

/* Label styling */
:deep(.form-group .rz-label)[b-opaghfpn5c] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-opaghfpn5c]::after {
    content: " *";
    color: var(--error);
}

/* Input styling */
:deep(.form-group .rz-textbox)[b-opaghfpn5c],
:deep(.form-group .rz-textarea)[b-opaghfpn5c],
:deep(.form-group .rz-dropdown)[b-opaghfpn5c],
:deep(.form-group .rz-datepicker)[b-opaghfpn5c] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    transition: var(--transition) !important;
    font-size: 0.875rem !important;
}

:deep(.form-group .rz-textbox:focus)[b-opaghfpn5c],
:deep(.form-group .rz-textarea:focus)[b-opaghfpn5c],
:deep(.form-group .rz-dropdown:focus)[b-opaghfpn5c],
:deep(.form-group .rz-datepicker:focus)[b-opaghfpn5c] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* Priority and category dropdowns */
:deep(.form-group .rz-dropdown)[b-opaghfpn5c] {
    min-height: 40px !important;
}

/* Disabled input styling */
:deep(.form-group .rz-dropdown:disabled)[b-opaghfpn5c] {
    background-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
}

/* Help text styling */
.form-text[b-opaghfpn5c] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* Priority indicators */
:deep(.form-group .rz-dropdown[data-priority="High"])[b-opaghfpn5c] {
    border-left: 3px solid var(--error) !important;
}

:deep(.form-group .rz-dropdown[data-priority="Medium"])[b-opaghfpn5c] {
    border-left: 3px solid var(--warning) !important;
}

:deep(.form-group .rz-dropdown[data-priority="Low"])[b-opaghfpn5c] {
    border-left: 3px solid var(--success) !important;
}

/* Date picker styling */
:deep(.rz-datepicker input)[b-opaghfpn5c] {
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
}

/* Form actions */
.form-actions[b-opaghfpn5c] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
}

:deep(.form-actions .rz-button)[b-opaghfpn5c] {
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}

:deep(.form-actions .btn-primary)[b-opaghfpn5c] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

:deep(.form-actions .btn-primary:hover)[b-opaghfpn5c] {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.form-actions .btn-primary:disabled)[b-opaghfpn5c] {
    background-color: var(--background-disabled) !important;
    border-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

:deep(.form-actions .btn-outline)[b-opaghfpn5c] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

:deep(.form-actions .btn-outline:hover)[b-opaghfpn5c] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Loading state */
.form-loading[b-opaghfpn5c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--secondary-rgb), 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.form-loading p[b-opaghfpn5c] {
    color: var(--text-primary);
    font-weight: 500;
    margin-top: 1rem;
}

:deep(.form-loading .rz-progressbar)[b-opaghfpn5c] {
    width: 200px !important;
}

/* Validation styling */
:deep(.rz-messages-error)[b-opaghfpn5c] {
    color: var(--error) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* Section icons */
.form-section h4[b-opaghfpn5c]::before {
    font-size: 1rem;
    margin-right: 0.5rem;
}

.form-section:nth-of-type(1) h4[b-opaghfpn5c]::before {
    content: "📝";
}

.form-section:nth-of-type(2) h4[b-opaghfpn5c]::before {
    content: "👥";
}

.form-section:nth-of-type(3) h4[b-opaghfpn5c]::before {
    content: "⚡";
}

.form-section:nth-of-type(4) h4[b-opaghfpn5c]::before {
    content: "📅";
}

/* Tags input styling */
:deep(.form-group .rz-textbox[placeholder*="tags"])[b-opaghfpn5c] {
    position: relative;
}

:deep(.form-group .rz-textbox[placeholder*="tags"]::after)[b-opaghfpn5c] {
    content: "🏷️";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Progress dots */
.progress-dots[b-opaghfpn5c] {
    display: none;
}

/* Mobile step title (hidden on desktop) */
.mobile-step-title[b-opaghfpn5c] {
    display: none;
}

/* Mobile step navigation (hidden on desktop) */
.mobile-step-nav[b-opaghfpn5c] {
    display: none;
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .task-form-container[b-opaghfpn5c] {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-header[b-opaghfpn5c] {
        margin-bottom: 1rem;
    }

    .form-header h3[b-opaghfpn5c] {
        font-size: 1.25rem;
    }

    .progress-dots[b-opaghfpn5c] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-top: 0.75rem;
    }

    .dot[b-opaghfpn5c] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--border-color);
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .dot.filled[b-opaghfpn5c] {
        background-color: var(--primary);
    }

    .dot:hover[b-opaghfpn5c] {
        background-color: var(--primary-dark);
    }

    .mobile-step-title[b-opaghfpn5c] {
        display: block;
        font-size: 0.8125rem;
        color: var(--primary);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .form-row[b-opaghfpn5c] {
        flex-direction: column;
        gap: 0;
    }

    .form-group.half-width[b-opaghfpn5c] {
        flex: none;
    }

    /* Hide all form sections, show only active step */
    .task-form-container .form-section[b-opaghfpn5c] {
        display: none !important;
    }

    .task-form-container .form-section.mobile-step-active[b-opaghfpn5c] {
        display: block !important;
        animation: mobileStepFadeIn-b-opaghfpn5c 0.25s ease-out;
        flex: 1;
        overflow-y: auto;
    }

    @keyframes mobileStepFadeIn-b-opaghfpn5c {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Hide desktop form actions on mobile */
    .desktop-actions[b-opaghfpn5c] {
        display: none !important;
    }

    /* Show mobile step navigation */
    .mobile-step-nav[b-opaghfpn5c] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        flex-shrink: 0;
        background-color: var(--secondary);
    }

    .mobile-step-indicator[b-opaghfpn5c] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    :deep(.mobile-nav-btn)[b-opaghfpn5c] {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* Animation enhancements */
.form-section[b-opaghfpn5c] {
    animation: slideInFromRight-b-opaghfpn5c 0.3s ease-out;
}

.form-section:nth-child(2)[b-opaghfpn5c] {
    animation-delay: 0.1s;
}

.form-section:nth-child(3)[b-opaghfpn5c] {
    animation-delay: 0.2s;
}

.form-section:nth-child(4)[b-opaghfpn5c] {
    animation-delay: 0.3s;
}

@keyframes slideInFromRight-b-opaghfpn5c {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Focus management */
.task-form-container:focus-within .form-section[b-opaghfpn5c] {
    border-color: var(--primary-light);
}

/* Improved accessibility */
.form-group:focus-within .rz-label[b-opaghfpn5c] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}
/* /Components/Dialogs/CreateTeamDialog.razor.rz.scp.css */
/* Override dialog mask opacity */
:deep(.rz-dialog-mask)[b-byw17jtywx] {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Main container styling */
.team-form-container[b-byw17jtywx] {
    background-color: var(--secondary) !important;
    box-shadow: var(--shadow-lg) !important;
    border-left: 1px solid var(--border-color) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    padding: 2rem;
    height: 100vh;
    overflow-y: auto;
    position: relative;
}

/* Close button positioning */
.team-form-container[b-byw17jtywx]::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Form header styling */
.form-header[b-byw17jtywx] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-header h3[b-byw17jtywx] {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-header h3[b-byw17jtywx]::before {
    content: "👥";
    font-size: 1.25rem;
}

.form-header p[b-byw17jtywx] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Form section styling */
.team-form-container .form-section[b-byw17jtywx] {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.team-form-container .form-section:hover[b-byw17jtywx] {
    box-shadow: var(--shadow);
}

.team-form-container .form-section h4[b-byw17jtywx] {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form group styling */
.team-form-container .form-group[b-byw17jtywx] {
    margin-bottom: 1.25rem;
}

.team-form-container .form-group:last-child[b-byw17jtywx] {
    margin-bottom: 0;
}

/* Label styling */
:deep(.team-form-container .form-group .rz-label)[b-byw17jtywx] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-byw17jtywx]::after {
    content: " *";
    color: var(--error);
}

/* Input styling */
:deep(.team-form-container .form-group .rz-textbox)[b-byw17jtywx],
:deep(.team-form-container .form-group .rz-textarea)[b-byw17jtywx],
:deep(.team-form-container .form-group .rz-dropdown)[b-byw17jtywx] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    transition: var(--transition) !important;
    font-size: 0.875rem !important;
}

:deep(.team-form-container .form-group .rz-textbox:focus)[b-byw17jtywx],
:deep(.team-form-container .form-group .rz-textarea:focus)[b-byw17jtywx],
:deep(.team-form-container .form-group .rz-dropdown:focus)[b-byw17jtywx] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* Help text styling */
.form-text[b-byw17jtywx] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* Members selection styling */
.members-selection[b-byw17jtywx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.available-members[b-byw17jtywx],
.selected-members[b-byw17jtywx] {
    display: flex;
    flex-direction: column;
}

.members-list[b-byw17jtywx] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--secondary);
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
}

.members-list.available[b-byw17jtywx] {
    border-left: 3px solid var(--primary);
}

.members-list.selected[b-byw17jtywx] {
    border-left: 3px solid var(--success);
}

/* Member item styling */
.member-item[b-byw17jtywx] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.member-item:hover[b-byw17jtywx] {
    background-color: var(--secondary-hover);
    border-color: var(--primary);
    transform: translateX(2px);
}

.member-item:last-child[b-byw17jtywx] {
    margin-bottom: 0;
}

.member-info[b-byw17jtywx] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.75rem;
}

.member-avatar[b-byw17jtywx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.member-details[b-byw17jtywx] {
    display: flex;
    flex-direction: column;
}

.member-name[b-byw17jtywx] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
}

.member-role[b-byw17jtywx] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.add-icon[b-byw17jtywx],
.lead-indicator[b-byw17jtywx] {
    color: var(--primary);
    font-size: 1.125rem;
}

.remove-btn[b-byw17jtywx] {
    background-color: transparent !important;
    border: 1px solid var(--error) !important;
    color: var(--error) !important;
    padding: 0.25rem !important;
    width: 28px !important;
    height: 28px !important;
}

.remove-btn:hover[b-byw17jtywx] {
    background-color: var(--error) !important;
    color: white !important;
}

/* Empty selection state */
.empty-selection[b-byw17jtywx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.empty-selection .rz-icon[b-byw17jtywx] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-selection p[b-byw17jtywx] {
    font-weight: 500;
    margin: 0 0 0.25rem 0;
}

.empty-selection small[b-byw17jtywx] {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Warning message */
.warning-message[b-byw17jtywx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(var(--warning-rgb), 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    color: var(--warning-dark);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.warning-message .rz-icon[b-byw17jtywx] {
    color: var(--warning);
}

/* Form actions */
.form-actions[b-byw17jtywx] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
}

:deep(.form-actions .rz-button)[b-byw17jtywx] {
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}

:deep(.form-actions .btn-primary)[b-byw17jtywx] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

:deep(.form-actions .btn-primary:hover)[b-byw17jtywx] {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.form-actions .btn-outline)[b-byw17jtywx] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

:deep(.form-actions .btn-outline:hover)[b-byw17jtywx] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Loading state */
.form-loading[b-byw17jtywx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--secondary-rgb), 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.form-loading p[b-byw17jtywx] {
    color: var(--text-primary);
    font-weight: 500;
    margin-top: 1rem;
}

/* Validation styling */
:deep(.rz-messages-error)[b-byw17jtywx] {
    color: var(--error) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* Progress dots */
.progress-dots[b-byw17jtywx] {
    display: none;
}

/* Mobile step title (hidden on desktop) */
.mobile-step-title[b-byw17jtywx] {
    display: none;
}

/* Mobile step navigation (hidden on desktop) */
.mobile-step-nav[b-byw17jtywx] {
    display: none;
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .team-form-container[b-byw17jtywx] {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-header[b-byw17jtywx] {
        margin-bottom: 1rem;
    }

    .form-header h3[b-byw17jtywx] {
        font-size: 1.25rem;
    }

    .progress-dots[b-byw17jtywx] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-top: 0.75rem;
    }

    .dot[b-byw17jtywx] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--border-color);
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .dot.filled[b-byw17jtywx] {
        background-color: var(--primary);
    }

    .dot:hover[b-byw17jtywx] {
        background-color: var(--primary-dark);
    }

    .mobile-step-title[b-byw17jtywx] {
        display: block;
        font-size: 0.8125rem;
        color: var(--primary);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .members-selection[b-byw17jtywx] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Hide all form sections, show only active step */
    .team-form-container .form-section[b-byw17jtywx] {
        display: none !important;
    }

    .team-form-container .form-section.mobile-step-active[b-byw17jtywx] {
        display: block !important;
        animation: mobileStepFadeIn-b-byw17jtywx 0.25s ease-out;
        flex: 1;
        overflow-y: auto;
    }

    @keyframes mobileStepFadeIn-b-byw17jtywx {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Hide desktop form actions on mobile */
    .desktop-actions[b-byw17jtywx] {
        display: none !important;
    }

    /* Show mobile step navigation */
    .mobile-step-nav[b-byw17jtywx] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        flex-shrink: 0;
        background-color: var(--secondary);
    }

    .mobile-step-indicator[b-byw17jtywx] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    :deep(.mobile-nav-btn)[b-byw17jtywx] {
        flex: 1 !important;
        justify-content: center !important;
    }
}
/* /Components/Dialogs/EditClientSideDialog.razor.rz.scp.css */
/* ============================================
   EditClientSideDialog - Modern Design
   Uses CSS variables from site.css
   ============================================ */

.patient-form-container[b-5rcth3hho1] {
    padding: 0 2rem 6rem 2rem;
    height: 100%;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--secondary);
}

/* Header */
.form-header[b-5rcth3hho1] {
    position: sticky;
    top: 0;
    background-color: var(--secondary);
    z-index: 10;
    padding: 2rem 0 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.form-header h3[b-5rcth3hho1] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.form-header p[b-5rcth3hho1] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.required-indicator[b-5rcth3hho1] {
    color: var(--error);
    font-weight: bold;
}

/* Progress dots */
.progress-dots[b-5rcth3hho1] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dot[b-5rcth3hho1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: var(--transition);
}

.dot.filled[b-5rcth3hho1] {
    background-color: var(--primary);
}

/* Sections */
.form-section[b-5rcth3hho1] {
    background: white;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 3px solid var(--primary);
    animation: slideInFromRight-b-5rcth3hho1 0.3s ease-out both;
}

.form-section:nth-child(2)[b-5rcth3hho1] {
    animation-delay: 0.1s;
}

.form-section:nth-child(3)[b-5rcth3hho1] {
    animation-delay: 0.2s;
}

.form-section:nth-child(4)[b-5rcth3hho1] {
    animation-delay: 0.3s;
}

@keyframes slideInFromRight-b-5rcth3hho1 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-section h4[b-5rcth3hho1] {
    margin: 0 0 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Section icons */
.form-section:nth-of-type(1) h4[b-5rcth3hho1]::before {
    content: "\e7fd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(2) h4[b-5rcth3hho1]::before {
    content: "\e0cd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(3) h4[b-5rcth3hho1]::before {
    content: "\e73c";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

/* Two-column layout */
.form-row[b-5rcth3hho1] {
    display: flex;
    gap: 1rem;
}

.form-group.half-width[b-5rcth3hho1] {
    flex: 1;
}

/* Form groups */
.form-group[b-5rcth3hho1] {
    margin-bottom: 1.25rem;
    position: relative;
}

:deep(.form-group .rz-textbox)[b-5rcth3hho1],
:deep(.form-group .rz-dropdown)[b-5rcth3hho1],
:deep(.form-group .rz-datepicker)[b-5rcth3hho1],
:deep(.form-group .rz-textarea)[b-5rcth3hho1] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.form-group .rz-textbox:focus)[b-5rcth3hho1],
:deep(.form-group .rz-dropdown:focus)[b-5rcth3hho1],
:deep(.form-group .rz-datepicker:focus)[b-5rcth3hho1],
:deep(.form-group .rz-textarea:focus)[b-5rcth3hho1] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
    outline: none;
}

:deep(.form-group .rz-label)[b-5rcth3hho1] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-5rcth3hho1]::after {
    content: ' *';
    color: var(--error);
    font-weight: bold;
}

:deep(.rz-messages)[b-5rcth3hho1] {
    margin-top: 0.25rem;
}

:deep(.rz-message-error)[b-5rcth3hho1] {
    color: var(--error);
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

/* Checkbox group */
.checkbox-group[b-5rcth3hho1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.checkbox-group .rz-checkbox[b-5rcth3hho1] {
    width: 18px;
    height: 18px;
}

/* Form actions */
.form-actions[b-5rcth3hho1] {
    position: sticky;
    background-color: var(--secondary);
    padding: 1.25rem 0;
    margin: 1.5rem -2rem -6rem -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    z-index: 10;
}

:deep(.submit-button)[b-5rcth3hho1] {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
}

:deep(.submit-button:hover:not(:disabled))[b-5rcth3hho1] {
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.submit-button:disabled)[b-5rcth3hho1] {
    background-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

:deep(.cancel-button)[b-5rcth3hho1] {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.cancel-button:hover:not(:disabled))[b-5rcth3hho1] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Tag input styles */
.tag-input-container[b-5rcth3hho1] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    background-color: white;
    transition: var(--transition);
}

.tag-input-container:focus-within[b-5rcth3hho1] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.tags-container[b-5rcth3hho1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    min-height: 2rem;
    padding: 0.5rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
}

.tag[b-5rcth3hho1] {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 1.25rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.tag:hover[b-5rcth3hho1] {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.tag-remove[b-5rcth3hho1] {
    margin-left: 0.5rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.tag-remove:hover[b-5rcth3hho1] {
    background: rgba(255, 255, 255, 0.35);
}

.tag-input-controls[b-5rcth3hho1] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tag-input-controls .rz-textbox[b-5rcth3hho1] {
    flex: 1;
}

.suggestion-buttons[b-5rcth3hho1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
}

.suggestion-buttons .suggestion-label[b-5rcth3hho1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.25rem;
    white-space: nowrap;
}

:deep(.suggestion-buttons .rz-button)[b-5rcth3hho1] {
    background-color: white !important;
    color: var(--primary) !important;
    border: 1.5px dashed var(--primary) !important;
    border-radius: 1.25rem !important;
    padding: 0.375rem 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
}

:deep(.suggestion-buttons .rz-button:hover)[b-5rcth3hho1] {
    background-color: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    border-style: solid !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Custom "Other" input that appears below a dropdown */
.custom-input-row[b-5rcth3hho1] {
    margin-top: 0.5rem;
    animation: customInputFadeIn-b-5rcth3hho1 0.2s ease-out;
}

@keyframes customInputFadeIn-b-5rcth3hho1 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus management */
.form-group:focus-within :deep(.rz-label)[b-5rcth3hho1] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Mobile step title (hidden on desktop) */
.mobile-step-title[b-5rcth3hho1] {
    display: none;
}

/* Mobile step navigation (hidden on desktop) */
.mobile-step-nav[b-5rcth3hho1] {
    display: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .patient-form-container[b-5rcth3hho1] {
        padding: 0 1rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-header[b-5rcth3hho1] {
        padding: 1.25rem 0 1rem 0;
        margin-bottom: 1rem;
    }

    .form-header h3[b-5rcth3hho1] {
        font-size: 1.25rem;
    }

    .mobile-step-title[b-5rcth3hho1] {
        display: block;
        font-size: 0.8125rem;
        color: var(--primary);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .form-row[b-5rcth3hho1] {
        flex-direction: column;
        gap: 0;
    }

    .form-group.half-width[b-5rcth3hho1] {
        flex: none;
    }

    .form-section[b-5rcth3hho1] {
        display: none !important;
    }

    .form-section.mobile-step-active[b-5rcth3hho1] {
        display: block !important;
        animation: mobileStepFadeIn-b-5rcth3hho1 0.25s ease-out;
        flex: 1;
        overflow-y: auto;
        border: 2px solid var(--primary);
    }

    @keyframes mobileStepFadeIn-b-5rcth3hho1 {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .desktop-actions[b-5rcth3hho1] {
        display: none !important;
    }

    .mobile-step-nav[b-5rcth3hho1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        flex-shrink: 0;
        background-color: var(--secondary);
    }

    .mobile-step-indicator[b-5rcth3hho1] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    :deep(.mobile-nav-btn)[b-5rcth3hho1] {
        flex: 1 !important;
        justify-content: center !important;
    }

    .progress-dots .dot[b-5rcth3hho1] {
        width: 10px;
        height: 10px;
        cursor: pointer;
    }

    .progress-dots .dot:hover[b-5rcth3hho1] {
        background-color: var(--primary-dark);
    }
}
/* /Components/Dialogs/EditEmployeeSideDialog.razor.rz.scp.css */
/* ============================================
   EditEmployeeSideDialog - Modern Design
   Uses CSS variables from site.css
   ============================================ */

.patient-form-container[b-5le3tiaslz] {
    padding: 0 2rem 6rem 2rem;
    height: 100%;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--secondary);
}

/* Header */
.form-header[b-5le3tiaslz] {
    position: sticky;
    top: 0;
    background-color: var(--secondary);
    z-index: 10;
    padding: 2rem 0 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.form-header h3[b-5le3tiaslz] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.form-header p[b-5le3tiaslz] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.required-indicator[b-5le3tiaslz] {
    color: var(--error);
    font-weight: bold;
}

/* Progress dots */
.progress-dots[b-5le3tiaslz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dot[b-5le3tiaslz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: var(--transition);
}

.dot.filled[b-5le3tiaslz] {
    background-color: var(--primary);
}

/* Sections */
.form-section[b-5le3tiaslz] {
    background: white;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 3px solid var(--primary);
    animation: slideInFromRight-b-5le3tiaslz 0.3s ease-out both;
}

.form-section:nth-child(2)[b-5le3tiaslz] {
    animation-delay: 0.1s;
}

@keyframes slideInFromRight-b-5le3tiaslz {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-section h4[b-5le3tiaslz] {
    margin: 0 0 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Section icons */
.form-section:nth-of-type(1) h4[b-5le3tiaslz]::before {
    content: "\e7fd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(2) h4[b-5le3tiaslz]::before {
    content: "\e0cd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

/* Two-column layout */
.form-row[b-5le3tiaslz] {
    display: flex;
    gap: 1rem;
}

.form-group.half-width[b-5le3tiaslz] {
    flex: 1;
}

/* Form groups */
.form-group[b-5le3tiaslz] {
    margin-bottom: 1.25rem;
    position: relative;
}

:deep(.form-group .rz-textbox)[b-5le3tiaslz],
:deep(.form-group .rz-dropdown)[b-5le3tiaslz],
:deep(.form-group .rz-datepicker)[b-5le3tiaslz],
:deep(.form-group .rz-textarea)[b-5le3tiaslz] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.form-group .rz-textbox:focus)[b-5le3tiaslz],
:deep(.form-group .rz-dropdown:focus)[b-5le3tiaslz],
:deep(.form-group .rz-datepicker:focus)[b-5le3tiaslz],
:deep(.form-group .rz-textarea:focus)[b-5le3tiaslz] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
    outline: none;
}

:deep(.form-group .rz-label)[b-5le3tiaslz] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-5le3tiaslz]::after {
    content: ' *';
    color: var(--error);
    font-weight: bold;
}

/* Read-only field styling */
.readonly-field[b-5le3tiaslz] {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.readonly-hint[b-5le3tiaslz] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

:deep(.rz-messages)[b-5le3tiaslz] {
    margin-top: 0.25rem;
}

:deep(.rz-message-error)[b-5le3tiaslz] {
    color: var(--error);
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

/* Form actions */
.form-actions[b-5le3tiaslz] {
    position: sticky;
    background-color: var(--secondary);
    padding: 1.25rem 0;
    margin: 1.5rem -2rem -6rem -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    z-index: 10;
}

:deep(.submit-button)[b-5le3tiaslz] {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
}

:deep(.submit-button:hover:not(:disabled))[b-5le3tiaslz] {
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.submit-button:disabled)[b-5le3tiaslz] {
    background-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

:deep(.cancel-button)[b-5le3tiaslz] {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.cancel-button:hover:not(:disabled))[b-5le3tiaslz] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Focus management */
.form-group:focus-within :deep(.rz-label)[b-5le3tiaslz] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Mobile step title (hidden on desktop) */
.mobile-step-title[b-5le3tiaslz] {
    display: none;
}

/* Mobile step navigation (hidden on desktop) */
.mobile-step-nav[b-5le3tiaslz] {
    display: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .patient-form-container[b-5le3tiaslz] {
        padding: 0 1rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-header[b-5le3tiaslz] {
        padding: 1.25rem 0 1rem 0;
        margin-bottom: 1rem;
    }

    .form-header h3[b-5le3tiaslz] {
        font-size: 1.25rem;
    }

    .mobile-step-title[b-5le3tiaslz] {
        display: block;
        font-size: 0.8125rem;
        color: var(--primary);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .form-row[b-5le3tiaslz] {
        flex-direction: column;
        gap: 0;
    }

    .form-group.half-width[b-5le3tiaslz] {
        flex: none;
    }

    .form-section[b-5le3tiaslz] {
        display: none !important;
    }

    .form-section.mobile-step-active[b-5le3tiaslz] {
        display: block !important;
        animation: mobileStepFadeIn-b-5le3tiaslz 0.25s ease-out;
        flex: 1;
        overflow-y: auto;
        border: 2px solid var(--primary);
    }

    @keyframes mobileStepFadeIn-b-5le3tiaslz {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .desktop-actions[b-5le3tiaslz] {
        display: none !important;
    }

    .mobile-step-nav[b-5le3tiaslz] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        flex-shrink: 0;
        background-color: var(--secondary);
    }

    .mobile-step-indicator[b-5le3tiaslz] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    :deep(.mobile-nav-btn)[b-5le3tiaslz] {
        flex: 1 !important;
        justify-content: center !important;
    }

    .progress-dots .dot[b-5le3tiaslz] {
        width: 10px;
        height: 10px;
        cursor: pointer;
    }

    .progress-dots .dot:hover[b-5le3tiaslz] {
        background-color: var(--primary-dark);
    }
}
/* /Components/Dialogs/EditTeamDialog.razor.rz.scp.css */
/* ============================================
   EditTeamDialog - Modern Design
   Matches CreateTeamDialog design language
   ============================================ */

/* Main container */
.team-form-container[b-fbkhanbmmn] {
    background-color: var(--secondary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

/* Header */
.form-header[b-fbkhanbmmn] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-header h3[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-header h3[b-fbkhanbmmn]::before {
    content: "\e3c9";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-header p[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Form sections */
.form-section[b-fbkhanbmmn] {
    background-color: var(--background-light);
    border: 3px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    animation: slideInFromRight-b-fbkhanbmmn 0.3s ease-out both;
}

.form-section:nth-child(2)[b-fbkhanbmmn] {
    animation-delay: 0.1s;
}

.form-section:nth-child(3)[b-fbkhanbmmn] {
    animation-delay: 0.15s;
}

.form-section:nth-child(4)[b-fbkhanbmmn] {
    animation-delay: 0.2s;
}

.form-section:nth-child(5)[b-fbkhanbmmn] {
    animation-delay: 0.25s;
}

.form-section:nth-child(6)[b-fbkhanbmmn] {
    animation-delay: 0.3s;
}

@keyframes slideInFromRight-b-fbkhanbmmn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-section:hover[b-fbkhanbmmn] {
    box-shadow: var(--shadow);
}

.form-section h4[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Section icons */
.form-section:nth-of-type(1) h4[b-fbkhanbmmn]::before {
    content: "\e88e";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(2) h4[b-fbkhanbmmn]::before {
    content: "\e8d3";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(3) h4[b-fbkhanbmmn]::before {
    content: "\e8e8";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(4) h4[b-fbkhanbmmn]::before {
    content: "\e4fc";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(5) h4[b-fbkhanbmmn]::before {
    content: "\e7ef";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

/* Form groups */
.form-group[b-fbkhanbmmn] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-fbkhanbmmn] {
    margin-bottom: 0;
}

:deep(.form-group .rz-label)[b-fbkhanbmmn] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-fbkhanbmmn]::after {
    content: " *";
    color: var(--error);
}

/* Input styling */
:deep(.form-group .rz-textbox)[b-fbkhanbmmn],
:deep(.form-group .rz-textarea)[b-fbkhanbmmn],
:deep(.form-group .rz-dropdown)[b-fbkhanbmmn] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    transition: var(--transition) !important;
    font-size: 0.875rem !important;
}

:deep(.form-group .rz-textbox:focus)[b-fbkhanbmmn],
:deep(.form-group .rz-textarea:focus)[b-fbkhanbmmn],
:deep(.form-group .rz-dropdown:focus)[b-fbkhanbmmn] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* Help / warning text */
.form-text[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

.form-text.warning[b-fbkhanbmmn] {
    color: var(--warning-dark);
}

/* Checkbox styling */
.checkbox-label[b-fbkhanbmmn] {
    margin-left: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
}

/* Stats grid */
.stats-grid[b-fbkhanbmmn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-item[b-fbkhanbmmn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
}

.stat-value[b-fbkhanbmmn] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.stat-label[b-fbkhanbmmn] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Current members list */
.current-members-list[b-fbkhanbmmn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    padding: 0.5rem;
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.member-preview[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: var(--transition);
    gap: 0.75rem;
}

.member-preview:hover[b-fbkhanbmmn] {
    background-color: var(--secondary-hover);
    border-color: var(--primary);
}

.member-avatar[b-fbkhanbmmn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

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

.member-name[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-role[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.member-role.lead[b-fbkhanbmmn] {
    color: var(--primary);
    font-weight: 600;
}

.lead-indicator[b-fbkhanbmmn] {
    color: var(--warning);
    font-size: 1.125rem !important;
}

/* Member management note */
.member-management-note[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin-top: 1rem;
    line-height: 1.4;
}

.member-management-note .rz-icon[b-fbkhanbmmn] {
    color: var(--primary);
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Danger zone */
.danger-zone[b-fbkhanbmmn] {
    border-color: var(--error) !important;
    background-color: rgba(231, 76, 60, 0.03);
}

.danger-zone h4[b-fbkhanbmmn] {
    color: var(--error);
}

.danger-zone h4[b-fbkhanbmmn]::before {
    content: "\e002" !important;
    color: var(--error) !important;
}

.danger-actions[b-fbkhanbmmn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.danger-item[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.danger-info strong[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.25rem;
}

.danger-info p[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

:deep(.btn-danger)[b-fbkhanbmmn] {
    background-color: var(--error) !important;
    border-color: var(--error) !important;
    color: white !important;
    border-radius: var(--radius) !important;
    font-weight: 500 !important;
    white-space: nowrap;
    transition: var(--transition) !important;
}

:deep(.btn-danger:hover:not(:disabled))[b-fbkhanbmmn] {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
}

:deep(.btn-danger:disabled)[b-fbkhanbmmn] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.warning-message[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(var(--warning-rgb), 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    color: var(--warning-dark);
    font-size: 0.8125rem;
}

.warning-message .rz-icon[b-fbkhanbmmn] {
    color: var(--warning);
    flex-shrink: 0;
}

/* Form actions */
.form-actions[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
    flex-wrap: wrap;
}

.action-divider[b-fbkhanbmmn] {
    flex: 1;
}

:deep(.form-actions .rz-button)[b-fbkhanbmmn] {
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}

:deep(.form-actions .btn-primary)[b-fbkhanbmmn] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

:deep(.form-actions .btn-primary:hover:not(:disabled))[b-fbkhanbmmn] {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.form-actions .btn-outline)[b-fbkhanbmmn] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

:deep(.form-actions .btn-outline:hover)[b-fbkhanbmmn] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

:deep(.form-actions .btn-link)[b-fbkhanbmmn] {
    background-color: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

:deep(.form-actions .btn-link:hover)[b-fbkhanbmmn] {
    color: var(--primary) !important;
}

/* Loading overlay */
.form-loading[b-fbkhanbmmn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--secondary-rgb), 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.form-loading p[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-weight: 500;
    margin-top: 1rem;
}

/* Validation */
:deep(.rz-messages-error)[b-fbkhanbmmn] {
    color: var(--error) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* Focus management */
.form-group:focus-within :deep(.rz-label)[b-fbkhanbmmn] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Delete Confirmation Dialog Overlay */
.delete-confirmation-overlay[b-fbkhanbmmn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-fbkhanbmmn 0.2s ease-out;
}

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

.delete-confirmation-dialog[b-fbkhanbmmn] {
    background-color: var(--secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-fbkhanbmmn 0.3s ease-out;
}

@keyframes slideUp-b-fbkhanbmmn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delete-dialog-header[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(231, 76, 60, 0.05);
}

.delete-dialog-header .warning-icon[b-fbkhanbmmn] {
    color: var(--error);
    font-size: 1.5rem !important;
}

.delete-dialog-header h4[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.delete-dialog-content[b-fbkhanbmmn] {
    padding: 1.5rem;
}

.delete-dialog-content > p[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

.delete-dialog-content .form-group[b-fbkhanbmmn] {
    margin-bottom: 1.25rem;
}

/* Delete type selection */
.delete-type-section[b-fbkhanbmmn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.delete-option[b-fbkhanbmmn] {
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    background-color: var(--background-light);
}

.delete-option:hover[b-fbkhanbmmn] {
    border-color: var(--primary);
}

.delete-option.selected[b-fbkhanbmmn] {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.05);
}

.delete-option.hard-delete.selected[b-fbkhanbmmn] {
    border-color: var(--error);
    background-color: rgba(231, 76, 60, 0.05);
}

.option-header[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.option-header strong[b-fbkhanbmmn] {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

/* Custom radio indicator */
.radio-indicator[b-fbkhanbmmn] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background-color: var(--secondary);
    position: relative;
    flex-shrink: 0;
    transition: var(--transition);
}

.radio-indicator.checked[b-fbkhanbmmn] {
    border-color: var(--primary);
}

.radio-indicator.checked[b-fbkhanbmmn]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary);
}

.delete-option.hard-delete .radio-indicator.checked[b-fbkhanbmmn] {
    border-color: var(--error);
}

.delete-option.hard-delete .radio-indicator.checked[b-fbkhanbmmn]::after {
    background-color: var(--error);
}

.delete-option.disabled[b-fbkhanbmmn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.delete-option.disabled .radio-indicator[b-fbkhanbmmn] {
    border-color: var(--border-color);
}

.delete-option p[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: 0 0 0.5rem 1.75rem;
    line-height: 1.4;
}

.option-warning[b-fbkhanbmmn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(var(--warning-rgb), 0.1);
    border-radius: var(--radius-sm);
    margin-left: 1.75rem;
    font-size: 0.75rem;
    color: var(--warning-dark);
}

.option-warning .rz-icon[b-fbkhanbmmn] {
    font-size: 1rem !important;
    color: var(--warning);
}

.option-warning.severe[b-fbkhanbmmn] {
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--error);
}

.option-warning.severe .rz-icon[b-fbkhanbmmn] {
    color: var(--error);
}

/* Delete info for non-admin users */
.delete-info[b-fbkhanbmmn] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: var(--radius);
    margin-top: 1rem;
}

.delete-info .rz-icon[b-fbkhanbmmn] {
    color: var(--primary);
    font-size: 1.25rem !important;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.delete-info span[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Dialog actions */
.delete-dialog-actions[b-fbkhanbmmn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-light);
}

:deep(.delete-dialog-actions .rz-button)[b-fbkhanbmmn] {
    padding: 0.625rem 1.25rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius) !important;
}

/* Delete progress */
.delete-progress[b-fbkhanbmmn] {
    padding: 1rem 1.5rem;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.delete-progress p[b-fbkhanbmmn] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0.75rem 0 0 0;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .team-form-container[b-fbkhanbmmn] {
        padding: 1.5rem;
    }

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

    .danger-item[b-fbkhanbmmn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-actions[b-fbkhanbmmn] {
        flex-direction: column-reverse;
    }

    .action-divider[b-fbkhanbmmn] {
        display: none;
    }

    :deep(.form-actions .rz-button)[b-fbkhanbmmn] {
        width: 100% !important;
    }

    .delete-confirmation-dialog[b-fbkhanbmmn] {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }

    .delete-dialog-actions[b-fbkhanbmmn] {
        flex-direction: column-reverse;
    }

    :deep(.delete-dialog-actions .rz-button)[b-fbkhanbmmn] {
        width: 100% !important;
    }
}
/* /Components/Dialogs/EmergencyContactDialog.razor.rz.scp.css */
.emergency-contact-dialog[b-c8q8v63ly6] {
    padding: 1rem;
}

.form-group[b-c8q8v63ly6] {
    margin-bottom: 1rem;
}

.form-group label[b-c8q8v63ly6] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-group .required[b-c8q8v63ly6] {
    color: #dc2626;
}

.checkbox-group[b-c8q8v63ly6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-label[b-c8q8v63ly6] {
    margin-bottom: 0 !important;
    cursor: pointer;
}

.validation-error[b-c8q8v63ly6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.dialog-actions[b-c8q8v63ly6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
/* /Components/Dialogs/ErrorRecoveryDialog.razor.rz.scp.css */
.error-recovery-dialog[b-o3ghq2m4v1] {
    width: 100%;
    max-width: 500px;
}

.error-header[b-o3ghq2m4v1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: white;
}

.error-header.warning[b-o3ghq2m4v1] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.error-header.error[b-o3ghq2m4v1] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.error-header.critical[b-o3ghq2m4v1] {
    background: linear-gradient(135deg, #7c2d12, #991b1b);
}

.error-icon[b-o3ghq2m4v1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 24px;
}

.error-title[b-o3ghq2m4v1] {
    font-size: 18px;
    font-weight: 600;
}

.error-content[b-o3ghq2m4v1] {
    padding: 20px;
}

.error-message[b-o3ghq2m4v1] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.technical-details[b-o3ghq2m4v1] {
    margin-bottom: 20px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.technical-details summary[b-o3ghq2m4v1] {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.technical-details pre[b-o3ghq2m4v1] {
    margin: 12px 0 0 0;
    padding: 12px;
    background: #1f2937;
    color: #f3f4f6;
    border-radius: 6px;
    font-size: 11px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.recovery-options[b-o3ghq2m4v1] {
    margin-top: 20px;
}

.recovery-options h4[b-o3ghq2m4v1] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.recovery-option[b-o3ghq2m4v1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px;
    margin-bottom: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.recovery-option:hover:not(:disabled)[b-o3ghq2m4v1] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.recovery-option:disabled[b-o3ghq2m4v1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.recovery-option.primary[b-o3ghq2m4v1] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.recovery-option.primary:hover:not(:disabled)[b-o3ghq2m4v1] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.recovery-option.secondary[b-o3ghq2m4v1] {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.option-icon[b-o3ghq2m4v1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 8px;
    color: #6b7280;
    font-size: 18px;
    flex-shrink: 0;
}

.recovery-option.primary .option-icon[b-o3ghq2m4v1] {
    background: #3b82f6;
    color: white;
}

.option-content[b-o3ghq2m4v1] {
    flex: 1;
}

.option-title[b-o3ghq2m4v1] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.option-description[b-o3ghq2m4v1] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.offline-indicator[b-o3ghq2m4v1] {
    color: #f59e0b;
    font-weight: 500;
}

.spinning[b-o3ghq2m4v1] {
    animation: spin-b-o3ghq2m4v1 1s linear infinite;
}

@keyframes spin-b-o3ghq2m4v1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.success-message[b-o3ghq2m4v1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    color: #065f46;
    font-size: 14px;
    font-weight: 500;
    animation: fadeIn-b-o3ghq2m4v1 0.3s ease;
}

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

.success-message .rzi[b-o3ghq2m4v1] {
    font-size: 20px;
    color: #10b981;
}

.error-footer[b-o3ghq2m4v1] {
    padding: 16px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.help-text[b-o3ghq2m4v1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}

.help-text .rzi[b-o3ghq2m4v1] {
    font-size: 16px;
    color: #9ca3af;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .error-recovery-dialog[b-o3ghq2m4v1] {
        max-width: 100%;
    }

    .error-header[b-o3ghq2m4v1] {
        padding: 16px;
    }

    .error-content[b-o3ghq2m4v1] {
        padding: 16px;
    }

    .recovery-option[b-o3ghq2m4v1] {
        padding: 12px;
    }

    .option-icon[b-o3ghq2m4v1] {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}
/* /Components/Dialogs/ManageTeamMembersDialog.razor.rz.scp.css */
/* ============================================
   ManageTeamMembersDialog - Modern Design
   Matches EditTeamDialog design language
   ============================================ */

/* Main container */
.team-members-container[b-bogzqpfj02] {
    background-color: var(--secondary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

/* Header */
.form-header[b-bogzqpfj02] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-header h3[b-bogzqpfj02] {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-header h3[b-bogzqpfj02]::before {
    content: "\e7ef";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-header p[b-bogzqpfj02] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.form-header p strong[b-bogzqpfj02] {
    color: var(--primary);
}

/* Members management layout */
.members-management[b-bogzqpfj02] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* Sections */
.current-members-section[b-bogzqpfj02],
.add-members-section[b-bogzqpfj02] {
    background-color: var(--background-light);
    border: 3px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    animation: slideInFromRight-b-bogzqpfj02 0.3s ease-out both;
    transition: var(--transition);
}

.current-members-section[b-bogzqpfj02] {
    animation-delay: 0.1s;
}

.add-members-section[b-bogzqpfj02] {
    animation-delay: 0.15s;
    border-color: var(--border-color);
}

.add-members-section:hover[b-bogzqpfj02] {
    border-color: var(--primary);
}

@keyframes slideInFromRight-b-bogzqpfj02 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.current-members-section:hover[b-bogzqpfj02],
.add-members-section:hover[b-bogzqpfj02] {
    box-shadow: var(--shadow);
}

/* Section headers */
.section-header[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-header h4[b-bogzqpfj02] {
    color: var(--text-primary);
    font-size: 1.1875rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.current-members-section .section-header h4[b-bogzqpfj02]::before {
    content: "\e7fb";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.add-members-section .section-header h4[b-bogzqpfj02]::before {
    content: "\e7fe";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.member-stats[b-bogzqpfj02] {
    display: flex;
    gap: 0.75rem;
}

.member-stats .stat[b-bogzqpfj02] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

/* Search input */
:deep(.section-header .rz-textbox)[b-bogzqpfj02] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

:deep(.section-header .rz-textbox:focus)[b-bogzqpfj02] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* Members lists */
.members-list[b-bogzqpfj02] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.75rem;
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.members-list.available[b-bogzqpfj02] {
    max-height: 380px;
}

/* Member items */
.member-item[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: var(--transition);
    gap: 1rem;
}

.member-item:hover[b-bogzqpfj02] {
    background-color: var(--secondary-hover);
    border-color: var(--primary);
}

.member-item.team-lead[b-bogzqpfj02] {
    border-color: var(--warning);
    background-color: rgba(var(--warning-rgb), 0.05);
}

.member-item.available[b-bogzqpfj02] {
    cursor: pointer;
}

.member-item.available:hover[b-bogzqpfj02] {
    border-color: var(--success);
    background-color: rgba(var(--success-rgb), 0.05);
}

.member-info[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.member-avatar[b-bogzqpfj02] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.member-details[b-bogzqpfj02] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-name[b-bogzqpfj02] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-meta[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-role[b-bogzqpfj02] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--secondary);
    border-radius: var(--radius-sm);
}

.member-role.lead[b-bogzqpfj02] {
    color: var(--primary);
    font-weight: 600;
    background-color: rgba(var(--primary-rgb), 0.1);
}

.join-date[b-bogzqpfj02] {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
}

/* Member actions */
.member-actions[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

:deep(.member-actions .rz-dropdown)[b-bogzqpfj02] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    font-size: 0.875rem !important;
    min-width: 100px !important;
}

:deep(.member-actions .btn-icon)[b-bogzqpfj02] {
    padding: 0.375rem !important;
    min-width: unset !important;
}

:deep(.member-actions .btn-danger)[b-bogzqpfj02] {
    background-color: transparent !important;
    border: 1px solid var(--error) !important;
    color: var(--error) !important;
}

:deep(.member-actions .btn-danger:hover)[b-bogzqpfj02] {
    background-color: var(--error) !important;
    color: white !important;
}

.team-lead-indicator[b-bogzqpfj02] {
    color: var(--warning) !important;
    font-size: 1.25rem !important;
}

.lead-label[b-bogzqpfj02] {
    color: var(--warning-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Add icon in available list */
.add-icon[b-bogzqpfj02] {
    color: var(--success) !important;
    font-size: 1.25rem !important;
    opacity: 0;
    transition: var(--transition);
}

.member-item.available:hover .add-icon[b-bogzqpfj02] {
    opacity: 1;
}

/* Empty states */
.empty-members[b-bogzqpfj02],
.no-available-users[b-bogzqpfj02] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-tertiary);
}

.empty-members .rz-icon[b-bogzqpfj02],
.no-available-users .rz-icon[b-bogzqpfj02] {
    font-size: 2.5rem !important;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
}

.empty-members p[b-bogzqpfj02],
.no-available-users p[b-bogzqpfj02] {
    margin: 0;
    font-size: 0.875rem;
}

/* More users notice */
.more-users-notice[b-bogzqpfj02] {
    padding: 0.75rem;
    text-align: center;
    background-color: rgba(var(--primary-rgb), 0.05);
    border-radius: var(--radius);
    margin-top: 0.5rem;
}

.more-users-notice p[b-bogzqpfj02] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: 0 0 0.25rem 0;
}

.more-users-notice small[b-bogzqpfj02] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* Pending changes section */
.pending-changes[b-bogzqpfj02] {
    background-color: var(--background-light);
    border: 3px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    animation: slideInFromRight-b-bogzqpfj02 0.3s ease-out both;
    animation-delay: 0.2s;
}

.changes-header[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.changes-header h4[b-bogzqpfj02] {
    color: var(--warning-dark);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.changes-header h4[b-bogzqpfj02]::before {
    content: "\e923";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--warning);
}

.changes-actions[b-bogzqpfj02] {
    display: flex;
    gap: 0.5rem;
}

:deep(.changes-actions .rz-button)[b-bogzqpfj02] {
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    border-radius: var(--radius) !important;
}

:deep(.changes-actions .btn-primary)[b-bogzqpfj02] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

:deep(.changes-actions .btn-outline)[b-bogzqpfj02] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Changes list */
.changes-list[b-bogzqpfj02] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.change-item[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.change-item.add[b-bogzqpfj02] {
    border-left: 3px solid var(--success);
}

.change-item.remove[b-bogzqpfj02] {
    border-left: 3px solid var(--error);
}

.change-item.rolechange[b-bogzqpfj02] {
    border-left: 3px solid var(--info);
}

.change-item .rz-icon[b-bogzqpfj02] {
    font-size: 1rem !important;
}

.change-item.add .rz-icon[b-bogzqpfj02] {
    color: var(--success);
}

.change-item.remove .rz-icon[b-bogzqpfj02] {
    color: var(--error);
}

.change-item.rolechange .rz-icon[b-bogzqpfj02] {
    color: var(--info);
}

.change-description[b-bogzqpfj02] {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

:deep(.change-item .btn-icon)[b-bogzqpfj02] {
    padding: 0.25rem !important;
    min-width: unset !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-tertiary) !important;
}

:deep(.change-item .btn-icon:hover)[b-bogzqpfj02] {
    color: var(--error) !important;
}

/* Form actions */
.form-actions[b-bogzqpfj02] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}

:deep(.form-actions .rz-button)[b-bogzqpfj02] {
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}

:deep(.form-actions .btn-primary)[b-bogzqpfj02] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

:deep(.form-actions .btn-primary:hover:not(:disabled))[b-bogzqpfj02] {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.form-actions .btn-outline)[b-bogzqpfj02] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

:deep(.form-actions .btn-outline:hover)[b-bogzqpfj02] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Loading overlay */
.form-loading[b-bogzqpfj02] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--secondary-rgb), 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.form-loading p[b-bogzqpfj02] {
    color: var(--text-primary);
    font-weight: 500;
    margin-top: 1rem;
}

/* Responsive */
@media screen and (max-width: 900px) {
    .members-management[b-bogzqpfj02] {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .team-members-container[b-bogzqpfj02] {
        padding: 1.5rem;
    }

    .section-header[b-bogzqpfj02] {
        flex-direction: column;
        align-items: flex-start;
    }

    :deep(.section-header .rz-textbox)[b-bogzqpfj02] {
        width: 100% !important;
    }

    .member-item[b-bogzqpfj02] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .member-actions[b-bogzqpfj02] {
        width: 100%;
        justify-content: flex-end;
    }

    .changes-header[b-bogzqpfj02] {
        flex-direction: column;
        align-items: flex-start;
    }

    .changes-actions[b-bogzqpfj02] {
        width: 100%;
    }

    :deep(.changes-actions .rz-button)[b-bogzqpfj02] {
        flex: 1;
    }

    .form-actions[b-bogzqpfj02] {
        flex-direction: column-reverse;
    }

    :deep(.form-actions .rz-button)[b-bogzqpfj02] {
        width: 100% !important;
    }
}
/* /Components/Dialogs/NewClientSideDialog.razor.rz.scp.css */
/* ============================================
   NewClientSideDialog - Modern Design
   Uses CSS variables from site.css
   ============================================ */

.patient-form-container[b-yfzw4b30o9] {
    padding: 0 2rem 6rem 2rem;
    height: 100%;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--secondary);
}

/* Header */
.form-header[b-yfzw4b30o9] {
    position: sticky;
    top: 0;
    background-color: var(--secondary);
    z-index: 10;
    padding: 2rem 0 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.form-header h3[b-yfzw4b30o9] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.form-header p[b-yfzw4b30o9] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.required-indicator[b-yfzw4b30o9] {
    color: var(--error);
    font-weight: bold;
}

/* Progress dots */
.progress-dots[b-yfzw4b30o9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dot[b-yfzw4b30o9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: var(--transition);
}

.dot.filled[b-yfzw4b30o9] {
    background-color: var(--primary);
}

/* Sections */
.form-section[b-yfzw4b30o9] {
    background: white;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 3px solid var(--primary);
    animation: slideInFromRight-b-yfzw4b30o9 0.3s ease-out both;
}

.form-section:nth-child(2)[b-yfzw4b30o9] {
    animation-delay: 0.1s;
}

.form-section:nth-child(3)[b-yfzw4b30o9] {
    animation-delay: 0.2s;
}

.form-section:nth-child(4)[b-yfzw4b30o9] {
    animation-delay: 0.3s;
}

.form-section:nth-child(5)[b-yfzw4b30o9] {
    animation-delay: 0.4s;
}

@keyframes slideInFromRight-b-yfzw4b30o9 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-section h4[b-yfzw4b30o9] {
    margin: 0 0 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Section icons via ::before pseudo-elements */
.form-section:nth-of-type(1) h4[b-yfzw4b30o9]::before {
    content: "\e7fd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(2) h4[b-yfzw4b30o9]::before {
    content: "\e73c";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(3) h4[b-yfzw4b30o9]::before {
    content: "\e0cd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

.form-section:nth-of-type(4) h4[b-yfzw4b30o9]::before {
    content: "\ef76";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

/* Two-column layout */
.form-row[b-yfzw4b30o9] {
    display: flex;
    gap: 1rem;
}

.form-group.half-width[b-yfzw4b30o9] {
    flex: 1;
}

/* Form groups */
.form-group[b-yfzw4b30o9] {
    margin-bottom: 1.25rem;
    position: relative;
}

:deep(.form-group .rz-textbox)[b-yfzw4b30o9],
:deep(.form-group .rz-dropdown)[b-yfzw4b30o9],
:deep(.form-group .rz-datepicker)[b-yfzw4b30o9],
:deep(.form-group .rz-textarea)[b-yfzw4b30o9] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.form-group .rz-textbox:focus)[b-yfzw4b30o9],
:deep(.form-group .rz-dropdown:focus)[b-yfzw4b30o9],
:deep(.form-group .rz-datepicker:focus)[b-yfzw4b30o9],
:deep(.form-group .rz-textarea:focus)[b-yfzw4b30o9] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
    outline: none;
}

:deep(.form-group .rz-label)[b-yfzw4b30o9] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-yfzw4b30o9]::after {
    content: ' *';
    color: var(--error);
    font-weight: bold;
}

.valid-field[b-yfzw4b30o9] {
    border-color: var(--success) !important;
}

.invalid-field[b-yfzw4b30o9] {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

:deep(.rz-messages)[b-yfzw4b30o9] {
    margin-top: 0.25rem;
}

:deep(.rz-message-error)[b-yfzw4b30o9] {
    color: var(--error);
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

/* Checkbox group */
.checkbox-group[b-yfzw4b30o9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.checkbox-group .rz-checkbox[b-yfzw4b30o9] {
    width: 18px;
    height: 18px;
}

/* Form actions */
.form-actions[b-yfzw4b30o9] {
    position: sticky;
    background-color: var(--secondary);
    padding: 1.25rem 0;
    margin: 1.5rem -2rem -6rem -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    z-index: 10;
}

:deep(.submit-button)[b-yfzw4b30o9] {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
}

:deep(.submit-button:hover:not(:disabled))[b-yfzw4b30o9] {
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.submit-button:disabled)[b-yfzw4b30o9] {
    background-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

:deep(.cancel-button)[b-yfzw4b30o9] {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.cancel-button:hover:not(:disabled))[b-yfzw4b30o9] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Tag input styles */
.tag-input-container[b-yfzw4b30o9] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    background-color: white;
    transition: var(--transition);
}

.tag-input-container:focus-within[b-yfzw4b30o9] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.tags-container[b-yfzw4b30o9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    min-height: 2rem;
    padding: 0.5rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
}

.tag[b-yfzw4b30o9] {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 1.25rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.tag:hover[b-yfzw4b30o9] {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.tag-remove[b-yfzw4b30o9] {
    margin-left: 0.5rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.tag-remove:hover[b-yfzw4b30o9] {
    background: rgba(255, 255, 255, 0.35);
}

.tag-input-controls[b-yfzw4b30o9] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tag-input-controls .rz-textbox[b-yfzw4b30o9] {
    flex: 1;
}

.suggestion-buttons[b-yfzw4b30o9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
}

.suggestion-buttons .suggestion-label[b-yfzw4b30o9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.25rem;
    white-space: nowrap;
}

:deep(.suggestion-buttons .rz-button)[b-yfzw4b30o9] {
    background-color: white !important;
    color: var(--primary) !important;
    border: 1.5px dashed var(--primary) !important;
    border-radius: 1.25rem !important;
    padding: 0.375rem 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
}

:deep(.suggestion-buttons .rz-button:hover)[b-yfzw4b30o9] {
    background-color: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    border-style: solid !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Custom "Other" input that appears below a dropdown */
.custom-input-row[b-yfzw4b30o9] {
    margin-top: 0.5rem;
    animation: customInputFadeIn-b-yfzw4b30o9 0.2s ease-out;
}

@keyframes customInputFadeIn-b-yfzw4b30o9 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus management */
.form-group:focus-within :deep(.rz-label)[b-yfzw4b30o9] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Mobile step title (hidden on desktop) */
.mobile-step-title[b-yfzw4b30o9] {
    display: none;
}

/* Mobile step navigation (hidden on desktop) */
.mobile-step-nav[b-yfzw4b30o9] {
    display: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .patient-form-container[b-yfzw4b30o9] {
        padding: 0 1rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-header[b-yfzw4b30o9] {
        padding: 1.25rem 0 1rem 0;
        margin-bottom: 1rem;
    }

    .form-header h3[b-yfzw4b30o9] {
        font-size: 1.25rem;
    }

    .mobile-step-title[b-yfzw4b30o9] {
        display: block;
        font-size: 0.8125rem;
        color: var(--primary);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .form-row[b-yfzw4b30o9] {
        flex-direction: column;
        gap: 0;
    }

    .form-group.half-width[b-yfzw4b30o9] {
        flex: none;
    }

    /* Hide all form sections, show only active step */
    .form-section[b-yfzw4b30o9] {
        display: none !important;
    }

    .form-section.mobile-step-active[b-yfzw4b30o9] {
        display: block !important;
        animation: mobileStepFadeIn-b-yfzw4b30o9 0.25s ease-out;
        flex: 1;
        overflow-y: auto;
        border: 2px solid var(--primary);
    }

    @keyframes mobileStepFadeIn-b-yfzw4b30o9 {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Hide desktop form actions on mobile */
    .desktop-actions[b-yfzw4b30o9] {
        display: none !important;
    }

    /* Show mobile step navigation */
    .mobile-step-nav[b-yfzw4b30o9] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        flex-shrink: 0;
        background-color: var(--secondary);
    }

    .mobile-step-indicator[b-yfzw4b30o9] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    :deep(.mobile-nav-btn)[b-yfzw4b30o9] {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Progress dots clickable on mobile */
    .progress-dots .dot[b-yfzw4b30o9] {
        width: 10px;
        height: 10px;
        cursor: pointer;
    }

    .progress-dots .dot:hover[b-yfzw4b30o9] {
        background-color: var(--primary-dark);
    }
}
/* /Components/Dialogs/NewEmployeeSideDialog.razor.rz.scp.css */
/* ============================================
   NewEmployeeSideDialog - Modern Design
   Uses CSS variables from site.css
   ============================================ */

.patient-form-container[b-nvvax1wmjf] {
    padding: 0 2rem 6rem 2rem;
    height: 100%;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--secondary);
}

/* Header */
.form-header[b-nvvax1wmjf] {
    position: sticky;
    top: 0;
    background-color: var(--secondary);
    z-index: 10;
    padding: 2rem 0 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.form-header h3[b-nvvax1wmjf] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.form-header p[b-nvvax1wmjf] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.required-indicator[b-nvvax1wmjf] {
    color: var(--error);
    font-weight: bold;
}

/* Progress dots */
.progress-dots[b-nvvax1wmjf] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dot[b-nvvax1wmjf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: var(--transition);
}

.dot.filled[b-nvvax1wmjf] {
    background-color: var(--primary);
}

/* Sections */
.form-section[b-nvvax1wmjf] {
    background: white;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 3px solid var(--primary);
    animation: slideInFromRight-b-nvvax1wmjf 0.3s ease-out both;
}

.form-section:nth-child(2)[b-nvvax1wmjf] {
    animation-delay: 0.1s;
}


@keyframes slideInFromRight-b-nvvax1wmjf {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-section h4[b-nvvax1wmjf] {
    margin: 0 0 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Section icons via ::before pseudo-elements */
/* 1: Account Details (lock) */
.form-section:nth-of-type(1) h4[b-nvvax1wmjf]::before {
    content: "\e897";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

/* 2: Contact Details (phone) */
.form-section:nth-of-type(2) h4[b-nvvax1wmjf]::before {
    content: "\e0cd";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    color: var(--primary);
}

/* Two-column layout */
.form-row[b-nvvax1wmjf] {
    display: flex;
    gap: 1rem;
}

.form-group.half-width[b-nvvax1wmjf] {
    flex: 1;
}

/* Form groups */
.form-group[b-nvvax1wmjf] {
    margin-bottom: 1.25rem;
    position: relative;
}

:deep(.form-group .rz-textbox)[b-nvvax1wmjf],
:deep(.form-group .rz-dropdown)[b-nvvax1wmjf],
:deep(.form-group .rz-datepicker)[b-nvvax1wmjf],
:deep(.form-group .rz-password)[b-nvvax1wmjf],
:deep(.form-group .rz-textarea)[b-nvvax1wmjf] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.form-group .rz-textbox:focus)[b-nvvax1wmjf],
:deep(.form-group .rz-dropdown:focus)[b-nvvax1wmjf],
:deep(.form-group .rz-datepicker:focus)[b-nvvax1wmjf],
:deep(.form-group .rz-password:focus)[b-nvvax1wmjf],
:deep(.form-group .rz-textarea:focus)[b-nvvax1wmjf] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
    outline: none;
}

:deep(.form-group .rz-label)[b-nvvax1wmjf] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.required-label[b-nvvax1wmjf]::after {
    content: ' *';
    color: var(--error);
    font-weight: bold;
}

.valid-field[b-nvvax1wmjf] {
    border-color: var(--success) !important;
}

.invalid-field[b-nvvax1wmjf] {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

:deep(.rz-messages)[b-nvvax1wmjf] {
    margin-top: 0.25rem;
}

:deep(.rz-message-error)[b-nvvax1wmjf] {
    color: var(--error);
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

/* Checkbox group */
.checkbox-group[b-nvvax1wmjf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background-color: var(--secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.checkbox-group .rz-checkbox[b-nvvax1wmjf] {
    width: 18px;
    height: 18px;
}

/* Form actions */
.form-actions[b-nvvax1wmjf] {
    position: sticky;
    background-color: var(--secondary);
    padding: 1.25rem 0;
    margin: 1.5rem -2rem -6rem -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    z-index: 10;
}

:deep(.submit-button)[b-nvvax1wmjf] {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
}

:deep(.submit-button:hover:not(:disabled))[b-nvvax1wmjf] {
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

:deep(.submit-button:disabled)[b-nvvax1wmjf] {
    background-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

:deep(.cancel-button)[b-nvvax1wmjf] {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
}

:deep(.cancel-button:hover:not(:disabled))[b-nvvax1wmjf] {
    background-color: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* Validation error styling */
[b-nvvax1wmjf] .rz-message {
    color: var(--error);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Focus management */
.form-group:focus-within :deep(.rz-label)[b-nvvax1wmjf] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Mobile step title (hidden on desktop) */
.mobile-step-title[b-nvvax1wmjf] {
    display: none;
}

/* Mobile step navigation (hidden on desktop) */
.mobile-step-nav[b-nvvax1wmjf] {
    display: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .patient-form-container[b-nvvax1wmjf] {
        padding: 0 1rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-header[b-nvvax1wmjf] {
        padding: 1.25rem 0 1rem 0;
        margin-bottom: 1rem;
    }

    .form-header h3[b-nvvax1wmjf] {
        font-size: 1.25rem;
    }

    .mobile-step-title[b-nvvax1wmjf] {
        display: block;
        font-size: 0.8125rem;
        color: var(--primary);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .form-row[b-nvvax1wmjf] {
        flex-direction: column;
        gap: 0;
    }

    .form-group.half-width[b-nvvax1wmjf] {
        flex: none;
    }

    /* Hide all form sections, show only active step */
    .form-section[b-nvvax1wmjf] {
        display: none !important;
    }

    .form-section.mobile-step-active[b-nvvax1wmjf] {
        display: block !important;
        animation: mobileStepFadeIn-b-nvvax1wmjf 0.25s ease-out;
        flex: 1;
        overflow-y: auto;
        border: 2px solid var(--primary);
    }

    @keyframes mobileStepFadeIn-b-nvvax1wmjf {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Hide desktop form actions on mobile */
    .desktop-actions[b-nvvax1wmjf] {
        display: none !important;
    }

    /* Show mobile step navigation */
    .mobile-step-nav[b-nvvax1wmjf] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        flex-shrink: 0;
        background-color: var(--secondary);
    }

    .mobile-step-indicator[b-nvvax1wmjf] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    :deep(.mobile-nav-btn)[b-nvvax1wmjf] {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Progress dots clickable on mobile */
    .progress-dots .dot[b-nvvax1wmjf] {
        width: 10px;
        height: 10px;
        cursor: pointer;
    }

    .progress-dots .dot:hover[b-nvvax1wmjf] {
        background-color: var(--primary-dark);
    }
}
/* /Components/Dialogs/SideBarSettingsDialog.razor.rz.scp.css */
/* Override dialog mask opacity */
:deep(.rz-dialog-mask)[b-fad0oyjsap] {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Sidebar styles */
.profile-sidebar-main[b-fad0oyjsap] {
    background-color: var(--secondary) !important;
    box-shadow: var(--shadow-lg) !important;
    border-left: 1px solid var(--border-color) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.profile-sidebar-container[b-fad0oyjsap] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.profile-close-button-container[b-fad0oyjsap] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
}

.profile-btn-icon[b-fad0oyjsap] {
    background-color: transparent !important;
    border: none !important;
    padding: 8px !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
}

    .profile-btn-icon:hover[b-fad0oyjsap] {
        background-color: var(--secondary-hover) !important;
    }

.profile-sidebar-content[b-fad0oyjsap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    padding-top: 48px;
    height: 100%;
}

.profile-user-section[b-fad0oyjsap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
}

.profile-avatar-container[b-fad0oyjsap] {
    margin-bottom: 16px;
    position: relative;
}

.profile-avatar-circle[b-fad0oyjsap] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    border: 3px solid var(--secondary);
}

.profile-avatar-initials[b-fad0oyjsap] {
    color: white;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 1px;
}

.profile-user-name[b-fad0oyjsap] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary);
    text-align: center;
}

.profile-user-email[b-fad0oyjsap] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    text-align: center;
}

.profile-user-role[b-fad0oyjsap] {
    margin-top: 8px;
}

.role-badge[b-fad0oyjsap] {
    background-color: var(--primary-light);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.profile-separator[b-fad0oyjsap] {
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin: 16px 0;
}

.profile-menu-container[b-fad0oyjsap] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.menu-section-title[b-fad0oyjsap] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1.5rem 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-section-title:first-child[b-fad0oyjsap] {
    margin-top: 0;
}

.profile-btn-menu[b-fad0oyjsap] {
    background-color: var(--secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    transition: var(--transition) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

    .profile-btn-menu:hover[b-fad0oyjsap] {
        background-color: var(--secondary-hover) !important;
        border-color: var(--primary) !important;
        transform: translateX(4px) !important;
        box-shadow: var(--shadow) !important;
    }

:deep(.profile-btn-menu .rz-button-icon-left)[b-fad0oyjsap] {
    color: var(--primary) !important;
    margin-right: 0.75rem !important;
    font-size: 1.125rem !important;
}

:deep(.profile-btn-menu .rz-button-text)[b-fad0oyjsap] {
    flex: 1 !important;
}

.profile-flex-spacer[b-fad0oyjsap] {
    flex-grow: 1;
}

.profile-actions[b-fad0oyjsap] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.profile-btn-help[b-fad0oyjsap] {
    background-color: var(--background-light) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .profile-btn-help:hover[b-fad0oyjsap] {
        background-color: var(--secondary-hover) !important;
        border-color: var(--primary) !important;
    }

:deep(.profile-btn-help .rz-button-icon-left)[b-fad0oyjsap] {
    color: var(--text-secondary) !important;
    margin-right: 0.5rem !important;
}

.profile-btn-logout[b-fad0oyjsap] {
    background-color: var(--error) !important;
    color: white !important;
    border: 1px solid var(--error) !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .profile-btn-logout:hover[b-fad0oyjsap] {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        transform: translateY(-2px) !important;
        box-shadow: var(--shadow-md) !important;
    }

:deep(.profile-btn-logout .rz-button-icon-left)[b-fad0oyjsap] {
    color: white !important;
    margin-right: 0.5rem !important;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .profile-sidebar-main[b-fad0oyjsap] {
        width: 100% !important;
    }

    .profile-sidebar-content[b-fad0oyjsap] {
        padding: 16px;
        padding-top: 36px;
        overflow: hidden;
    }

    .profile-avatar-circle[b-fad0oyjsap] {
        width: 56px;
        height: 56px;
    }

    .profile-avatar-initials[b-fad0oyjsap] {
        font-size: 1.25rem;
    }

    .profile-avatar-container[b-fad0oyjsap] {
        margin-bottom: 8px;
    }

    .profile-user-section[b-fad0oyjsap] {
        margin-bottom: 12px;
    }

    .profile-user-name[b-fad0oyjsap] {
        font-size: 1.0625rem;
        margin-bottom: 2px;
    }

    .profile-user-email[b-fad0oyjsap] {
        font-size: 0.8125rem;
        margin-bottom: 4px;
    }

    .profile-user-role[b-fad0oyjsap] {
        margin-top: 4px;
    }

    .profile-separator[b-fad0oyjsap] {
        margin: 8px 0;
    }

    .profile-menu-container[b-fad0oyjsap] {
        gap: 0.25rem;
        margin-bottom: 0;
    }

    .menu-section-title[b-fad0oyjsap] {
        font-size: 0.75rem;
        margin: 0.75rem 0 0.375rem 0;
    }

    .profile-btn-menu[b-fad0oyjsap] {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.25rem !important;
        font-size: 0.875rem !important;
    }

    .profile-actions[b-fad0oyjsap] {
        gap: 0.5rem;
        padding-top: 0.75rem;
    }

    .profile-btn-help[b-fad0oyjsap] {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .profile-btn-logout[b-fad0oyjsap] {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
}
/* /Components/Dialogs/SignOutConfirmationDialog.razor.rz.scp.css */
/* Custom Sign Out Confirmation Dialog */
.signout-confirmation-overlay[b-xnjdto93uh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000 !important;
    animation: fadeIn-b-xnjdto93uh 0.2s ease-out;
}

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

.signout-confirmation-dialog[b-xnjdto93uh] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    max-width: 420px;
    width: 90%;
    overflow: hidden;
    animation: slideIn-b-xnjdto93uh 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10001 !important;
}

@keyframes slideIn-b-xnjdto93uh {
    from { 
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.dialog-header[b-xnjdto93uh] {
    padding: 32px 32px 24px 32px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dialog-icon[b-xnjdto93uh] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    position: relative;
}

.logout-icon[b-xnjdto93uh] {
    font-size: 28px;
    color: #dc2626;
}

.dialog-title[b-xnjdto93uh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    letter-spacing: -0.025em;
}

.dialog-message[b-xnjdto93uh] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.dialog-content[b-xnjdto93uh] {
    padding: 0 32px 24px 32px;
}

.warning-note[b-xnjdto93uh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    font-size: 0.875rem;
    color: #1e40af;
}

.info-icon[b-xnjdto93uh] {
    font-size: 16px;
    color: #3b82f6;
    flex-shrink: 0;
}

.dialog-actions[b-xnjdto93uh] {
    padding: 0 32px 32px 32px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Button Styles */
[b-xnjdto93uh] .cancel-btn {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-xnjdto93uh] .cancel-btn:hover {
    background: var(--secondary-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

[b-xnjdto93uh] .signout-btn {
    background: #dc2626;
    color: white;
    border: 1px solid #dc2626;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all 0.2s ease;
    min-width: 120px;
}

[b-xnjdto93uh] .signout-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Responsive Design */
@media (max-width: 480px) {
    .signout-confirmation-dialog[b-xnjdto93uh] {
        width: 95%;
        margin: 16px;
    }
    
    .dialog-header[b-xnjdto93uh] {
        padding: 24px 24px 20px 24px;
    }
    
    .dialog-content[b-xnjdto93uh] {
        padding: 0 24px 20px 24px;
    }
    
    .dialog-actions[b-xnjdto93uh] {
        padding: 0 24px 24px 24px;
        flex-direction: column;
    }
    
    [b-xnjdto93uh] .cancel-btn,
    [b-xnjdto93uh] .signout-btn {
        width: 100%;
        justify-content: center;
    }
    
    .dialog-icon[b-xnjdto93uh] {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }
    
    .logout-icon[b-xnjdto93uh] {
        font-size: 24px;
    }
    
    .dialog-title[b-xnjdto93uh] {
        font-size: 1.25rem;
    }
}
/* /Components/Dialogs/TaskDetailsDialog.razor.rz.scp.css */
/* Task Details Dialog - Professional Style */

.task-details-container[b-76wnqwf93w] {
    background: var(--secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

/* Header Section - Clean Professional Style */
.task-header[b-76wnqwf93w] {
    background: var(--background-light);
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.task-header-content[b-76wnqwf93w] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.task-title-section[b-76wnqwf93w] {
    flex: 1;
}

.task-title[b-76wnqwf93w] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.task-badges[b-76wnqwf93w] {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.task-badge[b-76wnqwf93w] {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-badge i[b-76wnqwf93w] {
    font-size: 0.875rem;
}

.priority-critical[b-76wnqwf93w] { background: rgba(234, 67, 53, 0.1); color: var(--error); border: 1px solid rgba(234, 67, 53, 0.2); }
.priority-urgent[b-76wnqwf93w] { background: rgba(234, 67, 53, 0.1); color: var(--error); border: 1px solid rgba(234, 67, 53, 0.2); }
.priority-high[b-76wnqwf93w] { background: rgba(251, 188, 5, 0.1); color: #f57c00; border: 1px solid rgba(251, 188, 5, 0.2); }
.priority-medium[b-76wnqwf93w] { background: rgba(56, 145, 187, 0.1); color: var(--info); border: 1px solid rgba(56, 145, 187, 0.2); }
.priority-low[b-76wnqwf93w] { background: rgba(52, 168, 83, 0.1); color: var(--success); border: 1px solid rgba(52, 168, 83, 0.2); }

.status-new[b-76wnqwf93w] { background: rgba(56, 145, 187, 0.1); color: var(--info); border: 1px solid rgba(56, 145, 187, 0.2); }
.status-inprogress[b-76wnqwf93w] { background: rgba(251, 188, 5, 0.1); color: #f57c00; border: 1px solid rgba(251, 188, 5, 0.2); }
.status-underreview[b-76wnqwf93w] { background: rgba(156, 39, 176, 0.1); color: #9c27b0; border: 1px solid rgba(156, 39, 176, 0.2); }
.status-completed[b-76wnqwf93w] { background: rgba(52, 168, 83, 0.1); color: var(--success); border: 1px solid rgba(52, 168, 83, 0.2); }
.status-onhold[b-76wnqwf93w] { background: rgba(107, 114, 128, 0.1); color: var(--text-secondary); border: 1px solid rgba(107, 114, 128, 0.2); }

.task-meta[b-76wnqwf93w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.meta-item[b-76wnqwf93w] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.meta-item i[b-76wnqwf93w] {
    font-size: 1rem;
    color: var(--text-muted);
}

.overdue[b-76wnqwf93w] {
    color: var(--error) !important;
    font-weight: 600;
}

.due-soon[b-76wnqwf93w] {
    color: #f57c00 !important;
    font-weight: 600;
}

/* Header Actions - Professional Buttons */
.header-actions[b-76wnqwf93w] {
    display: flex;
    gap: var(--spacing-sm);
}

.header-btn[b-76wnqwf93w] {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 80px;
    justify-content: center;
}

.header-btn:hover[b-76wnqwf93w] {
    background: var(--secondary-hover);
    color: var(--text-primary);
    border-color: var(--primary);
}

.header-btn.edit-btn[b-76wnqwf93w] {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.header-btn.edit-btn:hover[b-76wnqwf93w] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Content Area */
.task-content[b-76wnqwf93w] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Tab Navigation */
.content-tabs[b-76wnqwf93w] {
    border-bottom: 1px solid var(--border-color);
    background: var(--background-light);
}

.tab-nav[b-76wnqwf93w] {
    display: flex;
    padding: 0 var(--spacing-xl);
}

.tab-button[b-76wnqwf93w] {
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
}

.tab-button:hover[b-76wnqwf93w] {
    color: var(--primary);
    background: var(--secondary-hover);
}

.tab-button.active[b-76wnqwf93w] {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--secondary);
}

.tab-button i[b-76wnqwf93w] {
    font-size: 1rem;
}

/* Tab Content */
.tab-content[b-76wnqwf93w] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xl);
    background: var(--secondary);
}

/* Form Styling */
.edit-form[b-76wnqwf93w] {
    max-width: none;
}

.form-section[b-76wnqwf93w] {
    margin-bottom: var(--spacing-xl);
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

.form-section-header[b-76wnqwf93w] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-section-header i[b-76wnqwf93w] {
    color: var(--primary);
    font-size: 1.25rem;
}

.form-row[b-76wnqwf93w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.form-group[b-76wnqwf93w] {
    margin-bottom: var(--spacing-md);
}

.form-group:last-child[b-76wnqwf93w] {
    margin-bottom: 0;
}

.form-label[b-76wnqwf93w] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
}

.form-input[b-76wnqwf93w] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
    transition: var(--transition);
    background: var(--secondary);
}

.form-input:focus[b-76wnqwf93w] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-textarea[b-76wnqwf93w] {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    transition: var(--transition);
    background: var(--secondary);
}

.form-textarea:focus[b-76wnqwf93w] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Form Actions */
.form-actions[b-76wnqwf93w] {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-lg);
}

.form-btn[b-76wnqwf93w] {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    border: 1px solid transparent;
    min-width: 120px;
    justify-content: center;
}

.form-btn i[b-76wnqwf93w] {
    font-size: 1rem;
}

.form-btn-primary[b-76wnqwf93w] {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.form-btn-primary:hover[b-76wnqwf93w] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.form-btn-primary:disabled[b-76wnqwf93w] {
    background: var(--background-disabled);
    color: var(--text-disabled);
    border-color: var(--border-color);
    cursor: not-allowed;
}

.form-btn-secondary[b-76wnqwf93w] {
    background: var(--secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.form-btn-secondary:hover[b-76wnqwf93w] {
    background: var(--secondary-hover);
    color: var(--text-primary);
    border-color: var(--primary);
}

/* Info Cards */
.description-section[b-76wnqwf93w] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

.description-header[b-76wnqwf93w] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.description-header i[b-76wnqwf93w] {
    color: var(--primary);
    font-size: 1.25rem;
}

.description-content[b-76wnqwf93w] {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.no-description[b-76wnqwf93w] {
    color: var(--text-muted);
}

.info-grid[b-76wnqwf93w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}

.info-card[b-76wnqwf93w] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

.info-card-header[b-76wnqwf93w] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.info-card-header i[b-76wnqwf93w] {
    color: var(--primary);
    font-size: 1.25rem;
}

.info-item[b-76wnqwf93w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.info-item:last-child[b-76wnqwf93w] {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.info-label[b-76wnqwf93w] {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 100px;
    font-size: 0.875rem;
}

.info-value[b-76wnqwf93w] {
    flex: 1;
    text-align: right;
    color: var(--text-primary);
    word-break: break-word;
    font-size: 0.875rem;
}

/* Tags */
.tags-container[b-76wnqwf93w] {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.tag[b-76wnqwf93w] {
    background: var(--secondary-hover);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

/* Quick Actions */
.quick-actions[b-76wnqwf93w] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

.quick-actions-header[b-76wnqwf93w] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.quick-actions-header i[b-76wnqwf93w] {
    color: var(--primary);
    font-size: 1.25rem;
}

.action-buttons[b-76wnqwf93w] {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.action-btn[b-76wnqwf93w] {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    min-width: 140px;
    justify-content: center;
}

.action-btn i[b-76wnqwf93w] {
    font-size: 1rem;
}

.btn-start[b-76wnqwf93w] { background: var(--success); color: white; border-color: var(--success); }
.btn-start:hover[b-76wnqwf93w] { background: #2e7d32; border-color: #2e7d32; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-review[b-76wnqwf93w] { background: #9c27b0; color: white; border-color: #9c27b0; }
.btn-review:hover[b-76wnqwf93w] { background: #7b1fa2; border-color: #7b1fa2; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-complete[b-76wnqwf93w] { background: var(--success); color: white; border-color: var(--success); }
.btn-complete:hover[b-76wnqwf93w] { background: #2e7d32; border-color: #2e7d32; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-hold[b-76wnqwf93w] { background: var(--text-secondary); color: white; border-color: var(--text-secondary); }
.btn-hold:hover[b-76wnqwf93w] { background: #4b5563; border-color: #4b5563; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-resume[b-76wnqwf93w] { background: var(--primary); color: white; border-color: var(--primary); }
.btn-resume:hover[b-76wnqwf93w] { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow); }

/* Comments Section */
.comments-section[b-76wnqwf93w] {
    background: var(--secondary);
}

.add-comment-btn[b-76wnqwf93w] {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    min-width: 140px;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.add-comment-btn:hover[b-76wnqwf93w] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.add-comment-form[b-76wnqwf93w] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.comment-textarea[b-76wnqwf93w] {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9375rem;
    resize: vertical;
    margin-bottom: var(--spacing-md);
    background: var(--secondary);
    transition: var(--transition);
}

.comment-textarea:focus[b-76wnqwf93w] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.comment-form-actions[b-76wnqwf93w] {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.comment-btn[b-76wnqwf93w] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 100px;
    justify-content: center;
}

.comment-btn-primary[b-76wnqwf93w] {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

.comment-btn-primary:hover[b-76wnqwf93w] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.comment-btn-secondary[b-76wnqwf93w] {
    background: var(--secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.comment-btn-secondary:hover[b-76wnqwf93w] {
    background: var(--secondary-hover);
    color: var(--text-primary);
    border-color: var(--primary);
}

/* Comments List */
.comments-list[b-76wnqwf93w] {
    max-height: 400px;
    overflow-y: auto;
}

.comment-item[b-76wnqwf93w] {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.comment-item:hover[b-76wnqwf93w] {
    background: var(--background-light);
}

.comment-item:last-child[b-76wnqwf93w] {
    border-bottom: none;
}

.comment-item.system-comment[b-76wnqwf93w] {
    background: rgba(var(--primary-rgb), 0.02);
    border-left: 3px solid var(--primary);
}

.comment-header[b-76wnqwf93w] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.comment-avatar[b-76wnqwf93w] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.comment-author[b-76wnqwf93w] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.comment-time[b-76wnqwf93w] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.system-badge[b-76wnqwf93w] {
    background: var(--primary);
    color: white;
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.comment-content[b-76wnqwf93w] {
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 0.9375rem;
    margin-left: 52px;
}

.no-comments[b-76wnqwf93w] {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-muted);
}

.no-comments i[b-76wnqwf93w] {
    font-size: 3rem;
    color: var(--text-disabled);
    margin-bottom: var(--spacing-md);
    display: block;
}

.no-comments p[b-76wnqwf93w] {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.no-comments small[b-76wnqwf93w] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .task-details-container[b-76wnqwf93w] {
        width: 95vw;
        height: 90vh;
    }

    .task-header[b-76wnqwf93w] {
        padding: var(--spacing-lg);
    }

    .task-header-content[b-76wnqwf93w] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .header-actions[b-76wnqwf93w] {
        align-self: flex-end;
        width: 100%;
        justify-content: flex-end;
    }

    .info-grid[b-76wnqwf93w] {
        grid-template-columns: 1fr;
    }

    .form-row[b-76wnqwf93w] {
        grid-template-columns: 1fr;
    }

    .tab-nav[b-76wnqwf93w] {
        padding: 0 var(--spacing-lg);
    }

    .tab-content[b-76wnqwf93w] {
        padding: var(--spacing-lg);
    }

    .action-buttons[b-76wnqwf93w] {
        flex-direction: column;
    }

    .action-btn[b-76wnqwf93w] {
        justify-content: center;
        min-width: 100%;
    }

    .comment-content[b-76wnqwf93w] {
        margin-left: 0;
        margin-top: var(--spacing-sm);
    }
}

/* Loading States */
.loading[b-76wnqwf93w] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

.loading i[b-76wnqwf93w] {
    margin-right: var(--spacing-sm);
    animation: spin-b-76wnqwf93w 1s linear infinite;
}

@keyframes spin-b-76wnqwf93w {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Animation for smooth transitions */
.tab-content[b-76wnqwf93w] {
    animation: fadeIn-b-76wnqwf93w 0.2s ease-in-out;
}

@keyframes fadeIn-b-76wnqwf93w {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Dialogs/UploadEvidenceDialog.razor.rz.scp.css */
.upload-dialog[b-xrn1219ut0] {
    width: 100%;
    position: relative;
}

.upload-dialog-header[b-xrn1219ut0] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.upload-dialog-footer[b-xrn1219ut0] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.upload-methods[b-xrn1219ut0] {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
}

.upload-method[b-xrn1219ut0] {
    flex: 1;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .upload-method:hover[b-xrn1219ut0] {
        border-color: var(--primary);
        background-color: rgba(56, 145, 187, 0.05);
    }

    .upload-method.selected[b-xrn1219ut0] {
        border-color: var(--primary);
        background-color: rgba(56, 145, 187, 0.1);
    }

.upload-method-icon[b-xrn1219ut0] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.upload-direct-container[b-xrn1219ut0],
.mobile-upload-container[b-xrn1219ut0] {
    padding: 1rem 0;
}

.upload-area[b-xrn1219ut0] {
    border: 2px dashed #ced4da;
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
    background-color: var(--background-light);
    margin-bottom: 1.5rem;
}

.upload-icon[b-xrn1219ut0] {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.selected-files[b-xrn1219ut0] {
    margin-bottom: 1.5rem;
}

.file-list[b-xrn1219ut0] {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.file-item[b-xrn1219ut0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

    .file-item:last-child[b-xrn1219ut0] {
        border-bottom: none;
    }

.file-name[b-xrn1219ut0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.remove-file[b-xrn1219ut0] {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 0.25rem;
}

.qr-code-container[b-xrn1219ut0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.qr-code-wrapper[b-xrn1219ut0] {
    background-color: white;
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.qr-code[b-xrn1219ut0] {
    width: 250px;
    height: 250px;
}

.verification-code-section[b-xrn1219ut0] {
    text-align: center;
}

.verification-code[b-xrn1219ut0] {
    font-family: monospace;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.25rem;
    color: var(--primary);
    margin: 0.5rem 0;
}

.qr-loading[b-xrn1219ut0],
.qr-error[b-xrn1219ut0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.upload-overlay[b-xrn1219ut0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: var(--radius-md);
}
/* /Components/EmergencyContacts.razor.rz.scp.css */
.emergency-contacts-wrapper[b-l1ef8cuts8] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    font-family: var(--rz-body-font-family, inherit);
}

.emergency-contacts-wrapper.collapsed[b-l1ef8cuts8] {
    width: auto;
}

.emergency-contacts-wrapper.expanded[b-l1ef8cuts8] {
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.emergency-toggle[b-l1ef8cuts8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 14px;
}

.emergency-toggle:hover[b-l1ef8cuts8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.5);
}

.emergency-icon[b-l1ef8cuts8] {
    display: flex;
    align-items: center;
    animation: pulse-b-l1ef8cuts8 2s infinite;
}

@keyframes pulse-b-l1ef8cuts8 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.emergency-label[b-l1ef8cuts8] {
    white-space: nowrap;
}

.close-icon[b-l1ef8cuts8] {
    margin-left: auto;
}

.emergency-panel[b-l1ef8cuts8] {
    margin-top: 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: slideUp-b-l1ef8cuts8 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Allow shrinking */
    max-height: calc(100vh - 120px); /* Leave room for button and margins */
}

@keyframes slideUp-b-l1ef8cuts8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emergency-header[b-l1ef8cuts8] {
    padding: 16px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    flex-shrink: 0;
}

.emergency-header h4[b-l1ef8cuts8] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.emergency-header .subtitle[b-l1ef8cuts8] {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
    color: white;
}

.contacts-list[b-l1ef8cuts8] {
    padding: 12px;
    flex: 1;
    min-height: 0; /* Allow shrinking */
    overflow-y: auto;
}

.contact-card[b-l1ef8cuts8] {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border-left: 4px solid #e5e7eb;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.contact-card:hover[b-l1ef8cuts8] {
    background: #f3f4f6;
}

.contact-card:last-child[b-l1ef8cuts8] {
    margin-bottom: 0;
}

.contact-card.internal[b-l1ef8cuts8] {
    border-left-color: #3b82f6;
}

.contact-card.lado[b-l1ef8cuts8] {
    border-left-color: #8b5cf6;
}

.contact-card.emergency-services[b-l1ef8cuts8] {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.contact-card.external[b-l1ef8cuts8] {
    border-left-color: #10b981;
}

.contact-card.on-call[b-l1ef8cuts8] {
    border-left-color: #f59e0b;
}

.contact-info[b-l1ef8cuts8] {
    margin-bottom: 8px;
}

.contact-role[b-l1ef8cuts8] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 2px;
}

.contact-name[b-l1ef8cuts8] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.out-of-hours-badge[b-l1ef8cuts8] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    background: #10b981;
    color: white;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

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

.phone-link[b-l1ef8cuts8],
.email-link[b-l1ef8cuts8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.phone-link:hover[b-l1ef8cuts8],
.email-link:hover[b-l1ef8cuts8] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.phone-link.emergency[b-l1ef8cuts8] {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.phone-link.emergency:hover[b-l1ef8cuts8] {
    background: #b91c1c;
    border-color: #b91c1c;
}

.email-link[b-l1ef8cuts8] {
    padding: 6px 8px;
}

.contact-notes[b-l1ef8cuts8] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

.designated-lead-section[b-l1ef8cuts8],
.local-authority-section[b-l1ef8cuts8] {
    margin-top: 12px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 8px;
}

.section-label[b-l1ef8cuts8] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1d4ed8;
    margin-bottom: 4px;
}

.lead-name[b-l1ef8cuts8],
.authority-info[b-l1ef8cuts8] {
    font-size: 14px;
    font-weight: 500;
    color: #1e40af;
}

.emergency-footer[b-l1ef8cuts8] {
    padding: 12px 16px;
    background: #fef3c7;
    border-top: 1px solid #fcd34d;
    flex-shrink: 0;
}

.guidance-text[b-l1ef8cuts8] {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
}

.procedures-link[b-l1ef8cuts8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    color: #92400e;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.procedures-link:hover[b-l1ef8cuts8] {
    background: #fef3c7;
    border-color: #f59e0b;
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .emergency-contacts-wrapper[b-l1ef8cuts8] {
        bottom: 16px;
        right: 16px;
    }

    .emergency-contacts-wrapper.expanded[b-l1ef8cuts8] {
        width: 320px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
    }

    .emergency-panel[b-l1ef8cuts8] {
        max-height: calc(100vh - 100px);
    }

    .emergency-header[b-l1ef8cuts8] {
        padding: 10px 12px;
    }

    .emergency-header h4[b-l1ef8cuts8] {
        font-size: 14px;
    }

    .emergency-header .subtitle[b-l1ef8cuts8] {
        font-size: 11px;
    }

    .contact-card[b-l1ef8cuts8] {
        padding: 10px;
    }

    .emergency-footer[b-l1ef8cuts8] {
        padding: 8px 10px;
    }

    .guidance-text[b-l1ef8cuts8] {
        font-size: 11px;
        margin-bottom: 6px;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .emergency-contacts-wrapper[b-l1ef8cuts8] {
        bottom: 70px; /* Above mobile nav bar */
        right: 12px;
    }

    .emergency-contacts-wrapper.expanded[b-l1ef8cuts8] {
        width: calc(100vw - 24px);
        max-width: 300px;
        max-height: calc(100vh - 90px);
        right: 12px;
    }

    .emergency-toggle[b-l1ef8cuts8] {
        padding: 10px 14px;
        font-size: 13px;
    }

    .emergency-panel[b-l1ef8cuts8] {
        max-height: calc(100vh - 160px);
    }

    .emergency-header[b-l1ef8cuts8] {
        padding: 8px 10px;
    }

    .emergency-header h4[b-l1ef8cuts8] {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .emergency-header .subtitle[b-l1ef8cuts8] {
        font-size: 10px;
    }

    .contact-card[b-l1ef8cuts8] {
        padding: 8px;
        margin-bottom: 6px;
    }

    .contact-role[b-l1ef8cuts8] {
        font-size: 10px;
    }

    .contact-name[b-l1ef8cuts8] {
        font-size: 13px;
    }

    .contact-actions[b-l1ef8cuts8] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .phone-link[b-l1ef8cuts8],
    .email-link[b-l1ef8cuts8] {
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
    }

    .out-of-hours-badge[b-l1ef8cuts8] {
        font-size: 9px;
        padding: 1px 4px;
    }

    .emergency-footer[b-l1ef8cuts8] {
        padding: 6px 8px;
    }

    .guidance-text[b-l1ef8cuts8] {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .procedures-link[b-l1ef8cuts8] {
        font-size: 11px;
        padding: 5px 8px;
    }
}
/* /Components/EmployeeBar.razor.rz.scp.css */
/* Employee Bar Main Container */
.employee-bar[b-aedh1qx78g] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    background-color: var(--secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 80px !important;
}

/* Employee Info Section */
.employee-info-section[b-aedh1qx78g] {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
}

/* Back Button */
.back-button[b-aedh1qx78g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
    color: var(--text-secondary);
}

.back-button:hover[b-aedh1qx78g] {
    background-color: var(--secondary-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-2px);
}

/* Employee Avatar */
.employee-avatar[b-aedh1qx78g] {
    margin-right: 1rem;
    flex-shrink: 0;
}

.avatar-circle[b-aedh1qx78g] {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3891BB, #2A6D8E) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    border: 2px solid white !important;
}

.avatar-initials[b-aedh1qx78g] {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Employee Details */
.employee-details[b-aedh1qx78g] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.employee-name-row[b-aedh1qx78g] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.employee-name[b-aedh1qx78g] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badges-container[b-aedh1qx78g] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-right: 5rem;
    flex-shrink: 0 !important;
    height: 36px !important; /* Match button height for alignment */
}

.employee-id-badge[b-aedh1qx78g] {
    background-color: #EBF5FA !important;
    color: #3891BB !important;
    font-weight: 500 !important;
    font-family: monospace !important;
    font-size: 0.75rem !important;
}

.status-badge[b-aedh1qx78g] {
    font-weight: 500;
    font-size: 0.75rem;
}

.employee-info-row[b-aedh1qx78g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-item[b-aedh1qx78g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.info-icon[b-aedh1qx78g] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.info-separator[b-aedh1qx78g] {
    color: var(--text-muted);
    font-weight: 300;
}

/* Employee Actions */
.employee-actions[b-aedh1qx78g] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Skeleton Loading Styles */
.skeleton[b-aedh1qx78g] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-aedh1qx78g 1.5s infinite;
    border-radius: var(--radius);
}

.skeleton-avatar .skeleton-circle[b-aedh1qx78g] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-name[b-aedh1qx78g] {
    height: 1.25rem;
    width: 200px;
    margin-bottom: 0.375rem;
}

.skeleton-details[b-aedh1qx78g] {
    height: 0.875rem;
    width: 300px;
}

.skeleton-badge[b-aedh1qx78g] {
    height: 1.25rem;
    width: 60px;
    border-radius: 0.75rem;
}

@keyframes loading-b-aedh1qx78g {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .employee-bar[b-aedh1qx78g] {
        padding: 0.75rem 1rem !important;
        min-height: auto !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .employee-name[b-aedh1qx78g] {
        font-size: 1.125rem;
    }

    .employee-info-row[b-aedh1qx78g] {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .info-separator[b-aedh1qx78g] {
        display: none;
    }

    .info-item[b-aedh1qx78g] {
        font-size: 0.8125rem;
    }

    .badges-container[b-aedh1qx78g] {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
        margin-right: 0;
    }

    .employee-actions[b-aedh1qx78g] {
        display: none;
    }
}

@media (max-width: 480px) {
    .employee-bar[b-aedh1qx78g] {
        padding: 0.5rem 0.75rem !important;
    }

    .employee-avatar[b-aedh1qx78g] {
        margin-right: 0.5rem;
    }

    .avatar-circle[b-aedh1qx78g] {
        width: 40px !important;
        height: 40px !important;
    }

    .avatar-initials[b-aedh1qx78g] {
        font-size: 0.875rem;
    }

    .back-button[b-aedh1qx78g] {
        width: 32px;
        height: 32px;
        margin-right: 0.5rem;
    }

    .employee-name[b-aedh1qx78g] {
        font-size: 1rem;
    }

    .employee-name-row[b-aedh1qx78g] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }

    .badges-container[b-aedh1qx78g] {
        flex-direction: row !important;
        align-self: flex-start;
    }
}
/* /Components/EmployeeList.razor.rz.scp.css */
/* Professional Employee List Styles */
.employee-list-container[b-0i7w221kzs] {
    padding: 24px;
    background: var(--background-light);
    min-height: 100vh;
}

/* Modern Header Section */
.list-header[b-0i7w221kzs] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.header-content[b-0i7w221kzs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-title-section[b-0i7w221kzs] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.page-title[b-0i7w221kzs] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.stats-badge[b-0i7w221kzs] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid rgba(56, 145, 187, 0.2);
}

.header-actions[b-0i7w221kzs] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.view-toggle[b-0i7w221kzs] {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    border-right: 1px solid var(--border-color);
}

[b-0i7w221kzs] .action-btn {
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

[b-0i7w221kzs] .refresh-btn {
    background: var(--background-light);
    color: var(--text-secondary);
}

[b-0i7w221kzs] .refresh-btn:hover {
    background: var(--secondary-hover);
    transform: translateY(-1px);
}

[b-0i7w221kzs] .primary-btn {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[b-0i7w221kzs] .primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

[b-0i7w221kzs] .toggle-btn {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

[b-0i7w221kzs] .toggle-btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Enhanced Search Section */
.search-section[b-0i7w221kzs] {
    margin-bottom: 24px;
}

.search-container[b-0i7w221kzs] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    max-width: 500px;
}

.search-container:focus-within[b-0i7w221kzs] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1);
}

.search-icon[b-0i7w221kzs] {
    margin: 0 12px 0 16px;
    color: var(--text-muted);
    font-size: 20px;
}

[b-0i7w221kzs] .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 8px;
    font-size: 15px;
    color: var(--text-primary);
}

[b-0i7w221kzs] .search-input:focus {
    outline: none;
    box-shadow: none;
}

[b-0i7w221kzs] .clear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px;
    border-radius: 8px;
    margin-right: 4px;
}

[b-0i7w221kzs] .clear-btn:hover {
    background: var(--background-light);
    color: var(--text-secondary);
}

.search-results-info[b-0i7w221kzs] {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Professional Card Layout */
.cards-container[b-0i7w221kzs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.employee-card[b-0i7w221kzs] {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.employee-card:hover[b-0i7w221kzs] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(56, 145, 187, 0.15);
    border-color: var(--primary-light);
}

.card-header[b-0i7w221kzs] {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: rgba(248, 250, 252, 0.5);
}

.employee-avatar[b-0i7w221kzs] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.employee-info[b-0i7w221kzs] {
    flex: 1;
    min-width: 0;
}

.employee-name[b-0i7w221kzs] {
    margin: 0 0 4px 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-meta[b-0i7w221kzs] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: 4px;
}

.employee-type[b-0i7w221kzs] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.employee-status[b-0i7w221kzs] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-active[b-0i7w221kzs] {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(21, 128, 61);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-inactive[b-0i7w221kzs] {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(185, 28, 28);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-pending[b-0i7w221kzs] {
    background: rgba(251, 191, 36, 0.1);
    color: rgb(146, 64, 14);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.status-unknown[b-0i7w221kzs] {
    background: rgba(107, 114, 128, 0.1);
    color: rgb(75, 85, 99);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.card-actions[b-0i7w221kzs] {
    flex-shrink: 0;
}

[b-0i7w221kzs] .view-btn {
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary-dark);
    padding: 8px;
}

[b-0i7w221kzs] .view-btn:hover {
    background: var(--primary);
    color: white;
}

.card-body[b-0i7w221kzs] {
    padding: 20px;
}

.employee-details[b-0i7w221kzs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item[b-0i7w221kzs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.detail-icon[b-0i7w221kzs] {
    color: #10b981;
    font-size: 16px;
    width: 16px;
    flex-shrink: 0;
}

.detail-label[b-0i7w221kzs] {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 100px;
}

.detail-value[b-0i7w221kzs] {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

/* Empty State */
.empty-state[b-0i7w221kzs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: white;
    border-radius: 16px;
    border: 2px dashed var(--border-color);
}

.empty-icon[b-0i7w221kzs] {
    font-size: 64px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-title[b-0i7w221kzs] {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-description[b-0i7w221kzs] {
    margin: 0 0 24px 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 400px;
}

[b-0i7w221kzs] .empty-action-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
}

[b-0i7w221kzs] .empty-action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Professional Pagination */
.pagination-container[b-0i7w221kzs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.pagination-info[b-0i7w221kzs] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-controls[b-0i7w221kzs] {
    display: flex;
    gap: 4px;
}

[b-0i7w221kzs] .page-btn {
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.2s ease;
}

[b-0i7w221kzs] .page-btn:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

[b-0i7w221kzs] .page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

[b-0i7w221kzs] .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .employee-list-container[b-0i7w221kzs] {
        padding: 16px;
    }

    .header-content[b-0i7w221kzs] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .header-actions[b-0i7w221kzs] {
        justify-content: flex-end;
    }

    .view-toggle[b-0i7w221kzs],
    [b-0i7w221kzs] .refresh-btn {
        display: none;
    }

    .cards-container[b-0i7w221kzs] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pagination-container[b-0i7w221kzs] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .pagination-controls[b-0i7w221kzs] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .employee-card[b-0i7w221kzs] {
        margin: 0 -4px;
    }

    .card-header[b-0i7w221kzs] {
        padding: 16px;
    }

    .card-body[b-0i7w221kzs] {
        padding: 16px;
    }

    .employee-name[b-0i7w221kzs] {
        font-size: 1rem;
    }

    .page-title[b-0i7w221kzs] {
        font-size: 1.5rem;
    }
}

/* Professional Grid View Styles */
.grid-container[b-0i7w221kzs] {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

[b-0i7w221kzs] .modern-datagrid {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    border: none;
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #10b981;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-header th {
    padding: 16px 20px;
    border-right: 1px solid var(--border-color);
    vertical-align: middle;
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-header th:last-child {
    border-right: none;
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-data tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(241, 245, 249, 0.8);
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-data tr:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.08) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
    cursor: pointer;
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-data td {
    padding: 16px 20px;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 0.9rem;
    border-right: 1px solid rgba(241, 245, 249, 0.6);
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-data td:last-child {
    border-right: none;
}

[b-0i7w221kzs] .modern-datagrid .rz-datatable-data tr.rz-state-highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);
    border-left: 4px solid #10b981;
    color: #065f46;
}

[b-0i7w221kzs] .modern-datagrid .rz-paginator {
    background: rgba(248, 250, 252, 0.8);
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

[b-0i7w221kzs] .modern-datagrid .rz-paginator .rz-paginator-current {
    color: #10b981;
    font-weight: 600;
}

/* Grid action button for employee list */
[b-0i7w221kzs] .grid-action-btn {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #065f46;
    border-radius: 6px;
    padding: 6px;
    min-width: 32px;
    height: 32px;
}

[b-0i7w221kzs] .grid-action-btn:hover {
    background: #10b981;
    color: white;
    transform: scale(1.05);
}
/* /Components/EmployeeOverview.razor.rz.scp.css */
/* Employee Overview Component Styles */

.tab-content[b-9ynwogu073] {
    padding: 1.5rem !important;
    background-color: white !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E7EB !important;
}

/* Overview container and cards */
.overview-container[b-9ynwogu073] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
}

.overview-card[b-9ynwogu073] {
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E7EB !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.overview-card:hover[b-9ynwogu073] {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.card-header[b-9ynwogu073] {
    background-color: #F8FAFC !important;
    padding: 1rem !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.card-header h3[b-9ynwogu073] {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #333F48 !important;
}

.card-content[b-9ynwogu073] {
    padding: 1.5rem !important;
}

.info-grid[b-9ynwogu073] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
}

.info-item[b-9ynwogu073] {
    display: flex !important;
    flex-direction: column !important;
}

.info-item.full-width[b-9ynwogu073] {
    grid-column: span 2 !important;
}

.info-item label[b-9ynwogu073] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    margin-bottom: 0.375rem !important;
}

.info-item p[b-9ynwogu073] {
    margin: 0 !important;
    font-size: 1rem !important;
    color: #333F48 !important;
}

/* Responsive design */
@media (max-width: 1024px) {
    .overview-container[b-9ynwogu073] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .info-grid[b-9ynwogu073] {
        grid-template-columns: 1fr !important;
    }
    
    .info-item.full-width[b-9ynwogu073] {
        grid-column: span 1 !important;
    }
    
    .tab-content[b-9ynwogu073] {
        padding: 1rem !important;
    }
    
    .card-content[b-9ynwogu073] {
        padding: 1rem !important;
    }
}
/* /Components/HandoverNotesTab.razor.rz.scp.css */
.handover-notes-container[b-isz9naqe1c] {
    padding: 1.5rem;
}

.section-header[b-isz9naqe1c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.section-title[b-isz9naqe1c] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 0.5rem 0;
}

.section-subtitle[b-isz9naqe1c] {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin: 0;
}

.section-actions[b-isz9naqe1c] {
    display: flex;
    gap: 10px;
}

/* Add Note Card */
.add-note-card[b-isz9naqe1c] {
    background: #f8f9fa;
    border: 2px solid #3891BB;
    border-radius: 8px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.add-note-card .card-header[b-isz9naqe1c] {
    background: #3891BB;
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-note-card .card-header h4[b-isz9naqe1c] {
    margin: 0;
    font-size: 1.1rem;
}

.close-btn[b-isz9naqe1c] {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-btn:hover[b-isz9naqe1c] {
    background-color: rgba(255, 255, 255, 0.2);
}

.add-note-card .card-body[b-isz9naqe1c] {
    padding: 1.5rem;
}

.form-group[b-isz9naqe1c] {
    margin-bottom: 1.5rem;
}

.form-group label[b-isz9naqe1c] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.text-muted[b-isz9naqe1c] {
    color: #7f8c8d;
    font-size: 0.85rem;
}

.form-actions[b-isz9naqe1c] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Notes Timeline */
.notes-timeline[b-isz9naqe1c] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.note-item[b-isz9naqe1c] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: box-shadow 0.2s;
}

.note-item:hover[b-isz9naqe1c] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.note-item.archived[b-isz9naqe1c] {
    opacity: 0.7;
    background: #f8f9fa;
}

.note-avatar[b-isz9naqe1c] {
    flex-shrink: 0;
}

.avatar-initials[b-isz9naqe1c] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
}

/* Avatar colors */
.avatar-purple[b-isz9naqe1c] {
    background-color: #9b59b6;
}

.avatar-blue[b-isz9naqe1c] {
    background-color: #3498db;
}

.avatar-green[b-isz9naqe1c] {
    background-color: #27ae60;
}

.avatar-orange[b-isz9naqe1c] {
    background-color: #e67e22;
}

.avatar-red[b-isz9naqe1c] {
    background-color: #e74c3c;
}

.avatar-teal[b-isz9naqe1c] {
    background-color: #1abc9c;
}

.note-content-wrapper[b-isz9naqe1c] {
    flex: 1;
    min-width: 0;
}

.note-header[b-isz9naqe1c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.note-meta[b-isz9naqe1c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.note-author[b-isz9naqe1c] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}

.note-timestamp[b-isz9naqe1c] {
    color: #7f8c8d;
    font-size: 0.85rem;
}

.badge[b-isz9naqe1c] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-archived[b-isz9naqe1c] {
    background-color: #95a5a6;
    color: white;
}

.badge-warning[b-isz9naqe1c] {
    background-color: #f39c12;
    color: white;
}

.note-body[b-isz9naqe1c] {
    color: #2c3e50;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    word-wrap: break-word;
}

/* Rich text content styling */
.note-body ul[b-isz9naqe1c],
.note-body ol[b-isz9naqe1c] {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.note-body strong[b-isz9naqe1c] {
    font-weight: 600;
}

.note-body em[b-isz9naqe1c] {
    font-style: italic;
}

.note-footer[b-isz9naqe1c] {
    border-top: 1px solid #e9ecef;
    padding-top: 0.5rem;
}

/* Empty State */
.empty-state[b-isz9naqe1c] {
    text-align: center;
    padding: 4rem 2rem;
    color: #7f8c8d;
}

.empty-state i[b-isz9naqe1c] {
    font-size: 4rem;
    color: #bdc3c7;
    margin-bottom: 1rem;
}

.empty-state p[b-isz9naqe1c] {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.empty-state small[b-isz9naqe1c] {
    font-size: 0.9rem;
}

/* Loading State */
.loading-state[b-isz9naqe1c] {
    text-align: center;
    padding: 3rem 2rem;
}

.loading-state p[b-isz9naqe1c] {
    margin-top: 1rem;
    color: #7f8c8d;
}

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

/* Tablet portrait (900px and below) */
@media (max-width: 900px) {
    .handover-notes-container[b-isz9naqe1c] {
        padding: 1rem;
    }

    .section-header[b-isz9naqe1c] {
        margin-bottom: 1.5rem;
    }

    .note-item[b-isz9naqe1c] {
        padding: 1.25rem;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .handover-notes-container[b-isz9naqe1c] {
        padding: 0.875rem;
    }

    .section-header[b-isz9naqe1c] {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
    }

    .section-title[b-isz9naqe1c] {
        font-size: 1.25rem;
    }

    .section-subtitle[b-isz9naqe1c] {
        font-size: 0.8125rem;
    }

    .section-actions[b-isz9naqe1c] {
        width: 100%;
    }

    .section-actions[b-isz9naqe1c]  .rz-button {
        flex: 1;
    }

    /* Full-screen note editor overlay on mobile */
    .add-note-card[b-isz9naqe1c] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        margin: 0;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .add-note-card .card-header[b-isz9naqe1c] {
        flex-shrink: 0;
        padding: 0.875rem 1rem;
    }

    .add-note-card .card-body[b-isz9naqe1c] {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        overflow: hidden;
        min-height: 0;
    }

    .add-note-card .form-group[b-isz9naqe1c] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-bottom: 0.75rem;
    }

    .add-note-card .form-group label[b-isz9naqe1c] {
        flex-shrink: 0;
    }

    .add-note-card .form-group small[b-isz9naqe1c] {
        flex-shrink: 0;
        margin-top: 0.5rem;
    }

    /* Expand the Radzen editor to fill available space */
    .add-note-card .form-group[b-isz9naqe1c]  .rz-html-editor {
        flex: 1;
        height: auto !important;
        min-height: 150px;
    }

    .add-note-card .form-actions[b-isz9naqe1c] {
        flex-shrink: 0;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    /* Notes list mobile adjustments */
    .note-item[b-isz9naqe1c] {
        flex-direction: column;
        padding: 1rem;
        gap: 0.75rem;
    }

    .note-avatar[b-isz9naqe1c] {
        align-self: flex-start;
    }

    .avatar-initials[b-isz9naqe1c] {
        width: 38px;
        height: 38px;
        font-size: 0.8125rem;
    }

    .note-author[b-isz9naqe1c] {
        font-size: 0.9375rem;
    }

    .note-timestamp[b-isz9naqe1c] {
        font-size: 0.8rem;
    }

    .note-body[b-isz9naqe1c] {
        font-size: 0.9375rem;
    }

    .notes-timeline[b-isz9naqe1c] {
        gap: 1rem;
    }

    .empty-state[b-isz9naqe1c] {
        padding: 2.5rem 1.5rem;
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .handover-notes-container[b-isz9naqe1c] {
        padding: 0.75rem;
    }

    .section-title[b-isz9naqe1c] {
        font-size: 1.125rem;
    }

    .note-item[b-isz9naqe1c] {
        padding: 0.875rem;
    }

    .note-meta[b-isz9naqe1c] {
        gap: 6px;
    }

    .note-author[b-isz9naqe1c] {
        font-size: 0.875rem;
    }

    .note-body[b-isz9naqe1c] {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .badge[b-isz9naqe1c] {
        font-size: 0.6875rem;
        padding: 0.2rem 0.4rem;
    }
}
/* /Components/LegalCases.razor.rz.scp.css */
/* ==================== LAYOUT STYLES ==================== */
.communications-container[b-0pv63j9u6d] {
    display: flex;
    height: calc(100vh - 330px);
}

.status-badge-container[b-0pv63j9u6d] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.concern-container[b-0pv63j9u6d] {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
/* ==================== LEFT SIDEBAR STYLES ==================== */
.concerns-sidebar[b-0pv63j9u6d] {
    width: 100%;
    background-color: white;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
}

.search-box[b-0pv63j9u6d] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.search-input[b-0pv63j9u6d] {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: #f1f5f9;
    font-size: 0.875rem;
}

    .search-input:focus[b-0pv63j9u6d] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

/* ==================== CONCERN CARD STYLES ==================== */
.concern-item[b-0pv63j9u6d] {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin: 0.5rem 1rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

    .concern-item:hover[b-0pv63j9u6d] {
        background-color: #f1f5f9;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    .concern-item.active[b-0pv63j9u6d] {
        background-color: #eff6ff;
        border-left: 4px solid #3b82f6;
        border-color: #3b82f6;
    }

    .concern-item.critical[b-0pv63j9u6d] {
        background-color: #fef3c7;
        border-color: #fbbf24;
    }

    .concern-item.high[b-0pv63j9u6d] {
        background-color: #fef3c1;
        border-color: #EA580C;
    }

.concern-header[b-0pv63j9u6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.concern-id[b-0pv63j9u6d] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.concern-subject[b-0pv63j9u6d] {
    font-size: 0.75rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.concern-description[b-0pv63j9u6d] {
    font-size: 0.6875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    /* Limit description to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.concern-meta[b-0pv63j9u6d] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* ==================== PRIORITY BADGE STYLES ==================== */
.priority-badge[b-0pv63j9u6d] {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
}

.priority-critical[b-0pv63j9u6d] {
    background-color: #dc2626;
    color: white;
}

.priority-medium[b-0pv63j9u6d] {
    background-color: #f59e0b;
    color: white;
}

.priority-high[b-0pv63j9u6d] {
    background-color: #FB6514;
    color: white;
}

.priority-low[b-0pv63j9u6d] {
    background-color: #10b981;
    color: white;
}

/* ==================== STATUS BADGE STYLES ==================== */
.status-badge[b-0pv63j9u6d] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.status-legal[b-0pv63j9u6d] {
    background-color: #1E40AF;
    color: white;
}

/* Small status badges for sidebar */
.status-badge-small[b-0pv63j9u6d] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    margin-left: 0.25rem;
}

/* ==================== MAIN CONTENT STYLES ==================== */
.main-content[b-0pv63j9u6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.concern-header-section[b-0pv63j9u6d] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.concern-title[b-0pv63j9u6d] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.concern-info[b-0pv63j9u6d] {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
}

.action-buttons[b-0pv63j9u6d] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ==================== BUTTON STYLES ==================== */
.btn-primary[b-0pv63j9u6d] {
    background-color: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
}

    .btn-primary:hover[b-0pv63j9u6d] {
        background-color: #059669;
    }

    .btn-primary:disabled[b-0pv63j9u6d] {
        background-color: #9ca3af;
        cursor: not-allowed;
    }

.btn-secondary[b-0pv63j9u6d] {
    background-color: white;
    color: #64748b;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-0pv63j9u6d] {
        background-color: #f1f5f9;
        border-color: #3b82f6;
    }

/* ==================== MESSAGE THREAD STYLES ==================== */
.thread-container[b-0pv63j9u6d] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #f8fafc;
}

.message-item[b-0pv63j9u6d] {
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.avatar[b-0pv63j9u6d] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.avatar-purple[b-0pv63j9u6d] {
    background-color: #8b5cf6;
}

.avatar-blue[b-0pv63j9u6d] {
    background-color: #3b82f6;
}

.avatar-green[b-0pv63j9u6d] {
    background-color: #10b981;
}

.avatar-gray[b-0pv63j9u6d] {
    background-color: #6b7280;
}

.message-content[b-0pv63j9u6d] {
    flex: 1;
}

.message-header[b-0pv63j9u6d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.message-author[b-0pv63j9u6d] {
    font-weight: bold;
    color: #1e293b;
    font-size: 0.875rem;
}

.message-time[b-0pv63j9u6d] {
    color: #64748b;
    font-size: 0.75rem;
}

.message-badge[b-0pv63j9u6d] {
    background-color: #fee2e2;
    color: #dc2626;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.response-badge[b-0pv63j9u6d] {
    background-color: #dbeafe;
    color: #3b82f6;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.system-badge[b-0pv63j9u6d] {
    background-color: #d1fae5;
    color: #065f46;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.message-text[b-0pv63j9u6d] {
    color: #1e293b;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.message-actions[b-0pv63j9u6d] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-link[b-0pv63j9u6d] {
    background-color: #dbeafe;
    color: #3b82f6;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

    .action-link:hover[b-0pv63j9u6d] {
        background-color: #bfdbfe;
    }

.attachment-link[b-0pv63j9u6d] {
    background-color: #f3f4f6;
    color: #64748b;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
}

/* ==================== RESPONSE INPUT STYLES ==================== */
.response-section[b-0pv63j9u6d] {
    padding: 1.5rem;
    background-color: white;
    border-top: 1px solid #e2e8f0;
}

.response-section-resolved[b-0pv63j9u6d] {
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f3f4f6;
    text-align: center;
    color: #6b7280;
}

.response-input[b-0pv63j9u6d] {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
}

    .response-input:focus[b-0pv63j9u6d] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.response-actions[b-0pv63j9u6d] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ==================== UTILITY STYLES ==================== */
.loading-message[b-0pv63j9u6d] {
    text-align: center;
    color: #64748b;
    padding: 2rem;
    font-size: 0.875rem;
}

.no-results[b-0pv63j9u6d] {
    text-align: center;
    color: #94a3b8;
    padding: 2rem;
    font-size: 0.875rem;
    font-style: italic;
}
/* /Components/OverviewTab.razor.rz.scp.css */
/* Overview Tab Component Styles */

.tab-content[b-z2glvfurkc] {
    padding: 1.5rem !important;
    background-color: white !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E7EB !important;
}

/* Overview container and cards */
.overview-container[b-z2glvfurkc] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
}

.overview-card[b-z2glvfurkc] {
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E7EB !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.overview-card:hover[b-z2glvfurkc] {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.full-width[b-z2glvfurkc] {
    grid-column: span 2 !important;
}

.card-header[b-z2glvfurkc] {
    background-color: #F8FAFC !important;
    padding: 1rem !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.card-header h3[b-z2glvfurkc] {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #333F48 !important;
}

.card-content[b-z2glvfurkc] {
    padding: 1.5rem !important;
}

.info-grid[b-z2glvfurkc] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
}

.info-item[b-z2glvfurkc] {
    display: flex !important;
    flex-direction: column !important;
}

.info-item.full-width[b-z2glvfurkc] {
    grid-column: span 2 !important;
}

.info-item label[b-z2glvfurkc] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    margin-bottom: 0.375rem !important;
}

.info-item p[b-z2glvfurkc] {
    margin: 0 !important;
    font-size: 1rem !important;
    color: #333F48 !important;
}

.badge-container[b-z2glvfurkc] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

/* Responsive design */
@media (max-width: 1024px) {
    .overview-container[b-z2glvfurkc] {
        grid-template-columns: 1fr !important;
    }
    
    .full-width[b-z2glvfurkc] {
        grid-column: span 1 !important;
    }
}

@media (max-width: 768px) {
    .info-grid[b-z2glvfurkc] {
        grid-template-columns: 1fr !important;
    }
    
    .info-item.full-width[b-z2glvfurkc] {
        grid-column: span 1 !important;
    }
    
    .tab-content[b-z2glvfurkc] {
        padding: 1rem !important;
    }
    
    .card-content[b-z2glvfurkc] {
        padding: 1rem !important;
    }
}
/* /Components/PageLoadingDisplay.razor.rz.scp.css */
.loading-display[b-z2rsx1h5ov] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
}

.loading-card[b-z2rsx1h5ov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 3rem;
    max-width: 360px;
    width: 100%;
}

/* Spinning ring with centered icon */
.loading-icon-ring[b-z2rsx1h5ov] {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-spinner[b-z2rsx1h5ov] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    border-top-color: #3891BB;
    animation: ring-spin-b-z2rsx1h5ov 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

[b-z2rsx1h5ov] .loading-center-icon {
    font-size: 1.75rem !important;
    color: #3891BB !important;
    animation: icon-pulse-b-z2rsx1h5ov 2s ease-in-out infinite;
}

.loading-title[b-z2rsx1h5ov] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333F48;
    margin: 0 0 0.375rem 0;
}

.loading-subtitle[b-z2rsx1h5ov] {
    font-size: 0.8125rem;
    color: #6B7280;
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

/* Slim animated progress bar */
.loading-bar-track[b-z2rsx1h5ov] {
    width: 100%;
    max-width: 200px;
    height: 3px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.loading-bar-fill[b-z2rsx1h5ov] {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #3891BB, #2A6D8E);
    border-radius: 3px;
    animation: bar-slide-b-z2rsx1h5ov 1.4s ease-in-out infinite;
}

@keyframes ring-spin-b-z2rsx1h5ov {
    to {
        transform: rotate(360deg);
    }
}

@keyframes icon-pulse-b-z2rsx1h5ov {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes bar-slide-b-z2rsx1h5ov {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(300%);
    }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .loading-display[b-z2rsx1h5ov] {
        min-height: 40vh;
        padding: 1.5rem;
    }

    .loading-card[b-z2rsx1h5ov] {
        padding: 2rem 1.5rem;
    }

    .loading-icon-ring[b-z2rsx1h5ov] {
        width: 60px;
        height: 60px;
        margin-bottom: 1.25rem;
    }

    [b-z2rsx1h5ov] .loading-center-icon {
        font-size: 1.5rem !important;
    }

    .loading-title[b-z2rsx1h5ov] {
        font-size: 1rem;
    }

    .loading-subtitle[b-z2rsx1h5ov] {
        font-size: 0.75rem;
    }
}
/* /Components/PermissionsManager.razor.rz.scp.css */
/* Base Container */
.permissions-wrapper[b-cvk31cndzz] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.permissions-container[b-cvk31cndzz] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Header */
.permissions-header[b-cvk31cndzz] {
    padding: 2rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.header-content[b-cvk31cndzz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-title[b-cvk31cndzz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.header-subtitle[b-cvk31cndzz] {
    color: #6b7280;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Content Area */
.permissions-content[b-cvk31cndzz] {
    padding: 2rem;
}

/* Permission Categories */
.permission-category[b-cvk31cndzz] {
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

    .permission-category:hover[b-cvk31cndzz] {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

.category-header[b-cvk31cndzz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.category-title[b-cvk31cndzz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Permission Items Grid */
.permissions-grid[b-cvk31cndzz] {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.permission-item[b-cvk31cndzz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

    .permission-item:hover:not(.disabled)[b-cvk31cndzz] {
        background-color: #f3f4f6;
        border-color: #d1d5db;
        transform: translateY(-1px);
    }

    .permission-item.disabled[b-cvk31cndzz] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.permission-info[b-cvk31cndzz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.permission-name[b-cvk31cndzz] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

/* JSON View */
.json-view[b-cvk31cndzz] {
    background-color: #1f2937;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.json-content[b-cvk31cndzz] {
    color: #10b981;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* Action Footer */
.permissions-footer[b-cvk31cndzz] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e5e7eb;
    background-color: #f9fafb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-info[b-cvk31cndzz] {
    font-size: 0.875rem;
    color: #6b7280;
}

.footer-actions[b-cvk31cndzz] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Loading State */
.loading-state[b-cvk31cndzz] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-text[b-cvk31cndzz] {
    margin-top: 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Alerts */
.custom-alert[b-cvk31cndzz] {
    margin: 1rem 2rem 0;
}

/* Module Badge */
.module-disabled-badge[b-cvk31cndzz] {
    margin-left: 0.75rem;
    font-size: 0.75rem;
}

/* Security Notice */
.security-notice[b-cvk31cndzz] {
    margin: 1.5rem 2rem 2rem;
}

/* Icons */
.icon-blue[b-cvk31cndzz] {
    color: #3b82f6;
}

.icon-gray[b-cvk31cndzz] {
    color: #6b7280;
}

/* Responsive */
@@media (max-width: 768px) {
    .permissions-wrapper[b-cvk31cndzz] {
        padding: 0.5rem;
    }

    .permissions-header[b-cvk31cndzz],
    .permissions-content[b-cvk31cndzz],
    .permissions-footer[b-cvk31cndzz] {
        padding: 1rem;
    }

    .header-content[b-cvk31cndzz] {
        flex-direction: column;
    }

    .permissions-grid[b-cvk31cndzz] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .permissions-footer[b-cvk31cndzz] {
        flex-direction: column;
        text-align: center;
    }

    .footer-actions[b-cvk31cndzz] {
        width: 100%;
    }

        .footer-actions > *[b-cvk31cndzz] {
            flex: 1;
        }
}

/* Focus States */
.rz-button:focus-visible[b-cvk31cndzz],
.rz-switch:focus-visible[b-cvk31cndzz] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Smooth Transitions */
.permission-category[b-cvk31cndzz],
.permission-item[b-cvk31cndzz],
.rz-button[b-cvk31cndzz] {
    transition-property: background-color, border-color, box-shadow, transform;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.info-footer-icon[b-cvk31cndzz] {
    font-size: 1rem;
    vertical-align: middle;
}
/* /Components/ReportsTab.razor.rz.scp.css */
/* =================================================================
   REPORTSTAB COMPONENT STYLES
   Scoped styles for the ReportsTab component
   ================================================================= */

/* Reports Tab Container */
.reports-tab-container[b-z6ogjlnjqg] {
    width: 100%;
}

/* Reports Header */
.reports-header[b-z6ogjlnjqg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.reports-title-section h2.reports-title[b-z6ogjlnjqg] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.reports-subtitle[b-z6ogjlnjqg] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 600px;
}

.reports-quick-actions[b-z6ogjlnjqg] {
    display: flex;
    gap: 0.75rem;
}

/* Quick Generate Section */
.quick-generate-section[b-z6ogjlnjqg] {
    margin-bottom: 3rem;
}

.section-title[b-z6ogjlnjqg] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

.quick-reports-grid[b-z6ogjlnjqg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.report-quick-card[b-z6ogjlnjqg] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

    .report-quick-card:hover[b-z6ogjlnjqg] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.report-quick-card[b-z6ogjlnjqg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
}

.report-quick-card.secondary[b-z6ogjlnjqg]::before {
    background: var(--warning);
}

.quick-card-header[b-z6ogjlnjqg] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.quick-card-icon[b-z6ogjlnjqg] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.quick-card-info[b-z6ogjlnjqg] {
    flex: 1;
}

    .quick-card-info h4[b-z6ogjlnjqg] {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.25rem 0;
    }

    .quick-card-info p[b-z6ogjlnjqg] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
    }

/* All Reports Section */
.all-reports-section[b-z6ogjlnjqg] {
    margin-bottom: 3rem;
}

.reports-categories[b-z6ogjlnjqg] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.report-category[b-z6ogjlnjqg] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.category-header[b-z6ogjlnjqg] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.category-icon[b-z6ogjlnjqg] {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.category-title[b-z6ogjlnjqg] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.category-reports[b-z6ogjlnjqg] {
    display: grid;
    gap: 1rem;
}

/* Report Card Styling */
.report-card[b-z6ogjlnjqg] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .report-card:hover[b-z6ogjlnjqg] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: var(--primary-light);
    }

.report-card-header[b-z6ogjlnjqg] {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: 1rem;
}

.report-icon[b-z6ogjlnjqg] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
}

    .report-icon.primary[b-z6ogjlnjqg] {
        background-color: rgba(56, 145, 187, 0.1);
        color: var(--primary);
    }

    .report-icon.warning[b-z6ogjlnjqg] {
        background-color: rgba(251, 188, 5, 0.1);
        color: var(--warning);
    }

    .report-icon.info[b-z6ogjlnjqg] {
        background-color: rgba(66, 153, 225, 0.1);
        color: #4299e1;
    }

    .report-icon.success[b-z6ogjlnjqg] {
        background-color: rgba(52, 168, 83, 0.1);
        color: var(--success);
    }

.report-info[b-z6ogjlnjqg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

    .report-info h5[b-z6ogjlnjqg] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.25rem 0;
    }

    .report-info p[b-z6ogjlnjqg] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.5;
    }

    .report-info .report-meta[b-z6ogjlnjqg] {
        font-size: 0.75rem;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

.report-actions[b-z6ogjlnjqg] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    padding-left: 1rem;
}

/* Generating status indicator */
.generating-status[b-z6ogjlnjqg] {
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Historical Reports Section */
.historical-reports-section[b-z6ogjlnjqg] {
    margin-bottom: 2rem;
}

.section-header[b-z6ogjlnjqg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-actions[b-z6ogjlnjqg] {
    display: flex;
    gap: 0.5rem;
}

.historical-loading[b-z6ogjlnjqg] {
    text-align: center;
    padding: 2rem;
}

    .historical-loading p[b-z6ogjlnjqg] {
        margin-top: 1rem;
        color: var(--text-secondary);
    }

.historical-reports-grid[b-z6ogjlnjqg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.historical-report-card[b-z6ogjlnjqg] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

    .historical-report-card:hover[b-z6ogjlnjqg] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: var(--primary-light);
    }

.historical-card-header[b-z6ogjlnjqg] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    width: 100%;
}

.report-type-icon[b-z6ogjlnjqg] {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.report-meta[b-z6ogjlnjqg] {
    flex: 1;
}

.report-title[b-z6ogjlnjqg] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.report-date[b-z6ogjlnjqg],
.report-generator[b-z6ogjlnjqg] {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-right: 1rem;
}

.meta-icon[b-z6ogjlnjqg] {
    font-size: 0.875rem;
    margin-right: 0.375rem;
    color: var(--text-muted);
    vertical-align: middle;
}

.report-status[b-z6ogjlnjqg] {
    display: flex;
    align-items: flex-start;
    margin-left: 1rem;
    flex-shrink: 0;
}

.historical-actions[b-z6ogjlnjqg] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
}

/* Empty State Styling */
.empty-state[b-z6ogjlnjqg] {
    text-align: center;
    padding: 3rem 2rem;
    background-color: var(--background-light);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
}

.empty-state-icon[b-z6ogjlnjqg] {
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.empty-state h4[b-z6ogjlnjqg] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-z6ogjlnjqg] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .reports-header[b-z6ogjlnjqg] {
        flex-direction: column;
        gap: 1rem;
    }

    .reports-quick-actions[b-z6ogjlnjqg] {
        align-self: flex-start;
        width: 100%;
        flex-wrap: wrap;
    }

    .quick-reports-grid[b-z6ogjlnjqg] {
        grid-template-columns: 1fr;
    }

    .report-card[b-z6ogjlnjqg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .report-actions[b-z6ogjlnjqg] {
        width: 100%;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 1rem;
    }
}

@media (max-width: 768px) {
    .reports-header[b-z6ogjlnjqg] {
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
    }

    .reports-title-section h2.reports-title[b-z6ogjlnjqg] {
        font-size: 1.25rem;
    }

    .reports-subtitle[b-z6ogjlnjqg] {
        font-size: 0.8125rem;
    }

    .reports-quick-actions[b-z6ogjlnjqg] {
        gap: 0.5rem;
    }

    .reports-quick-actions[b-z6ogjlnjqg]  .rz-button {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.75rem !important;
        min-height: 34px !important;
    }

    .quick-generate-section[b-z6ogjlnjqg] {
        margin-bottom: 1.5rem;
    }

    .section-title[b-z6ogjlnjqg] {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .quick-reports-grid[b-z6ogjlnjqg] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .report-quick-card[b-z6ogjlnjqg] {
        padding: 1rem;
    }

    .quick-card-header[b-z6ogjlnjqg] {
        margin-bottom: 0.75rem;
    }

    .quick-card-icon[b-z6ogjlnjqg] {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
        margin-right: 0.75rem;
    }

    .quick-card-info h4[b-z6ogjlnjqg] {
        font-size: 0.9375rem;
    }

    .quick-card-info p[b-z6ogjlnjqg] {
        font-size: 0.75rem;
    }

    .report-quick-card[b-z6ogjlnjqg]  .rz-button {
        font-size: 0.8125rem !important;
        min-height: 34px !important;
    }

    /* All Reports Section */
    .all-reports-section[b-z6ogjlnjqg] {
        margin-bottom: 1.5rem;
    }

    .reports-categories[b-z6ogjlnjqg] {
        gap: 1rem;
    }

    .report-category[b-z6ogjlnjqg] {
        padding: 0.75rem;
    }

    .category-header[b-z6ogjlnjqg] {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .category-icon[b-z6ogjlnjqg] {
        width: 28px;
        height: 28px;
        font-size: 1rem;
        margin-right: 0.625rem;
    }

    .category-title[b-z6ogjlnjqg] {
        font-size: 0.9375rem;
    }

    .category-reports[b-z6ogjlnjqg] {
        gap: 0.625rem;
    }

    .report-card[b-z6ogjlnjqg] {
        padding: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .report-card-header[b-z6ogjlnjqg] {
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
    }

    .report-icon[b-z6ogjlnjqg] {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    .report-info[b-z6ogjlnjqg] {
        gap: 0.25rem;
        padding: 0;
    }

    .report-info h5[b-z6ogjlnjqg] {
        font-size: 0.875rem;
    }

    .report-info p[b-z6ogjlnjqg] {
        font-size: 0.75rem;
    }

    .report-info .report-meta[b-z6ogjlnjqg] {
        font-size: 0.6875rem;
    }

    .report-actions[b-z6ogjlnjqg] {
        width: 100%;
        padding-left: 0;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
    }

    .report-actions[b-z6ogjlnjqg]  .rz-button {
        font-size: 0.75rem !important;
        min-height: 30px !important;
        padding: 0.25rem 0.625rem !important;
    }

    .generating-status[b-z6ogjlnjqg] {
        font-size: 0.75rem;
    }

    /* Historical Reports */
    .historical-reports-section[b-z6ogjlnjqg] {
        margin-bottom: 1rem;
    }

    .section-header[b-z6ogjlnjqg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .section-actions[b-z6ogjlnjqg] {
        width: 100%;
        gap: 0.375rem;
    }

    .section-actions[b-z6ogjlnjqg]  .rz-button {
        font-size: 0.75rem !important;
        min-height: 30px !important;
    }

    .historical-reports-grid[b-z6ogjlnjqg] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .historical-report-card[b-z6ogjlnjqg] {
        padding: 0.75rem;
    }

    .historical-card-header[b-z6ogjlnjqg] {
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
        margin-bottom: 0;
    }

    .report-type-icon[b-z6ogjlnjqg] {
        width: 32px;
        height: 32px;
        margin-right: 0;
    }

    .report-title[b-z6ogjlnjqg] {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    .report-date[b-z6ogjlnjqg],
    .report-generator[b-z6ogjlnjqg] {
        font-size: 0.6875rem;
        margin-right: 0.5rem;
    }

    .meta-icon[b-z6ogjlnjqg] {
        font-size: 0.75rem;
    }

    .report-status[b-z6ogjlnjqg] {
        margin-left: auto;
    }

    .status-badge[b-z6ogjlnjqg] {
        font-size: 0.6875rem;
        padding: 0.125rem 0.5rem;
    }

    .historical-actions[b-z6ogjlnjqg] {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        gap: 0.375rem;
    }

    .historical-actions[b-z6ogjlnjqg]  .rz-button {
        font-size: 0.75rem !important;
        min-height: 30px !important;
        padding: 0.25rem 0.625rem !important;
    }

    /* Empty State */
    .empty-state[b-z6ogjlnjqg] {
        padding: 1.5rem 1rem;
    }

    .empty-state-icon[b-z6ogjlnjqg] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .empty-state h4[b-z6ogjlnjqg] {
        font-size: 0.9375rem;
    }

    .empty-state p[b-z6ogjlnjqg] {
        font-size: 0.8125rem;
        margin-bottom: 1rem;
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .reports-title-section h2.reports-title[b-z6ogjlnjqg] {
        font-size: 1.125rem;
    }

    .reports-subtitle[b-z6ogjlnjqg] {
        font-size: 0.75rem;
    }

    .reports-quick-actions[b-z6ogjlnjqg] {
        flex-direction: column;
    }

    .reports-quick-actions[b-z6ogjlnjqg]  .rz-button {
        width: 100% !important;
        font-size: 0.75rem !important;
    }

    .quick-card-icon[b-z6ogjlnjqg] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .quick-card-info h4[b-z6ogjlnjqg] {
        font-size: 0.8125rem;
    }

    .report-icon[b-z6ogjlnjqg] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .report-info h5[b-z6ogjlnjqg] {
        font-size: 0.8125rem;
    }

    .report-info p[b-z6ogjlnjqg] {
        font-size: 0.6875rem;
    }

    .category-title[b-z6ogjlnjqg] {
        font-size: 0.8125rem;
    }

    .report-date[b-z6ogjlnjqg],
    .report-generator[b-z6ogjlnjqg] {
        font-size: 0.625rem;
        display: block;
        margin-right: 0;
    }

    .historical-actions[b-z6ogjlnjqg] {
        flex-wrap: wrap;
    }

    .historical-actions[b-z6ogjlnjqg]  .rz-button {
        flex: 1;
        min-width: 0;
    }
}
/* /Components/SafeguardingProcedures.razor.rz.scp.css */
.safeguarding-procedures[b-qgnp55bwfc] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.procedures-toggle[b-qgnp55bwfc] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-align: left;
    transition: background 0.2s;
}

.procedures-toggle:hover[b-qgnp55bwfc] {
    background: #f3f4f6;
}

.procedures-toggle .rzi:first-child[b-qgnp55bwfc] {
    color: #6366f1;
}

.procedures-toggle span:not(.rzi)[b-qgnp55bwfc] {
    flex: 1;
}

.toggle-icon[b-qgnp55bwfc] {
    color: #9ca3af;
}

.procedures-content[b-qgnp55bwfc] {
    padding: 0;
    animation: slideDown-b-qgnp55bwfc 0.3s ease;
}

@keyframes slideDown-b-qgnp55bwfc {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

.procedures-section[b-qgnp55bwfc] {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.procedures-section:last-of-type[b-qgnp55bwfc] {
    border-bottom: none;
}

.procedures-section h4[b-qgnp55bwfc] {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.procedures-section.important[b-qgnp55bwfc] {
    background: #fef3c7;
}

.procedures-section.important h4[b-qgnp55bwfc] {
    color: #92400e;
}

/* Procedure Grid */
.procedure-grid[b-qgnp55bwfc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.procedure-item[b-qgnp55bwfc] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.procedure-item .icon[b-qgnp55bwfc] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}

.procedure-item .icon.physical[b-qgnp55bwfc] {
    background: #fef2f2;
    border: 2px solid #fecaca;
}

.procedure-item .icon.emotional[b-qgnp55bwfc] {
    background: #fef3c7;
    border: 2px solid #fcd34d;
}

.procedure-item .icon.neglect[b-qgnp55bwfc] {
    background: #eff6ff;
    border: 2px solid #bfdbfe;
}

.procedure-item .icon.financial[b-qgnp55bwfc] {
    background: #f0fdf4;
    border: 2px solid #bbf7d0;
}

.procedure-item strong[b-qgnp55bwfc] {
    display: block;
    font-size: 13px;
    color: #111827;
    margin-bottom: 2px;
}

.procedure-item p[b-qgnp55bwfc] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* Procedure Steps */
.procedure-steps[b-qgnp55bwfc] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.procedure-steps li[b-qgnp55bwfc] {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.procedure-steps li:last-child[b-qgnp55bwfc] {
    border-bottom: none;
}

.step-number[b-qgnp55bwfc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #6366f1;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.procedure-steps strong[b-qgnp55bwfc] {
    display: block;
    font-size: 14px;
    color: #111827;
    margin-bottom: 2px;
}

.procedure-steps p[b-qgnp55bwfc] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Offline Steps */
.offline-steps[b-qgnp55bwfc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offline-step[b-qgnp55bwfc] {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: #eff6ff;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.offline-step .rzi[b-qgnp55bwfc] {
    font-size: 24px;
    color: #3b82f6;
    flex-shrink: 0;
}

.offline-step strong[b-qgnp55bwfc] {
    display: block;
    font-size: 14px;
    color: #1e40af;
    margin-bottom: 2px;
}

.offline-step p[b-qgnp55bwfc] {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #3730a3;
    line-height: 1.4;
}

.link-btn[b-qgnp55bwfc] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: white;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.link-btn:hover[b-qgnp55bwfc] {
    background: #3b82f6;
    color: white;
}

/* Principles List */
.principles-list[b-qgnp55bwfc] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.principles-list li[b-qgnp55bwfc] {
    position: relative;
    padding: 10px 0 10px 24px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.5;
    border-bottom: 1px dashed #fcd34d;
}

.principles-list li:last-child[b-qgnp55bwfc] {
    border-bottom: none;
}

.principles-list li[b-qgnp55bwfc]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
}

.principles-list strong[b-qgnp55bwfc] {
    color: #92400e;
}

/* Footer */
.procedures-footer[b-qgnp55bwfc] {
    padding: 16px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.last-updated[b-qgnp55bwfc] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #6b7280;
}

.full-policy-link[b-qgnp55bwfc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.full-policy-link:hover[b-qgnp55bwfc] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .procedure-grid[b-qgnp55bwfc] {
        grid-template-columns: 1fr;
    }

    .procedure-steps li[b-qgnp55bwfc] {
        padding: 10px 0;
    }

    .step-number[b-qgnp55bwfc] {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}
/* /Components/TaskBoard.razor.rz.scp.css */
/* Task Board Component Styles */

.task-board-container[b-f9imzovhox] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.board-controls[b-f9imzovhox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.filter-section[b-f9imzovhox] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-dropdown[b-f9imzovhox] {
    min-width: 150px;
}

.search-section[b-f9imzovhox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-input[b-f9imzovhox] {
    min-width: 200px;
}

/* Board Stats */
.board-stats[b-f9imzovhox] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.stat-item[b-f9imzovhox] {
    text-align: center;
}

.stat-value[b-f9imzovhox] {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.stat-label[b-f9imzovhox] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.stat-item.my-tasks .stat-value[b-f9imzovhox] {
    color: var(--primary);
}

.stat-item.overdue .stat-value[b-f9imzovhox] {
    color: var(--error);
}

.stat-item.due-soon .stat-value[b-f9imzovhox] {
    color: var(--warning);
}

/* Kanban Board */
.kanban-board[b-f9imzovhox] {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 300px);
    overflow-x: auto;
    padding-bottom: 1rem;
}

.kanban-column[b-f9imzovhox] {
    flex: 1;
    min-width: 300px;
    background: var(--background-light);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    border: 1px solid var(--border-color);
}

.column-header[b-f9imzovhox] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary);
    border-radius: var(--radius) var(--radius) 0 0;
}

.column-header h3[b-f9imzovhox] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.column-content[b-f9imzovhox] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kanban-column.new-tasks .column-header[b-f9imzovhox] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.kanban-column.in-progress .column-header[b-f9imzovhox] {
    background: linear-gradient(135deg, var(--warning) 0%, #fd7e14 100%);
    color: white;
}

.kanban-column.under-review .column-header[b-f9imzovhox] {
    background: linear-gradient(135deg, var(--info) 0%, var(--primary) 100%);
    color: white;
}

.kanban-column.completed .column-header[b-f9imzovhox] {
    background: linear-gradient(135deg, var(--success) 0%, #20c997 100%);
    color: white;
}

.kanban-column.on-hold .column-header[b-f9imzovhox] {
    background: linear-gradient(135deg, var(--error) 0%, #dc3545 100%);
    color: white;
}

.empty-column[b-f9imzovhox] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

.empty-column i[b-f9imzovhox] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.more-tasks[b-f9imzovhox] {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Task Card Styles - Clean & Spacious Design */
.task-card[b-f9imzovhox] {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.task-card:hover[b-f9imzovhox] {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    border-color: #dee2e6;
}

/* Priority-based left border */
.task-card.urgent[b-f9imzovhox],
.task-card.critical[b-f9imzovhox] {
    border-left: 4px solid #dc3545;
}

.task-card.high[b-f9imzovhox] {
    border-left: 4px solid #fd7e14;
}

.task-card.medium[b-f9imzovhox] {
    border-left: 4px solid #ffc107;
}

.task-card.low[b-f9imzovhox] {
    border-left: 4px solid #28a745;
}

/* Default border */
.task-card[b-f9imzovhox] {
    border-left: 4px solid #6c757d;
}

/* Task Header */
.task-header[b-f9imzovhox] {
    padding: 0.75rem 1rem 0.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.task-id-section[b-f9imzovhox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-id[b-f9imzovhox] {
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    color: #6c757d;
    background: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-weight: 600;
}

.priority-badge[b-f9imzovhox] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge.urgent[b-f9imzovhox],
.priority-badge.critical[b-f9imzovhox] {
    background: #dc3545;
    color: white;
}

.priority-badge.high[b-f9imzovhox] {
    background: #fd7e14;
    color: white;
}

.priority-badge.medium[b-f9imzovhox] {
    background: #ffc107;
    color: #212529;
}

.priority-badge.low[b-f9imzovhox] {
    background: #28a745;
    color: white;
}

.priority-badge[b-f9imzovhox] {
    background: #6c757d;
    color: white;
}

/* Task Content */
.task-content[b-f9imzovhox] {
    padding: 1rem;
}

.task-title[b-f9imzovhox] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: #212529;
    line-height: 1.4;
    font-weight: 600;
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-description[b-f9imzovhox] {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.5;
    min-height: 2.55rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-assignee[b-f9imzovhox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: #495057;
    background: #e3f2fd;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border-left: 3px solid #2196f3;
}

.task-meta[b-f9imzovhox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

.category-info[b-f9imzovhox] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.due-date[b-f9imzovhox] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.due-date.overdue[b-f9imzovhox] {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    font-weight: 600;
}

.due-date.due-soon[b-f9imzovhox] {
    color: #fd7e14;
    background: rgba(253, 126, 20, 0.1);
    border-color: rgba(253, 126, 20, 0.2);
    font-weight: 600;
}

/* Overdue and Due Soon Card States */
.task-card.overdue .task-header[b-f9imzovhox] {
    background: rgba(220, 53, 69, 0.05);
}

.task-card.due-soon .task-header[b-f9imzovhox] {
    background: rgba(253, 126, 20, 0.05);
}

.quick-actions[b-f9imzovhox] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kanban-board[b-f9imzovhox] {
        flex-direction: column;
        height: auto;
    }
    
    .kanban-column[b-f9imzovhox] {
        min-width: auto;
        max-height: 400px;
    }
    
    .board-controls[b-f9imzovhox] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .filter-section[b-f9imzovhox],
    .search-section[b-f9imzovhox] {
        flex-wrap: wrap;
    }
    
    .board-stats[b-f9imzovhox] {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .stat-item[b-f9imzovhox] {
        flex: 1;
        min-width: 120px;
    }
}
/* /Components/TeamManagement.razor.rz.scp.css */
/* Team Management Component Styles */

.team-management-container[b-qgor9g6nyn] {
    height: 100%;
}

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

.section-header h2[b-qgor9g6nyn] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.section-header-small[b-qgor9g6nyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.view-controls[b-qgor9g6nyn] {
    display: flex;
    gap: 0.5rem;
}

.performance-overview[b-qgor9g6nyn] {
    margin-bottom: 2rem;
}

.performance-overview h3[b-qgor9g6nyn] {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.performance-grid[b-qgor9g6nyn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.performance-card[b-qgor9g6nyn] {
    background: var(--secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.performance-header[b-qgor9g6nyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.performance-header h4[b-qgor9g6nyn] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

.completion-rate[b-qgor9g6nyn] {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

.completion-rate.excellent[b-qgor9g6nyn] {
    background: var(--success);
}

.completion-rate.good[b-qgor9g6nyn] {
    background: var(--warning);
    color: var(--text-primary);
}

.completion-rate.needs-improvement[b-qgor9g6nyn] {
    background: var(--error);
}

.performance-stats[b-qgor9g6nyn] {
    display: flex;
    justify-content: space-between;
}

.performance-stats .stat[b-qgor9g6nyn] {
    text-align: center;
}

.performance-stats .stat .value[b-qgor9g6nyn] {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.performance-stats .stat .label[b-qgor9g6nyn] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.performance-stats .stat.overdue .value[b-qgor9g6nyn] {
    color: var(--error);
}

/* Teams Grid */
.teams-grid[b-qgor9g6nyn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.team-card[b-qgor9g6nyn] {
    background: var(--secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.team-card:hover[b-qgor9g6nyn] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.team-header[b-qgor9g6nyn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.team-info h4[b-qgor9g6nyn] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.team-description[b-qgor9g6nyn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.team-actions[b-qgor9g6nyn] {
    display: flex;
    gap: 0.25rem;
}

.team-lead[b-qgor9g6nyn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.team-stats[b-qgor9g6nyn] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.team-stats .stat[b-qgor9g6nyn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.team-members h5[b-qgor9g6nyn] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.member-list[b-qgor9g6nyn] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-avatar[b-qgor9g6nyn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    border: 2px solid var(--secondary);
}

.member-avatar.more[b-qgor9g6nyn] {
    background: var(--text-secondary);
}

.team-footer[b-qgor9g6nyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.created-info[b-qgor9g6nyn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.team-status[b-qgor9g6nyn] {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: bold;
}

.team-status.active[b-qgor9g6nyn] {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.team-status.inactive[b-qgor9g6nyn] {
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error);
}

/* Empty States */
.empty-teams[b-qgor9g6nyn] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-teams i[b-qgor9g6nyn] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-teams h3[b-qgor9g6nyn] {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

/* Teams List/Table View */
.teams-list[b-qgor9g6nyn] {
    background: var(--secondary);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.team-name-cell strong[b-qgor9g6nyn] {
    color: var(--text-primary);
}

.team-name-cell small[b-qgor9g6nyn] {
    color: var(--text-secondary);
}

.team-lead-cell[b-qgor9g6nyn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-count[b-qgor9g6nyn],
.task-count[b-qgor9g6nyn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge[b-qgor9g6nyn] {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: bold;
}

.status-badge.active[b-qgor9g6nyn] {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.status-badge.inactive[b-qgor9g6nyn] {
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error);
}

.action-buttons[b-qgor9g6nyn] {
    display: flex;
    gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .teams-grid[b-qgor9g6nyn] {
        grid-template-columns: 1fr;
    }
    
    .performance-grid[b-qgor9g6nyn] {
        grid-template-columns: 1fr;
    }
    
    .team-header[b-qgor9g6nyn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .team-actions[b-qgor9g6nyn] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/TempAccess.razor.rz.scp.css */
.temp-access-container[b-nxmffcirmc] {
    max-width: 600px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.verification-inputs[b-nxmffcirmc] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.verification-input[b-nxmffcirmc] {
    width: 3rem;
    height: 3.5rem;
    font-size: 1.5rem;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
}

    .verification-input:focus[b-nxmffcirmc] {
        border-color: #3891BB;
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(56, 145, 187, 0.25);
    }

.upload-area[b-nxmffcirmc] {
    border: 2px dashed #ced4da;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    background-color: #f8f9fa;
    margin-bottom: 1rem;
}

.upload-icon[b-nxmffcirmc] {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.file-preview[b-nxmffcirmc] {
    background-color: #f1f3f5;
    border-radius: 0.5rem;
    padding: 0.5rem;
    position: relative;
}

.file-preview-inner[b-nxmffcirmc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-name[b-nxmffcirmc] {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.remove-file[b-nxmffcirmc] {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
}

.success-icon[b-nxmffcirmc] {
    font-size: 4rem;
    color: #198754;
}
/* /Pages/ActivityCenter.razor.rz.scp.css */
/* Activity Center Page Styles */

.activity-center-page[b-en92ts9tun] {
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    color: var(--text-primary);
}

/* Page Header */
.page-header[b-en92ts9tun] {
    margin-bottom: 24px;
}

.header-content[b-en92ts9tun] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--primary);
}

.header-left h1[b-en92ts9tun] {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-left p[b-en92ts9tun] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

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

/* Filters Section */
.filters-section[b-en92ts9tun] {
    margin-bottom: 24px;
}

.filters-card[b-en92ts9tun] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.filters-content[b-en92ts9tun] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.search-section[b-en92ts9tun] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-input[b-en92ts9tun] {
    flex: 1;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.search-input:focus[b-en92ts9tun] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-section[b-en92ts9tun] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.filter-dropdown[b-en92ts9tun] {
    min-width: 150px;
    border-radius: 8px;
}

.date-filter[b-en92ts9tun] {
    border-radius: 8px;
}

/* Statistics Overview */
.stats-overview[b-en92ts9tun] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-en92ts9tun] {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.stat-card:hover[b-en92ts9tun] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-en92ts9tun] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon.activities[b-en92ts9tun] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-icon.concerns[b-en92ts9tun] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-icon.priority[b-en92ts9tun] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-icon.resolved[b-en92ts9tun] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stat-content h3[b-en92ts9tun] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-content p[b-en92ts9tun] {
    margin: 4px 0 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Content Grid */
.content-grid[b-en92ts9tun] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.content-card[b-en92ts9tun] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.section-header[b-en92ts9tun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.section-header h2[b-en92ts9tun] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-count[b-en92ts9tun] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Activity List */
.activity-list[b-en92ts9tun] {
    padding: 0;
}

.activity-item[b-en92ts9tun] {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    position: relative;
}

.activity-item[b-en92ts9tun]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.2s ease;
}

.activity-item.warning[b-en92ts9tun]::before { background-color: #f59e0b; }
.activity-item.info[b-en92ts9tun]::before { background-color: #3b82f6; }
.activity-item.success[b-en92ts9tun]::before { background-color: #22c55e; }
.activity-item.danger[b-en92ts9tun]::before { background-color: #ef4444; }

.activity-item:hover[b-en92ts9tun] {
    background-color: #f8fafc;
}

.activity-item:last-child[b-en92ts9tun] {
    border-bottom: none;
}

.activity-marker[b-en92ts9tun] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 4px;
}

.activity-item.warning .activity-marker[b-en92ts9tun] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.activity-item.info .activity-marker[b-en92ts9tun] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.activity-item.success .activity-marker[b-en92ts9tun] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.activity-item.danger .activity-marker[b-en92ts9tun] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.activity-content[b-en92ts9tun] {
    flex: 1;
}

.activity-header[b-en92ts9tun] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 16px;
}

.activity-header h4[b-en92ts9tun] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.activity-meta[b-en92ts9tun] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.time-badge[b-en92ts9tun] {
    background: #f1f5f9;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-badge[b-en92ts9tun] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.type-badge.warning[b-en92ts9tun] { background: #fef3c7; color: #92400e; }
.type-badge.info[b-en92ts9tun] { background: #dbeafe; color: #1e40af; }
.type-badge.success[b-en92ts9tun] { background: #d1fae5; color: #065f46; }
.type-badge.danger[b-en92ts9tun] { background: #fee2e2; color: #991b1b; }

.activity-content p[b-en92ts9tun] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Concerns List */
.concerns-list[b-en92ts9tun] {
    padding: 0;
}

.concern-item[b-en92ts9tun] {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.concern-item:hover[b-en92ts9tun] {
    background-color: #f8fafc;
    transform: translateX(4px);
}

.concern-item:last-child[b-en92ts9tun] {
    border-bottom: none;
}

.concern-header[b-en92ts9tun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
}

.concern-subject[b-en92ts9tun] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.subject-avatar[b-en92ts9tun] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.subject-info h4[b-en92ts9tun] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.concern-id[b-en92ts9tun] {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.concern-badges[b-en92ts9tun] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.badge[b-en92ts9tun] {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: capitalize;
}

.badge.severity-high[b-en92ts9tun] {
    background: #fee2e2;
    color: #991b1b;
}

.badge.severity-medium[b-en92ts9tun] {
    background: #fef3c7;
    color: #92400e;
}

.badge.severity-low[b-en92ts9tun] {
    background: #dbeafe;
    color: #1e40af;
}

.badge.status-new[b-en92ts9tun] {
    background: #f3e8ff;
    color: #7c3aed;
}

.badge.status-inprogress[b-en92ts9tun] {
    background: #fef3c7;
    color: #92400e;
}

.badge.status-resolved[b-en92ts9tun] {
    background: #d1fae5;
    color: #065f46;
}

.concern-content[b-en92ts9tun] {
    margin-bottom: 16px;
}

.concern-content p[b-en92ts9tun] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.concern-footer[b-en92ts9tun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.concern-meta[b-en92ts9tun] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-ago[b-en92ts9tun] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.concern-actions[b-en92ts9tun] {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.concern-item:hover .concern-actions[b-en92ts9tun] {
    opacity: 1;
}

/* Empty State */
.empty-state[b-en92ts9tun] {
    padding: 60px 40px;
    text-align: center;
    color: var(--text-secondary);
}

.empty-state .rz-icon[b-en92ts9tun] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3[b-en92ts9tun] {
    margin: 0 0 8px 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.empty-state p[b-en92ts9tun] {
    margin: 0 0 20px 0;
    font-size: 0.875rem;
}

/* Load More */
.load-more[b-en92ts9tun] {
    padding: 20px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

/* Loading and Error States */
.loading-container[b-en92ts9tun], .error-container[b-en92ts9tun] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 40px 0;
}

.loading-container p[b-en92ts9tun] {
    margin-top: 16px;
    color: var(--text-secondary);
}

/* Button Styles */
.btn-primary[b-en92ts9tun] {
    background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover[b-en92ts9tun] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2);
}

.btn-secondary[b-en92ts9tun] {
    background: white;
    border: 2px solid #e2e8f0;
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-en92ts9tun] {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.btn-outline[b-en92ts9tun] {
    background: transparent;
    border: 2px solid #e2e8f0;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline:hover[b-en92ts9tun] {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-icon[b-en92ts9tun] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-en92ts9tun] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .content-grid[b-en92ts9tun] {
        grid-template-columns: 1fr;
    }
    
    .stats-overview[b-en92ts9tun] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .activity-center-page[b-en92ts9tun] {
        padding: 12px;
    }
    
    .header-content[b-en92ts9tun] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        padding: 20px;
    }
    
    .header-actions[b-en92ts9tun] {
        justify-content: flex-start;
    }
    
    .filters-content[b-en92ts9tun] {
        padding: 16px;
    }
    
    .filter-section[b-en92ts9tun] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-dropdown[b-en92ts9tun], .date-filter[b-en92ts9tun] {
        width: 100%;
    }
    
    .stats-overview[b-en92ts9tun] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .section-header[b-en92ts9tun] {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .activity-item[b-en92ts9tun], .concern-item[b-en92ts9tun] {
        padding: 16px 20px;
    }
    
    .activity-header[b-en92ts9tun], .concern-header[b-en92ts9tun] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .activity-meta[b-en92ts9tun], .concern-badges[b-en92ts9tun] {
        justify-content: flex-start;
    }
    
    .concern-footer[b-en92ts9tun] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .concern-actions[b-en92ts9tun] {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .header-left h1[b-en92ts9tun] {
        font-size: 1.5rem;
    }
    
    .activity-item[b-en92ts9tun], .concern-item[b-en92ts9tun] {
        padding: 12px 16px;
    }
    
    .activity-marker[b-en92ts9tun], .subject-avatar[b-en92ts9tun] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .activity-item[b-en92ts9tun] {
        gap: 12px;
    }
    
    .concern-subject[b-en92ts9tun] {
        gap: 8px;
    }
}
/* /Pages/AdvancedActivityCenter.razor.rz.scp.css */
/* Modern Notifications Page Styles */

.notifications-page[b-l7wirikp4n] {
    padding: 24px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-ground, #f8fafc);
}

/* Page Header */
.page-header[b-l7wirikp4n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--surface-border, #e2e8f0);
}

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

.header-left h1[b-l7wirikp4n] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
}

.unread-count[b-l7wirikp4n] {
    background: var(--primary-color, #3b82f6);
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
}

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

/* Buttons */
.btn-secondary[b-l7wirikp4n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: 8px;
    color: var(--text-color, #475569);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-secondary:hover[b-l7wirikp4n] {
    background: var(--surface-hover, #f1f5f9);
    border-color: var(--primary-color, #3b82f6);
}

.btn-icon[b-l7wirikp4n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-color-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-l7wirikp4n] {
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-color, #1e293b);
}

.btn-icon.primary[b-l7wirikp4n] {
    color: var(--primary-color, #3b82f6);
}

.btn-icon.primary:hover[b-l7wirikp4n] {
    background: rgba(59, 130, 246, 0.1);
}

/* Loading State */
.loading-state[b-l7wirikp4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.loading-state p[b-l7wirikp4n] {
    margin-top: 16px;
    color: var(--text-color-secondary, #64748b);
    font-size: 0.875rem;
}

.loading-state[b-l7wirikp4n]  .rz-progressbar {
    width: 200px;
    height: 4px;
    border-radius: 2px;
}

/* Empty State */
.empty-state[b-l7wirikp4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--surface-border, #e2e8f0);
}

.empty-state[b-l7wirikp4n]  .rzi {
    font-size: 64px;
    color: var(--text-color-secondary, #94a3b8);
    margin-bottom: 16px;
}

.empty-state h2[b-l7wirikp4n] {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
}

.empty-state p[b-l7wirikp4n] {
    margin: 0;
    color: var(--text-color-secondary, #64748b);
    font-size: 0.875rem;
}

/* Notifications List */
.notifications-list[b-l7wirikp4n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Notification Card */
.notification-card[b-l7wirikp4n] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--surface-border, #e2e8f0);
    transition: all 0.15s ease;
}

.notification-card:hover[b-l7wirikp4n] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.notification-card.unread[b-l7wirikp4n] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, white 100%);
    border-left: 3px solid var(--primary-color, #3b82f6);
}

.notification-card.priority-critical[b-l7wirikp4n] {
    border-left: 3px solid #ef4444;
}

.notification-card.priority-high[b-l7wirikp4n] {
    border-left: 3px solid #f97316;
}

/* Notification Icon */
.notification-icon[b-l7wirikp4n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surface-ground, #f1f5f9);
    border-radius: 10px;
    flex-shrink: 0;
}

.notification-icon[b-l7wirikp4n]  .rzi {
    font-size: 22px;
    color: var(--text-color-secondary, #64748b);
}

/* Notification Content */
.notification-content[b-l7wirikp4n] {
    flex: 1;
    min-width: 0;
}

.notification-header[b-l7wirikp4n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.notification-header h3[b-l7wirikp4n] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
    line-height: 1.4;
}

.notification-time[b-l7wirikp4n] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-color-secondary, #94a3b8);
    white-space: nowrap;
}

.notification-message[b-l7wirikp4n] {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    color: var(--text-color-secondary, #64748b);
    line-height: 1.5;
}

.notification-category[b-l7wirikp4n] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--surface-ground, #f1f5f9);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-color-secondary, #64748b);
    text-transform: capitalize;
}

/* Notification Actions */
.notification-actions[b-l7wirikp4n] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Load More */
.load-more[b-l7wirikp4n] {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.load-more .btn-secondary[b-l7wirikp4n] {
    padding: 10px 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .notifications-page[b-l7wirikp4n] {
        padding: 12px;
    }

    .page-header[b-l7wirikp4n] {
        flex-direction: row;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .header-left h1[b-l7wirikp4n] {
        font-size: 1.25rem;
    }

    .header-actions .btn-secondary[b-l7wirikp4n] {
        font-size: 0;
        padding: 8px;
        gap: 0;
    }

    .header-actions .btn-secondary[b-l7wirikp4n]  .rzi {
        font-size: 18px;
    }

    /* Compact card: single row with icon, title+time, and swipe-style actions */
    .notification-card[b-l7wirikp4n] {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 8px;
        align-items: center;
    }

    .notifications-list[b-l7wirikp4n] {
        gap: 6px;
    }

    /* Smaller icon */
    .notification-icon[b-l7wirikp4n] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .notification-icon[b-l7wirikp4n]  .rzi {
        font-size: 16px;
    }

    /* Title and time on one line, hide description and category */
    .notification-header[b-l7wirikp4n] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
    }

    .notification-header h3[b-l7wirikp4n] {
        font-size: 0.8125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .notification-time[b-l7wirikp4n] {
        font-size: 0.6875rem;
    }

    .notification-message[b-l7wirikp4n] {
        display: none;
    }

    .notification-category[b-l7wirikp4n] {
        display: none;
    }

    /* Only show the primary action (arrow), hide check and dismiss */
    .notification-actions[b-l7wirikp4n] {
        flex-shrink: 0;
    }

    .notification-actions .btn-icon[b-l7wirikp4n] {
        width: 30px;
        height: 30px;
    }

    .notification-actions .btn-icon:not(.primary)[b-l7wirikp4n] {
        display: none;
    }

    /* Unread dot instead of thick left border */
    .notification-card.unread[b-l7wirikp4n] {
        border-left: 3px solid var(--primary-color, #3b82f6);
    }

    .notification-card.priority-critical[b-l7wirikp4n] {
        border-left: 3px solid #ef4444;
    }

    .notification-card.priority-high[b-l7wirikp4n] {
        border-left: 3px solid #f97316;
    }

    .load-more[b-l7wirikp4n] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .notifications-page[b-l7wirikp4n] {
        padding: 8px;
    }

    .notification-card[b-l7wirikp4n] {
        padding: 8px 10px;
        gap: 8px;
    }

    .notification-icon[b-l7wirikp4n] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .notification-icon[b-l7wirikp4n]  .rzi {
        font-size: 14px;
    }

    .notification-header h3[b-l7wirikp4n] {
        font-size: 0.75rem;
    }
}
/* /Pages/Client Detail.razor.rz.scp.css */
/* =================================================================
   Client Detail.razor.css - CONSOLIDATED VERSION  
   MASSIVE REDUCTION: 893 lines → ~250 lines (72% smaller!)
   Uses utilities.css for all common patterns
   ================================================================= */

/* =================================================================
   GLOBAL RADZEN THEME OVERRIDES - Force blue/white color scheme
   ================================================================= */


/* Page-specific enhancements */
.patient-page[b-x3z99gloqe] {
    /* Uses base .page-container from utilities.css */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
}

/* Activity Items - enhanced for client details */
.activity-item[b-x3z99gloqe] {
    /* Uses base interaction from utilities.css */
    display: flex;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    width: 100%;
    box-sizing: border-box;
    transition: var(--transition);
}

.activity-item:hover[b-x3z99gloqe] {
    background-color: var(--secondary-hover);
}

/* Activity indicators with color coding */
.activity-indicator[b-x3z99gloqe] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    border: 2px solid;
}

.activity-indicator.warning[b-x3z99gloqe] {
    background-color: rgba(251, 188, 5, 0.2);
    border-color: var(--warning);
}

.activity-indicator.info[b-x3z99gloqe] {
    background-color: rgba(56, 145, 187, 0.2);
    border-color: var(--primary);
}

.activity-indicator.success[b-x3z99gloqe] {
    background-color: rgba(52, 168, 83, 0.2);
    border-color: var(--success);
}

.activity-indicator.error[b-x3z99gloqe] {
    background-color: rgba(234, 67, 53, 0.2);
    border-color: var(--error);
}

.activity-details[b-x3z99gloqe] {
    flex: 1;
}

.activity-header[b-x3z99gloqe] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.activity-title[b-x3z99gloqe] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.activity-time[b-x3z99gloqe] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.activity-description[b-x3z99gloqe] {
    font-size: 0.875rem;
    margin: 0;
}

/* Overview Container - client-specific layout */
.overview-container[b-x3z99gloqe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Info Grid for client details */
.info-grid[b-x3z99gloqe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.info-item[b-x3z99gloqe] {
    display: flex;
    flex-direction: column;
}

.info-item.full-width[b-x3z99gloqe] {
    grid-column: span 2;
}

.info-item label[b-x3z99gloqe] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.info-item p[b-x3z99gloqe] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.badge-container[b-x3z99gloqe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Historical Reports Section - client-specific */
.historical-reports-section[b-x3z99gloqe] {
    margin-bottom: 2rem;
}

.historical-loading[b-x3z99gloqe] {
    /* Uses base .loading-container from utilities.css */
    text-align: center;
    padding: 2rem;
}

.historical-loading p[b-x3z99gloqe] {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.historical-reports-grid[b-x3z99gloqe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.section-header[b-x3z99gloqe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-title[b-x3z99gloqe] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.section-actions[b-x3z99gloqe] {
    display: flex;
    gap: 0.5rem;
}

.no-historical-reports[b-x3z99gloqe] {
    /* Uses base .empty-state from utilities.css with customization */
    text-align: center;
    padding: 3rem;
    background-color: var(--background-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

/* Enhanced Reports Styling - client-specific */
.reports-header[b-x3z99gloqe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.reports-title-section h2.reports-title[b-x3z99gloqe] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.reports-subtitle[b-x3z99gloqe] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 600px;
}

.reports-quick-actions[b-x3z99gloqe] {
    display: flex;
    gap: 0.75rem;
}

/* Quick Generate Section */
.quick-generate-section[b-x3z99gloqe] {
    margin-bottom: 3rem;
}

.quick-reports-grid[b-x3z99gloqe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.report-quick-card[b-x3z99gloqe] {
    /* Uses base .card from utilities.css */
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.report-quick-card[b-x3z99gloqe]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
}

.report-quick-card.secondary[b-x3z99gloqe]::before {
    background: var(--warning);
}

.quick-card-header[b-x3z99gloqe] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.quick-card-icon[b-x3z99gloqe] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.quick-card-info h4[b-x3z99gloqe] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.quick-card-info p[b-x3z99gloqe] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Report Categories */
.reports-categories[b-x3z99gloqe] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.report-category[b-x3z99gloqe] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.category-header[b-x3z99gloqe] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.category-icon[b-x3z99gloqe] {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.25rem;
}

.category-title[b-x3z99gloqe] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.category-reports[b-x3z99gloqe] {
    display: grid;
    gap: 1rem;
}

/* Report Card Styling */
.report-card[b-x3z99gloqe] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .report-card:hover[b-x3z99gloqe] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: var(--primary-light);
    }

.report-card-header[b-x3z99gloqe] {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: 1rem;
}

.report-icon[b-x3z99gloqe] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
}

.report-icon.primary[b-x3z99gloqe] {
    background-color: rgba(56, 145, 187, 0.1);
    color: var(--primary);
}

.report-icon.warning[b-x3z99gloqe] {
    background-color: rgba(251, 188, 5, 0.1);
    color: var(--warning);
}

.report-icon.info[b-x3z99gloqe] {
    background-color: rgba(66, 153, 225, 0.1);
    color: #4299e1;
}

.report-icon.success[b-x3z99gloqe] {
    background-color: rgba(52, 168, 83, 0.1);
    color: var(--success);
}

.report-actions[b-x3z99gloqe] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    padding-left: 1rem;
}

/* Enhanced Historical Report Cards */
.historical-report-card[b-x3z99gloqe] {
    /* Uses base .card from utilities.css */
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.historical-card-header[b-x3z99gloqe] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    width: 100%;
}

.report-type-icon[b-x3z99gloqe] {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.report-meta[b-x3z99gloqe] {
    flex: 1;
}

.report-title[b-x3z99gloqe] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.report-info[b-x3z99gloqe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

    .report-info h5[b-x3z99gloqe] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.25rem 0;
    }

    .report-info p[b-x3z99gloqe] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.5;
    }

    .report-info .report-meta[b-x3z99gloqe] {
        font-size: 0.75rem;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

.report-date[b-x3z99gloqe],
.report-generator[b-x3z99gloqe] {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-right: 1rem;
}

.meta-icon[b-x3z99gloqe] {
    font-size: 0.875rem;
    margin-right: 0.375rem;
    color: var(--text-muted);
    vertical-align: middle;
}

.report-status[b-x3z99gloqe] {
    display: flex;
    align-items: flex-start;
    margin-left: 1rem;
    flex-shrink: 0;
}

.historical-actions[b-x3z99gloqe] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
}

/* Generating status indicator */
.generating-status[b-x3z99gloqe] {
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Tab content styling */
.tab-content[b-x3z99gloqe] {
    padding: 1.5rem;
    background-color: white;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    width: 100%;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Empty State Enhanced Styling */
.empty-state[b-x3z99gloqe] {
    text-align: center;
    padding: 3rem 2rem;
    background-color: var(--background-light);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
}

.empty-state-icon[b-x3z99gloqe] {
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.empty-state h4[b-x3z99gloqe] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-x3z99gloqe] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design Enhancements */
@media (max-width: 1024px) {
    /* Overview and info grids become single column on tablets */
    .overview-container[b-x3z99gloqe] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-x3z99gloqe] {
        grid-template-columns: 1fr;
    }

    .info-item.full-width[b-x3z99gloqe] {
        grid-column: span 1;
    }

    .reports-header[b-x3z99gloqe] {
        flex-direction: column;
        gap: 1rem;
    }

    .reports-quick-actions[b-x3z99gloqe] {
        align-self: flex-start;
        width: 100%;
        flex-wrap: wrap;
    }

    .quick-reports-grid[b-x3z99gloqe] {
        grid-template-columns: 1fr;
    }

    .report-card[b-x3z99gloqe] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .report-actions[b-x3z99gloqe] {
        width: 100%;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 1rem;
    }
}

@media (max-width: 768px) {
    .historical-reports-grid[b-x3z99gloqe] {
        grid-template-columns: 1fr;
    }

    .historical-report-card[b-x3z99gloqe] {
        flex-direction: column;
    }

    .report-icon[b-x3z99gloqe] {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .reports-header[b-x3z99gloqe] {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }

    .reports-title-section h2.reports-title[b-x3z99gloqe] {
        font-size: 1.5rem;
    }

    .quick-card-header[b-x3z99gloqe] {
        flex-direction: column;
        text-align: center;
    }

    .quick-card-icon[b-x3z99gloqe] {
        margin: 0 auto 1rem;
    }

    .historical-card-header[b-x3z99gloqe] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .report-type-icon[b-x3z99gloqe] {
        margin-right: 0;
    }

    .report-status[b-x3z99gloqe] {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .historical-actions[b-x3z99gloqe] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .section-header[b-x3z99gloqe] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-actions[b-x3z99gloqe] {
        width: 100%;
    }

    .report-card-header[b-x3z99gloqe] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .report-card[b-x3z99gloqe] {
        padding: 1rem;
    }
}
/* /Pages/Demo/DemoBodyMap.razor.rz.scp.css */
/* Scoped CSS for DemoBodyMap - only the demo banner needs scoped styling.
   All bodymap layout CSS is inline in the <style> block within the component
   (matching the real BodyMapEditor pattern). */

/* Demo banner is not needed here since it's in the inline <style> block.
   This file exists for consistency with other demo pages. */
/* /Pages/Demo/DemoClientDetail.razor.rz.scp.css */
/* Demo Client Detail page styles */

.demo-mode-banner[b-3x6d1c518d] {
    background: linear-gradient(135deg, #e65100, #ff8f00);
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.demo-icon[b-3x6d1c518d] {
    font-size: 1.125rem;
}

.demo-text[b-3x6d1c518d] {
    letter-spacing: 0.5px;
}

/* Page layout - match real Client Detail page */
.patient-page[b-3x6d1c518d] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
}

/* Tab content styling */
.tab-content[b-3x6d1c518d] {
    padding: 1.5rem;
    background-color: white;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    width: 100%;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Demo tab placeholder styling */
.demo-tab-placeholder[b-3x6d1c518d] {
    text-align: center;
    padding: 3rem 2rem;
    background-color: var(--background-light, #f8f9fa);
    border-radius: var(--radius-md, 8px);
    border: 2px dashed var(--border-color, #dee2e6);
}

.demo-placeholder-icon[b-3x6d1c518d] {
    width: 64px;
    height: 64px;
    background: rgba(56, 145, 187, 0.1);
    color: var(--primary, #3891BB);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.demo-tab-placeholder h4[b-3x6d1c518d] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 0.75rem 0;
}

.demo-tab-placeholder p[b-3x6d1c518d] {
    font-size: 0.9375rem;
    color: var(--text-secondary, #6c757d);
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Activity items */
.activity-item[b-3x6d1c518d] {
    display: flex;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md, 8px);
    width: 100%;
    box-sizing: border-box;
    transition: var(--transition, all 0.2s ease);
}

.activity-item:hover[b-3x6d1c518d] {
    background-color: var(--secondary-hover, #f0f0f0);
}

.activity-indicator[b-3x6d1c518d] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    border: 2px solid;
}

.activity-indicator.warning[b-3x6d1c518d] {
    background-color: rgba(251, 188, 5, 0.2);
    border-color: var(--warning, #fbbc05);
}

.activity-indicator.info[b-3x6d1c518d] {
    background-color: rgba(56, 145, 187, 0.2);
    border-color: var(--primary, #3891BB);
}

.activity-details[b-3x6d1c518d] {
    flex: 1;
}

.activity-header[b-3x6d1c518d] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.activity-title[b-3x6d1c518d] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary, #1a1a2e);
}

.activity-time[b-3x6d1c518d] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
}

.activity-description[b-3x6d1c518d] {
    font-size: 0.875rem;
    margin: 0;
}
/* /Pages/Demo/DemoClients.razor.rz.scp.css */
/* Demo Mode Banner */
.demo-mode-banner[b-bs18xtfvz9] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demo-icon[b-bs18xtfvz9] {
    font-size: 1.2rem;
}

.demo-text[b-bs18xtfvz9] {
    flex: 1;
}
/* /Pages/Demo/DemoLogConcern.razor.rz.scp.css */
/* =================================================================
   DemoLogConcern.razor.css - Multi-Step Wizard Layout (Demo)
   Matches Log Concern Client.razor.css for tour selector compatibility
   ================================================================= */

/* Demo Mode Banner */
.demo-mode-banner[b-wwlfg6x2km] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demo-icon[b-wwlfg6x2km] {
    font-size: 1.2rem;
}

.demo-text[b-wwlfg6x2km] {
    flex: 1;
}

/* Step Indicator */
.step-indicator[b-wwlfg6x2km] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-sm);
}

.step[b-wwlfg6x2km] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 140px;
    text-align: center;
    position: relative;
}

.step:not(:last-child)[b-wwlfg6x2km]::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.step.completed:not(:last-child)[b-wwlfg6x2km]::after {
    background-color: var(--primary);
}

.step-number[b-wwlfg6x2km] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step.active .step-number[b-wwlfg6x2km] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-wwlfg6x2km] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-wwlfg6x2km]::after {
    content: '\2713';
    font-size: 14px;
}

.step-title[b-wwlfg6x2km] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.step.active .step-title[b-wwlfg6x2km] {
    color: var(--primary);
    font-weight: 600;
}

.step.completed .step-title[b-wwlfg6x2km] {
    color: var(--primary);
}

/* Two-column step layout (form + sidebar) */
.step-layout[b-wwlfg6x2km] {
    display: flex;
    gap: var(--spacing-xl);
    min-height: 400px;
}

.step-form[b-wwlfg6x2km] {
    flex: 3;
    min-width: 0;
}

.step-sidebar[b-wwlfg6x2km] {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    align-self: flex-start;
}

/* Step content styling */
.step-content h2[b-wwlfg6x2km] {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
}

.step-content > p[b-wwlfg6x2km] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

/* Navigation */
.form-navigation[b-wwlfg6x2km] {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.nav-buttons[b-wwlfg6x2km] {
    display: flex;
    align-items: center;
}

.nav-spacer[b-wwlfg6x2km] {
    flex: 1;
}

/* Concern Types Grid */
.concern-types-container[b-wwlfg6x2km] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

.concern-type-option[b-wwlfg6x2km] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--spacing-lg);
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
    white-space: nowrap;
}

.concern-type-option:hover[b-wwlfg6x2km] {
    border-color: var(--primary-light);
    background-color: var(--secondary-hover);
}

.concern-type-option.selected[b-wwlfg6x2km] {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.concern-checkbox[b-wwlfg6x2km] {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-left: var(--spacing-sm);
    transition: var(--transition);
}

.concern-checkbox.checked[b-wwlfg6x2km] {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Body Map */
.body-map[b-wwlfg6x2km] {
    height: 250px;
    background-color: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

/* Evidence Section */
.evidence-container[b-wwlfg6x2km] {
    background-color: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: var(--transition);
}

.no-evidence[b-wwlfg6x2km] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

.evidence-actions[b-wwlfg6x2km] {
    text-align: center;
}

/* Sidebar Cards */
.sidebar-card[b-wwlfg6x2km] {
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.sidebar-card h3[b-wwlfg6x2km] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.sidebar-content[b-wwlfg6x2km] {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.sidebar-note[b-wwlfg6x2km] {
    margin-top: var(--spacing-sm);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.notes-list[b-wwlfg6x2km] {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-lg);
}

.notes-list li[b-wwlfg6x2km] {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-size: 0.82rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .step-layout[b-wwlfg6x2km] {
        flex-direction: column;
    }

    .step-sidebar[b-wwlfg6x2km] {
        max-width: 100%;
    }

    .concern-types-container[b-wwlfg6x2km] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .step-indicator[b-wwlfg6x2km] {
        overflow-x: auto;
        justify-content: flex-start;
        padding: var(--spacing-sm);
    }

    .step[b-wwlfg6x2km] {
        min-width: 60px;
    }

    .concern-types-container[b-wwlfg6x2km] {
        grid-template-columns: 1fr;
    }

    .concern-type-option[b-wwlfg6x2km] {
        white-space: normal;
    }
}
/* /Pages/Employee Detail.razor.rz.scp.css */
/* Employee Detail Page Specific Styles */

/* Spinner animation for loading states */
.spinner-icon[b-09zxxm8kjr] {
    display: inline-block;
    animation: spin-b-09zxxm8kjr 1s linear infinite;
    font-size: 1.2em;
    margin-right: 0.5rem;
}

@keyframes spin-b-09zxxm8kjr {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Main page container */
.patient-page[b-09zxxm8kjr] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary);
    background-color: var(--background-light);
}

/* Page Layout - Uses utilities.css for base .content-area, .tab-navigation, .sidebar */

.tab-content[b-09zxxm8kjr] {
    padding: 1.5rem;
    background-color: white;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    width: 100%;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Sidebar - page-specific offset for header alignment */
.sidebar[b-09zxxm8kjr] {
    margin-top: 6rem;
}

.sidebar-card[b-09zxxm8kjr] {
    background-color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}

.sidebar-content h3[b-09zxxm8kjr] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

/* Responsive styles */
@media (max-width: 1024px) {
    /* Overview and info grids become single column on tablets */
    .overview-container[b-09zxxm8kjr] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-09zxxm8kjr] {
        grid-template-columns: 1fr;
    }

    .info-item.full-width[b-09zxxm8kjr] {
        grid-column: span 1;
    }

    /* Reset sidebar margin when stacked */
    .sidebar[b-09zxxm8kjr] {
        margin-top: 0;
    }
}

/* Activity Items */
.activity-item[b-09zxxm8kjr] {
    display: flex;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    width: 100%;
    box-sizing: border-box;
    transition: var(--transition);
}

.activity-item:hover[b-09zxxm8kjr] {
    background-color: var(--secondary-hover);
}

.activity-indicator[b-09zxxm8kjr] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    border: 2px solid;
}

.activity-indicator.warning[b-09zxxm8kjr] {
    background-color: rgba(251, 188, 5, 0.2);
    border-color: var(--warning);
}

.activity-indicator.info[b-09zxxm8kjr] {
    background-color: rgba(56, 145, 187, 0.2);
    border-color: var(--primary);
}

.activity-indicator.success[b-09zxxm8kjr] {
    background-color: rgba(52, 168, 83, 0.2);
    border-color: var(--success);
}

.activity-indicator.error[b-09zxxm8kjr] {
    background-color: rgba(234, 67, 53, 0.2);
    border-color: var(--error);
}

.activity-details[b-09zxxm8kjr] {
    flex: 1;
}

.activity-header[b-09zxxm8kjr] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.activity-title[b-09zxxm8kjr] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.activity-time[b-09zxxm8kjr] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.activity-description[b-09zxxm8kjr] {
    font-size: 0.875rem;
    margin: 0;
}

/* Loading styles */
.loading-container[b-09zxxm8kjr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    width: 100%;
}

.loading-container p[b-09zxxm8kjr] {
    margin-top: 1rem;
    color: var(--text-secondary);
}

/* Error styles */
.error-container[b-09zxxm8kjr] {
    display: flex;
    justify-content: center;
    padding: 3rem;
    width: 100%;
}

.error-card[b-09zxxm8kjr] {
    background-color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    max-width: 500px;
    text-align: center;
}

.error-card h3[b-09zxxm8kjr] {
    color: var(--error);
    margin-bottom: 1rem;
}

.error-card p[b-09zxxm8kjr] {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

/* Overview Tab Styling */
.overview-container[b-09zxxm8kjr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.overview-card[b-09zxxm8kjr] {
    background-color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.overview-card:hover[b-09zxxm8kjr] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.full-width[b-09zxxm8kjr] {
    grid-column: span 2;
}

.card-header[b-09zxxm8kjr] {
    background-color: var(--background-light);
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.card-header h3[b-09zxxm8kjr] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.card-content[b-09zxxm8kjr] {
    padding: 1.5rem;
}

.info-grid[b-09zxxm8kjr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.info-item[b-09zxxm8kjr] {
    display: flex;
    flex-direction: column;
}

.info-item.full-width[b-09zxxm8kjr] {
    grid-column: span 2;
}

.info-item label[b-09zxxm8kjr] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.info-item p[b-09zxxm8kjr] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.badge-container[b-09zxxm8kjr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== ENHANCED REPORTS STYLING ===== */

/* Reports Header */
.reports-header[b-09zxxm8kjr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.reports-title-section h2.reports-title[b-09zxxm8kjr] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.reports-subtitle[b-09zxxm8kjr] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 600px;
}

.reports-quick-actions[b-09zxxm8kjr] {
    display: flex;
    gap: 0.75rem;
}

/* Section Titles */
.section-title[b-09zxxm8kjr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
}

.section-title[b-09zxxm8kjr]::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--primary);
    border-radius: 2px;
    margin-right: 0.75rem;
}

/* Quick Generate Section */
.quick-generate-section[b-09zxxm8kjr] {
    margin-bottom: 3rem;
}

.quick-reports-grid[b-09zxxm8kjr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.report-quick-card[b-09zxxm8kjr] {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.report-quick-card[b-09zxxm8kjr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
}

.report-quick-card.secondary[b-09zxxm8kjr]::before {
    background: var(--warning);
}

.report-quick-card:hover[b-09zxxm8kjr] {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.quick-card-header[b-09zxxm8kjr] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.quick-card-icon[b-09zxxm8kjr] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.quick-card-info h4[b-09zxxm8kjr] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.quick-card-info p[b-09zxxm8kjr] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* All Reports Section */
.all-reports-section[b-09zxxm8kjr] {
    margin-bottom: 3rem;
}

.reports-categories[b-09zxxm8kjr] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.report-category[b-09zxxm8kjr] {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.category-header[b-09zxxm8kjr] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.category-icon[b-09zxxm8kjr] {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.25rem;
}

.category-title[b-09zxxm8kjr] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.category-reports[b-09zxxm8kjr] {
    display: grid;
    gap: 1rem;
}

.report-card[b-09zxxm8kjr] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 3.25rem;
    transition: var(--transition);
}

.report-card:hover[b-09zxxm8kjr] {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.report-card-header[b-09zxxm8kjr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.report-icon[b-09zxxm8kjr] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.report-icon.primary[b-09zxxm8kjr] { background: var(--primary); }
.report-icon.warning[b-09zxxm8kjr] { background: var(--warning); }
.report-icon.success[b-09zxxm8kjr] { background: var(--success); }
.report-icon.info[b-09zxxm8kjr] { background: var(--info); }

.report-info[b-09zxxm8kjr] {
    flex: 1;
}

.report-info h5[b-09zxxm8kjr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.report-info p[b-09zxxm8kjr] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

.report-meta[b-09zxxm8kjr] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.report-actions[b-09zxxm8kjr] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.generating-status[b-09zxxm8kjr] {
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Button Variants */
.btn-sm[b-09zxxm8kjr] {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
}

.btn-generating[b-09zxxm8kjr] {
    background: var(--background-light) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    cursor: not-allowed !important;
}

.btn-success[b-09zxxm8kjr] {
    background: var(--success) !important;
    color: white !important;
    border: 1px solid var(--success) !important;
}

.btn-icon[b-09zxxm8kjr] {
    padding: 0.5rem !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.btn-icon:hover[b-09zxxm8kjr] {
    background: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Historical Reports Enhanced */
.historical-reports-section[b-09zxxm8kjr] {
    margin-bottom: 2rem;
}

.section-header[b-09zxxm8kjr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-actions[b-09zxxm8kjr] {
    display: flex;
    gap: 0.75rem;
}

.historical-reports-grid[b-09zxxm8kjr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.historical-report-card[b-09zxxm8kjr] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.historical-report-card:hover[b-09zxxm8kjr] {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.historical-card-header[b-09zxxm8kjr] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    width: 100%;
}

.report-type-icon[b-09zxxm8kjr] {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.report-meta[b-09zxxm8kjr] {
    flex: 1;
}

.report-title[b-09zxxm8kjr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.report-info[b-09zxxm8kjr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-date[b-09zxxm8kjr], .report-generator[b-09zxxm8kjr] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    margin: 0;
}

.meta-icon[b-09zxxm8kjr] {
    font-size: 0.875rem;
    margin-right: 0.375rem;
    color: var(--text-muted);
}

.report-status[b-09zxxm8kjr] {
    display: flex;
    align-items: flex-start;
    margin-left: 1rem;
    flex-shrink: 0;
}

.status-badge[b-09zxxm8kjr] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.success[b-09zxxm8kjr] {
    background: rgba(52, 168, 83, 0.1);
    color: var(--success);
}

.historical-actions[b-09zxxm8kjr] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
}

/* Empty State */
.empty-state[b-09zxxm8kjr] {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--background-light);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
}

.empty-state-icon[b-09zxxm8kjr] {
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.empty-state h4[b-09zxxm8kjr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-09zxxm8kjr] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .reports-header[b-09zxxm8kjr] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .reports-quick-actions[b-09zxxm8kjr] {
        align-self: flex-start;
    }
    
    .quick-reports-grid[b-09zxxm8kjr] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .reports-header[b-09zxxm8kjr] {
        margin-bottom: 2rem;
    }
    
    .reports-title-section h2.reports-title[b-09zxxm8kjr] {
        font-size: 1.5rem;
    }
    
    .report-quick-card[b-09zxxm8kjr] {
        padding: 1.25rem;
    }
    
    .quick-card-header[b-09zxxm8kjr] {
        flex-direction: column;
        text-align: center;
    }
    
    .quick-card-icon[b-09zxxm8kjr] {
        margin: 0 auto 1rem;
    }
}
/* /Pages/ForceChangePassword.razor.rz.scp.css */
/* Mobile-First ForceChangePassword page styles */
.login-container[b-51xxml5e1g] {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    position: relative;
}

.image-section[b-51xxml5e1g] {
    /* On mobile, show as header/background */
    height: 200px;
    background-image: url('/images/login/Safeguarding Background.png');
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

/* Add overlay gradient for better text readability on mobile */
.image-section[b-51xxml5e1g]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

/* Brand overlay for mobile */
.brand-overlay[b-51xxml5e1g] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    color: white;
}

.brand-logo[b-51xxml5e1g] {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-title[b-51xxml5e1g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.025em;
}

.brand-subtitle[b-51xxml5e1g] {
    font-size: 0.875rem;
    margin: 0;
    color: white;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

.form-section[b-51xxml5e1g] {
    flex: 1;
    padding: var(--spacing-lg) var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--secondary);
    min-height: calc(100vh - 200px);
}

.form-wrapper[b-51xxml5e1g] {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
    padding: var(--spacing-md);
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    animation: fadeIn-b-51xxml5e1g 0.3s ease-in-out;
}

@keyframes fadeIn-b-51xxml5e1g {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Welcome header styles */
.welcome-header[b-51xxml5e1g] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.welcome-icon[b-51xxml5e1g] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #2980b9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(56, 145, 187, 0.3);
}

.welcome-icon i[b-51xxml5e1g] {
    font-size: 1.5rem;
    color: white;
}

/* Password-specific welcome icon - amber/orange color */
.welcome-icon--password[b-51xxml5e1g] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.welcome-title[b-51xxml5e1g] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.025em;
}

.welcome-subtitle[b-51xxml5e1g] {
    font-size: 0.9375rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
    font-weight: 400;
}

/* Form styling */
.form-group[b-51xxml5e1g] {
    margin-bottom: var(--spacing-md);
}

.form-label[b-51xxml5e1g] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input[b-51xxml5e1g] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
    color: var(--text-primary);
}

.form-input:focus[b-51xxml5e1g] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1);
}

.form-input[b-51xxml5e1g]::placeholder {
    color: var(--text-secondary, #94a3b8);
}

/* Password requirements section */
.password-requirements[b-51xxml5e1g] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color, #e2e8f0);
}

.requirements-title[b-51xxml5e1g] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 10px 0;
}

.requirements-list[b-51xxml5e1g] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.requirements-list li[b-51xxml5e1g] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.requirements-list li .req-check[b-51xxml5e1g] {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.requirements-list li .req-check[b-51xxml5e1g]::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.requirements-list li.met[b-51xxml5e1g] {
    color: #059669;
}

.requirements-list li.met .req-check[b-51xxml5e1g] {
    background: #059669;
    border-color: #059669;
}

.requirements-list li.met .req-check[b-51xxml5e1g]::after {
    border-color: white;
}

/* Alert styling */
.alert[b-51xxml5e1g] {
    padding: var(--spacing-md);
    border-radius: 10px;
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
}

.alert-danger[b-51xxml5e1g] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-left: 4px solid #dc2626;
}

.alert-success[b-51xxml5e1g] {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Submit button */
.sign-in-button[b-51xxml5e1g] {
    width: 100%;
    padding: 16px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(56, 145, 187, 0.3);
}

.sign-in-button:hover:not(:disabled)[b-51xxml5e1g] {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 145, 187, 0.4);
}

.sign-in-button:active:not(:disabled)[b-51xxml5e1g] {
    transform: translateY(0);
}

.sign-in-button:disabled[b-51xxml5e1g] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background-color: #94a3b8;
}

/* Back to login link */
.create-account[b-51xxml5e1g] {
    text-align: center;
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.create-account a[b-51xxml5e1g] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.create-account a:hover[b-51xxml5e1g] {
    text-decoration: underline;
}

/* Validation messages */
[b-51xxml5e1g] .validation-message {
    color: #dc2626;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    display: block;
}

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

/* Mobile optimizations (default - 0 to 767px) */
@media (max-width: 767px) {
    .login-container[b-51xxml5e1g] {
        flex-direction: column;
    }

    .image-section[b-51xxml5e1g] {
        height: 150px;
        background-position: center top;
    }

    .form-section[b-51xxml5e1g] {
        padding: var(--spacing-md);
        min-height: calc(100vh - 150px);
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }

    .form-wrapper[b-51xxml5e1g] {
        padding: var(--spacing-lg);
        margin: var(--spacing-md) auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        border-radius: 20px;
        transform: translateY(-20px);
    }

    .welcome-header[b-51xxml5e1g] {
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }

    .welcome-icon[b-51xxml5e1g] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .welcome-icon i[b-51xxml5e1g] {
        font-size: 1.25rem;
    }

    .welcome-title[b-51xxml5e1g] {
        font-size: 1.375rem;
    }

    .welcome-subtitle[b-51xxml5e1g] {
        font-size: 0.875rem;
    }

    .sign-in-button[b-51xxml5e1g] {
        padding: 18px;
        font-size: 16px;
        min-height: 52px;
        border-radius: 14px;
    }

    .form-input[b-51xxml5e1g] {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 16px 14px !important;
        border-radius: 12px !important;
        border: 2px solid var(--border-color) !important;
        min-height: 48px !important;
    }

    .form-input:focus[b-51xxml5e1g] {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1) !important;
    }

    .form-group[b-51xxml5e1g] {
        margin-bottom: var(--spacing-lg) !important;
    }

    .password-requirements[b-51xxml5e1g] {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .requirements-title[b-51xxml5e1g] {
        font-size: 0.75rem;
    }

    .requirements-list[b-51xxml5e1g] {
        gap: 6px;
    }

    .requirements-list li[b-51xxml5e1g] {
        font-size: 0.75rem;
    }

    .requirements-list li i[b-51xxml5e1g] {
        font-size: 1rem;
    }

    .form-label[b-51xxml5e1g] {
        font-size: 0.8125rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .image-section[b-51xxml5e1g] {
        height: 120px;
    }

    .form-section[b-51xxml5e1g] {
        padding: var(--spacing-sm);
        min-height: calc(100vh - 120px);
    }

    .form-wrapper[b-51xxml5e1g] {
        padding: var(--spacing-md);
        margin: var(--spacing-sm) auto;
        border-radius: 16px;
    }

    .welcome-header[b-51xxml5e1g] {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }

    .welcome-icon[b-51xxml5e1g] {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .welcome-title[b-51xxml5e1g] {
        font-size: 1.25rem;
    }

    .welcome-subtitle[b-51xxml5e1g] {
        font-size: 0.8125rem;
    }

    .sign-in-button[b-51xxml5e1g] {
        padding: 16px;
        min-height: 48px;
        font-size: 15px;
    }

    .password-requirements[b-51xxml5e1g] {
        border-radius: 10px;
        padding: var(--spacing-sm);
    }
}

/* Tablet styles (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .login-container[b-51xxml5e1g] {
        flex-direction: column;
    }

    .image-section[b-51xxml5e1g] {
        height: 250px;
    }

    .form-section[b-51xxml5e1g] {
        padding: var(--spacing-xl);
        min-height: calc(100vh - 250px);
    }

    .form-wrapper[b-51xxml5e1g] {
        max-width: 480px;
        padding: var(--spacing-xl);
    }
}

/* Desktop styles (1024px and up) */
@media (min-width: 1024px) {
    .login-container[b-51xxml5e1g] {
        flex-direction: row;
        height: 100vh;
    }

    .image-section[b-51xxml5e1g] {
        flex: 1;
        height: auto;
    }

    .image-section[b-51xxml5e1g]::after {
        display: none;
    }

    .brand-overlay[b-51xxml5e1g] {
        display: none;
    }

    .form-section[b-51xxml5e1g] {
        flex: 1;
        padding: var(--spacing-xl);
        background-color: var(--secondary);
        min-height: auto;
    }

    .form-wrapper[b-51xxml5e1g] {
        background: transparent;
        box-shadow: none;
        transform: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
        max-width: 400px;
    }

    .welcome-title[b-51xxml5e1g] {
        font-size: 1.75rem;
    }

    .welcome-icon[b-51xxml5e1g] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    .welcome-icon i[b-51xxml5e1g] {
        font-size: 1.625rem;
    }

    .sign-in-button[b-51xxml5e1g] {
        padding: 14px;
        font-size: 15px;
        min-height: 44px;
        border-radius: 10px;
    }

    .form-input[b-51xxml5e1g] {
        font-size: 14px !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        min-height: 40px !important;
    }

    .password-requirements[b-51xxml5e1g] {
        background: rgba(0, 0, 0, 0.02);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* Large desktop styles (1200px and up) */
@media (min-width: 1200px) {
    .form-wrapper[b-51xxml5e1g] {
        max-width: 420px;
    }

    .welcome-title[b-51xxml5e1g] {
        font-size: 2rem;
    }

    .welcome-header[b-51xxml5e1g] {
        margin-bottom: 2rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .form-wrapper[b-51xxml5e1g] {
        animation: none !important;
        transform: none !important;
    }

    .sign-in-button:hover[b-51xxml5e1g] {
        transform: none !important;
    }

    .requirements-list li[b-51xxml5e1g],
    .requirements-list li i[b-51xxml5e1g] {
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .form-wrapper[b-51xxml5e1g] {
        border: 2px solid currentColor;
    }

    .sign-in-button[b-51xxml5e1g] {
        border: 2px solid currentColor;
    }

    .password-requirements[b-51xxml5e1g] {
        border: 2px solid currentColor;
    }

    .form-input[b-51xxml5e1g] {
        border: 2px solid currentColor !important;
    }
}
/* /Pages/Help.razor.rz.scp.css */
/* =================================================================
   Help.razor.css - PROFESSIONAL THEME MATCHING
   Uses consistent design with Dashboard and other pages
   ================================================================= */

/* Help Page Root */
.help-page[b-zok23h4wag] {
    padding: 0;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Modern Header - Matches Dashboard pattern */
.modern-header[b-zok23h4wag] {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(56, 145, 187, 0.12);
    margin: 16px 20px;
}

.header-background[b-zok23h4wag] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}


.modern-header .header-content[b-zok23h4wag] {
    position: relative;
    z-index: 1;
    padding: 18px 24px;
    color: black;
}

.modern-header .header-main[b-zok23h4wag] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.page-title[b-zok23h4wag] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: black;
    letter-spacing: -0.025em;
}

.title-icon[b-zok23h4wag] {
    font-size: 1.4rem;
    opacity: 0.9;
}

.header-description[b-zok23h4wag] {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.75;
    color: black;
    font-weight: 400;
}

/* Training Section */
.training-section[b-zok23h4wag] {
    margin: 1.25rem 1.25rem;
}

.section-header[b-zok23h4wag] {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.section-header h2[b-zok23h4wag] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.section-icon[b-zok23h4wag] {
    font-size: 1.3rem;
    color: var(--primary);
}

.section-description[b-zok23h4wag] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
}

/* Carousel Container */
.training-carousel[b-zok23h4wag] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.carousel-container[b-zok23h4wag] {
    flex: 1;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-track[b-zok23h4wag] {
    display: flex;
    gap: 1rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Training Cards */
.training-card[b-zok23h4wag] {
    min-width: calc((100% - 2rem) / 3);
    background: white;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 150px;
}

.training-card:hover:not(.coming-soon)[b-zok23h4wag] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(56, 145, 187, 0.12);
    border-color: var(--primary);
}

.training-card.coming-soon[b-zok23h4wag] {
    opacity: 0.55;
    cursor: not-allowed;
}

.card-icon[b-zok23h4wag] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.card-content h3[b-zok23h4wag] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
}

.card-content p[b-zok23h4wag] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.card-meta[b-zok23h4wag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

.duration[b-zok23h4wag] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.badge[b-zok23h4wag] {
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-badge[b-zok23h4wag] {
    background: #48bb78;
    color: white;
}

.coming-soon-badge[b-zok23h4wag] {
    background: #ed8936;
    color: white;
}

/* Carousel Navigation Buttons */
.carousel-btn[b-zok23h4wag] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.carousel-btn:not(:disabled):hover[b-zok23h4wag] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.carousel-btn:disabled[b-zok23h4wag] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Carousel Indicators */
.carousel-indicators[b-zok23h4wag] {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    visibility:hidden;
    margin-top: 0.75rem;
}

.indicator[b-zok23h4wag] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.indicator.active[b-zok23h4wag] {
    width: 20px;
    border-radius: 3px;
    background: var(--primary);
}

.indicator:hover:not(.active)[b-zok23h4wag] {
    background: #a0aec0;
}

/* Admin Section */
.admin-section[b-zok23h4wag] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.admin-training-placeholder[b-zok23h4wag] {
    text-align: center;
    padding: 1.5rem;
}

.placeholder-icon[b-zok23h4wag] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.admin-training-placeholder h3[b-zok23h4wag] {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.admin-training-placeholder p[b-zok23h4wag] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 500px;
    margin: 0 auto 1.25rem;
}

.placeholder-features[b-zok23h4wag] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    max-width: 700px;
    margin: 0 auto 1.25rem;
}

.feature-item[b-zok23h4wag] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.feature-item i[b-zok23h4wag] {
    color: var(--primary);
    font-size: 1.2rem;
}

/* Quick Help Section */
.quick-help-section[b-zok23h4wag] {
    margin: 1.25rem;
}

.quick-help-section h2[b-zok23h4wag] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.help-grid[b-zok23h4wag] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.help-card[b-zok23h4wag] {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid #e2e8f0;
    text-align: center;
}

.help-card:hover[b-zok23h4wag] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(56, 145, 187, 0.12);
    border-color: var(--primary);
}

.help-icon[b-zok23h4wag] {
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.help-card h3[b-zok23h4wag] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.help-card p[b-zok23h4wag] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
}

/* Responsive Design */

/* Laptop / small desktop */
@media (max-width: 1200px) {
    .training-card[b-zok23h4wag] {
        min-width: calc((100% - 1rem) / 2);
    }

    .help-grid[b-zok23h4wag] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet */
@media (max-width: 768px) {
    .help-page[b-zok23h4wag] {
        padding: 0;
    }

    .modern-header[b-zok23h4wag] {
        margin: 10px;
        border-radius: 10px;
    }

    .modern-header .header-content[b-zok23h4wag] {
        padding: 12px 14px;
    }

    .page-title[b-zok23h4wag] {
        font-size: 1.2rem;
    }

    .title-icon[b-zok23h4wag] {
        font-size: 1.1rem;
    }

    .header-description[b-zok23h4wag],
    .section-description[b-zok23h4wag] {
        display: none;
    }

    .training-section[b-zok23h4wag],
    .quick-help-section[b-zok23h4wag] {
        margin: 0.75rem;
    }

    .section-header[b-zok23h4wag] {
        margin-bottom: 0.6rem;
    }

    .section-header h2[b-zok23h4wag] {
        font-size: 0.95rem;
    }

    /* Replace carousel with horizontal scroll strip */
    .training-carousel[b-zok23h4wag] {
        gap: 0;
    }

    .carousel-btn[b-zok23h4wag] {
        display: none;
    }

    .carousel-container[b-zok23h4wag] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 8px;
    }

    .carousel-container[b-zok23h4wag]::-webkit-scrollbar {
        display: none;
    }

    .carousel-track[b-zok23h4wag] {
        transform: none !important;
        gap: 8px;
        padding: 2px;
    }

    /* Compact horizontal cards */
    .training-card[b-zok23h4wag] {
        min-width: 175px;
        max-width: 175px;
        min-height: auto;
        padding: 10px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
        border-radius: 8px;
    }

    .training-card .card-icon[b-zok23h4wag] {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .training-card .card-content h3[b-zok23h4wag] {
        font-size: 0.78rem;
        margin: 0;
        line-height: 1.3;
    }

    /* Hide description and meta on mobile cards */
    .training-card .card-content p[b-zok23h4wag],
    .training-card .card-meta[b-zok23h4wag] {
        display: none;
    }

    .carousel-indicators[b-zok23h4wag] {
        visibility: hidden;
        margin-top: 0.5rem;
    }

    /* Quick help: 2-column compact grid */
    .help-grid[b-zok23h4wag] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .help-card[b-zok23h4wag] {
        padding: 0.75rem;
        border-radius: 8px;
    }

    .help-icon[b-zok23h4wag] {
        font-size: 1.4rem;
        margin-bottom: 0.3rem;
    }

    .help-card h3[b-zok23h4wag] {
        font-size: 0.78rem;
    }

    .help-card p[b-zok23h4wag] {
        display: none;
    }

    .admin-section[b-zok23h4wag] {
        padding: 1rem;
    }

    .placeholder-features[b-zok23h4wag] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .placeholder-icon[b-zok23h4wag] {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
    }

    .admin-training-placeholder h3[b-zok23h4wag] {
        font-size: 0.9rem;
    }

    .admin-training-placeholder p[b-zok23h4wag] {
        font-size: 0.78rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-title[b-zok23h4wag] {
        font-size: 1.05rem;
    }

    .training-card[b-zok23h4wag] {
        min-width: 150px;
        max-width: 150px;
        padding: 8px;
    }

    .training-card .card-icon[b-zok23h4wag] {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    .training-card .card-content h3[b-zok23h4wag] {
        font-size: 0.7rem;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* =================================================================
   Index.razor.css - PROPERLY CONSOLIDATED VERSION (Dashboard)
   REDUCTION: 923 lines → ~600 lines (35% reduction)
   Uses utilities.css for common patterns while preserving dashboard complexity
   ================================================================= */

/* Dashboard Root - page-specific styling */
.dashboard-page[b-uymzccwvvp] {
    /* Uses base .page-container from utilities.css */
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
}

.dashboard-content[b-uymzccwvvp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

/* Modern Header Design - dashboard-specific */
.modern-header[b-uymzccwvvp] {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(56, 145, 187, 0.15);
}

.header-background[b-uymzccwvvp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.modern-header .header-content[b-uymzccwvvp] {
    position: relative;
    z-index: 1;
    padding: 28px;
    color: white;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
}

.modern-header .header-main[b-uymzccwvvp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.welcome-section[b-uymzccwvvp] {
    flex: 1;
}

.dashboard-title[b-uymzccwvvp] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
    letter-spacing: -0.025em;
}

.title-icon[b-uymzccwvvp] {
    font-size: 2rem;
    opacity: 0.9;
}

.welcome-message[b-uymzccwvvp] {
    font-size: 1.125rem;
    margin: 0 0 4px 0;
    opacity: 0.95;
    color: white;
    font-weight: 500;
}

.header-description[b-uymzccwvvp] {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
    color: white;
    line-height: 1.5;
}

.quick-stats[b-uymzccwvvp] {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.date-time-widget[b-uymzccwvvp] {
    text-align: right;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.current-date[b-uymzccwvvp] {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 4px;
    font-weight: 500;
}

.current-time[b-uymzccwvvp] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

/* Dashboard-specific header actions */
.header-actions[b-uymzccwvvp] {
    /* Uses base from utilities.css */
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Action Buttons - Dashboard-specific overrides */
[b-uymzccwvvp] .action-btn {
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

[b-uymzccwvvp] .primary-action {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[b-uymzccwvvp] .primary-action:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

[b-uymzccwvvp] .secondary-action {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

[b-uymzccwvvp] .secondary-action:hover {
    background: var(--secondary-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

[b-uymzccwvvp] .menu-action {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 10px;
    min-width: auto;
}

[b-uymzccwvvp] .menu-action:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

/* Modern Stats Grid - Enhanced dashboard stats */
.modern-stat-card[b-uymzccwvvp] {
    /* Uses base .stat-card from utilities.css but with dashboard enhancements */
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.modern-stat-card:hover[b-uymzccwvvp] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.card-background[b-uymzccwvvp] {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 0 16px 0 80px;
    opacity: 0.05;
    background: var(--primary);
}

.card-background.warning[b-uymzccwvvp] { background: #f59e0b; }
.card-background.success[b-uymzccwvvp] { background: #10b981; }
.card-background.info[b-uymzccwvvp] { background: #3b82f6; }
.card-background.primary[b-uymzccwvvp] { background: var(--primary); }

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

.stat-icon-container[b-uymzccwvvp] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    position: relative;
    z-index: 2;
}

.stat-icon-container.warning[b-uymzccwvvp] { background: rgba(245, 158, 11, 0.5); color: #f59e0b; }
.stat-icon-container.success[b-uymzccwvvp] { background: rgba(16, 185, 129, 0.5); color: #10b981; }
.stat-icon-container.info[b-uymzccwvvp] { background: rgba(59, 130, 246, 0.5); color: #3b82f6; }
.stat-icon-container.primary[b-uymzccwvvp] { background: var(--primary-light); color: var(--primary); }

.stat-icon[b-uymzccwvvp] {
    font-size: 18px;
}

.stat-trend[b-uymzccwvvp] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-trend.positive[b-uymzccwvvp] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.stat-trend.negative[b-uymzccwvvp] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.urgency-badge[b-uymzccwvvp] {
    /* Uses base .badge from utilities.css */
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.urgency-badge.warning[b-uymzccwvvp] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.trend-icon[b-uymzccwvvp] { font-size: 12px; }
.trend-value[b-uymzccwvvp] { font-size: 0.75rem; font-weight: 600; }

.stat-body[b-uymzccwvvp] {
    position: relative;
    z-index: 2;
}

.stat-number[b-uymzccwvvp] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 2px 0;
    color: var(--text-primary);
    line-height: 1.2;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.stat-label[b-uymzccwvvp] {
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0 0 2px 0;
    color: var(--text-secondary);
    line-height: 1.3;
}

.stat-subtitle[b-uymzccwvvp] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

/* Quick Actions Popup - Dashboard-specific */
.quick-actions-popup[b-uymzccwvvp] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 1000;
    min-width: 220px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
}

.quick-actions-popup[b-uymzccwvvp]::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

[b-uymzccwvvp] .quick-actions-popup .btn-action {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 4px;
    border: none;
    background: transparent;
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-weight: 500;
}

[b-uymzccwvvp] .quick-actions-popup .btn-action:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    transform: translateX(4px);
}

/* Main Content Layout */
.main-content[b-uymzccwvvp] {
    display: flex;
    gap: 20px;
}

.content-container[b-uymzccwvvp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Modern Card Styles */
.activity-card[b-uymzccwvvp],
.concerns-card[b-uymzccwvvp],
.subjects-card[b-uymzccwvvp],
.resources-card[b-uymzccwvvp] {
    /* Uses base .card from utilities.css with dashboard enhancements */
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

.activity-card:hover[b-uymzccwvvp],
.concerns-card:hover[b-uymzccwvvp],
.subjects-card:hover[b-uymzccwvvp],
.resources-card:hover[b-uymzccwvvp] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Timeline Styles */
.timeline[b-uymzccwvvp] {
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item[b-uymzccwvvp] {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
}

.timeline-item:hover[b-uymzccwvvp] {
    background: rgba(56, 145, 187, 0.02);
}

.timeline-marker[b-uymzccwvvp] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
    background: white;
    flex-shrink: 0;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}

.timeline-marker.warning[b-uymzccwvvp] { border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.timeline-marker.info[b-uymzccwvvp] { border-color: var(--primary); background: var(--primary-light); }
.timeline-marker.success[b-uymzccwvvp] { border-color: #10b981; background: rgba(16, 185, 129, 0.1); }
.timeline-marker.danger[b-uymzccwvvp] { border-color: #ef4444; background: rgba(239, 68, 68, 0.1); }

.timeline-content[b-uymzccwvvp] {
    flex: 1;
}

.timeline-header[b-uymzccwvvp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.timeline-header h4[b-uymzccwvvp] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.timeline-content p[b-uymzccwvvp] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.time-ago[b-uymzccwvvp] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Concern Items */
.concern-item[b-uymzccwvvp] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

.concern-item:last-child[b-uymzccwvvp] { border-bottom: none; }
.concern-item:hover[b-uymzccwvvp] { background: rgba(56, 145, 187, 0.02); }

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

.concern-header h4[b-uymzccwvvp] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.concern-badges[b-uymzccwvvp] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Dashboard-specific badge overrides */
.badge.severity-low[b-uymzccwvvp], .badge.status-resolved[b-uymzccwvvp] { background: rgba(16, 185, 129, 0.1); color: #059669; }
.badge.severity-medium[b-uymzccwvvp], .badge.status-inprogress[b-uymzccwvvp] { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.badge.severity-high[b-uymzccwvvp], .badge.status-urgent[b-uymzccwvvp] { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.badge.status-new[b-uymzccwvvp] { background: rgba(59, 130, 246, 0.1); color: #2563eb; }

.concern-item p[b-uymzccwvvp] {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.concern-footer[b-uymzccwvvp] {
    display: flex;
    justify-content: flex-end;
}

/* Subject and Resource Items */
.subject-item[b-uymzccwvvp],
.resource-item[b-uymzccwvvp] {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

.subject-item:last-child[b-uymzccwvvp], .resource-item:last-child[b-uymzccwvvp] { border-bottom: none; }
.subject-item:hover[b-uymzccwvvp], .resource-item:hover[b-uymzccwvvp] { background: rgba(56, 145, 187, 0.02); }

.subject-avatar[b-uymzccwvvp],
.resource-icon[b-uymzccwvvp] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.875rem;
}

.subject-avatar[b-uymzccwvvp] { background: var(--primary-light); color: var(--primary-dark); }
.resource-icon.policy[b-uymzccwvvp] { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.resource-icon.training[b-uymzccwvvp] { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.resource-icon.guide[b-uymzccwvvp] { background: rgba(107, 114, 128, 0.1); color: #4b5563; }

.subject-info[b-uymzccwvvp],
.resource-info[b-uymzccwvvp] {
    flex: 1;
    min-width: 0;
}

.subject-info h4[b-uymzccwvvp],
.resource-info h4[b-uymzccwvvp] {
    margin: 0 0 4px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.subject-info p[b-uymzccwvvp],
.resource-info p[b-uymzccwvvp] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.badge.status-active[b-uymzccwvvp] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    margin-left: auto;
}

/* Announcement Card */
.announcement-card[b-uymzccwvvp] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
}

.announcement-card[b-uymzccwvvp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E");
}

.announcement-content[b-uymzccwvvp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    position: relative;
    z-index: 1;
}

.announcement-content p[b-uymzccwvvp] {
    margin: 0;
    color: white;
    font-weight: 500;
    opacity: 0.95;
}

[b-uymzccwvvp] .announcement-content .btn-primary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(8px);
}

[b-uymzccwvvp] .announcement-content .btn-primary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Dashboard-specific responsive design */
@media (max-width: 1200px) {
    .stats-grid[b-uymzccwvvp] {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    
    .content-container[b-uymzccwvvp] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .main-content[b-uymzccwvvp] {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .dashboard-content[b-uymzccwvvp] {
        padding: 16px;
        gap: 20px;
    }
    
    .header-content[b-uymzccwvvp] {
        padding: 24px 20px;
    }
    
    .header-main[b-uymzccwvvp] {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
    }
    
    .quick-stats[b-uymzccwvvp] {
        align-self: flex-start;
    }
    
    .dashboard-title[b-uymzccwvvp] {
        font-size: 1.75rem;
    }
    
    .modern-stat-card[b-uymzccwvvp] {
        padding: 20px;
    }
    
    .header-actions[b-uymzccwvvp] {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    [b-uymzccwvvp] .action-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    .quick-actions-popup[b-uymzccwvvp] {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 280px;
    }
    
    .quick-actions-popup[b-uymzccwvvp]::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .dashboard-content[b-uymzccwvvp] { padding: 12px; }
    .header-content[b-uymzccwvvp] { padding: 20px 16px; }
    .dashboard-title[b-uymzccwvvp] { font-size: 1.5rem; }
    .date-time-widget[b-uymzccwvvp] { padding: 12px 16px; }
    .current-time[b-uymzccwvvp] { font-size: 1.25rem; }
    .modern-stat-card[b-uymzccwvvp] { padding: 16px; }
    .stat-number[b-uymzccwvvp] { font-size: 1.75rem; }
    .section-header[b-uymzccwvvp] { padding: 20px 16px 12px 16px; }
    .timeline[b-uymzccwvvp], .concern-item[b-uymzccwvvp], .subject-item[b-uymzccwvvp], .resource-item[b-uymzccwvvp] { padding-left: 16px; padding-right: 16px; }
    .quick-access-buttons[b-uymzccwvvp] { flex-direction: column; }
}

/* =================================================================
   WHAT WAS REMOVED/CONSOLIDATED (323 lines eliminated!):
   
   ❌ Basic button styling (now uses utilities.css .btn-primary, .btn-secondary)
   ❌ Basic loading states (now uses utilities.css .loading-container)
   ❌ Basic badge styling (inherits from utilities.css .badge)
   ❌ Some repetitive responsive patterns (consolidated)
   ❌ Basic card hover effects (enhanced with dashboard-specific versions)
   ❌ Generic section header styling (uses utilities.css base)
   
   ✅ PRESERVED all dashboard-specific styling:
   - Complex header with gradients and patterns
   - Modern stat cards with backgrounds and animations  
   - Timeline components with custom markers
   - Subject/resource item layouts
   - Quick actions popup
   - Announcement cards
   - All dashboard-specific functionality
   
   📊 REDUCTION: 923 lines → 600 lines (35% smaller)
   ================================================================= */
/* /Pages/LegalDocuments.razor.rz.scp.css */
/* Legal Documents Page */
.legal-page[b-smj1yp3oit] {
    height: 100%;
    background: #f5f5f5;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

/* ============================================
   Main Content
   ============================================ */
.legal-content[b-smj1yp3oit] {
    flex: 1;
}

/* ============================================
   Document Grid
   ============================================ */
.legal-grid[b-smj1yp3oit] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ============================================
   Document Cards
   ============================================ */
.legal-card[b-smj1yp3oit] {
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.legal-card:hover[b-smj1yp3oit] {
    border-color: #d1d5db;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.legal-card:active[b-smj1yp3oit] {
    transform: translateY(-2px);
}

/* Card Icons */
.card-icon[b-smj1yp3oit] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px;
    position: relative;
}

.card-icon[b-smj1yp3oit]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: #e5e7eb;
}

.card-icon i[b-smj1yp3oit] {
    font-size: 56px;
}

/* Solid color backgrounds for card icons */
.card-icon.privacy[b-smj1yp3oit] {
    background: #2563eb !important;
}
.card-icon.privacy i[b-smj1yp3oit] { color: #ffffff !important; }

.card-icon.terms[b-smj1yp3oit] {
    background: #7c3aed !important;
}
.card-icon.terms i[b-smj1yp3oit] { color: #ffffff !important; }

.card-icon.cookies[b-smj1yp3oit] {
    background: #d97706 !important;
}
.card-icon.cookies i[b-smj1yp3oit] { color: #ffffff !important; }

.card-icon.aup[b-smj1yp3oit] {
    background: #059669 !important;
}
.card-icon.aup i[b-smj1yp3oit] { color: #ffffff !important; }

.card-icon.security[b-smj1yp3oit] {
    background: #0d9488 !important;
}
.card-icon.security i[b-smj1yp3oit] { color: #ffffff !important; }

.card-icon.gdpr[b-smj1yp3oit] {
    background: #db2777 !important;
}
.card-icon.gdpr i[b-smj1yp3oit] { color: #ffffff !important; }

/* Card Body */
.card-body[b-smj1yp3oit] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #ffffff !important;
}

.card-body h3[b-smj1yp3oit] {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827 !important;
}

.card-body p[b-smj1yp3oit] {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #4b5563 !important;
    line-height: 1.6;
    flex: 1;
}

.card-link[b-smj1yp3oit] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #3891BB !important;
    transition: all 0.15s ease;
}

.card-link i[b-smj1yp3oit] {
    font-size: 18px;
    color: #3891BB !important;
    transition: transform 0.15s ease;
}

.legal-card:hover .card-link[b-smj1yp3oit] {
    color: #2A6D8E !important;
}

.legal-card:hover .card-link i[b-smj1yp3oit] {
    transform: translateX(4px);
    color: #2A6D8E !important;
}

/* ============================================
   Footer
   ============================================ */
.legal-footer[b-smj1yp3oit] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 48px;
    padding: 28px 32px;
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.footer-icon[b-smj1yp3oit] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #f3f4f6 !important;
    border-radius: 12px;
    flex-shrink: 0;
}

.footer-icon i[b-smj1yp3oit] {
    font-size: 26px;
    color: #4b5563 !important;
}

.footer-text p[b-smj1yp3oit] {
    margin: 0;
    font-size: 15px;
    color: #4b5563 !important;
    line-height: 1.5;
}

.footer-text p:first-child[b-smj1yp3oit] {
    font-weight: 700;
    color: #111827 !important;
    margin-bottom: 4px;
}

.footer-text a[b-smj1yp3oit] {
    color: #2563eb !important;
    text-decoration: none;
    font-weight: 600;
}

.footer-text a:hover[b-smj1yp3oit] {
    text-decoration: underline;
    color: #1d4ed8 !important;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1200px) {
    .legal-grid[b-smj1yp3oit] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .legal-page[b-smj1yp3oit] {
        margin: -16px;
    }

    .header-content[b-smj1yp3oit] {
        padding: 28px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-text[b-smj1yp3oit] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-icon[b-smj1yp3oit] {
        width: 56px;
        height: 56px;
    }

    .header-icon i[b-smj1yp3oit] {
        font-size: 28px;
    }

    .header-text h1[b-smj1yp3oit] {
        font-size: 26px;
    }

    .header-text p[b-smj1yp3oit] {
        font-size: 15px;
    }

    .legal-content[b-smj1yp3oit] {
        padding: 28px 24px;
    }

    .legal-grid[b-smj1yp3oit] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-icon[b-smj1yp3oit] {
        padding: 28px;
    }

    .card-icon i[b-smj1yp3oit] {
        font-size: 48px;
    }

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

    .card-body h3[b-smj1yp3oit] {
        font-size: 17px;
    }

    .legal-footer[b-smj1yp3oit] {
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .legal-page[b-smj1yp3oit] {
        margin: -12px;
    }

    .header-content[b-smj1yp3oit] {
        padding: 24px 20px;
    }

    .header-icon[b-smj1yp3oit] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-smj1yp3oit] {
        font-size: 24px;
    }

    .header-text h1[b-smj1yp3oit] {
        font-size: 22px;
    }

    .header-text p[b-smj1yp3oit] {
        font-size: 14px;
    }

    .legal-content[b-smj1yp3oit] {
        padding: 24px 20px;
    }

    .back-btn[b-smj1yp3oit] {
        width: 44px;
        height: 44px;
    }

    .back-btn i[b-smj1yp3oit] {
        font-size: 22px;
    }

    .card-icon[b-smj1yp3oit] {
        padding: 24px;
    }

    .card-icon i[b-smj1yp3oit] {
        font-size: 42px;
    }
}
/* /Pages/Log Concern Client.razor.rz.scp.css */
/* =================================================================
   Log Concern Client.razor.css - Multi-Step Wizard Layout
   ================================================================= */

/* Step Indicator */
.step-indicator[b-8ou9z2wuw0] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-sm);
}

.step[b-8ou9z2wuw0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 140px;
    text-align: center;
    position: relative;
}

.step:not(:last-child)[b-8ou9z2wuw0]::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.step.completed:not(:last-child)[b-8ou9z2wuw0]::after {
    background-color: var(--primary);
}

.step-number[b-8ou9z2wuw0] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step.active .step-number[b-8ou9z2wuw0] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-8ou9z2wuw0] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-8ou9z2wuw0]::after {
    content: '\2713';
    font-size: 14px;
}

.step-title[b-8ou9z2wuw0] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.step.active .step-title[b-8ou9z2wuw0] {
    color: var(--primary);
    font-weight: 600;
}

.step.completed .step-title[b-8ou9z2wuw0] {
    color: var(--primary);
}

/* Two-column step layout (form + sidebar) */
.step-layout[b-8ou9z2wuw0] {
    display: flex;
    gap: var(--spacing-xl);
    min-height: 400px;
}

.step-form[b-8ou9z2wuw0] {
    flex: 3;
    min-width: 0;
}

.step-sidebar[b-8ou9z2wuw0] {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    align-self: flex-start;
}

/* Step content styling */
.step-content h2[b-8ou9z2wuw0] {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
}

.step-content > p[b-8ou9z2wuw0] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

/* Navigation */
.form-navigation[b-8ou9z2wuw0] {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.nav-buttons[b-8ou9z2wuw0] {
    display: flex;
    align-items: center;
}

.nav-spacer[b-8ou9z2wuw0] {
    flex: 1;
}

/* Concern Types Grid */
.concern-types-container[b-8ou9z2wuw0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

.concern-type-option[b-8ou9z2wuw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--spacing-lg);
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
    white-space: nowrap;
}

.concern-type-option:hover[b-8ou9z2wuw0] {
    border-color: var(--primary-light);
    background-color: var(--secondary-hover);
}

.concern-type-option.selected[b-8ou9z2wuw0] {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.concern-checkbox[b-8ou9z2wuw0] {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-left: var(--spacing-sm);
    transition: var(--transition);
}

.concern-checkbox.checked[b-8ou9z2wuw0] {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Body Map */
.body-map[b-8ou9z2wuw0] {
    height: 250px;
    background-color: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.body-map:hover[b-8ou9z2wuw0] {
    border-color: var(--primary);
}

.body-map.with-map[b-8ou9z2wuw0] {
    border-style: solid;
    border-color: var(--border-color);
}

/* Evidence Section */
.evidence-container[b-8ou9z2wuw0] {
    background-color: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: var(--transition);
}

.evidence-container:hover[b-8ou9z2wuw0] {
    border-color: var(--primary);
}

.no-evidence[b-8ou9z2wuw0] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

.evidence-actions[b-8ou9z2wuw0] {
    text-align: center;
}

.evidence-list[b-8ou9z2wuw0] {
    margin-bottom: var(--spacing-md);
    overflow-y: auto;
    max-height: 160px;
}

.evidence-item[b-8ou9z2wuw0] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0.75rem;
    border-radius: var(--radius);
    background-color: var(--secondary);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.evidence-item:hover[b-8ou9z2wuw0] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.evidence-item i[b-8ou9z2wuw0] {
    margin-right: var(--spacing-sm);
    color: var(--primary);
}

.evidence-item span[b-8ou9z2wuw0] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-btn[b-8ou9z2wuw0] {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: var(--transition);
}

.delete-btn:hover[b-8ou9z2wuw0] {
    background-color: rgba(234, 67, 53, 0.1);
}

/* Sidebar Cards */
.sidebar-card[b-8ou9z2wuw0] {
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.sidebar-card h3[b-8ou9z2wuw0] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.sidebar-content[b-8ou9z2wuw0] {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.sidebar-note[b-8ou9z2wuw0] {
    margin-top: var(--spacing-sm);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.notes-list[b-8ou9z2wuw0] {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-lg);
}

.notes-list li[b-8ou9z2wuw0] {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-size: 0.82rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .step-layout[b-8ou9z2wuw0] {
        flex-direction: column;
    }

    .step-sidebar[b-8ou9z2wuw0] {
        max-width: 100%;
    }

    .concern-types-container[b-8ou9z2wuw0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .step-indicator[b-8ou9z2wuw0] {
        overflow-x: auto;
        justify-content: flex-start;
        padding: var(--spacing-sm);
    }

    .step[b-8ou9z2wuw0] {
        min-width: 60px;
    }

    .concern-types-container[b-8ou9z2wuw0] {
        grid-template-columns: 1fr;
    }

    .concern-type-option[b-8ou9z2wuw0] {
        white-space: normal;
    }
}
/* /Pages/Log Concern Employee.razor.rz.scp.css */
/* =================================================================
   Log Concern Employee.razor.css - Multi-Step Wizard Layout
   ================================================================= */

/* Step Indicator */
.step-indicator[b-woaa0g8taq] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-sm);
}

.step[b-woaa0g8taq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 140px;
    text-align: center;
    position: relative;
}

.step:not(:last-child)[b-woaa0g8taq]::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.step.completed:not(:last-child)[b-woaa0g8taq]::after {
    background-color: var(--primary);
}

.step-number[b-woaa0g8taq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step.active .step-number[b-woaa0g8taq] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-woaa0g8taq] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-woaa0g8taq]::after {
    content: '\2713';
    font-size: 14px;
}

.step-title[b-woaa0g8taq] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.step.active .step-title[b-woaa0g8taq] {
    color: var(--primary);
    font-weight: 600;
}

.step.completed .step-title[b-woaa0g8taq] {
    color: var(--primary);
}

/* Two-column step layout (form + sidebar) */
.step-layout[b-woaa0g8taq] {
    display: flex;
    gap: var(--spacing-xl);
    min-height: 400px;
}

.step-form[b-woaa0g8taq] {
    flex: 3;
    min-width: 0;
}

.step-sidebar[b-woaa0g8taq] {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    align-self: flex-start;
}

/* Step content styling */
.step-content h2[b-woaa0g8taq] {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
}

.step-content > p[b-woaa0g8taq] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

/* Navigation */
.form-navigation[b-woaa0g8taq] {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.nav-buttons[b-woaa0g8taq] {
    display: flex;
    align-items: center;
}

.nav-spacer[b-woaa0g8taq] {
    flex: 1;
}

/* Concern Types Grid */
.concern-types-container[b-woaa0g8taq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

.concern-type-option[b-woaa0g8taq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--spacing-lg);
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
    white-space: nowrap;
}

.concern-type-option:hover[b-woaa0g8taq] {
    border-color: var(--primary-light);
    background-color: var(--secondary-hover);
}

.concern-type-option.selected[b-woaa0g8taq] {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.concern-checkbox[b-woaa0g8taq] {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-left: var(--spacing-sm);
    transition: var(--transition);
}

.concern-checkbox.checked[b-woaa0g8taq] {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Body Map */
.body-map[b-woaa0g8taq] {
    height: 250px;
    background-color: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.body-map:hover[b-woaa0g8taq] {
    border-color: var(--primary);
}

.body-map.with-map[b-woaa0g8taq] {
    border-style: solid;
    border-color: var(--border-color);
}

/* Evidence Section */
.evidence-container[b-woaa0g8taq] {
    background-color: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: var(--transition);
}

.evidence-container:hover[b-woaa0g8taq] {
    border-color: var(--primary);
}

.no-evidence[b-woaa0g8taq] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

.evidence-actions[b-woaa0g8taq] {
    text-align: center;
}

.evidence-list[b-woaa0g8taq] {
    margin-bottom: var(--spacing-md);
    overflow-y: auto;
    max-height: 160px;
}

.evidence-item[b-woaa0g8taq] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0.75rem;
    border-radius: var(--radius);
    background-color: var(--secondary);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.evidence-item:hover[b-woaa0g8taq] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.evidence-item i[b-woaa0g8taq] {
    margin-right: var(--spacing-sm);
    color: var(--primary);
}

.evidence-item span[b-woaa0g8taq] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-btn[b-woaa0g8taq] {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: var(--transition);
}

.delete-btn:hover[b-woaa0g8taq] {
    background-color: rgba(234, 67, 53, 0.1);
}

/* Sidebar Cards */
.sidebar-card[b-woaa0g8taq] {
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.sidebar-card h3[b-woaa0g8taq] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.sidebar-content[b-woaa0g8taq] {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.sidebar-note[b-woaa0g8taq] {
    margin-top: var(--spacing-sm);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.notes-list[b-woaa0g8taq] {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-lg);
}

.notes-list li[b-woaa0g8taq] {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-size: 0.82rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .step-layout[b-woaa0g8taq] {
        flex-direction: column;
    }

    .step-sidebar[b-woaa0g8taq] {
        max-width: 100%;
    }

    .concern-types-container[b-woaa0g8taq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .step-indicator[b-woaa0g8taq] {
        overflow-x: auto;
        justify-content: flex-start;
        padding: var(--spacing-sm);
    }

    .step[b-woaa0g8taq] {
        min-width: 60px;
    }

    .concern-types-container[b-woaa0g8taq] {
        grid-template-columns: 1fr;
    }

    .concern-type-option[b-woaa0g8taq] {
        white-space: normal;
    }
}
/* /Pages/Log My Concern.razor.rz.scp.css */
/* Medical Concern Page Styles */
.medical-concern-page[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    color: var(--text-primary);
    background-color: var(--background-light);
}

.main-content[b-qoz7iyvs4h] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--secondary);
    box-shadow: var(--shadow);
    border: none;
    border-radius: 0;
}

/* Header Section */
.page-header[b-qoz7iyvs4h] {
    margin-bottom: var(--spacing-xl);
}

.header-title h1[b-qoz7iyvs4h] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
}

.header-title p[b-qoz7iyvs4h] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

/* Step Indicator */
.step-indicator[b-qoz7iyvs4h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    gap: var(--spacing-sm);
}

.step[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 70px;
    max-width: 120px;
    text-align: center;
    position: relative;
}

.step:not(:last-child)[b-qoz7iyvs4h]::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.step.completed:not(:last-child)[b-qoz7iyvs4h]::after {
    background-color: var(--primary);
}

.step-number[b-qoz7iyvs4h] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step.active .step-number[b-qoz7iyvs4h] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-qoz7iyvs4h] {
    background-color: var(--primary);
    color: white;
}

.step.completed .step-number[b-qoz7iyvs4h]::before {
    content: '✓';
    font-size: 14px;
}

.step-title[b-qoz7iyvs4h] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.step.active .step-title[b-qoz7iyvs4h] {
    color: var(--primary);
    font-weight: 600;
}

/* Form Content */
.form-content[b-qoz7iyvs4h] {
    background-color: var(--secondary);
    border-radius: var(--radius-md);
    min-height: 400px;
    padding: var(--spacing-xl);
}

.step-content h2[b-qoz7iyvs4h] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.step-content > p[b-qoz7iyvs4h] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xl) 0;
}

/* Form Layout */
.form-row[b-qoz7iyvs4h] {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.form-group[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-group.half-width[b-qoz7iyvs4h] {
    flex: 1 1 calc(50% - var(--spacing-lg) / 2);
    min-width: 200px;
}

.form-group.full-width[b-qoz7iyvs4h] {
    flex: 1 1 100%;
}

.form-label[b-qoz7iyvs4h] {
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-label.required[b-qoz7iyvs4h]::after {
    content: ' *';
    color: var(--error);
}

.form-control[b-qoz7iyvs4h] {
    width: 100%;
    padding: var(--spacing-sm) 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: white;
    transition: var(--transition);
    font-size: 0.9rem;
}

.form-control-icon[b-qoz7iyvs4h] {
    width: 100%;
    padding: var(--spacing-sm) 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: white;
    transition: var(--transition);
    font-size: 0.9rem;
    padding-right: 100px;
}

.form-control:focus[b-qoz7iyvs4h] {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1);
}

/* DatePicker icon positioning - move icons slightly left */
[b-qoz7iyvs4h] .rz-datepicker button.rz-calendar-button,
[b-qoz7iyvs4h] .rz-datepicker .rz-button {
    right: 8px !important;
}

[b-qoz7iyvs4h] .rz-datepicker input {
    padding-right: 45px !important;
}

/* When search results are shown, modify the input border radius */
.form-group:has(.search-results) .form-control[b-qoz7iyvs4h] {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom-color: var(--primary);
}

.form-text[b-qoz7iyvs4h] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

/* Subject Type Selector */
.subject-type-selector[b-qoz7iyvs4h] {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

/* Search Results */
.search-results[b-qoz7iyvs4h] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 1px;
}

.search-result-item[b-qoz7iyvs4h] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
    background-color: white;
}

.search-result-item:last-child[b-qoz7iyvs4h] {
    border-bottom: none;
}

.search-result-item:hover[b-qoz7iyvs4h],
.search-result-item.selected[b-qoz7iyvs4h] {
    background-color: var(--primary-light);
    border-color: var(--primary);
}

.subject-avatar[b-qoz7iyvs4h] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: var(--spacing-sm);
    font-size: 0.9rem;
}

.subject-info[b-qoz7iyvs4h] {
    flex: 1;
}

.subject-name[b-qoz7iyvs4h] {
    font-weight: 500;
    font-size: 0.9rem;
}

.subject-details[b-qoz7iyvs4h] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Selected Subject */
.selected-subject[b-qoz7iyvs4h] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0.75rem;
    background-color: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    margin-top: var(--spacing-sm);
}

.selected-subject .subject-info[b-qoz7iyvs4h] {
    flex: 1;
}

.clear-selection[b-qoz7iyvs4h] {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: var(--transition);
}

.clear-selection:hover[b-qoz7iyvs4h] {
    background-color: rgba(234, 67, 53, 0.1);
    color: var(--error);
}

/* Concern Types Grid */
.concern-types-grid[b-qoz7iyvs4h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.concern-type-option[b-qoz7iyvs4h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background-color: var(--background-light);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.concern-type-option:hover[b-qoz7iyvs4h] {
    border-color: var(--primary-light);
    background-color: var(--secondary-hover);
}

.concern-type-option.selected[b-qoz7iyvs4h] {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.concern-checkbox[b-qoz7iyvs4h] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-left: var(--spacing-sm);
    transition: var(--transition);
    font-size: 12px;
}

.concern-checkbox.checked[b-qoz7iyvs4h] {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Severity Selector */
.severity-selector[b-qoz7iyvs4h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.severity-option[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background-color: var(--background-light);
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    min-width: 80px;
    text-align: center;
}

.severity-option:hover[b-qoz7iyvs4h] {
    border-color: var(--primary-light);
}

.severity-option.selected[b-qoz7iyvs4h] {
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.severity-indicator[b-qoz7iyvs4h] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-bottom: var(--spacing-xs);
}

.severity-option.low .severity-indicator[b-qoz7iyvs4h] {
    background-color: var(--success);
}

.severity-option.medium .severity-indicator[b-qoz7iyvs4h] {
    background-color: var(--warning);
}

.severity-option.high .severity-indicator[b-qoz7iyvs4h] {
    background-color: var(--error);
}

/* Evidence Section */
.evidence-section[b-qoz7iyvs4h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.evidence-card[b-qoz7iyvs4h] {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.evidence-card h3[b-qoz7iyvs4h] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
}

/* Body Map */
.body-map-container[b-qoz7iyvs4h] {
    min-height: 300px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.body-map-container:hover[b-qoz7iyvs4h] {
    border-color: var(--primary);
}

.body-map-container.with-map[b-qoz7iyvs4h] {
    border-style: solid;
    border-color: var(--success);
}

.body-map-placeholder[b-qoz7iyvs4h] {
    text-align: center;
    color: var(--text-secondary);
}

.body-map-placeholder i[b-qoz7iyvs4h] {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-muted);
}

.body-map-placeholder p[b-qoz7iyvs4h] {
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.body-map-placeholder small[b-qoz7iyvs4h] {
    font-size: 0.8rem;
}

.body-map-preview[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

/* Evidence Container */
.evidence-container[b-qoz7iyvs4h] {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.evidence-list[b-qoz7iyvs4h] {
    margin-bottom: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
}

.evidence-item[b-qoz7iyvs4h] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0.75rem;
    border-radius: var(--radius);
    background-color: var(--secondary);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.evidence-item:hover[b-qoz7iyvs4h] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.file-icon[b-qoz7iyvs4h] {
    margin-right: var(--spacing-sm);
    color: var(--primary);
    font-size: 1.2rem;
}

.file-info[b-qoz7iyvs4h] {
    flex: 1;
}

.file-name[b-qoz7iyvs4h] {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.file-size[b-qoz7iyvs4h] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.delete-btn[b-qoz7iyvs4h] {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: var(--transition);
    color: var(--text-secondary);
}

.delete-btn:hover[b-qoz7iyvs4h] {
    background-color: rgba(234, 67, 53, 0.1);
    color: var(--error);
}

.no-evidence[b-qoz7iyvs4h] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.no-evidence i[b-qoz7iyvs4h] {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-muted);
}

.evidence-actions[b-qoz7iyvs4h] {
    text-align: center;
}

/* Review Section */
.review-section[b-qoz7iyvs4h] {
    display: grid;
    gap: var(--spacing-lg);
}

.review-card[b-qoz7iyvs4h] {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.review-card h3[b-qoz7iyvs4h] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.review-content[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.review-item[b-qoz7iyvs4h] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.review-item strong[b-qoz7iyvs4h] {
    min-width: 120px;
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}

.review-description[b-qoz7iyvs4h] {
    background-color: var(--secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    border-left: 3px solid var(--primary);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.severity-badge[b-qoz7iyvs4h] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.severity-badge.low[b-qoz7iyvs4h] {
    background-color: var(--success-light);
    color: var(--success);
}

.severity-badge.medium[b-qoz7iyvs4h] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.severity-badge.high[b-qoz7iyvs4h] {
    background-color: var(--error-light);
    color: var(--error);
}

/* Submission Agreement */
.submission-agreement[b-qoz7iyvs4h] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background-color: var(--background-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-top: var(--spacing-xl);
}

.agreement-text[b-qoz7iyvs4h] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    cursor: pointer;
}

/* Form Navigation */
.form-navigation[b-qoz7iyvs4h] {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.nav-buttons[b-qoz7iyvs4h] {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.nav-spacer[b-qoz7iyvs4h] {
    flex: 1;
}

.form-actions-secondary[b-qoz7iyvs4h] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
}

/* Loading State */
.loading-container[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.loading-container p[b-qoz7iyvs4h] {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
}

/* Responsive Design */

/* Large tablets and small desktops (768px - 1024px) */
@media (max-width: 1024px) {
    .main-content[b-qoz7iyvs4h] {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .evidence-section[b-qoz7iyvs4h] {
        gap: var(--spacing-md);
    }

    .concern-types-grid[b-qoz7iyvs4h] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Tablets (600px - 768px) */
@media (max-width: 768px) {
    .main-content[b-qoz7iyvs4h] {
        padding: var(--spacing-md);
    }

    .header-title h1[b-qoz7iyvs4h] {
        font-size: 1.5rem;
    }

    .step-indicator[b-qoz7iyvs4h] {
        padding: var(--spacing-sm);
    }

    .step[b-qoz7iyvs4h] {
        min-width: 65px;
        max-width: 100px;
    }

    .step-number[b-qoz7iyvs4h] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .step-title[b-qoz7iyvs4h] {
        font-size: 0.7rem;
    }

    .step:not(:last-child)[b-qoz7iyvs4h]::after {
        left: calc(50% + 18px);
        width: calc(100% - 36px);
    }

    .form-content[b-qoz7iyvs4h] {
        padding: var(--spacing-lg);
        min-height: 300px;
    }

    .form-row[b-qoz7iyvs4h] {
        gap: var(--spacing-md);
    }

    .form-group.half-width[b-qoz7iyvs4h] {
        flex: 1 1 100%;
        min-width: unset;
    }

    .evidence-section[b-qoz7iyvs4h] {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .concern-types-grid[b-qoz7iyvs4h] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .severity-option[b-qoz7iyvs4h] {
        min-width: 70px;
    }

    .review-item[b-qoz7iyvs4h] {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .review-item strong[b-qoz7iyvs4h] {
        min-width: unset;
        width: 100%;
    }

    .body-map-container[b-qoz7iyvs4h] {
        min-height: 250px;
    }
}

/* Mobile landscape and large phones (481px - 600px) */
@media (max-width: 600px) {
    .page-header[b-qoz7iyvs4h] {
        margin-bottom: var(--spacing-lg);
    }

    .header-title h1[b-qoz7iyvs4h] {
        font-size: 1.35rem;
    }

    .header-title p[b-qoz7iyvs4h] {
        font-size: 0.85rem;
    }

    .step[b-qoz7iyvs4h] {
        min-width: 55px;
        max-width: 80px;
    }

    .step-number[b-qoz7iyvs4h] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .step:not(:last-child)[b-qoz7iyvs4h]::after {
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }

    .form-content[b-qoz7iyvs4h] {
        padding: var(--spacing-md);
    }

    .step-content h2[b-qoz7iyvs4h] {
        font-size: 1.25rem;
    }

    .step-content > p[b-qoz7iyvs4h] {
        font-size: 0.85rem;
    }

    .concern-types-grid[b-qoz7iyvs4h] {
        grid-template-columns: 1fr;
    }

    .nav-buttons[b-qoz7iyvs4h] {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .form-actions-secondary[b-qoz7iyvs4h] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* Mobile portrait (max-width: 480px) */
@media (max-width: 480px) {
    .main-content[b-qoz7iyvs4h] {
        margin: 0;
        padding: var(--spacing-sm);
        border-radius: 0;
    }

    .header-title h1[b-qoz7iyvs4h] {
        font-size: 1.25rem;
    }

    .header-title p[b-qoz7iyvs4h] {
        font-size: 0.8rem;
        margin-bottom: var(--spacing-md);
    }

    .step-indicator[b-qoz7iyvs4h] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .step[b-qoz7iyvs4h] {
        min-width: 50px;
        max-width: 70px;
    }

    .step-number[b-qoz7iyvs4h] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .step-title[b-qoz7iyvs4h] {
        font-size: 0.65rem;
    }

    .step:not(:last-child)[b-qoz7iyvs4h]::after {
        left: calc(50% + 14px);
        width: calc(100% - 28px);
    }

    .form-content[b-qoz7iyvs4h] {
        padding: var(--spacing-sm);
        min-height: 250px;
    }

    .step-content h2[b-qoz7iyvs4h] {
        font-size: 1.15rem;
        margin-bottom: var(--spacing-sm);
    }

    .step-content > p[b-qoz7iyvs4h] {
        font-size: 0.8rem;
        margin-bottom: var(--spacing-md);
    }

    .form-row[b-qoz7iyvs4h] {
        gap: var(--spacing-sm);
    }

    .subject-avatar[b-qoz7iyvs4h] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .severity-option[b-qoz7iyvs4h] {
        flex: 1 1 calc(50% - var(--spacing-md) / 2);
        min-width: unset;
        padding: var(--spacing-sm);
    }

    .severity-indicator[b-qoz7iyvs4h] {
        width: 14px;
        height: 14px;
    }

    .evidence-card[b-qoz7iyvs4h] {
        padding: var(--spacing-md);
    }

    .evidence-card h3[b-qoz7iyvs4h] {
        font-size: 1rem;
    }

    .body-map-container[b-qoz7iyvs4h] {
        min-height: 200px;
        padding: var(--spacing-md);
    }

    .body-map-placeholder i[b-qoz7iyvs4h] {
        font-size: 2.5rem;
    }

    .review-card[b-qoz7iyvs4h] {
        padding: var(--spacing-md);
    }

    .review-card h3[b-qoz7iyvs4h] {
        font-size: 1rem;
    }

    .review-item[b-qoz7iyvs4h] {
        font-size: 0.85rem;
    }

    .submission-agreement[b-qoz7iyvs4h] {
        padding: var(--spacing-md);
        gap: var(--spacing-xs);
    }

    .agreement-text[b-qoz7iyvs4h] {
        font-size: 0.85rem;
    }

    .form-navigation[b-qoz7iyvs4h] {
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-lg);
    }
}

/* Extra small devices (max-width: 360px) */
@media (max-width: 360px) {
    .step[b-qoz7iyvs4h] {
        min-width: 45px;
    }

    .step-number[b-qoz7iyvs4h] {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .step-title[b-qoz7iyvs4h] {
        font-size: 0.6rem;
    }

    .header-title h1[b-qoz7iyvs4h] {
        font-size: 1.1rem;
    }

    .form-group.half-width[b-qoz7iyvs4h] {
        min-width: 100%;
    }
}

/* ===== NEW MEDICAL SAFEGUARDING STYLES ===== */

/* Checkbox Grid for multi-select options */
.checkbox-grid[b-qoz7iyvs4h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.checkbox-item[b-qoz7iyvs4h] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    border-radius: var(--radius);
    background-color: var(--background-light);
    transition: var(--transition);
}

.checkbox-item:hover[b-qoz7iyvs4h] {
    background-color: var(--secondary-hover);
}

/* Risk Selector */
.risk-selector[b-qoz7iyvs4h] {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.risk-option[b-qoz7iyvs4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background-color: var(--background-light);
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    min-width: 80px;
    text-align: center;
}

.risk-option:hover[b-qoz7iyvs4h] {
    border-color: var(--primary-light);
}

.risk-option.selected[b-qoz7iyvs4h] {
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.risk-indicator[b-qoz7iyvs4h] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-bottom: var(--spacing-xs);
}

.risk-option.low .risk-indicator[b-qoz7iyvs4h] {
    background-color: var(--success);
}

.risk-option.medium .risk-indicator[b-qoz7iyvs4h] {
    background-color: var(--warning);
}

.risk-option.high .risk-indicator[b-qoz7iyvs4h] {
    background-color: var(--error);
}

.risk-option.critical .risk-indicator[b-qoz7iyvs4h] {
    background-color: #8b0000;
}

/* Conditional sections */
.capacity-section[b-qoz7iyvs4h],
.perpetrator-section[b-qoz7iyvs4h],
.family-section[b-qoz7iyvs4h],
.vitals-section[b-qoz7iyvs4h] {
    background-color: var(--background-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
    margin-top: var(--spacing-md);
}

/* Responsive updates for new elements */
@media (max-width: 768px) {
    .checkbox-grid[b-qoz7iyvs4h] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .risk-selector[b-qoz7iyvs4h] {
        flex-direction: column;
    }

    .risk-option[b-qoz7iyvs4h] {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--spacing-sm);
    }

    .risk-indicator[b-qoz7iyvs4h] {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .checkbox-grid[b-qoz7iyvs4h] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Mobile-First Login page styles */
.login-container[b-o9xqvcizdi] {
    display: flex;
    height: 100vh;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.image-section[b-o9xqvcizdi] {
    /* On mobile, show as header/background */
    height: 200px;
    background-image: url('/images/login/Safeguarding Background.png');
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

/* Add overlay gradient for better text readability on mobile */
.image-section[b-o9xqvcizdi]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

/* Brand overlay for mobile */
.brand-overlay[b-o9xqvcizdi] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    color: white;
}

.brand-logo[b-o9xqvcizdi] {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-title[b-o9xqvcizdi] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.025em;
}

.brand-subtitle[b-o9xqvcizdi] {
    font-size: 0.875rem;
    margin: 0;
    color: white;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

.form-section[b-o9xqvcizdi] {
    flex: 1;
    padding: var(--spacing-lg) var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--secondary);
    min-height: 0;
}

.form-wrapper[b-o9xqvcizdi] {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    padding: var(--spacing-md);
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

/* Welcome header styles */
.welcome-header[b-o9xqvcizdi] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.welcome-icon[b-o9xqvcizdi] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #2980b9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(56, 145, 187, 0.3);
}

.welcome-icon i[b-o9xqvcizdi] {
    font-size: 1.5rem;
    color: white;
}

.welcome-icon--register[b-o9xqvcizdi] {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.welcome-icon--verify[b-o9xqvcizdi] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}

.welcome-title[b-o9xqvcizdi] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.025em;
}

.welcome-subtitle[b-o9xqvcizdi] {
    font-size: 0.9375rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
    font-weight: 400;
}

.welcome-subtitle strong[b-o9xqvcizdi] {
    color: var(--primary);
    font-weight: 600;
}

.forgot-password[b-o9xqvcizdi] {
    text-align: right;
    margin-bottom: var(--spacing-md);
}

.forgot-password a[b-o9xqvcizdi] {
    color: var(--primary);
    font-size: 0.875rem;
    text-decoration: none;
}

.forgot-password a:hover[b-o9xqvcizdi] {
    text-decoration: underline;
}

.sign-in-button[b-o9xqvcizdi] {
    width: 100%;
    padding: 16px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(56, 145, 187, 0.3);
}

.sign-in-button:hover[b-o9xqvcizdi] {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 145, 187, 0.4);
}

.sign-in-button:active[b-o9xqvcizdi] {
    transform: translateY(0);
}

.create-account[b-o9xqvcizdi] {
    text-align: center;
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
}

.create-account a[b-o9xqvcizdi] {
    color: var(--primary);
    text-decoration: none;
}

.create-account a:hover[b-o9xqvcizdi] {
    text-decoration: underline;
}

[b-o9xqvcizdi] .validation-message {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Code confirmation styles */
.confirmation-message[b-o9xqvcizdi] {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.resend-code[b-o9xqvcizdi] {
    text-align: center;
    margin: var(--spacing-md) 0;
    font-size: 0.875rem;
}

.resend-code a[b-o9xqvcizdi] {
    color: var(--primary);
    text-decoration: none;
}

.resend-code a:hover[b-o9xqvcizdi] {
    text-decoration: underline;
}

/* Form animations */
.form-wrapper[b-o9xqvcizdi] {
    animation: fadeIn-b-o9xqvcizdi 0.3s ease-in-out;
}

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

.back-to-login[b-o9xqvcizdi] {
    text-align: center;
    margin-top: var(--spacing-md);
}

.back-to-login a[b-o9xqvcizdi] {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-to-login a:hover[b-o9xqvcizdi] {
    color: var(--primary);
    text-decoration: underline;
}

.account-type-toggle[b-o9xqvcizdi] {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-xs);
    background-color: var(--secondary-hover);
    border-radius: var(--radius-md);
}

.toggle-option[b-o9xqvcizdi] {
    flex: 1;
    padding: var(--spacing-sm);
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 0.875rem;
    transition: var(--transition);
}

.toggle-option:hover[b-o9xqvcizdi] {
    background-color: var(--primary-light);
}

.toggle-option.active[b-o9xqvcizdi] {
    background-color: var(--secondary);
    color: var(--primary);
    box-shadow: var(--shadow);
}

/* Enhanced Mobile-First Responsive Design */

/* Mobile optimizations (default - 0 to 767px) */
@media (max-width: 767px) {
    .login-container[b-o9xqvcizdi] {
        flex-direction: column;
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    .image-section[b-o9xqvcizdi] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        z-index: 0;
    }

    .image-section[b-o9xqvcizdi]::after {
        background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%);
    }

    .brand-overlay[b-o9xqvcizdi] {
        top: 15%;
        transform: translateX(-50%);
        padding: 0 var(--spacing-md);
    }

    .brand-logo[b-o9xqvcizdi] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .brand-title[b-o9xqvcizdi] {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .brand-subtitle[b-o9xqvcizdi] {
        font-size: 0.8125rem;
    }

    .form-section[b-o9xqvcizdi] {
        position: relative;
        z-index: 1;
        padding: var(--spacing-md);
        padding-top: 0;
        height: 100vh;
        min-height: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .form-wrapper[b-o9xqvcizdi] {
        padding: var(--spacing-lg);
        margin: 0 auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(10px);
    }
    
    .welcome-header[b-o9xqvcizdi] {
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }

    .welcome-icon[b-o9xqvcizdi] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .welcome-icon i[b-o9xqvcizdi] {
        font-size: 1.25rem;
    }

    .welcome-title[b-o9xqvcizdi] {
        font-size: 1.375rem;
    }

    .welcome-subtitle[b-o9xqvcizdi] {
        font-size: 0.875rem;
    }

    /* Better touch targets on mobile */
    .sign-in-button[b-o9xqvcizdi] {
        padding: 18px;
        font-size: 16px;
        min-height: 52px;
        border-radius: 14px;
    }
    
    /* Enhanced form inputs for mobile */
    [b-o9xqvcizdi] .form-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 16px 14px !important;
        border-radius: 12px !important;
        border: 2px solid var(--border-color) !important;
        transition: all 0.2s ease !important;
        min-height: 48px !important;
    }
    
    [b-o9xqvcizdi] .form-input:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1) !important;
        outline: none !important;
    }
    
    /* Better spacing for form groups */
    [b-o9xqvcizdi] .form-group {
        margin-bottom: var(--spacing-lg) !important;
    }
    
    /* Better alert styling on mobile */
    [b-o9xqvcizdi] .alert {
        border-radius: 12px !important;
        padding: var(--spacing-md) !important;
        font-size: 14px !important;
        margin-bottom: var(--spacing-lg) !important;
        border: none !important;
    }
    
    [b-o9xqvcizdi] .alert-danger {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #dc2626 !important;
        border-left: 4px solid #dc2626 !important;
    }
    
    [b-o9xqvcizdi] .alert-success {
        background: rgba(16, 185, 129, 0.1) !important;
        color: #065f46 !important;
        border-left: 4px solid #10b981 !important;
    }
    
    /* Better validation message styling */
    [b-o9xqvcizdi] .validation-message {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #dc2626 !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        margin-top: 8px !important;
        border-left: 3px solid #dc2626 !important;
    }
    
    /* Better link styling */
    .forgot-password[b-o9xqvcizdi],
    .create-account[b-o9xqvcizdi],
    .resend-code[b-o9xqvcizdi] {
        font-size: 14px;
        margin: var(--spacing-md) 0;
    }
    
    .forgot-password a[b-o9xqvcizdi],
    .create-account a[b-o9xqvcizdi],
    .resend-code a[b-o9xqvcizdi] {
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: 6px;
        display: inline-block;
        transition: all 0.2s ease;
    }
    
    .forgot-password a:hover[b-o9xqvcizdi],
    .create-account a:hover[b-o9xqvcizdi],
    .resend-code a:hover[b-o9xqvcizdi] {
        background: var(--primary-light);
        text-decoration: none;
    }
}

/* Small mobile optimizations (480px and below) */
@media (max-width: 480px) {
    .brand-overlay[b-o9xqvcizdi] {
        top: 12%;
    }

    .brand-logo[b-o9xqvcizdi] {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .brand-title[b-o9xqvcizdi] {
        font-size: 1.25rem;
    }

    .brand-subtitle[b-o9xqvcizdi] {
        font-size: 0.75rem;
    }

    .form-section[b-o9xqvcizdi] {
        padding: var(--spacing-sm);
    }

    .form-wrapper[b-o9xqvcizdi] {
        padding: var(--spacing-md);
        border-radius: 16px;
    }

    .welcome-header[b-o9xqvcizdi] {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }

    .welcome-icon[b-o9xqvcizdi] {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .welcome-title[b-o9xqvcizdi] {
        font-size: 1.25rem;
    }

    .welcome-subtitle[b-o9xqvcizdi] {
        font-size: 0.8125rem;
    }

    .sign-in-button[b-o9xqvcizdi] {
        padding: 16px;
        min-height: 48px;
        font-size: 15px;
    }
}

/* Tablet styles (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .login-container[b-o9xqvcizdi] {
        /* Keep stacked on tablet portrait, side-by-side on landscape */
        flex-direction: column;
    }
    
    .image-section[b-o9xqvcizdi] {
        height: 250px;
    }
    
    .form-section[b-o9xqvcizdi] {
        padding: var(--spacing-xl);
        min-height: calc(100vh - 250px);
    }
    
    .form-wrapper[b-o9xqvcizdi] {
        max-width: 450px;
        padding: var(--spacing-xl);
    }
}

/* Desktop styles (1024px and up) */
@media (min-width: 1024px) {
    .login-container[b-o9xqvcizdi] {
        /* Side-by-side layout for desktop */
        flex-direction: row;
        height: 100vh;
    }
    
    .image-section[b-o9xqvcizdi] {
        flex: 1;
        height: auto;
        /* Remove mobile overlay on desktop */
    }
    
    .image-section[b-o9xqvcizdi]::after {
        display: none;
    }
    
    /* Hide brand overlay on desktop */
    .brand-overlay[b-o9xqvcizdi] {
        display: none;
    }
    
    .form-section[b-o9xqvcizdi] {
        flex: 1;
        padding: var(--spacing-xl);
        background-color: var(--secondary);
        min-height: auto;
    }
    
    .form-wrapper[b-o9xqvcizdi] {
        background: transparent;
        box-shadow: none;
        transform: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
    }
    
    .welcome-title[b-o9xqvcizdi] {
        font-size: 1.75rem;
    }

    .welcome-icon[b-o9xqvcizdi] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    .welcome-icon i[b-o9xqvcizdi] {
        font-size: 1.625rem;
    }
    
    .sign-in-button[b-o9xqvcizdi] {
        padding: 14px;
        font-size: 15px;
        min-height: 44px;
        border-radius: 8px;
    }
    
    /* Reset form inputs for desktop */
    [b-o9xqvcizdi] .form-input {
        font-size: 14px !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        min-height: 40px !important;
    }
}

/* Large desktop styles (1200px and up) */
@media (min-width: 1200px) {
    .form-wrapper[b-o9xqvcizdi] {
        max-width: 420px;
    }
    
    .welcome-title[b-o9xqvcizdi] {
        font-size: 2rem;
    }

    .welcome-header[b-o9xqvcizdi] {
        margin-bottom: 2rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .form-wrapper[b-o9xqvcizdi] {
        transform: none !important;
    }
    
    .sign-in-button:hover[b-o9xqvcizdi] {
        transform: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .form-wrapper[b-o9xqvcizdi] {
        border: 2px solid currentColor;
    }
    
    .sign-in-button[b-o9xqvcizdi] {
        border: 2px solid currentColor;
    }
}

/* Password requirements section */
.password-requirements[b-o9xqvcizdi] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
}

.requirements-title[b-o9xqvcizdi] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 10px 0;
}

.requirements-list[b-o9xqvcizdi] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .requirements-list li[b-o9xqvcizdi] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.8125rem;
        color: #64748b;
        transition: all 0.2s ease;
    }

        .requirements-list li .req-check[b-o9xqvcizdi] {
            width: 18px;
            height: 18px;
            border: 2px solid #cbd5e1;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
            position: relative;
        }

            .requirements-list li .req-check[b-o9xqvcizdi]::after {
                content: '';
                width: 5px;
                height: 9px;
                border: solid transparent;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
                margin-top: -2px;
            }

        .requirements-list li.met[b-o9xqvcizdi] {
            color: #059669;
        }

            .requirements-list li.met .req-check[b-o9xqvcizdi] {
                background: #059669;
                border-color: #059669;
            }

                .requirements-list li.met .req-check[b-o9xqvcizdi]::after {
                    border-color: white;
                }

/* /Pages/Management.razor.rz.scp.css */
/* =================================================================
   Management.razor.css - Modern Professional Design
   ================================================================= */

/* Main container */
.management-page[b-x7lo36frww] {
    padding: 0;
    height: 100%;
    background-color: var(--secondary);
}

/* Modern header section - uses brand colors */
.modern-header[b-x7lo36frww] {
    position: relative;
    background: linear-gradient(135deg, #3891BB 0%, #2A6D8E 100%);
    color: white;
    padding: 2.5rem 2rem 2rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0;
    overflow: hidden;
}

.header-background[b-x7lo36frww] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.header-content[b-x7lo36frww] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-text[b-x7lo36frww] {
    flex: 1;
}

.page-title[b-x7lo36frww] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: black;
}

.title-icon[b-x7lo36frww] {
    font-size: 2rem;
}

.header-description[b-x7lo36frww] {
    color: black;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.header-actions[b-x7lo36frww] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.action-btn[b-x7lo36frww] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn.icon-only[b-x7lo36frww] {
    padding: 0.5rem;
    min-width: auto;
}

/* Content area */
.management-content[b-x7lo36frww] {
    padding: 0 2rem 2rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Statistics section */
.stats-section[b-x7lo36frww] {
    margin-bottom: 2rem;
}

.section-header-small[b-x7lo36frww] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header-small h2[b-x7lo36frww] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon[b-x7lo36frww] {
    color: var(--primary);
    font-size: 1.5rem;
}

.auto-refresh-badge[b-x7lo36frww] {
    animation: pulse-b-x7lo36frww 2s ease-in-out infinite;
}

@keyframes pulse-b-x7lo36frww {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Stats grid - uses utilities.css base styles */
.stats-grid[b-x7lo36frww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Enhanced stat cards */
.stat-card[b-x7lo36frww] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.stat-card[b-x7lo36frww]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.stat-card:hover[b-x7lo36frww] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.stat-card:hover[b-x7lo36frww]::before {
    width: 100%;
    opacity: 0.1;
}

.stat-icon[b-x7lo36frww] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-content[b-x7lo36frww] {
    flex: 1;
}

.stat-content h3[b-x7lo36frww] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
}

.stat-content p[b-x7lo36frww] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.stat-trend[b-x7lo36frww] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-light);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.stat-trend.positive[b-x7lo36frww] {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

/* Color variants for stat cards - uses brand color palette */
.stat-card.teams .stat-icon[b-x7lo36frww] {
    background: linear-gradient(135deg, #3891BB 0%, #2A6D8E 100%);
    color: white;
}

.stat-card.members .stat-icon[b-x7lo36frww] {
    background: linear-gradient(135deg, #FBBC05 0%, #F59E0B 100%);
    color: white;
}

.stat-card.tasks .stat-icon[b-x7lo36frww] {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
}

.stat-card.completed .stat-icon[b-x7lo36frww] {
    background: linear-gradient(135deg, #34A853 0%, #16A34A 100%);
    color: white;
}

/* Loading state */
.loading-stats[b-x7lo36frww] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.loading-stats p[b-x7lo36frww] {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Tabs section */
.tabs-section[b-x7lo36frww] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Management tabs styling */
.management-tabs[b-x7lo36frww] {
    min-height: 600px;
}

:deep(.management-tabs .rz-tabview-nav)[b-x7lo36frww] {
    border-bottom: 2px solid var(--border-color);
    background-color: var(--background-light);
    padding: 0 1rem;
}

:deep(.management-tabs .rz-tabview-nav .rz-tabview-nav-link)[b-x7lo36frww] {
    color: var(--text-secondary);
    border: none;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
}

:deep(.management-tabs .rz-tabview-nav .rz-tabview-nav-link:hover)[b-x7lo36frww] {
    color: var(--primary);
    background-color: var(--primary-light);
}

:deep(.management-tabs .rz-tabview-nav .rz-tabview-nav-link.rz-state-active)[b-x7lo36frww] {
    color: var(--primary);
    background-color: white;
    border-bottom: 3px solid var(--primary);
    font-weight: 700;
}

:deep(.management-tabs .rz-tabview-panels)[b-x7lo36frww] {
    padding: 2rem;
    background-color: white;
    min-height: 500px;
}

/* Responsive design */
@media (max-width: 1024px) {
    .header-content[b-x7lo36frww] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .header-actions[b-x7lo36frww] {
        width: 100%;
        justify-content: flex-start;
    }

    .stats-grid[b-x7lo36frww] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .modern-header[b-x7lo36frww] {
        padding: 2rem 1rem 1.5rem 1rem;
    }

    .management-content[b-x7lo36frww] {
        padding: 0 1rem 1rem 1rem;
    }

    .page-title[b-x7lo36frww] {
        font-size: 1.5rem;
    }

    .title-icon[b-x7lo36frww] {
        font-size: 1.5rem;
    }

    .header-description[b-x7lo36frww] {
        font-size: 0.9rem;
    }

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

    .stat-card[b-x7lo36frww] {
        padding: 1.25rem;
    }

    .stat-icon[b-x7lo36frww] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .stat-content h3[b-x7lo36frww] {
        font-size: 1.75rem;
    }

    .header-actions[b-x7lo36frww] {
        flex-wrap: wrap;
    }

    .action-btn[b-x7lo36frww] {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }

    .action-btn.icon-only[b-x7lo36frww] {
        flex: 0;
        min-width: auto;
    }

    :deep(.management-tabs .rz-tabview-panels)[b-x7lo36frww] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .page-title[b-x7lo36frww] {
        font-size: 1.25rem;
    }

    .stat-content h3[b-x7lo36frww] {
        font-size: 1.5rem;
    }

    .section-header-small h2[b-x7lo36frww] {
        font-size: 1.25rem;
    }

    .action-btn[b-x7lo36frww] {
        min-width: 100%;
    }
}
/* /Pages/OfflineConcernForm.razor.rz.scp.css */
.offline-form-page[b-hbm22jas4p] {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page-header[b-hbm22jas4p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.header-content h1[b-hbm22jas4p] {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #111827;
}

.subtitle[b-hbm22jas4p] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

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

.form-instructions[b-hbm22jas4p] {
    margin-bottom: 24px;
}

.instruction-box[b-hbm22jas4p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

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

.instruction-box .rzi[b-hbm22jas4p] {
    font-size: 24px;
    flex-shrink: 0;
}

/* Printable form styles */
.printable-form[b-hbm22jas4p] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 24px;
    flex: 1;
}

.form-header-print[b-hbm22jas4p] {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid #111827;
}

.org-name[b-hbm22jas4p] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.form-header-print h2[b-hbm22jas4p] {
    margin: 0 0 12px 0;
    font-size: 22px;
    color: #111827;
}

.form-reference[b-hbm22jas4p] {
    margin: 0;
    font-size: 14px;
    color: #374151;
}

.form-section[b-hbm22jas4p] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.form-section:last-of-type[b-hbm22jas4p] {
    border-bottom: none;
}

.form-section h3[b-hbm22jas4p] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    background: #f3f4f6;
    padding: 8px 12px;
    border-radius: 4px;
}

.form-row[b-hbm22jas4p] {
    display: flex;
    gap: 20px;
}

.form-field[b-hbm22jas4p] {
    margin-bottom: 16px;
}

.form-field.half[b-hbm22jas4p] {
    flex: 1;
}

.form-field.full-width[b-hbm22jas4p] {
    width: 100%;
}

.form-field label[b-hbm22jas4p] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.field-line[b-hbm22jas4p] {
    height: 24px;
    border-bottom: 1px solid #9ca3af;
}

.prefilled[b-hbm22jas4p] {
    font-style: italic;
    color: #6b7280;
}

.text-area[b-hbm22jas4p] {
    border: 1px solid #9ca3af;
    border-radius: 4px;
    padding: 8px;
    min-height: 160px;
}

.text-area.small[b-hbm22jas4p] {
    min-height: 80px;
}

.text-line[b-hbm22jas4p] {
    height: 24px;
    border-bottom: 1px dashed #d1d5db;
}

.text-line:last-child[b-hbm22jas4p] {
    border-bottom: none;
}

.checkbox-group[b-hbm22jas4p] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.checkbox-item[b-hbm22jas4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
}

.checkbox[b-hbm22jas4p] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #9ca3af;
    border-radius: 3px;
}

.inline-checkbox[b-hbm22jas4p] {
    display: flex;
    gap: 16px;
}

.inline-checkbox label[b-hbm22jas4p] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
}

.body-map-box[b-hbm22jas4p] {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.body-map-box p[b-hbm22jas4p] {
    margin: 0 0 12px 0;
    font-size: 13px;
}

.body-outline[b-hbm22jas4p] {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.body-front[b-hbm22jas4p],
.body-back[b-hbm22jas4p] {
    text-align: center;
}

.body-label[b-hbm22jas4p] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.body-svg[b-hbm22jas4p] {
    width: 100px;
    height: 200px;
}

.signature-section .signature-line[b-hbm22jas4p] {
    height: 50px;
    border-bottom: 1px solid #111827;
}

.form-footer-print[b-hbm22jas4p] {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 2px solid #111827;
    text-align: center;
}

.form-footer-print p[b-hbm22jas4p] {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #374151;
}

.form-footer-print .small[b-hbm22jas4p] {
    font-size: 11px;
    color: #9ca3af;
}

/* Post-form instructions */
.post-form-instructions[b-hbm22jas4p] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.post-form-instructions h3[b-hbm22jas4p] {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #111827;
}

.post-form-instructions ol[b-hbm22jas4p] {
    margin: 0 0 20px 0;
    padding-left: 24px;
    font-size: 14px;
    color: #374151;
    line-height: 1.8;
}

.emergency-reminder[b-hbm22jas4p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
}

.emergency-reminder .rzi[b-hbm22jas4p] {
    font-size: 32px;
    color: #dc2626;
}

/* Print styles */
@media print {
    .no-print[b-hbm22jas4p] {
        display: none !important;
    }

    .offline-form-page[b-hbm22jas4p] {
        padding: 0;
    }

    .page-header[b-hbm22jas4p] {
        display: none;
    }

    .form-instructions[b-hbm22jas4p] {
        display: none;
    }

    .printable-form[b-hbm22jas4p] {
        border: none;
        padding: 0;
        box-shadow: none;
    }

    .form-section h3[b-hbm22jas4p] {
        background: none;
        padding: 0;
        border-bottom: 1px solid #000;
    }

    .text-area[b-hbm22jas4p] {
        border-color: #000;
    }

    .checkbox[b-hbm22jas4p] {
        border-color: #000;
    }

    .body-svg line[b-hbm22jas4p],
    .body-svg ellipse[b-hbm22jas4p] {
        stroke: #000;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .page-header[b-hbm22jas4p] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-hbm22jas4p] {
        width: 100%;
    }

    .header-actions button[b-hbm22jas4p] {
        flex: 1;
    }

    .printable-form[b-hbm22jas4p] {
        padding: 20px;
    }

    .form-row[b-hbm22jas4p] {
        flex-direction: column;
        gap: 0;
    }

    .form-field.half[b-hbm22jas4p] {
        flex: none;
    }

    .checkbox-group[b-hbm22jas4p] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Pages/PlatformAdmin.razor.rz.scp.css */
/* =================================================================
   PlatformAdmin.razor.css
   ================================================================= */

.platform-admin-page[b-2l1ucp17nd] {
    padding: 0;
    height: 100%;
    background-color: var(--background-light);
}

/* ── Modern Header ────────────────────────────────────────────── */
.modern-header[b-2l1ucp17nd] {
    position: relative;
    background: linear-gradient(135deg, #3891BB 0%, #2A6D8E 100%);
    color: white;
    padding: 2.5rem 2rem 2rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0;
    overflow: hidden;
}

.header-background[b-2l1ucp17nd] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.header-content[b-2l1ucp17nd] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-text[b-2l1ucp17nd] {
    flex: 1;
}

.page-title[b-2l1ucp17nd] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: black !important;
}

.title-icon[b-2l1ucp17nd] {
    font-size: 2rem;
}

.header-description[b-2l1ucp17nd] {
    color: black !important;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.header-actions[b-2l1ucp17nd] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.action-btn[b-2l1ucp17nd] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn.icon-only[b-2l1ucp17nd] {
    padding: 0.5rem;
    min-width: auto;
}

/* ── Content Area ─────────────────────────────────────────────── */
.admin-content[b-2l1ucp17nd] {
    padding: 0 2rem 2rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Stats Grid ───────────────────────────────────────────────── */
.stats-grid[b-2l1ucp17nd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-2l1ucp17nd] {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.stat-card[b-2l1ucp17nd]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.stat-card:hover[b-2l1ucp17nd] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.stat-card:hover[b-2l1ucp17nd]::before {
    width: 6px;
}

.stat-icon[b-2l1ucp17nd] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-content[b-2l1ucp17nd] {
    flex: 1;
}

.stat-content h3[b-2l1ucp17nd] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    line-height: 1;
}

.stat-content p[b-2l1ucp17nd] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.admin-tabs[b-2l1ucp17nd] {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

[b-2l1ucp17nd] .admin-tabs .rz-tabview-nav {
    border-bottom: 2px solid var(--border-color);
    background-color: var(--background-light);
    padding: 0 1rem;
}

[b-2l1ucp17nd] .admin-tabs .rz-tabview-nav li .rz-tabview-nav-link {
    color: var(--text-secondary);
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
}

[b-2l1ucp17nd] .admin-tabs .rz-tabview-nav li .rz-tabview-nav-link:hover {
    color: var(--primary);
    background-color: rgba(56, 145, 187, 0.05);
}

[b-2l1ucp17nd] .admin-tabs .rz-tabview-nav li.rz-state-active .rz-tabview-nav-link,
[b-2l1ucp17nd] .admin-tabs .rz-tabview-nav li .rz-tabview-nav-link.rz-state-active {
    color: var(--primary);
    background-color: white;
    border-bottom: 3px solid var(--primary);
    font-weight: 700;
}

[b-2l1ucp17nd] .admin-tabs .rz-tabview-panels {
    padding: 0;
    background-color: white;
    min-height: 400px;
}

.tab-content[b-2l1ucp17nd] {
    padding: 1.5rem 2rem 2rem 2rem;
}

/* ── Data Grids ───────────────────────────────────────────────── */
.admin-grid[b-2l1ucp17nd] {
    border: none;
}

[b-2l1ucp17nd] .admin-grid .rz-datatable-thead > tr > th {
    background-color: var(--background-light);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--border-color);
}

[b-2l1ucp17nd] .admin-grid .rz-datatable-data > tr > td {
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}

[b-2l1ucp17nd] .admin-grid .rz-datatable-data > tr:hover > td {
    background-color: rgba(56, 145, 187, 0.03);
}

[b-2l1ucp17nd] .admin-grid .rz-datatable-data > tr:last-child > td {
    border-bottom: none;
}

[b-2l1ucp17nd] .admin-grid .rz-pager {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Action buttons in grid rows */
.action-buttons[b-2l1ucp17nd] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

[b-2l1ucp17nd] .action-buttons .rz-button {
    border-radius: 8px;
    min-width: 36px;
    height: 36px;
}

/* Status badges */
.status-badge[b-2l1ucp17nd] {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Establishment type badge */
.type-badge[b-2l1ucp17nd] {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: var(--background-light);
    color: var(--text-secondary);
    font-weight: 500;
    border: 1px solid var(--border-color);
}

/* ── User Filter Bar ──────────────────────────────────────────── */
.user-filter-bar[b-2l1ucp17nd] {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

.filter-group label[b-2l1ucp17nd] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Loading / Error / Empty States ───────────────────────────── */
.loading-container[b-2l1ucp17nd] {
    text-align: center;
    padding: 4rem 2rem;
}

[b-2l1ucp17nd] .loading-container .rz-progressbar {
    max-width: 300px;
    margin: 0 auto;
    height: 6px;
    border-radius: 3px;
}

.loading-text[b-2l1ucp17nd] {
    margin-top: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.error-container[b-2l1ucp17nd] {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 400px;
    margin: 0 auto;
}

.error-container p[b-2l1ucp17nd] {
    margin: 1.25rem 0 1.5rem 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

.empty-state[b-2l1ucp17nd] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state p[b-2l1ucp17nd] {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .stats-grid[b-2l1ucp17nd] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .modern-header[b-2l1ucp17nd] {
        padding: 1.75rem 1rem 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .header-content[b-2l1ucp17nd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-2l1ucp17nd] {
        width: 100%;
    }

    .page-title[b-2l1ucp17nd] {
        font-size: 1.5rem;
    }

    .header-description[b-2l1ucp17nd] {
        font-size: 0.9rem;
    }

    .stats-grid[b-2l1ucp17nd] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card[b-2l1ucp17nd] {
        padding: 1.25rem;
    }

    .stat-icon[b-2l1ucp17nd] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .stat-content h3[b-2l1ucp17nd] {
        font-size: 1.5rem;
    }

    .admin-content[b-2l1ucp17nd] {
        padding: 0 1rem 1rem 1rem;
    }

    .tab-content[b-2l1ucp17nd] {
        padding: 1rem;
    }

    [b-2l1ucp17nd] .admin-tabs .rz-tabview-nav li .rz-tabview-nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .action-buttons[b-2l1ucp17nd] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .user-filter-bar[b-2l1ucp17nd] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .modern-header[b-2l1ucp17nd] {
        padding: 1.25rem 0.75rem 1rem 0.75rem;
    }

    .admin-content[b-2l1ucp17nd] {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }

    .page-title[b-2l1ucp17nd] {
        font-size: 1.25rem;
    }

    .stat-content h3[b-2l1ucp17nd] {
        font-size: 1.25rem;
    }

    .stat-content p[b-2l1ucp17nd] {
        font-size: 0.8rem;
    }
}
/* /Pages/ReportViewer.razor.rz.scp.css */
/* Report Viewer Page Styles */

.report-viewer-container[b-mcngwkrgad] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background-light);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* Enhanced Header Design */
.report-header[b-mcngwkrgad] {
    background: white;
    border-bottom: 2px solid var(--border-color);
    padding: 1.5rem 2rem;
    margin: 1rem 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    position: relative;
}

.report-header[b-mcngwkrgad]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.header-left[b-mcngwkrgad] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.btn-back[b-mcngwkrgad] {
    background: var(--secondary) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    flex-shrink: 0;
    transition: var(--transition);
    font-weight: 500 !important;
}

.btn-back:hover[b-mcngwkrgad] {
    background: var(--secondary-hover) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateX(-2px);
}

.report-title-section[b-mcngwkrgad] {
    flex: 1;
}

.report-title[b-mcngwkrgad] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.report-metadata[b-mcngwkrgad] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.report-status[b-mcngwkrgad] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(52, 168, 83, 0.1);
    color: var(--success);
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-icon[b-mcngwkrgad] {
    font-size: 1rem;
}

.report-timestamp[b-mcngwkrgad] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.header-controls[b-mcngwkrgad] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.control-group[b-mcngwkrgad] {
    display: flex;
    gap: 0.75rem;
}

/* Brand Guideline Button Overrides */
.control-group .rz-button.btn-primary[b-mcngwkrgad] {
    color: white !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    font-weight: 500 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition);
    box-shadow: none !important;
}

.control-group .rz-button.btn-primary:hover[b-mcngwkrgad] {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow) !important;
}

.control-group .rz-button.btn-primary:focus[b-mcngwkrgad] {
    box-shadow: 0 0 0 0.2rem rgba(56, 145, 187, 0.25) !important;
    outline: none !important;
}

.control-group .rz-button.btn-primary:active[b-mcngwkrgad] {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(0);
}

.control-group .rz-button.btn-secondary[b-mcngwkrgad] {
    background-color: var(--secondary) !important;
    color: var(--primary) !important;
    border-color: var(--border-color) !important;
    font-weight: 500 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition);
    box-shadow: none !important;
}

.control-group .rz-button.btn-secondary:hover[b-mcngwkrgad] {
    background-color: var(--secondary-hover) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow) !important;
}

.control-group .rz-button.btn-secondary:focus[b-mcngwkrgad] {
    box-shadow: 0 0 0 0.2rem rgba(56, 145, 187, 0.15) !important;
    outline: none !important;
}

.control-group .rz-button.btn-secondary:active[b-mcngwkrgad] {
    background-color: var(--primary-light) !important;
    transform: translateY(0);
}

/* Enhanced Content Area */
.report-content[b-mcngwkrgad] {
    flex: 1;
    overflow: hidden;
    position: relative;
    margin: 1rem;
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Professional Loading State */
.loading-container[b-mcngwkrgad] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}

.loading-card[b-mcngwkrgad] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
}

.loading-icon[b-mcngwkrgad] {
    margin-bottom: 2rem;
}

.loading-card h3[b-mcngwkrgad] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.loading-card p[b-mcngwkrgad] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Professional Error State */
.error-container[b-mcngwkrgad] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}

.error-card[b-mcngwkrgad] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    border: 2px solid var(--error-light, #fecaca);
}

.error-icon[b-mcngwkrgad] {
    width: 64px;
    height: 64px;
    background: var(--error-light, #fecaca);
    color: var(--error);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.error-card h3[b-mcngwkrgad] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.error-card p[b-mcngwkrgad] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.error-actions[b-mcngwkrgad] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Error Action Button Overrides */
.error-actions .rz-button.btn-primary[b-mcngwkrgad] {
    color: white !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    font-weight: 500 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition);
    box-shadow: none !important;
}

.error-actions .rz-button.btn-primary:hover[b-mcngwkrgad] {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow) !important;
}

.error-actions .rz-button.btn-secondary[b-mcngwkrgad] {
    background-color: var(--secondary) !important;
    color: var(--primary) !important;
    border-color: var(--border-color) !important;
    font-weight: 500 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition);
    box-shadow: none !important;
}

.error-actions .rz-button.btn-secondary:hover[b-mcngwkrgad] {
    background-color: var(--secondary-hover) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow) !important;
}

/* Enhanced PDF Container */
.pdf-container[b-mcngwkrgad] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pdf-toolbar[b-mcngwkrgad] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.toolbar-left[b-mcngwkrgad] {
    display: flex;
    align-items: center;
}

.toolbar-label[b-mcngwkrgad] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.toolbar-right[b-mcngwkrgad] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-mcngwkrgad] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: var(--secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--primary) !important;
    transition: var(--transition);
    font-weight: 500 !important;
}

.btn-icon:hover[b-mcngwkrgad] {
    background: var(--secondary-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.pdf-viewer[b-mcngwkrgad] {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#pdf-frame[b-mcngwkrgad] {
    border: none;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .report-header[b-mcngwkrgad] {
        margin: 0.5rem 0.5rem 0;
        padding: 1.25rem 1.5rem;
    }
    
    .report-content[b-mcngwkrgad] {
        margin: 0.5rem;
    }
}

@media (max-width: 768px) {
    .report-header[b-mcngwkrgad] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
        padding: 1.25rem 1rem;
        margin: 0.5rem 0.5rem 0;
    }

    .header-left[b-mcngwkrgad] {
        gap: 1rem;
    }

    .report-title[b-mcngwkrgad] {
        font-size: 1.5rem;
    }

    .report-metadata[b-mcngwkrgad] {
        gap: 1rem;
    }

    .control-group[b-mcngwkrgad] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .pdf-toolbar[b-mcngwkrgad] {
        padding: 0.75rem 1rem;
    }
    
    .toolbar-right[b-mcngwkrgad] {
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .header-left[b-mcngwkrgad] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .report-title[b-mcngwkrgad] {
        font-size: 1.25rem;
    }

    .report-metadata[b-mcngwkrgad] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .control-group[b-mcngwkrgad] {
        width: 100%;
        gap: 0.5rem;
    }
    
    .control-group .rz-button[b-mcngwkrgad] {
        flex: 1;
        min-width: 0;
        font-size: 0.875rem !important;
        padding: 0.625rem 1rem !important;
    }
    
    .control-group .rz-button.btn-primary[b-mcngwkrgad] {
        color: white !important;
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
    }
    
    .control-group .rz-button.btn-secondary[b-mcngwkrgad] {
        background-color: var(--secondary) !important;
        color: var(--primary) !important;
        border-color: var(--border-color) !important;
    }
    
    .loading-card[b-mcngwkrgad], .error-card[b-mcngwkrgad] {
        padding: 2rem 1rem;
        margin: 1rem;
    }
}

/* Print Styles */
@media print {
    .report-header[b-mcngwkrgad], .pdf-toolbar[b-mcngwkrgad] {
        display: none;
    }

    .report-content[b-mcngwkrgad] {
        height: 100vh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    .pdf-container[b-mcngwkrgad] {
        border-radius: 0;
    }

    .pdf-viewer[b-mcngwkrgad] {
        height: 100vh;
    }
}

/* Accessibility Enhancements */
.btn-back:focus[b-mcngwkrgad] {
    box-shadow: 0 0 0 0.2rem rgba(56, 145, 187, 0.25) !important;
    outline: none !important;
}

.btn-icon:focus[b-mcngwkrgad] {
    box-shadow: 0 0 0 0.2rem rgba(56, 145, 187, 0.15) !important;
    outline: none !important;
}

.error-actions .rz-button:focus[b-mcngwkrgad] {
    box-shadow: 0 0 0 0.2rem rgba(56, 145, 187, 0.25) !important;
    outline: none !important;
}

/* Enhanced Animations */
.pdf-container[b-mcngwkrgad] {
    animation: slideUp-b-mcngwkrgad 0.3s ease-out;
}

.loading-card[b-mcngwkrgad], .error-card[b-mcngwkrgad] {
    animation: fadeIn-b-mcngwkrgad 0.4s ease-out;
}

@keyframes slideUp-b-mcngwkrgad {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-mcngwkrgad {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Professional Loading Animation */
.loading-icon .rz-progressbar-circular[b-mcngwkrgad] {
    width: 64px !important;
    height: 64px !important;
}

/* Status Badge Variants */
.report-status.processing[b-mcngwkrgad] {
    background: rgba(251, 188, 5, 0.1);
    color: var(--warning);
}

.report-status.error[b-mcngwkrgad] {
    background: rgba(234, 67, 53, 0.1);
    color: var(--error);
}

/* Toolbar Enhancements */
.pdf-toolbar[b-mcngwkrgad] {
    backdrop-filter: blur(10px);
    background: rgba(var(--background-light-rgb, 248, 250, 252), 0.9);
}

.toolbar-label[b-mcngwkrgad]::before {
    content: '📄';
    margin-right: 0.5rem;
    font-size: 1rem;
}
/* /Pages/Settings.razor.rz.scp.css */
/* =================================================================
   Settings.razor.css - PROFESSIONAL THEME MATCHING
   Comprehensive settings page styling
   ================================================================= */

/* Settings Page Root */
.settings-page[b-tlgpz4kmax] {
    padding: 0;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Modern Header - Matches Dashboard pattern */
.modern-header[b-tlgpz4kmax] {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(56, 145, 187, 0.15);
    margin: 20px;
}

.header-background[b-tlgpz4kmax] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.modern-header .header-content[b-tlgpz4kmax] {
    position: relative;
    z-index: 1;
    padding: 28px;
    color: white;
}

.page-title[b-tlgpz4kmax] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: black;
    letter-spacing: -0.025em;
}

.title-icon[b-tlgpz4kmax] {
    font-size: 2rem;
    opacity: 0.9;
}

.header-description[b-tlgpz4kmax] {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
    color: black;
    font-weight: 400;
}

/* Settings Content */
.settings-content[b-tlgpz4kmax] {
    padding: 20px;
}

/* Loading State */
.loading-container[b-tlgpz4kmax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.loading-container p[b-tlgpz4kmax] {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Error Card */
.error-card[b-tlgpz4kmax] {
    text-align: center;
    padding: 3rem 2rem;
}

.error-card h3[b-tlgpz4kmax] {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.error-card p[b-tlgpz4kmax] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Tabs Styling */
:deep(.settings-tabs)[b-tlgpz4kmax] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

:deep(.settings-tabs .rz-tabview-nav)[b-tlgpz4kmax] {
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
    padding: 0 1rem;
}

:deep(.settings-tabs .rz-tabview-nav .rz-tabview-nav-link)[b-tlgpz4kmax] {
    color: var(--text-secondary);
    border: none;
    padding: 1rem 1.5rem;
    font-weight: 500;
    transition: var(--transition);
}

:deep(.settings-tabs .rz-tabview-nav .rz-tabview-nav-link:hover)[b-tlgpz4kmax] {
    color: var(--primary);
    background-color: rgba(56, 145, 187, 0.05);
}

:deep(.settings-tabs .rz-tabview-nav .rz-tabview-nav-link.rz-state-active)[b-tlgpz4kmax] {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
    background-color: white;
}

:deep(.settings-tabs .rz-tabview-panels)[b-tlgpz4kmax] {
    padding: 0;
    background-color: white;
    min-height: 500px;
}

/* Tab Content */
.tab-content[b-tlgpz4kmax] {
    padding: 2rem;
}

/* Section Header */
.section-header[b-tlgpz4kmax] {
    margin-bottom: 2rem;
}

.section-header h2[b-tlgpz4kmax] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
}

.section-icon[b-tlgpz4kmax] {
    font-size: 1.75rem;
    color: black;
}

.section-description[b-tlgpz4kmax] {
    color: black;
    font-size: 0.95rem;
    margin: 0;
}

/* Settings Cards */
.settings-card[b-tlgpz4kmax] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.card-title[b-tlgpz4kmax] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.card-description[b-tlgpz4kmax] {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 1.5rem 0;
}

/* Form Styling */
.form-grid[b-tlgpz4kmax] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group[b-tlgpz4kmax] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width[b-tlgpz4kmax] {
    grid-column: 1 / -1;
}

.form-group label[b-tlgpz4kmax] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.help-text[b-tlgpz4kmax] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Form Actions */
.form-actions[b-tlgpz4kmax] {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Notification Options */
.notification-options[b-tlgpz4kmax] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.notification-item[b-tlgpz4kmax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.notification-item:hover[b-tlgpz4kmax] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(56, 145, 187, 0.1);
}

.notification-info[b-tlgpz4kmax] {
    flex: 1;
}

.notification-info strong[b-tlgpz4kmax] {
    color: var(--text-primary);
    font-size: 1rem;
    display: block;
    margin-bottom: 0.25rem;
}

.notification-info p[b-tlgpz4kmax] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Session Info */
.session-info[b-tlgpz4kmax] {
    margin-bottom: 2rem;
}

.session-item[b-tlgpz4kmax] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.session-item.current[b-tlgpz4kmax] {
    border-color: var(--primary);
    background: rgba(56, 145, 187, 0.05);
}

.session-icon[b-tlgpz4kmax] {
    font-size: 2rem;
    color: var(--primary);
}

.session-details[b-tlgpz4kmax] {
    flex: 1;
}

.session-details strong[b-tlgpz4kmax] {
    color: var(--text-primary);
    font-size: 1rem;
    display: block;
    margin-bottom: 0.25rem;
}

.session-details p[b-tlgpz4kmax] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.25rem 0;
}

.session-details small[b-tlgpz4kmax] {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Info Grid */
.info-grid[b-tlgpz4kmax] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.info-item[b-tlgpz4kmax] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item label[b-tlgpz4kmax] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item p[b-tlgpz4kmax] {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-page[b-tlgpz4kmax] {
        padding: 0;
    }

    .modern-header[b-tlgpz4kmax] {
        margin: 1rem;
        border-radius: 16px;
    }

    .modern-header .header-content[b-tlgpz4kmax] {
        padding: 1.5rem;
    }

    .page-title[b-tlgpz4kmax] {
        font-size: 1.75rem;
    }

    .title-icon[b-tlgpz4kmax] {
        font-size: 1.5rem;
    }

    /* Hide description text on mobile — saves vertical space */
    .header-description[b-tlgpz4kmax],
    .section-description[b-tlgpz4kmax] {
        display: none;
    }

    .section-header[b-tlgpz4kmax] {
        margin-bottom: 1.25rem;
    }

    .settings-content[b-tlgpz4kmax] {
        padding: 1rem;
    }

    .tab-content[b-tlgpz4kmax] {
        padding: 1.5rem 1rem;
    }

    .form-grid[b-tlgpz4kmax],
    .info-grid[b-tlgpz4kmax] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-tlgpz4kmax] {
        grid-column: 1;
    }

    .settings-card[b-tlgpz4kmax] {
        padding: 1.5rem;
    }

    .form-actions[b-tlgpz4kmax] {
        flex-direction: column;
    }

    :deep(.settings-tabs .rz-tabview-nav)[b-tlgpz4kmax] {
        padding: 0 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    :deep(.settings-tabs .rz-tabview-nav::-webkit-scrollbar)[b-tlgpz4kmax] {
        display: none;
    }

    :deep(.settings-tabs .rz-tabview-nav li)[b-tlgpz4kmax] {
        flex-shrink: 0;
    }

    :deep(.settings-tabs .rz-tabview-nav .rz-tabview-nav-link)[b-tlgpz4kmax] {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .page-title[b-tlgpz4kmax] {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .header-description[b-tlgpz4kmax] {
        font-size: 0.875rem;
        color:black;
    }

    .section-header h2[b-tlgpz4kmax] {
        font-size: 1.25rem;
    }

    .settings-card[b-tlgpz4kmax] {
        padding: 1rem;
    }

    .notification-item[b-tlgpz4kmax] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .session-item[b-tlgpz4kmax] {
        flex-direction: column;
        align-items: flex-start;
    }

    :deep(.settings-tabs .rz-tabview-nav .rz-tabview-nav-link)[b-tlgpz4kmax] {
        padding: 0.75rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Radzen Component Overrides */
:deep(.rz-textbox)[b-tlgpz4kmax],
:deep(.rz-dropdown)[b-tlgpz4kmax],
:deep(.rz-datepicker)[b-tlgpz4kmax],
:deep(.rz-password)[b-tlgpz4kmax] {
    border-color: #e2e8f0;
}

:deep(.rz-textbox:focus)[b-tlgpz4kmax],
:deep(.rz-dropdown:focus)[b-tlgpz4kmax],
:deep(.rz-datepicker:focus)[b-tlgpz4kmax],
:deep(.rz-password:focus)[b-tlgpz4kmax] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 145, 187, 0.1);
}

:deep(.rz-switch)[b-tlgpz4kmax] {
    --rz-switch-on-background: var(--primary);
}

/* ========================================
   Establishment Administration Tab
   ======================================== */

.card-header-with-action[b-tlgpz4kmax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.card-header-with-action .card-title[b-tlgpz4kmax] {
    margin-bottom: 0.25rem;
}

.card-header-with-action .card-description[b-tlgpz4kmax] {
    margin-bottom: 0;
}

/* Empty State */
.empty-state[b-tlgpz4kmax] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.empty-state p[b-tlgpz4kmax] {
    font-size: 1rem;
    margin: 1rem 0 0.5rem 0;
    color: var(--text-primary);
}

.empty-state small[b-tlgpz4kmax] {
    font-size: 0.875rem;
}

/* Emergency Contacts List */
.emergency-contacts-list[b-tlgpz4kmax] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.emergency-contact-item[b-tlgpz4kmax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.emergency-contact-item:hover[b-tlgpz4kmax] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(56, 145, 187, 0.1);
}

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

.contact-header[b-tlgpz4kmax] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.contact-name[b-tlgpz4kmax] {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.contact-type-badge[b-tlgpz4kmax] {
    font-size: 0.75rem !important;
}

.hours-badge[b-tlgpz4kmax] {
    font-size: 0.7rem !important;
}

.contact-details[b-tlgpz4kmax] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.contact-role[b-tlgpz4kmax] {
    font-weight: 500;
    color: var(--text-primary);
}

.contact-phone[b-tlgpz4kmax],
.contact-email[b-tlgpz4kmax] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.contact-notes[b-tlgpz4kmax] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    color: var(--text-secondary);
    font-style: italic;
}

.contact-actions[b-tlgpz4kmax] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Responsive adjustments for establishment tab */
@media (max-width: 768px) {
    .card-header-with-action[b-tlgpz4kmax] {
        flex-direction: column;
    }

    .emergency-contact-item[b-tlgpz4kmax] {
        flex-direction: column;
        gap: 1rem;
    }

    .contact-actions[b-tlgpz4kmax] {
        align-self: flex-end;
    }

    .contact-details[b-tlgpz4kmax] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Pages/SystemStatus.razor.rz.scp.css */
.system-status-page[b-h4pc8tfvnp] {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Status Banner as Header */
.status-banner[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    color: white;
    position: relative;
}

.banner-actions[b-h4pc8tfvnp] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.banner-btn[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.banner-btn:hover[b-h4pc8tfvnp] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.banner-btn:disabled[b-h4pc8tfvnp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.banner-btn .rzi[b-h4pc8tfvnp] {
    font-size: 20px;
}

.status-banner.online[b-h4pc8tfvnp] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.status-banner.degraded[b-h4pc8tfvnp] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.status-banner.offline[b-h4pc8tfvnp] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.status-icon[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 28px;
}

.status-info[b-h4pc8tfvnp] {
    flex: 1;
}

.status-title[b-h4pc8tfvnp] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-message[b-h4pc8tfvnp] {
    font-size: 14px;
    opacity: 0.9;
}

.offline-time[b-h4pc8tfvnp] {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* Status Grid */
.status-grid[b-h4pc8tfvnp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    flex: 1;
}

.status-card[b-h4pc8tfvnp] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-header[b-h4pc8tfvnp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.card-header h3[b-h4pc8tfvnp] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.service-count[b-h4pc8tfvnp] {
    font-size: 12px;
    color: #6b7280;
}

.card-content[b-h4pc8tfvnp] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

/* Service List */
.service-list[b-h4pc8tfvnp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-item[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid transparent;
}

.service-item.healthy[b-h4pc8tfvnp] {
    border-left-color: #10b981;
}

.service-item.recovering[b-h4pc8tfvnp] {
    border-left-color: #f59e0b;
}

.service-item.failed[b-h4pc8tfvnp] {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.service-indicator[b-h4pc8tfvnp] {
    flex-shrink: 0;
}

.indicator-dot[b-h4pc8tfvnp] {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.service-item.healthy .indicator-dot[b-h4pc8tfvnp] {
    background: #10b981;
}

.service-item.recovering .indicator-dot[b-h4pc8tfvnp] {
    background: #f59e0b;
    animation: pulse-b-h4pc8tfvnp 1.5s infinite;
}

.service-item.failed .indicator-dot[b-h4pc8tfvnp] {
    background: #ef4444;
}

@keyframes pulse-b-h4pc8tfvnp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.service-details[b-h4pc8tfvnp] {
    flex: 1;
}

.service-name[b-h4pc8tfvnp] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.service-state[b-h4pc8tfvnp] {
    font-size: 12px;
    color: #6b7280;
}

.reset-btn[b-h4pc8tfvnp],
.action-btn[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-btn:hover[b-h4pc8tfvnp],
.action-btn:hover[b-h4pc8tfvnp] {
    background: #f3f4f6;
    color: #111827;
}

.action-btn.cancel:hover[b-h4pc8tfvnp] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Operation List */
.operation-list[b-h4pc8tfvnp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.operation-item[b-h4pc8tfvnp] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.operation-item.pending[b-h4pc8tfvnp] {
    border-left: 4px solid #6366f1;
}

.operation-item.processing[b-h4pc8tfvnp] {
    border-left: 4px solid #f59e0b;
}

.operation-item.completed[b-h4pc8tfvnp] {
    border-left: 4px solid #10b981;
    opacity: 0.7;
}

.operation-item.failed[b-h4pc8tfvnp] {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}

.operation-item.cancelled[b-h4pc8tfvnp] {
    border-left: 4px solid #9ca3af;
    opacity: 0.5;
}

.operation-icon[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 8px;
    color: #6b7280;
    flex-shrink: 0;
}

.operation-details[b-h4pc8tfvnp] {
    flex: 1;
    min-width: 0;
}

.operation-type[b-h4pc8tfvnp] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
}

.operation-meta[b-h4pc8tfvnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}

.priority[b-h4pc8tfvnp] {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
}

.priority.critical[b-h4pc8tfvnp] {
    background: #fef2f2;
    color: #dc2626;
}

.priority.high[b-h4pc8tfvnp] {
    background: #fff7ed;
    color: #ea580c;
}

.priority.normal[b-h4pc8tfvnp] {
    background: #eff6ff;
    color: #2563eb;
}

.priority.low[b-h4pc8tfvnp] {
    background: #f3f4f6;
    color: #6b7280;
}

.operation-error[b-h4pc8tfvnp] {
    margin-top: 8px;
    padding: 8px;
    background: #fef2f2;
    border-radius: 4px;
    font-size: 12px;
    color: #dc2626;
}

.operation-actions[b-h4pc8tfvnp] {
    display: flex;
    gap: 4px;
}

/* Draft List */
.draft-list[b-h4pc8tfvnp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draft-item[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.draft-icon[b-h4pc8tfvnp] {
    color: #6b7280;
}

.draft-details[b-h4pc8tfvnp] {
    flex: 1;
}

.draft-name[b-h4pc8tfvnp] {
    font-size: 14px;
    color: #374151;
}

/* Quick Actions */
.quick-actions[b-h4pc8tfvnp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-action[b-h4pc8tfvnp] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.quick-action:hover[b-h4pc8tfvnp] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.quick-action .rzi[b-h4pc8tfvnp] {
    color: #6b7280;
}

/* Empty State */
.empty-state[b-h4pc8tfvnp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #9ca3af;
    text-align: center;
}

.empty-state .rzi[b-h4pc8tfvnp] {
    font-size: 48px;
    margin-bottom: 12px;
    color: #d1d5db;
}

/* Help Section */
.help-section[b-h4pc8tfvnp] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.help-section h3[b-h4pc8tfvnp] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.help-grid[b-h4pc8tfvnp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.help-item[b-h4pc8tfvnp] {
    display: flex;
    gap: 12px;
}

.indicator[b-h4pc8tfvnp] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.indicator.online[b-h4pc8tfvnp] {
    background: #10b981;
}

.indicator.degraded[b-h4pc8tfvnp] {
    background: #f59e0b;
}

.indicator.offline[b-h4pc8tfvnp] {
    background: #ef4444;
}

.help-item strong[b-h4pc8tfvnp] {
    display: block;
    font-size: 14px;
    color: #111827;
    margin-bottom: 4px;
}

.help-item p[b-h4pc8tfvnp] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .system-status-page[b-h4pc8tfvnp] {
        padding: 12px;
    }

    .status-banner[b-h4pc8tfvnp] {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .status-icon[b-h4pc8tfvnp] {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .status-info[b-h4pc8tfvnp] {
        flex: 1;
        min-width: 150px;
    }

    .status-title[b-h4pc8tfvnp] {
        font-size: 18px;
    }

    .banner-actions[b-h4pc8tfvnp] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .offline-time[b-h4pc8tfvnp] {
        order: 3;
        width: 100%;
        text-align: center;
    }

    .status-grid[b-h4pc8tfvnp] {
        grid-template-columns: 1fr;
    }

    .help-grid[b-h4pc8tfvnp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .status-banner[b-h4pc8tfvnp] {
        padding: 12px;
    }

    .status-icon[b-h4pc8tfvnp] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .status-title[b-h4pc8tfvnp] {
        font-size: 16px;
    }

    .status-message[b-h4pc8tfvnp] {
        font-size: 13px;
    }

    .banner-btn[b-h4pc8tfvnp] {
        width: 36px;
        height: 36px;
    }

    .banner-btn .rzi[b-h4pc8tfvnp] {
        font-size: 18px;
    }
}
/* /Pages/Unauthorized.razor.rz.scp.css */
.unauthorized-container[b-a4xrmdzqxb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px);
    padding: 2rem;
    background: var(--rz-base-background-color, #f5f5f5);
}

.unauthorized-card[b-a4xrmdzqxb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.unauthorized-icon[b-a4xrmdzqxb] {
    margin-bottom: 1.5rem;
}

.unauthorized-title[b-a4xrmdzqxb] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--rz-text-color, #333);
    margin-bottom: 1rem;
}

.unauthorized-message[b-a4xrmdzqxb] {
    font-size: 1.1rem;
    color: var(--rz-text-secondary-color, #666);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.unauthorized-actions[b-a4xrmdzqxb] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.permission-details[b-a4xrmdzqxb] {
    background: var(--rz-base-100, #f9f9f9);
    border: 1px solid var(--rz-base-300, #e0e0e0);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.permission-details h3[b-a4xrmdzqxb] {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color, #666);
    margin-bottom: 0.5rem;
}

.permission-details code[b-a4xrmdzqxb] {
    display: inline-block;
    background: white;
    color: var(--rz-danger, #dc3545);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .unauthorized-card[b-a4xrmdzqxb] {
        padding: 2rem 1.5rem;
    }

    .unauthorized-title[b-a4xrmdzqxb] {
        font-size: 1.5rem;
    }

    .unauthorized-message[b-a4xrmdzqxb] {
        font-size: 1rem;
    }

    .unauthorized-actions[b-a4xrmdzqxb] {
        flex-direction: column;
        width: 100%;
    }

    .unauthorized-actions button[b-a4xrmdzqxb] {
        width: 100%;
    }
}
/* /Pages/Verification.razor.rz.scp.css */
/* CSS FOR THE LOGIN / REGISTER  */
.login-container[b-43lawvy9ly] {
    display: flex;
    height: 100vh;
}

.image-section[b-43lawvy9ly] {
    flex: 1;
    background-image: url('/images/login/Safeguarding Background.png');
    background-size: cover;
    background-position: center;
}

.form-section[b-43lawvy9ly] {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
}

.form-wrapper[b-43lawvy9ly] {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

.form-title[b-43lawvy9ly] {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    color: #333;
}

.form-group[b-43lawvy9ly] {
    margin-bottom: 1rem;
}

[b-43lawvy9ly] .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    outline: none;
    transition: all 0.3s ease;
}

    [b-43lawvy9ly] .form-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.forgot-password[b-43lawvy9ly] {
    text-align: right;
    margin-bottom: 1rem;
}

    .forgot-password a[b-43lawvy9ly] {
        color: #3891BB;
        font-size: 0.875rem;
        text-decoration: none;
    }

        .forgot-password a:hover[b-43lawvy9ly] {
            text-decoration: underline;
        }

.sign-in-button[b-43lawvy9ly] {
    width: 100%;
    padding: 0.75rem;
    background-color: #3891BB;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .sign-in-button:hover[b-43lawvy9ly] {
        background-color: #2563eb;
    }

.create-account[b-43lawvy9ly] {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
}

    .create-account a[b-43lawvy9ly] {
        color: #3891BB;
        text-decoration: none;
    }

        .create-account a:hover[b-43lawvy9ly] {
            text-decoration: underline;
        }

.alert[b-43lawvy9ly] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.alert-danger[b-43lawvy9ly] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

[b-43lawvy9ly] .validation-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* CSS FOR THE CODE CONFIRMATION */
.confirmation-message[b-43lawvy9ly] {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #4b5563;
    font-size: 0.875rem;
}

.resend-code[b-43lawvy9ly] {
    text-align: center;
    margin: 1rem 0;
    font-size: 0.875rem;
}

    .resend-code a[b-43lawvy9ly] {
        color: #3b82f6;
        text-decoration: none;
    }

        .resend-code a:hover[b-43lawvy9ly] {
            text-decoration: underline;
        }

.alert-success[b-43lawvy9ly] {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* Update existing alert class for consistent styling */
.alert[b-43lawvy9ly] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* Optional: Add animation for form transitions */
.form-wrapper[b-43lawvy9ly] {
    animation: fadeIn-b-43lawvy9ly 0.3s ease-in-out;
}

@keyframes fadeIn-b-43lawvy9ly {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Optional: Add focus styles for the verification code input */
[b-43lawvy9ly] .form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Optional: Style for back to login link */
.back-to-login[b-43lawvy9ly] {
    text-align: center;
    margin-top: 1rem;
}

    .back-to-login a[b-43lawvy9ly] {
        color: #6b7280;
        text-decoration: none;
        font-size: 0.875rem;
    }

        .back-to-login a:hover[b-43lawvy9ly] {
            color: #3b82f6;
            text-decoration: underline;
        }

.account-type-toggle[b-43lawvy9ly] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
}

.toggle-option[b-43lawvy9ly] {
    flex: 1;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

    .toggle-option:hover[b-43lawvy9ly] {
        background-color: rgba(59, 130, 246, 0.1);
    }

    .toggle-option.active[b-43lawvy9ly] {
        background-color: #fff;
        color: #3b82f6;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
/* /Shared/LoginLayout.razor.rz.scp.css */
/* Mobile-First Login Layout */
.login-layout[b-ct3ifr0ysj] {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.page[b-ct3ifr0ysj] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-ct3ifr0ysj] {
    flex: 1;
    width: 100%;
}

.sidebar[b-ct3ifr0ysj] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ct3ifr0ysj] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ct3ifr0ysj] {
        display: none;
    }

    .top-row.auth[b-ct3ifr0ysj] {
        justify-content: space-between;
    }

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

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

    .sidebar[b-ct3ifr0ysj] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

    .top-row[b-ct3ifr0ysj], article[b-ct3ifr0ysj] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* Skip to content link - visible only on keyboard focus for screen readers */
.skip-to-content[b-z1miuswkfv] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10001;
    padding: 0.5rem 1rem;
    background: var(--primary, #3891BB);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
}

.skip-to-content:focus[b-z1miuswkfv] {
    left: 0;
}

.page[b-z1miuswkfv] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-row[b-z1miuswkfv] {
    height: 3.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-bottom: 1px solid var(--primary-dark);
    box-shadow: 0 2px 8px rgba(56, 145, 187, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 1000;
}

.left-section[b-z1miuswkfv] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 200px;
}

.left-section h2[b-z1miuswkfv] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.establishment-badge[b-z1miuswkfv] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

.middle-section[b-z1miuswkfv] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: 0 var(--spacing-xl);
}

.search-container[b-z1miuswkfv] {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 2px;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.search-container:focus-within[b-z1miuswkfv] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

[b-z1miuswkfv] .search-container .rz-textbox {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 14px;
    color: white;
}

[b-z1miuswkfv] .search-container .rz-textbox:focus {
    outline: none;
    box-shadow: none;
}

[b-z1miuswkfv] .search-container .rz-textbox::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

[b-z1miuswkfv] .search-container .rz-button {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    min-width: 36px;
    height: 32px;
    padding: 0;
    margin: 0;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

[b-z1miuswkfv] .search-container .rz-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.right-section[b-z1miuswkfv] {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    min-width: 120px;
    justify-content: flex-end;
}

.user-profile[b-z1miuswkfv] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: var(--spacing-sm);
    backdrop-filter: blur(8px);
}

.user-profile:hover[b-z1miuswkfv] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.user-avatar[b-z1miuswkfv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-info[b-z1miuswkfv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-name[b-z1miuswkfv] {
    font-size: 13px;
    font-weight: 600;
    color: white;
    line-height: 1;
}

.user-role[b-z1miuswkfv] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
    margin-top: 2px;
}

[b-z1miuswkfv] .rz-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Top bar button styles */
[b-z1miuswkfv] .top-row .rz-button {
    border-radius: 8px;
    padding: 8px;
    min-width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

[b-z1miuswkfv] .top-row .rz-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[b-z1miuswkfv] .top-row .rz-button.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
}

[b-z1miuswkfv] .top-row .rz-button i {
    font-size: 18px;
}

main[b-z1miuswkfv] {
    flex: 1;
    overflow: auto;
}

/* Hamburger Menu Button (mobile only) */
.hamburger-btn[b-z1miuswkfv] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    padding: 0;
    flex-shrink: 0;
}

.hamburger-btn:hover[b-z1miuswkfv] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Mobile Overlay Backdrop */
.mobile-overlay[b-z1miuswkfv] {
    display: none;
}

/* Responsive design for top bar and mobile navigation */
@media (max-width: 768px) {
    .top-row[b-z1miuswkfv] {
        padding: 0 var(--spacing-md);
        height: 3.5rem;
    }

    .left-section h2[b-z1miuswkfv] {
        font-size: 1.1rem;
    }

    /* Show hamburger button on mobile */
    .hamburger-btn[b-z1miuswkfv] {
        display: flex;
    }

    /* Show mobile overlay backdrop */
    .mobile-overlay[b-z1miuswkfv] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        backdrop-filter: blur(2px);
    }

    /* .desktop-only / .mobile-only are now in global site.css
       so they also apply to Radzen-rendered elements (e.g. RadzenButton). */

    .right-section[b-z1miuswkfv] {
        gap: var(--spacing-xs);
    }

    /* Adjust body padding for mobile */
    [b-z1miuswkfv] .rz-body {
        padding: 12px !important;
    }

    /* Layout height — no mobile nav bar offset */
    [b-z1miuswkfv] .rz-layout {
        height: calc(100vh - 3.5rem) !important;
    }

    /* Hide scrollbar on mobile while keeping scroll functionality */
    main[b-z1miuswkfv] {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    main[b-z1miuswkfv]::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
}

@media (max-width: 480px) {
    .top-row[b-z1miuswkfv] {
        padding: 0 var(--spacing-sm);
    }

    .left-section h2[b-z1miuswkfv] {
        font-size: 1rem;
    }

    .right-section[b-z1miuswkfv] {
        gap: 4px;
    }

    .user-profile[b-z1miuswkfv] {
        padding: 4px 8px;
        margin-left: 4px;
    }

    .user-avatar[b-z1miuswkfv] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* Even more compact mobile padding */
    [b-z1miuswkfv] .rz-body {
        padding: 8px !important;
    }
}

/* MainLayout specific styles */