@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /Src/Presentation/Areas/Admin/Components/Catalog/CatalogModal.razor.rz.scp.css */
/* Catalog Modal - Modal-specific styles only */
/* Form styles come from aa-admin.css for global admin use */

/* Modal Overlay */
.modal-overlay[b-avv19e3q2z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--aa-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-2);
    animation: modalOverlayFadeIn-b-avv19e3q2z var(--aa-transition-fast) ease-out;
}

@keyframes modalOverlayFadeIn-b-avv19e3q2z {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container - Compact Design */
.modal-container[b-avv19e3q2z] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-avv19e3q2z var(--aa-transition-base) ease-out;
}

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

/* Modal Header - Admin Gradient Styling */
.modal-header[b-avv19e3q2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
}

.modal-title[b-avv19e3q2z] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: #2d1b49;
    margin: 0;
}

.modal-title svg[b-avv19e3q2z] {
    color: #2d1b49;
    width: 20px;
    height: 20px;
}

.modal-close-btn[b-avv19e3q2z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(45, 27, 73, 0.3);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--aa-border-radius-sm);
    color: #2d1b49;
    cursor: pointer;
    transition: all var(--aa-transition-fast) ease;
    font-weight: var(--aa-font-weight-semibold);
}

.modal-close-btn:hover[b-avv19e3q2z] {
    background: #fff9c4;
    border-color: #b8a9d9;
    color: #2d1b49;
    transform: scale(1.05);
}

.modal-close-btn svg[b-avv19e3q2z] {
    width: 16px;
    height: 16px;
}

/* Modal Content - Compact Scrolling */
.modal-content[b-avv19e3q2z] {
    flex: 1;
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    max-height: calc(92vh - 110px);
}

/* Loading and Error States - Compact */
.modal-loading[b-avv19e3q2z],
.modal-error[b-avv19e3q2z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-6);
    font-size: var(--aa-font-size-sm);
}

.modal-loading[b-avv19e3q2z] {
    color: #b8a9d9;
}

.modal-error[b-avv19e3q2z] {
    color: var(--aa-danger);
    background: color-mix(in srgb, var(--aa-danger) 8%, transparent);
    border-radius: var(--aa-border-radius-lg);
    border: 1px solid color-mix(in srgb, var(--aa-danger) 15%, transparent);
}

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

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

/* Modal Form - Tight Spacing */
.modal-form[b-avv19e3q2z] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-3);
}

/* Workflow Actions */
.workflow-actions[b-avv19e3q2z] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aa-spacing-2);
    margin-top: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    border-top: 1px solid var(--aa-medium-gray);
}

.admin-btn-sm[b-avv19e3q2z] {
    font-size: var(--aa-font-size-xs);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    white-space: nowrap;
}

.btn-success[b-avv19e3q2z] {
    background: #28a745;
    color: var(--aa-white);
}

.btn-success:hover:not(:disabled)[b-avv19e3q2z] {
    background: #218838;
}

.btn-info[b-avv19e3q2z] {
    background: #17a2b8;
    color: var(--aa-white);
}

.btn-info:hover:not(:disabled)[b-avv19e3q2z] {
    background: #138496;
}

.btn-warning[b-avv19e3q2z] {
    background: #ffc107;
    color: #212529;
}

.btn-warning:hover:not(:disabled)[b-avv19e3q2z] {
    background: #e0a800;
}

/* Modal Footer - Admin Styling */
.modal-footer[b-avv19e3q2z] {
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-top: 2px solid #b8a9d9;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Responsive Design - Mobile Optimization */
@media (max-width: var(--aa-container-md)) {
    .modal-overlay[b-avv19e3q2z] {
        padding: var(--aa-spacing-1);
    }

    .modal-container[b-avv19e3q2z] {
        max-height: 95vh;
    }

    .modal-header[b-avv19e3q2z],
    .modal-content[b-avv19e3q2z],
    .modal-footer[b-avv19e3q2z] {
        padding: var(--aa-spacing-2);
    }

    .modal-content[b-avv19e3q2z] {
        max-height: calc(95vh - 100px);
    }

    .modal-title[b-avv19e3q2z] {
        font-size: var(--aa-font-size-base);
    }

    .modal-footer[b-avv19e3q2z] {
        flex-direction: column-reverse;
    }

    .modal-footer .admin-btn[b-avv19e3q2z] {
        width: 100%;
        justify-content: center;
        padding: var(--aa-spacing-3);
    }

    .workflow-actions[b-avv19e3q2z] {
        flex-direction: column;
    }

    .workflow-actions .admin-btn-sm[b-avv19e3q2z] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-container[b-avv19e3q2z] {
        margin: var(--aa-spacing-1);
        max-height: calc(100vh - 8px);
    }

    .modal-content[b-avv19e3q2z] {
        max-height: calc(100vh - 120px);
        padding: var(--aa-spacing-2);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Customer/AddToCatalogModal.razor.rz.scp.css */
/* AddToCatalogModal Styles - Following Admin Section Standards */

/* Modal Container - Wider for content */
.catalog-association-modal[b-99wfrxbjqb] {
    max-width: var(--aa-container-lg);
    width: 95%;
}

/* No Catalog Notice */
.no-catalog-notice[b-99wfrxbjqb] {
    text-align: center;
    padding: var(--aa-spacing-8);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-md);
}

.no-catalog-notice .info-icon[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-4xl);
    color: var(--aa-info);
    margin-bottom: var(--aa-spacing-4);
}

.no-catalog-notice h3[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-2);
}

.no-catalog-notice p[b-99wfrxbjqb] {
    color: var(--aa-gray);
    margin-bottom: var(--aa-spacing-2);
}

.no-catalog-notice .help-text[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-medium-gray);
    font-style: italic;
}

/* Form Sections */
.catalog-association-form[b-99wfrxbjqb] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-6);
}

.section-title[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-3);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

/* Customer Info Section */
.customer-info-section[b-99wfrxbjqb] {
    padding: var(--aa-spacing-4);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-light-gray);
}

.info-display[b-99wfrxbjqb] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.info-row[b-99wfrxbjqb] {
    display: flex;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
}

.info-row label[b-99wfrxbjqb] {
    color: var(--aa-medium-gray);
    font-weight: var(--aa-font-weight-normal);
    min-width: 120px;
}

.info-row strong[b-99wfrxbjqb] {
    color: var(--aa-dark);
    font-weight: var(--aa-font-weight-semibold);
}

/* Catalog Card */
.catalog-info-section[b-99wfrxbjqb] {
    padding: var(--aa-spacing-4);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: var(--aa-border-radius-md);
    border: 2px solid #b8a9d9;
}

.catalog-card[b-99wfrxbjqb] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.catalog-header[b-99wfrxbjqb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aa-spacing-3);
}

.catalog-name[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: #2d1b49;
}

.catalog-version[b-99wfrxbjqb] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    background: #b8a9d9;
    color: #2d1b49;
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    white-space: nowrap;
}

.catalog-description[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-gray);
    line-height: 1.5;
}

.catalog-meta[b-99wfrxbjqb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aa-spacing-4);
    margin-top: var(--aa-spacing-2);
}

.meta-item[b-99wfrxbjqb] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-gray);
}

/* Association Options */
.association-options-section[b-99wfrxbjqb] {
    padding: var(--aa-spacing-4);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-light-gray);
}

.help-text[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-medium-gray);
    margin-bottom: var(--aa-spacing-3);
}

.radio-options[b-99wfrxbjqb] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.radio-option[b-99wfrxbjqb] {
    position: relative;
}

.radio-option input[type="radio"][b-99wfrxbjqb] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-option label[b-99wfrxbjqb] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    border: 2px solid var(--aa-light-gray);
    border-radius: var(--aa-border-radius-md);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    background: var(--aa-white);
}

.radio-option label:hover[b-99wfrxbjqb] {
    border-color: #b8a9d9;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(184, 169, 217, 0.15);
}

.radio-option input[type="radio"]:checked + label[b-99wfrxbjqb] {
    border-color: #b8a9d9;
    background: linear-gradient(135deg, #e8ddf0 0%, #ffffff 100%);
    box-shadow: 0 0 0 3px rgba(184, 169, 217, 0.1);
}

.radio-option label > div[b-99wfrxbjqb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.radio-option label strong[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
}

.radio-option label span[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-gray);
    line-height: 1.4;
}

/* Comments Section */
.comments-section[b-99wfrxbjqb] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.admin-form-label[b-99wfrxbjqb] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
}

.admin-form-textarea[b-99wfrxbjqb] {
    width: 100%;
    padding: var(--aa-spacing-2);
    border: 1px solid var(--aa-light-gray);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--aa-transition-base) ease;
}

.admin-form-textarea:hover[b-99wfrxbjqb] {
    border-color: var(--aa-medium-gray);
}

.admin-form-textarea:focus[b-99wfrxbjqb] {
    outline: none;
    border-color: #b8a9d9;
    box-shadow: 0 0 0 3px rgba(184, 169, 217, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .catalog-association-modal[b-99wfrxbjqb] {
        max-width: 100%;
        width: 100%;
        max-height: 95vh;
    }

    .catalog-header[b-99wfrxbjqb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .catalog-version[b-99wfrxbjqb] {
        align-self: flex-start;
    }

    .catalog-meta[b-99wfrxbjqb] {
        flex-direction: column;
        gap: var(--aa-spacing-2);
    }

    .radio-option label[b-99wfrxbjqb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-row[b-99wfrxbjqb] {
        flex-direction: column;
        gap: var(--aa-spacing-1);
    }

    .info-row label[b-99wfrxbjqb] {
        min-width: auto;
        font-weight: var(--aa-font-weight-semibold);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Customer/CustomerModal.razor.rz.scp.css */
/* Customer Modal - Modal-specific styles only */
/* Form styles moved to aa-admin.css for global admin use */

/* Modal Overlay */
.modal-overlay[b-pbsyi08sly] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--aa-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-2);
    animation: modalOverlayFadeIn-b-pbsyi08sly var(--aa-transition-fast) ease-out;
}

@keyframes modalOverlayFadeIn-b-pbsyi08sly {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container - Compact Design */
.modal-container[b-pbsyi08sly] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-pbsyi08sly var(--aa-transition-base) ease-out;
}

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

/* Modal Header - Admin Gradient Styling */
.modal-header[b-pbsyi08sly] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    /* Admin Navigation Gradient */
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
}

.modal-title[b-pbsyi08sly] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: #2d1b49;
    margin: 0;
}

.modal-title svg[b-pbsyi08sly] {
    color: #2d1b49;
    width: 20px;
    height: 20px;
}

.modal-close-btn[b-pbsyi08sly] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(45, 27, 73, 0.3);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--aa-border-radius-sm);
    color: #2d1b49;
    cursor: pointer;
    transition: all var(--aa-transition-fast) ease;
    font-weight: var(--aa-font-weight-semibold);
}

.modal-close-btn:hover[b-pbsyi08sly] {
    background: #fff9c4;
    border-color: #b8a9d9;
    color: #2d1b49;
    transform: scale(1.05);
}

.modal-close-btn svg[b-pbsyi08sly] {
    width: 16px;
    height: 16px;
}

/* Modal Content - Compact Scrolling */
.modal-content[b-pbsyi08sly] {
    flex: 1;
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    max-height: calc(92vh - 110px);
}

/* Loading and Error States - Compact */
.modal-loading[b-pbsyi08sly],
.modal-error[b-pbsyi08sly] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-6);
    font-size: var(--aa-font-size-sm);
}

.modal-loading[b-pbsyi08sly] {
    color: #b8a9d9;
}

.modal-error[b-pbsyi08sly] {
    color: var(--aa-danger);
    background: color-mix(in srgb, var(--aa-danger) 8%, transparent);
    border-radius: var(--aa-border-radius-lg);
    border: 1px solid color-mix(in srgb, var(--aa-danger) 15%, transparent);
}

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

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

/* Modal Form - Tight Spacing */
.modal-form[b-pbsyi08sly] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-3);
}

/* Modal Footer - Admin Styling */
.modal-footer[b-pbsyi08sly] {
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-top: 2px solid #b8a9d9;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Responsive Design - Mobile Optimization */
@media (max-width: var(--aa-container-md)) {
    .modal-overlay[b-pbsyi08sly] {
        padding: var(--aa-spacing-1);
    }

    .modal-container[b-pbsyi08sly] {
        max-height: 95vh;
    }

    .modal-header[b-pbsyi08sly],
    .modal-content[b-pbsyi08sly],
    .modal-footer[b-pbsyi08sly] {
        padding: var(--aa-spacing-2);
    }

    .modal-content[b-pbsyi08sly] {
        max-height: calc(95vh - 100px);
    }

    .modal-title[b-pbsyi08sly] {
        font-size: var(--aa-font-size-base);
    }

    .modal-footer[b-pbsyi08sly] {
        flex-direction: column-reverse;
    }

    .modal-footer .admin-btn[b-pbsyi08sly] {
        width: 100%;
        justify-content: center;
        padding: var(--aa-spacing-3);
    }
}

@media (max-width: 480px) {
    .modal-container[b-pbsyi08sly] {
        margin: var(--aa-spacing-1);
        max-height: calc(100vh - 8px);
    }

    .modal-content[b-pbsyi08sly] {
        max-height: calc(100vh - 120px);
        padding: var(--aa-spacing-2);
    }
}

/* Catalog Association Section */
.catalog-association-section[b-pbsyi08sly] {
    margin-top: var(--aa-spacing-4);
    padding: var(--aa-spacing-4);
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-md);
    border-left: 4px solid #b8a9d9;
}

.catalog-info-banner[b-pbsyi08sly] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-3);
    background: linear-gradient(135deg, #e7f3ff 0%, #d1ecf1 100%);
    border-radius: var(--aa-border-radius-sm);
    margin-bottom: var(--aa-spacing-3);
    border-left: 3px solid #0066cc;
}

.catalog-info-banner svg[b-pbsyi08sly] {
    color: #0066cc;
    font-size: var(--aa-font-size-lg);
    flex-shrink: 0;
    margin-top: 2px;
}

.catalog-banner-content[b-pbsyi08sly] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
    flex: 1;
}

.catalog-banner-content strong[b-pbsyi08sly] {
    color: #004085;
    font-weight: var(--aa-font-weight-semibold);
}

.catalog-name-display[b-pbsyi08sly] {
    color: #0066cc;
    font-weight: var(--aa-font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    flex-wrap: wrap;
}

.version-badge[b-pbsyi08sly] {
    background: #0066cc;
    color: var(--aa-white);
    padding: 2px var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

.catalog-association-options[b-pbsyi08sly] {
    margin-top: var(--aa-spacing-3);
    padding-top: var(--aa-spacing-3);
    border-top: 1px solid var(--aa-medium-gray);
}

.association-radio-group[b-pbsyi08sly] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--aa-spacing-sm);
    margin-top: var(--aa-spacing-2);
}

.association-radio-option[b-pbsyi08sly] {
    display: flex;
    align-items: flex-start;
}

.association-radio-option input[type="radio"][b-pbsyi08sly] {
    margin-top: 4px;
    margin-right: var(--aa-spacing-sm);
    accent-color: #b8a9d9;
}

.association-radio-option label[b-pbsyi08sly] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    flex: 1;
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
}

.association-radio-option label:hover[b-pbsyi08sly] {
    background: rgba(184, 169, 217, 0.1);
}

.association-radio-option input[type="radio"]:checked + label[b-pbsyi08sly] {
    background: rgba(184, 169, 217, 0.2);
    font-weight: var(--aa-font-weight-semibold);
}

.association-radio-option label svg[b-pbsyi08sly] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-md);
    flex-shrink: 0;
}

.association-radio-option label div[b-pbsyi08sly] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.association-radio-option label div strong[b-pbsyi08sly] {
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.association-radio-option label div small[b-pbsyi08sly] {
    color: var(--aa-secondary);
    font-size: var(--aa-font-size-xs);
}

/* Mobile Responsive for Catalog Section */
@media (max-width: 768px) {
    .association-radio-group[b-pbsyi08sly] {
        grid-template-columns: 1fr;
    }
    
    .catalog-info-banner[b-pbsyi08sly] {
        flex-direction: column;
    }
}
/* /Src/Presentation/Areas/Admin/Components/Facilities/FacilityModal.razor.rz.scp.css */
/* Facility Modal - Modal-specific styles only */
/* Form styles moved to aa-admin.css for global admin use */

/* Modal Overlay */
.modal-overlay[b-3xqgs08e15] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--aa-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-2);
    animation: modalOverlayFadeIn-b-3xqgs08e15 var(--aa-transition-fast) ease-out;
}

@keyframes modalOverlayFadeIn-b-3xqgs08e15 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container - Compact Design */
.modal-container[b-3xqgs08e15] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-3xqgs08e15 var(--aa-transition-base) ease-out;
}

@keyframes modalSlideIn-b-3xqgs08e15 {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header - Admin Gradient Styling */
.modal-header[b-3xqgs08e15] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
}

.modal-title[b-3xqgs08e15] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: #2d1b49;
    margin: 0;
}

.modal-title svg[b-3xqgs08e15] {
    color: #2d1b49;
    width: 20px;
    height: 20px;
}

.modal-close-btn[b-3xqgs08e15] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(45, 27, 73, 0.3);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--aa-border-radius-sm);
    color: #2d1b49;
    cursor: pointer;
    transition: all var(--aa-transition-fast) ease;
    font-weight: var(--aa-font-weight-semibold);
}

.modal-close-btn:hover[b-3xqgs08e15] {
    background: #fff9c4;
    border-color: #b8a9d9;
    color: #2d1b49;
    transform: scale(1.05);
}

.modal-close-btn svg[b-3xqgs08e15] {
    width: 16px;
    height: 16px;
}

/* Modal Content - Compact Scrolling */
.modal-content[b-3xqgs08e15] {
    flex: 1;
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    max-height: calc(92vh - 110px);
}

/* Loading and Error States - Compact */
.modal-loading[b-3xqgs08e15],
.modal-error[b-3xqgs08e15] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-6);
    font-size: var(--aa-font-size-sm);
}

.modal-loading[b-3xqgs08e15] {
    color: #b8a9d9;
}

.modal-error[b-3xqgs08e15] {
    color: var(--aa-danger);
    background: color-mix(in srgb, var(--aa-danger) 8%, transparent);
    border-radius: var(--aa-border-radius-lg);
    border: 1px solid color-mix(in srgb, var(--aa-danger) 15%, transparent);
}

.spin-animation[b-3xqgs08e15] {
    animation: spin-b-3xqgs08e15 1s linear infinite;
}

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

/* Modal Form - Tight Spacing */
.modal-form[b-3xqgs08e15] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-3);
}

/* Modal Footer - Admin Styling */
.modal-footer[b-3xqgs08e15] {
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-top: 2px solid #b8a9d9;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Responsive Design - Mobile Optimization */
@media (max-width: var(--aa-container-md)) {
    .modal-overlay[b-3xqgs08e15] {
        padding: var(--aa-spacing-1);
    }

    .modal-container[b-3xqgs08e15] {
        max-height: 95vh;
    }

    .modal-header[b-3xqgs08e15],
    .modal-content[b-3xqgs08e15],
    .modal-footer[b-3xqgs08e15] {
        padding: var(--aa-spacing-2);
    }

    .modal-content[b-3xqgs08e15] {
        max-height: calc(95vh - 100px);
    }

    .modal-title[b-3xqgs08e15] {
        font-size: var(--aa-font-size-base);
    }

    .modal-footer[b-3xqgs08e15] {
        flex-direction: column-reverse;
    }

    .modal-footer .admin-btn[b-3xqgs08e15] {
        width: 100%;
        justify-content: center;
        padding: var(--aa-spacing-3);
    }
}

@media (max-width: 480px) {
    .modal-container[b-3xqgs08e15] {
        margin: var(--aa-spacing-1);
        max-height: calc(100vh - 8px);
    }

    .modal-content[b-3xqgs08e15] {
        max-height: calc(100vh - 120px);
        padding: var(--aa-spacing-2);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Shared/NotificationModal.razor.rz.scp.css */
/* Notification Modal - Following WrittenExpressions Coding Standards */

/* Modal Overlay */
.notification-modal-overlay[b-4euv283xbh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 2000; /* Higher than regular modal */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-md);
    animation: notificationOverlayFadeIn-b-4euv283xbh 0.2s ease-out;
}

@keyframes notificationOverlayFadeIn-b-4euv283xbh {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.notification-modal-container[b-4euv283xbh] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: notificationSlideIn-b-4euv283xbh 0.3s ease-out;
}

@keyframes notificationSlideIn-b-4euv283xbh {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Modal Header */
.notification-modal-header[b-4euv283xbh] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
    padding: var(--aa-spacing-lg);
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-lg) var(--aa-border-radius-lg) 0 0;
}

.notification-modal-icon[b-4euv283xbh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-modal-icon svg[b-4euv283xbh] {
    width: 24px;
    height: 24px;
}

.notification-modal-icon.success[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-success) 15%, transparent);
    color: var(--aa-success);
}

.notification-modal-icon.error[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-danger) 15%, transparent);
    color: var(--aa-danger);
}

.notification-modal-icon.warning[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-warning) 15%, transparent);
    color: var(--aa-warning);
}

.notification-modal-icon.info[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-info) 15%, transparent);
    color: var(--aa-info);
}

.notification-modal-icon.confirmation[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-primary) 15%, transparent);
    color: var(--aa-primary);
}

.notification-modal-title[b-4euv283xbh] {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--aa-dark);
    margin: 0;
}

.notification-modal-close[b-4euv283xbh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--aa-border-radius-sm);
    color: var(--aa-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.notification-modal-close:hover[b-4euv283xbh] {
    background: #e9ecef;
    color: var(--aa-dark);
}

.notification-modal-close svg[b-4euv283xbh] {
    width: 16px;
    height: 16px;
}

/* Modal Content */
.notification-modal-content[b-4euv283xbh] {
    padding: var(--aa-spacing-lg);
    flex: 1;
}

.notification-modal-message[b-4euv283xbh] {
    font-size: 1rem;
    color: var(--aa-dark);
    margin: 0 0 var(--aa-spacing-sm) 0;
    line-height: 1.5;
}

.notification-modal-details[b-4euv283xbh] {
    font-size: 0.9rem;
    color: var(--aa-secondary);
    background: #f8f9fa;
    padding: var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid var(--aa-info);
    margin-top: var(--aa-spacing-sm);
}

/* Modal Footer */
.notification-modal-footer[b-4euv283xbh] {
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-lg);
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 0 0 var(--aa-border-radius-lg) var(--aa-border-radius-lg);
}

/* Buttons */
.btn[b-4euv283xbh] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-width: 80px;
    justify-content: center;
}

.btn:disabled[b-4euv283xbh] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary[b-4euv283xbh] {
    background: var(--aa-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary[b-4euv283xbh] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid #ced4da;
}

.btn-secondary:hover:not(:disabled)[b-4euv283xbh] {
    background: #e9ecef;
    border-color: var(--aa-secondary);
}

.btn-danger[b-4euv283xbh] {
    background: var(--aa-danger);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-4euv283xbh] {
    background: color-mix(in srgb, var(--aa-danger) 90%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn svg[b-4euv283xbh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notification-modal-overlay[b-4euv283xbh] {
        padding: var(--aa-spacing-sm);
    }

    .notification-modal-container[b-4euv283xbh] {
        max-height: 95vh;
        margin: var(--aa-spacing-sm);
    }

    .notification-modal-header[b-4euv283xbh],
    .notification-modal-content[b-4euv283xbh],
    .notification-modal-footer[b-4euv283xbh] {
        padding: var(--aa-spacing-md);
    }

    .notification-modal-title[b-4euv283xbh] {
        font-size: 1.125rem;
    }

    .notification-modal-footer[b-4euv283xbh] {
        flex-direction: column-reverse;
    }

    .btn[b-4euv283xbh] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .notification-modal-container[b-4euv283xbh] {
        margin: var(--aa-spacing-xs);
        max-height: calc(100vh - 16px);
    }

    .notification-modal-icon[b-4euv283xbh] {
        width: 36px;
        height: 36px;
    }

    .notification-modal-icon svg[b-4euv283xbh] {
        width: 20px;
        height: 20px;
    }
}
/* /Src/Presentation/Areas/Admin/Components/User/PasswordResetModal.razor.rz.scp.css */
/* Password Reset Modal Styles - Complete with Base Modal Structure */

/* Modal Overlay - Fixed positioning to cover entire viewport */
.modal-overlay[b-mopvv4egik] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-mopvv4egik var(--aa-transition-base) ease;
}

/* Modal Container - Compact Admin Design */
.modal-container[b-mopvv4egik] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 90%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-mopvv4egik var(--aa-transition-base) ease;
    position: relative;
    z-index: 1051;
}

.password-reset-modal[b-mopvv4egik] {
    max-width: 500px;
}

/* Modal Header - Admin Gradient */
.modal-header[b-mopvv4egik] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-mopvv4egik] {
    margin: 0;
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: #2d1b49;
}

.modal-close-btn[b-mopvv4egik] {
    background: transparent;
    border: none;
    color: #2d1b49;
    cursor: pointer;
    padding: var(--aa-spacing-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-xl);
}

.modal-close-btn:hover[b-mopvv4egik] {
    background: rgba(45, 27, 73, 0.1);
}

/* Modal Content - Efficient Scrolling */
.modal-content[b-mopvv4egik] {
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    flex: 1;
    max-height: calc(92vh - 110px);
}

/* Modal Footer - Admin Gradient */
.modal-footer[b-mopvv4egik] {
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-top: 2px solid #b8a9d9;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Loading and Error States */
.modal-error[b-mopvv4egik] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-8);
    text-align: center;
    gap: var(--aa-spacing-3);
    color: var(--aa-error);
}

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

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

/* Form Styles */
.form-group[b-mopvv4egik] {
    margin-bottom: var(--aa-spacing-4);
}

.form-label[b-mopvv4egik] {
    display: block;
    margin-bottom: var(--aa-spacing-1);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

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

.form-control[b-mopvv4egik] {
    width: 100%;
    padding: var(--aa-spacing-2);
    border: 1px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    transition: all var(--aa-transition-base) ease;
}

.form-control:focus[b-mopvv4egik] {
    outline: none;
    border-color: #b8a9d9;
    box-shadow: 0 0 0 3px rgba(184, 169, 217, 0.1);
}

.validation-message[b-mopvv4egik] {
    display: block;
    margin-top: var(--aa-spacing-1);
    color: var(--aa-error);
    font-size: var(--aa-font-size-xs);
}

/* Buttons */
.btn[b-mopvv4egik] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    border: none;
}

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

.btn-primary[b-mopvv4egik] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
}

.btn-primary:hover:not(:disabled)[b-mopvv4egik] {
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
}

.btn-secondary[b-mopvv4egik] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-medium-gray);
}

.btn-secondary:hover[b-mopvv4egik] {
    background: var(--aa-medium-gray);
}

/* Reset Info Box */
.reset-info[b-mopvv4egik] {
    display: flex;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-info-light);
    border: 1px solid var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    margin-bottom: var(--aa-spacing-4);
}

.info-icon[b-mopvv4egik] {
    font-size: var(--aa-font-size-xl);
    color: var(--aa-info);
    flex-shrink: 0;
}

.info-text[b-mopvv4egik] {
    flex: 1;
}

.info-text p[b-mopvv4egik] {
    margin: 0;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.info-text p:first-child[b-mopvv4egik] {
    font-weight: var(--aa-font-weight-semibold);
    margin-bottom: var(--aa-spacing-1);
}

.user-email[b-mopvv4egik] {
    color: var(--aa-info);
    font-weight: var(--aa-font-weight-bold);
    font-size: var(--aa-font-size-md);
}

/* Warning Box */
.warning-box[b-mopvv4egik] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    background: var(--aa-warning-light);
    border: 1px solid var(--aa-warning);
    border-radius: var(--aa-border-radius-sm);
    margin-top: var(--aa-spacing-4);
}

.warning-box > svg[b-mopvv4egik] {
    font-size: var(--aa-font-size-lg);
    color: var(--aa-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.warning-box span[b-mopvv4egik] {
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
    line-height: 1.5;
}

/* Animations */
@keyframes fadeIn-b-mopvv4egik {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    .modal-container[b-mopvv4egik] {
        width: 95%;
        max-height: 95vh;
    }
}
/* /Src/Presentation/Areas/Admin/Components/User/RoleModal.razor.rz.scp.css */
/* Role Modal Styles - Complete with Base Modal Structure */

/* Modal Overlay - Fixed positioning to cover entire viewport */
.modal-overlay[b-hckw6xtgd3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-hckw6xtgd3 var(--aa-transition-base) ease;
}

/* Modal Container - Compact Admin Design */
.modal-container[b-hckw6xtgd3] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 90%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-hckw6xtgd3 var(--aa-transition-base) ease;
    position: relative;
    z-index: 1051;
}

.role-modal[b-hckw6xtgd3] {
    max-width: 500px;
}

/* Modal Header - Admin Gradient */
.modal-header[b-hckw6xtgd3] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-hckw6xtgd3] {
    margin: 0;
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: #2d1b49;
}

.modal-close-btn[b-hckw6xtgd3] {
    background: transparent;
    border: none;
    color: #2d1b49;
    cursor: pointer;
    padding: var(--aa-spacing-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-xl);
}

.modal-close-btn:hover[b-hckw6xtgd3] {
    background: rgba(45, 27, 73, 0.1);
}

/* Modal Content - Efficient Scrolling */
.modal-content[b-hckw6xtgd3] {
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    flex: 1;
    max-height: calc(92vh - 110px);
}

/* Modal Footer - Admin Gradient */
.modal-footer[b-hckw6xtgd3] {
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-top: 2px solid #b8a9d9;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Loading and Error States */
.modal-loading[b-hckw6xtgd3],
.modal-error[b-hckw6xtgd3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-8);
    text-align: center;
    gap: var(--aa-spacing-3);
}

.modal-loading[b-hckw6xtgd3] {
    color: var(--aa-info);
}

.modal-error[b-hckw6xtgd3] {
    color: var(--aa-error);
}

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

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

/* Form Styles */
.form-group[b-hckw6xtgd3] {
    margin-bottom: var(--aa-spacing-4);
}

.form-label[b-hckw6xtgd3] {
    display: block;
    margin-bottom: var(--aa-spacing-1);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

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

.form-control[b-hckw6xtgd3] {
    width: 100%;
    padding: var(--aa-spacing-2);
    border: 1px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    transition: all var(--aa-transition-base) ease;
}

.form-control:focus[b-hckw6xtgd3] {
    outline: none;
    border-color: #b8a9d9;
    box-shadow: 0 0 0 3px rgba(184, 169, 217, 0.1);
}

.form-control:disabled[b-hckw6xtgd3] {
    background: var(--aa-light);
    color: var(--aa-dark-gray);
    cursor: not-allowed;
}

.validation-message[b-hckw6xtgd3] {
    display: block;
    margin-top: var(--aa-spacing-1);
    color: var(--aa-error);
    font-size: var(--aa-font-size-xs);
}

/* Buttons */
.btn[b-hckw6xtgd3] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    border: none;
}

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

.btn-primary[b-hckw6xtgd3] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
}

.btn-primary:hover:not(:disabled)[b-hckw6xtgd3] {
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
}

.btn-secondary[b-hckw6xtgd3] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-medium-gray);
}

.btn-secondary:hover[b-hckw6xtgd3] {
    background: var(--aa-medium-gray);
}

/* System Role Warning */
.system-role-warning[b-hckw6xtgd3] {
    display: flex;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-warning-light);
    border: 2px solid var(--aa-warning);
    border-radius: var(--aa-border-radius-sm);
    margin-bottom: var(--aa-spacing-4);
}

.system-role-warning > svg[b-hckw6xtgd3] {
    font-size: var(--aa-font-size-xl);
    color: var(--aa-warning);
    flex-shrink: 0;
}

.warning-text[b-hckw6xtgd3] {
    flex: 1;
}

.warning-text strong[b-hckw6xtgd3] {
    display: block;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-md);
    margin-bottom: var(--aa-spacing-1);
}

.warning-text p[b-hckw6xtgd3] {
    margin: 0;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

/* Role Info Box */
.role-info-box[b-hckw6xtgd3] {
    display: flex;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-info-light);
    border: 1px solid var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    margin-top: var(--aa-spacing-3);
}

.role-info-box > svg[b-hckw6xtgd3] {
    font-size: var(--aa-font-size-xl);
    color: var(--aa-info);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-content[b-hckw6xtgd3] {
    flex: 1;
}

.info-content p[b-hckw6xtgd3] {
    margin: 0 0 var(--aa-spacing-2) 0;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
}

.info-content ul[b-hckw6xtgd3] {
    margin: 0;
    padding-left: var(--aa-spacing-4);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
    line-height: 1.6;
}

.info-content li[b-hckw6xtgd3] {
    margin-bottom: var(--aa-spacing-1);
}

/* Current Role Stats */
.current-role-stats[b-hckw6xtgd3] {
    margin-top: var(--aa-spacing-4);
    padding: var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
}

.stat-item[b-hckw6xtgd3] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.stat-item svg[b-hckw6xtgd3] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-lg);
}

/* Animations */
@keyframes fadeIn-b-hckw6xtgd3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    .modal-container[b-hckw6xtgd3] {
        width: 95%;
        max-height: 95vh;
    }
}
/* /Src/Presentation/Areas/Admin/Components/User/UserModal.razor.rz.scp.css */
/* User Modal Styles - Following Admin Modal Standards */

/* Modal Overlay - No click-to-close as per standards */
.modal-overlay[b-c9r95psijp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--aa-z-modal);
    animation: fadeIn-b-c9r95psijp var(--aa-transition-base) ease;
}

/* Modal Container - Compact Admin Design */
.modal-container[b-c9r95psijp] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 90%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-c9r95psijp var(--aa-transition-base) ease;
}

/* Modal Header - Admin Gradient */
.modal-header[b-c9r95psijp] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-c9r95psijp] {
    margin: 0;
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: #2d1b49;
}

.modal-close-btn[b-c9r95psijp] {
    background: transparent;
    border: none;
    color: #2d1b49;
    cursor: pointer;
    padding: var(--aa-spacing-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-xl);
}

.modal-close-btn:hover[b-c9r95psijp] {
    background: rgba(45, 27, 73, 0.1);
}

/* Modal Content - Efficient Scrolling */
.modal-content[b-c9r95psijp] {
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    flex: 1;
    max-height: calc(92vh - 110px);
}

/* Modal Footer - Admin Gradient */
.modal-footer[b-c9r95psijp] {
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-top: 2px solid #b8a9d9;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Loading and Error States */
.modal-loading[b-c9r95psijp],
.modal-error[b-c9r95psijp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-8);
    text-align: center;
    gap: var(--aa-spacing-3);
}

.modal-loading[b-c9r95psijp] {
    color: var(--aa-info);
}

.modal-error[b-c9r95psijp] {
    color: var(--aa-error);
}

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

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

/* Form Styles */
.form-group[b-c9r95psijp] {
    margin-bottom: var(--aa-spacing-4);
}

.form-row[b-c9r95psijp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-3);
}

.form-label[b-c9r95psijp] {
    display: block;
    margin-bottom: var(--aa-spacing-1);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

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

.form-control[b-c9r95psijp],
.form-select[b-c9r95psijp] {
    width: 100%;
    padding: var(--aa-spacing-2);
    border: 1px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    transition: all var(--aa-transition-base) ease;
}

.form-control:focus[b-c9r95psijp],
.form-select:focus[b-c9r95psijp] {
    outline: none;
    border-color: #b8a9d9;
    box-shadow: 0 0 0 3px rgba(184, 169, 217, 0.1);
}

.form-text[b-c9r95psijp] {
    display: block;
    margin-top: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-dark-gray);
}

.validation-message[b-c9r95psijp] {
    display: block;
    margin-top: var(--aa-spacing-1);
    color: var(--aa-error);
    font-size: var(--aa-font-size-xs);
}

/* Current Customer Info */
.current-customer-info[b-c9r95psijp] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: var(--aa-info-light);
    border: 1px solid var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    margin-bottom: var(--aa-spacing-2);
    color: var(--aa-info);
    font-size: var(--aa-font-size-sm);
}

/* Roles Checkbox Group */
.roles-checkbox-group[b-c9r95psijp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
}

.role-checkbox[b-c9r95psijp] {
    display: flex;
    align-items: center;
}

.role-checkbox input[type="checkbox"][b-c9r95psijp] {
    margin-right: var(--aa-spacing-2);
    cursor: pointer;
}

.role-checkbox-label[b-c9r95psijp] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    cursor: pointer;
    font-size: var(--aa-font-size-sm);
    color: var(--aa-dark);
}

.system-role-badge[b-c9r95psijp] {
    display: inline-block;
    padding: 1px var(--aa-spacing-1);
    background: var(--aa-warning-light);
    color: var(--aa-warning);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    margin-left: var(--aa-spacing-1);
}

/* Checkbox Group for Settings */
.checkbox-group[b-c9r95psijp] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
}

.checkbox-item[b-c9r95psijp] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

.checkbox-item input[type="checkbox"][b-c9r95psijp] {
    cursor: pointer;
}

.checkbox-item label[b-c9r95psijp] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    cursor: pointer;
    font-size: var(--aa-font-size-sm);
    color: var(--aa-dark);
    margin: 0;
}

/* Buttons */
.btn[b-c9r95psijp] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    border: none;
}

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

.btn-primary[b-c9r95psijp] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
}

.btn-primary:hover:not(:disabled)[b-c9r95psijp] {
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
}

.btn-secondary[b-c9r95psijp] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-medium-gray);
}

.btn-secondary:hover[b-c9r95psijp] {
    background: var(--aa-medium-gray);
}

/* Animations */
@keyframes fadeIn-b-c9r95psijp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    .modal-container[b-c9r95psijp] {
        width: 95%;
        max-height: 95vh;
    }

    .form-row[b-c9r95psijp] {
        grid-template-columns: 1fr;
    }

    .roles-checkbox-group[b-c9r95psijp] {
        grid-template-columns: 1fr;
    }
}
/* /Src/Presentation/Areas/Admin/Components/User/UsersInRoleModal.razor.rz.scp.css */
/* Users in Role Modal Styles - Complete with Base Modal Structure */

/* Modal Overlay - Fixed positioning to cover entire viewport */
.modal-overlay[b-nmslj4t7hu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-nmslj4t7hu var(--aa-transition-base) ease;
}

/* Modal Container - Compact Admin Design */
.modal-container[b-nmslj4t7hu] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: var(--aa-container-md);
    width: 90%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-nmslj4t7hu var(--aa-transition-base) ease;
    position: relative;
    z-index: 1051;
}

.users-in-role-modal[b-nmslj4t7hu] {
    max-width: 900px;
}

/* Modal Header - Admin Gradient */
.modal-header[b-nmslj4t7hu] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #2d1b49;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md) var(--aa-border-radius-md) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-nmslj4t7hu] {
    margin: 0;
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: #2d1b49;
}

.modal-close-btn[b-nmslj4t7hu] {
    background: transparent;
    border: none;
    color: #2d1b49;
    cursor: pointer;
    padding: var(--aa-spacing-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-xl);
}

.modal-close-btn:hover[b-nmslj4t7hu] {
    background: rgba(45, 27, 73, 0.1);
}

/* Modal Content - Efficient Scrolling */
.modal-content[b-nmslj4t7hu] {
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    flex: 1;
    max-height: calc(92vh - 110px);
}

/* Modal Footer - Admin Gradient */
.modal-footer[b-nmslj4t7hu] {
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-top: 2px solid #b8a9d9;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-3);
    border-radius: 0 0 var(--aa-border-radius-md) var(--aa-border-radius-md);
}

/* Loading and Error States */
.modal-loading[b-nmslj4t7hu],
.modal-error[b-nmslj4t7hu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-8);
    text-align: center;
    gap: var(--aa-spacing-3);
}

.modal-loading[b-nmslj4t7hu] {
    color: var(--aa-info);
}

.modal-error[b-nmslj4t7hu] {
    color: var(--aa-error);
}

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

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

/* Buttons */
.btn[b-nmslj4t7hu] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    border: none;
}

.btn-secondary[b-nmslj4t7hu] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-medium-gray);
}

.btn-secondary:hover[b-nmslj4t7hu] {
    background: var(--aa-medium-gray);
}

/* Empty State */
.empty-users-state[b-nmslj4t7hu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-8);
    text-align: center;
}

.empty-users-state .empty-icon[b-nmslj4t7hu] {
    font-size: 4rem;
    color: var(--aa-medium-gray);
    margin-bottom: var(--aa-spacing-3);
}

.empty-users-state p[b-nmslj4t7hu] {
    margin: 0;
    color: var(--aa-dark-gray);
    font-size: var(--aa-font-size-md);
}

/* Users List */
.users-list[b-nmslj4t7hu] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-3);
}

.users-count[b-nmslj4t7hu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    background: var(--aa-info-light);
    border: 1px solid var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.users-count svg[b-nmslj4t7hu] {
    color: var(--aa-info);
    font-size: var(--aa-font-size-lg);
}

/* Users Table */
.users-table-container[b-nmslj4t7hu] {
    overflow-x: auto;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid var(--aa-light-gray);
}

.users-in-role-table[b-nmslj4t7hu] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-sm);
}

.users-in-role-table thead th[b-nmslj4t7hu] {
    background: var(--aa-light);
    padding: var(--aa-spacing-2);
    text-align: left;
    border-bottom: 2px solid var(--aa-medium-gray);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    white-space: nowrap;
}

.users-in-role-table thead th svg[b-nmslj4t7hu] {
    margin-right: var(--aa-spacing-1);
    color: #b8a9d9;
}

.users-in-role-table tbody tr[b-nmslj4t7hu] {
    border-bottom: 1px solid var(--aa-light-gray);
    transition: background-color var(--aa-transition-base) ease;
}

.users-in-role-table tbody tr:hover[b-nmslj4t7hu] {
    background: var(--aa-light);
}

.users-in-role-table tbody tr.locked[b-nmslj4t7hu] {
    opacity: 0.6;
}

.users-in-role-table td[b-nmslj4t7hu] {
    padding: var(--aa-spacing-2);
    vertical-align: middle;
}

/* User Email Cell */
.user-email-cell[b-nmslj4t7hu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

.user-icon[b-nmslj4t7hu] {
    font-size: var(--aa-font-size-xl);
    color: #b8a9d9;
    flex-shrink: 0;
}

.user-email-info[b-nmslj4t7hu] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.email-text[b-nmslj4t7hu] {
    color: var(--aa-dark);
    font-weight: var(--aa-font-weight-medium);
}

.verified-badge[b-nmslj4t7hu] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-success);
}

.verified-badge svg[b-nmslj4t7hu] {
    font-size: var(--aa-font-size-xs);
}

/* Customer Cell */
.customer-cell[b-nmslj4t7hu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-dark);
}

.customer-cell svg[b-nmslj4t7hu] {
    color: #b8a9d9;
}

/* Date Cell */
.date-cell[b-nmslj4t7hu] {
    color: var(--aa-dark);
    white-space: nowrap;
}

/* No Data */
.no-data[b-nmslj4t7hu] {
    color: var(--aa-dark-gray);
    font-style: italic;
}

/* Status Badge */
.status-badge[b-nmslj4t7hu] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: 2px var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    white-space: nowrap;
}

.status-badge.active[b-nmslj4t7hu] {
    background: var(--aa-success-light);
    color: var(--aa-success);
}

.status-badge.locked[b-nmslj4t7hu] {
    background: var(--aa-error-light);
    color: var(--aa-error);
}

/* Animations */
@keyframes fadeIn-b-nmslj4t7hu {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    .users-in-role-modal[b-nmslj4t7hu] {
        width: 95%;
        max-width: 95vw;
    }

    .users-in-role-table[b-nmslj4t7hu] {
        font-size: var(--aa-font-size-xs);
        min-width: 600px;
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Catalogs/Details.razor.rz.scp.css */
/* Catalog Details Page - Admin Section Standards Compliant */

/* Breadcrumb Section */
.breadcrumb-section[b-x12m76cmx8] {
    background-color: var(--aa-white);
    border-bottom: 1px solid var(--aa-medium-gray);
    padding: var(--aa-spacing-4) 0;
}

.breadcrumb[b-x12m76cmx8] {
    padding: 0 var(--aa-spacing-sm);
    background: none;
    margin-bottom: 0;
}

.breadcrumb-item[b-x12m76cmx8] {
    display: flex;
    align-items: center;
}

.breadcrumb-link[b-x12m76cmx8] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: var(--aa-secondary);
    text-decoration: none;
    transition: color var(--aa-transition-base) ease;
}

.breadcrumb-link:hover[b-x12m76cmx8] {
    color: var(--aa-primary);
}

.breadcrumb-item.active[b-x12m76cmx8] {
    color: var(--aa-dark);
    font-weight: var(--aa-font-weight-medium);
}

/* Content Area */
.content-area[b-x12m76cmx8] {
    padding: var(--aa-spacing-sm);
}

/* Catalog Header */
.catalog-header[b-x12m76cmx8] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
    padding: var(--aa-spacing-8);
    margin-bottom: var(--aa-spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--aa-spacing-6);
}

.catalog-header-info[b-x12m76cmx8] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-4);
    flex: 1;
    min-width: 0;
}

.catalog-icon[b-x12m76cmx8] {
    width: var(--aa-spacing-16);
    height: var(--aa-spacing-16);
    background: linear-gradient(135deg, #7F709B, #b8a9d9);
    border-radius: var(--aa-border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--aa-white);
    font-size: var(--aa-font-size-4xl);
}

.catalog-title-section[b-x12m76cmx8] {
    flex: 1;
    min-width: 0;
}

.catalog-title[b-x12m76cmx8] {
    font-size: var(--aa-font-size-4xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-dark);
    margin: 0 0 var(--aa-spacing-4) 0;
    line-height: var(--aa-line-height-tight);
}

.catalog-meta[b-x12m76cmx8] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-4);
    flex-wrap: wrap;
}

.catalog-header-actions[b-x12m76cmx8] {
    display: flex;
    gap: var(--aa-spacing-3);
    flex-shrink: 0;
}

/* Details Grid */
.details-grid[b-x12m76cmx8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--aa-spacing-8);
    margin-bottom: var(--aa-spacing-8);
}

.details-card[b-x12m76cmx8] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
    overflow: hidden;
    border: 1px solid var(--aa-medium-gray);
}

.card-header[b-x12m76cmx8] {
    background: linear-gradient(135deg, var(--aa-light) 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--aa-medium-gray);
    padding: var(--aa-spacing-4) var(--aa-spacing-6);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
}

.card-header h3[b-x12m76cmx8] {
    margin: 0;
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
}

.card-header i[b-x12m76cmx8] {
    color: var(--aa-primary);
    font-size: var(--aa-font-size-xl);
}

.card-content[b-x12m76cmx8] {
    padding: var(--aa-spacing-6);
}

.detail-row[b-x12m76cmx8] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-4);
    margin-bottom: var(--aa-spacing-6);
    padding-bottom: var(--aa-spacing-4);
    border-bottom: 1px solid var(--aa-light);
}

.detail-row:last-child[b-x12m76cmx8] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.detail-label[b-x12m76cmx8] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    min-width: 140px;
    flex-shrink: 0;
    font-size: var(--aa-font-size-sm);
}

.detail-value[b-x12m76cmx8] {
    flex: 1;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-base);
    line-height: var(--aa-line-height-relaxed);
}

.description-text[b-x12m76cmx8] {
    margin: 0;
    line-height: var(--aa-line-height-relaxed);
    white-space: pre-wrap;
}

.no-data[b-x12m76cmx8] {
    color: var(--aa-secondary);
    font-style: italic;
}

/* Status and Badge Styles */
.status-badge[b-x12m76cmx8],
.completion-status[b-x12m76cmx8],
.print-status[b-x12m76cmx8] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    line-height: 1;
}

.status-badge.active[b-x12m76cmx8],
.completion-status.completed[b-x12m76cmx8],
.print-status.received[b-x12m76cmx8] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge.inactive[b-x12m76cmx8] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.completion-status.in-progress[b-x12m76cmx8],
.print-status.pending[b-x12m76cmx8] {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.version-badge[b-x12m76cmx8] {
    background-color: #e7f3ff;
    color: #004085;
    border: 1px solid #b8daff;
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

/* Date Display Styles */
.date-display[b-x12m76cmx8] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
}

.date-display.past[b-x12m76cmx8],
.date-display.completed[b-x12m76cmx8],
.date-display.received[b-x12m76cmx8] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.date-display.future[b-x12m76cmx8] {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.date-display.expired[b-x12m76cmx8] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.date-display.warning[b-x12m76cmx8] {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Numeric and Cost Values */
.numeric-value[b-x12m76cmx8],
.cost-value[b-x12m76cmx8] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-dark);
}

.cost-value[b-x12m76cmx8] {
    color: #28a745;
    font-weight: var(--aa-font-weight-semibold);
}

/* Audit Information */
.audit-info[b-x12m76cmx8] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-1);
}

.audit-date[b-x12m76cmx8] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-dark);
}

.audit-user[b-x12m76cmx8] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-secondary);
    margin-left: var(--aa-spacing-5);
}

.id-value[b-x12m76cmx8] {
    background-color: var(--aa-light);
    border: 1px solid var(--aa-medium-gray);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-dark);
    font-family: var(--aa-font-family-mono);
}

/* Action Section */
.action-section[b-x12m76cmx8] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
    padding: var(--aa-spacing-8);
    text-align: center;
}

.action-buttons[b-x12m76cmx8] {
    display: flex;
    justify-content: center;
    gap: var(--aa-spacing-4);
    flex-wrap: wrap;
}

/* Button Styles */
.btn[b-x12m76cmx8] {
    padding: var(--aa-spacing-3) var(--aa-spacing-6);
    border: none;
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    text-decoration: none;
    transition: all var(--aa-transition-base) ease;
    min-width: 140px;
    justify-content: center;
}

.btn:hover[b-x12m76cmx8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary[b-x12m76cmx8] {
    background-color: var(--aa-primary);
    color: var(--aa-white);
}

.btn-primary:hover[b-x12m76cmx8] {
    background-color: color-mix(in srgb, var(--aa-primary) 90%, black);
}

.btn-secondary[b-x12m76cmx8] {
    background-color: var(--aa-secondary);
    color: var(--aa-white);
}

.btn-secondary:hover[b-x12m76cmx8] {
    background-color: color-mix(in srgb, var(--aa-secondary) 90%, black);
}

.btn-success[b-x12m76cmx8] {
    background-color: #28a745;
    color: var(--aa-white);
}

.btn-success:hover[b-x12m76cmx8] {
    background-color: #218838;
}

.btn-warning[b-x12m76cmx8] {
    background-color: #ffc107;
    color: #212529;
}

.btn-warning:hover[b-x12m76cmx8] {
    background-color: #e0a800;
}

.btn-info[b-x12m76cmx8] {
    background-color: #17a2b8;
    color: var(--aa-white);
}

.btn-info:hover[b-x12m76cmx8] {
    background-color: #138496;
}

.btn-retry[b-x12m76cmx8],
.btn-back[b-x12m76cmx8] {
    padding: var(--aa-spacing-3) var(--aa-spacing-6);
    border: none;
    border-radius: var(--aa-border-radius-md);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    text-decoration: none;
    transition: all var(--aa-transition-base) ease;
    margin: var(--aa-spacing-2);
}

.btn-retry[b-x12m76cmx8] {
    background-color: var(--aa-secondary);
    color: var(--aa-white);
}

.btn-retry:hover[b-x12m76cmx8] {
    background-color: color-mix(in srgb, var(--aa-secondary) 90%, black);
}

.btn-back[b-x12m76cmx8] {
    background-color: var(--aa-primary);
    color: var(--aa-white);
}

.btn-back:hover[b-x12m76cmx8] {
    background-color: color-mix(in srgb, var(--aa-primary) 90%, black);
}

/* Loading and Error States */
.loading-state[b-x12m76cmx8],
.error-state[b-x12m76cmx8] {
    text-align: center;
    padding: var(--aa-spacing-16) var(--aa-spacing-8);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
}

.loading-spinner[b-x12m76cmx8],
.error-icon[b-x12m76cmx8] {
    font-size: 4rem;
    margin-bottom: var(--aa-spacing-6);
    color: var(--aa-primary);
}

.loading-state h3[b-x12m76cmx8],
.error-state h3[b-x12m76cmx8] {
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-2);
}

.loading-state p[b-x12m76cmx8],
.error-state .error-message[b-x12m76cmx8] {
    color: var(--aa-secondary);
    margin-bottom: var(--aa-spacing-8);
}

.error-actions[b-x12m76cmx8] {
    display: flex;
    justify-content: center;
    gap: var(--aa-spacing-4);
    flex-wrap: wrap;
}

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

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

/* Associated Customers Section */
.associated-customers-section[b-x12m76cmx8] {
  margin-top: var(--aa-spacing-xl);
  padding: var(--aa-spacing-lg);
  background: var(--aa-white);
  border-radius: var(--aa-border-radius-md);
  box-shadow: var(--aa-shadow-md);
}

.section-header[b-x12m76cmx8] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--aa-spacing-lg);
  padding-bottom: var(--aa-spacing-md);
  border-bottom: 2px solid var(--aa-light);
}

.section-title[b-x12m76cmx8] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-sm);
}

.section-title h3[b-x12m76cmx8] {
  margin: 0;
  color: var(--aa-dark);
  font-size: var(--aa-font-size-xl);
}

.customer-count[b-x12m76cmx8] {
  background: var(--aa-primary);
  color: var(--aa-white);
  padding: var(--aa-spacing-1) var(--aa-spacing-2);
  border-radius: var(--aa-border-radius-sm);
  font-size: var(--aa-font-size-sm);
  font-weight: var(--aa-font-weight-semibold);
}

.section-actions[b-x12m76cmx8] {
  display: flex;
  gap: var(--aa-spacing-sm);
}

/* Loading and Error States for Customers */
.loading-state-small[b-x12m76cmx8],
.error-state-small[b-x12m76cmx8],
.empty-state-small[b-x12m76cmx8] {
  text-align: center;
  padding: var(--aa-spacing-lg);
}

.loading-state-small[b-x12m76cmx8] {
  color: var(--aa-secondary);
}

.error-state-small[b-x12m76cmx8] {
  color: var(--aa-danger);
}

.empty-state-small[b-x12m76cmx8] {
  color: var(--aa-secondary);
}

.empty-state-small .empty-icon[b-x12m76cmx8] {
  font-size: 3rem;
  margin-bottom: var(--aa-spacing-md);
  opacity: 0.3;
}

.empty-state-small h4[b-x12m76cmx8] {
  margin-bottom: var(--aa-spacing-sm);
  color: var(--aa-dark);
}

/* Customer Table */
.customers-table-container[b-x12m76cmx8] {
  background: var(--aa-white);
  border-radius: var(--aa-border-radius-md);
  overflow: hidden;
  border: 1px solid var(--aa-medium-gray);
  box-shadow: var(--aa-shadow-sm);
}

.customers-table[b-x12m76cmx8] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--aa-font-size-sm);
}

.customers-table thead[b-x12m76cmx8] {
  background: var(--aa-light);
  border-bottom: 2px solid var(--aa-medium-gray);
}

.customers-table thead th[b-x12m76cmx8] {
  padding: var(--aa-spacing-4) var(--aa-spacing-3);
  text-align: left;
  font-weight: var(--aa-font-weight-semibold);
  color: var(--aa-dark);
  border-right: 1px solid var(--aa-medium-gray);
  position: relative;
}

.customers-table thead th:last-child[b-x12m76cmx8] {
  border-right: none;
}

.customers-table thead th .icon[b-x12m76cmx8] {
  margin-right: var(--aa-spacing-2);
}

.customers-table tbody tr[b-x12m76cmx8] {
  transition: background-color var(--aa-transition-base) ease;
}

.customers-table tbody tr:hover[b-x12m76cmx8] {
  background-color: var(--aa-light);
}

.customers-table tbody tr:not(:last-child)[b-x12m76cmx8] {
  border-bottom: 1px solid var(--aa-light-gray);
}

.customers-table tbody td[b-x12m76cmx8] {
  padding: var(--aa-spacing-3);
  vertical-align: top;
  border-right: 1px solid var(--aa-light-gray);
}

.customers-table tbody td:last-child[b-x12m76cmx8] {
  border-right: none;
}

/* Customer Name Cell */
.customer-name-cell[b-x12m76cmx8] {
  min-width: 200px;
}

.customer-name-info[b-x12m76cmx8] {
  display: flex;
  flex-direction: column;
  gap: var(--aa-spacing-1);
}

.customer-name[b-x12m76cmx8] {
  font-weight: var(--aa-font-weight-semibold);
  color: var(--aa-dark);
}

.doc-number[b-x12m76cmx8] {
  font-size: var(--aa-font-size-xs);
  color: var(--aa-secondary);
  font-family: var(--aa-font-family-mono);
}

/* State Cell */
.state-cell[b-x12m76cmx8] {
  min-width: 100px;
}

.state-info[b-x12m76cmx8] {
  display: flex;
  flex-direction: column;
  gap: var(--aa-spacing-1);
}

.state-info strong[b-x12m76cmx8] {
  font-size: var(--aa-font-size-sm);
  color: var(--aa-dark);
}

.state-info small[b-x12m76cmx8] {
  font-size: var(--aa-font-size-xs);
  color: var(--aa-secondary);
  line-height: var(--aa-line-height-tight);
}

/* Status Cells */
.status-cell[b-x12m76cmx8] {
  text-align: center;
  min-width: 80px;
}

.status-indicator[b-x12m76cmx8] {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-spacing-1);
  padding: var(--aa-spacing-1) var(--aa-spacing-2);
  border-radius: var(--aa-border-radius-sm);
  font-size: var(--aa-font-size-xs);
  font-weight: var(--aa-font-weight-medium);
}

.status-indicator.yes[b-x12m76cmx8] {
  background-color: #d4edda;
  color: #155724;
}

.status-indicator.no[b-x12m76cmx8] {
  background-color: #f8d7da;
  color: #721c24;
}

/* Date Cell */
.date-cell[b-x12m76cmx8] {
  min-width: 120px;
}

.date-info[b-x12m76cmx8] {
  display: flex;
  flex-direction: column;
  gap: var(--aa-spacing-1);
}

.date-primary[b-x12m76cmx8] {
  font-weight: var(--aa-font-weight-medium);
  color: var(--aa-dark);
}

.date-relative[b-x12m76cmx8] {
  font-size: var(--aa-font-size-xs);
  color: var(--aa-secondary);
}

.no-date[b-x12m76cmx8] {
  color: var(--aa-secondary);
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .content-area[b-x12m76cmx8] {
        padding: 0 var(--aa-spacing-4);
    }
    
    .breadcrumb[b-x12m76cmx8] {
        padding: 0 var(--aa-spacing-4);
    }
}

@media (max-width: 768px) {
    .catalog-header[b-x12m76cmx8] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .catalog-header-info[b-x12m76cmx8] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .catalog-header-actions[b-x12m76cmx8] {
        justify-content: center;
        width: 100%;
    }
    
    .catalog-header-actions .btn[b-x12m76cmx8] {
        flex: 1;
        max-width: 200px;
    }
    
    .details-grid[b-x12m76cmx8] {
        grid-template-columns: 1fr;
    }
    
    .detail-row[b-x12m76cmx8] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--aa-spacing-2);
    }
    
    .detail-label[b-x12m76cmx8] {
        min-width: auto;
        padding-bottom: var(--aa-spacing-1);
        border-bottom: 1px solid var(--aa-medium-gray);
    }
    
    .action-buttons[b-x12m76cmx8] {
        flex-direction: column;
        align-items: center;
    }
    
    .action-buttons .btn[b-x12m76cmx8] {
        width: 100%;
        max-width: 300px;
    }
    
    .breadcrumb-item[b-x12m76cmx8] {
        font-size: var(--aa-font-size-sm);
    }
    
    .catalog-title[b-x12m76cmx8] {
        font-size: var(--aa-font-size-2xl);
    }
  
   .customers-grid[b-x12m76cmx8] {
    grid-template-columns: 1fr;
  }
  
  .section-header[b-x12m76cmx8] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--aa-spacing-sm);
  }
}
/* /Src/Presentation/Areas/Admin/Pages/Catalogs/Index.razor.rz.scp.css */
/* Catalog Index Page - Admin Section Standards Compliant */

/* Page Actions Section */
.catalogs-actions[b-mc1qkr4zr4] {
    background: var(--aa-light);
    border-bottom: 1px solid rgba(184, 169, 217, 0.2);
    padding: var(--aa-spacing-sm) 0;
}

.catalogs-actions-content[b-mc1qkr4zr4] {
    padding: 0 var(--aa-spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-xl);
}

/* Left side - Status Filter */
.catalogs-actions-left[b-mc1qkr4zr4] {
    flex: 1;
}

.status-filter[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.status-label[b-mc1qkr4zr4] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    white-space: nowrap;
}

.radio-group[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-lg);
}

.radio-option[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.radio-option input[type="radio"][b-mc1qkr4zr4] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--aa-primary);
}

.radio-label[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    cursor: pointer;
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-dark);
    white-space: nowrap;
    user-select: none;
    transition: color var(--aa-transition-base) ease;
}

.radio-label:hover[b-mc1qkr4zr4] {
    color: var(--aa-primary);
}

.radio-option input[type="radio"]:checked + .radio-label[b-mc1qkr4zr4] {
    color: var(--aa-primary);
    font-weight: var(--aa-font-weight-semibold);
}

.radio-label svg[b-mc1qkr4zr4] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Right side - Primary Actions */
.catalogs-actions-right[b-mc1qkr4zr4] {
    flex-shrink: 0;
}

.btn-add-catalog[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: var(--aa-white);
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-md);
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-xs);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    box-shadow: 0 2px 6px rgba(184, 169, 217, 0.3);
    white-space: nowrap;
}

.btn-add-catalog:hover[b-mc1qkr4zr4] {
    background: linear-gradient(135deg, #9b87c4, #b8a9d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
}

/* Filters Panel */
.filters-panel[b-mc1qkr4zr4] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-lg);
    box-shadow: var(--aa-shadow-md);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid var(--aa-medium-gray);
}

.filters-content[b-mc1qkr4zr4] {
    padding: var(--aa-spacing-sm);
}

.filter-controls[b-mc1qkr4zr4] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--aa-spacing-md);
    align-items: end;
}

.filter-group[b-mc1qkr4zr4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter-label[b-mc1qkr4zr4] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-sm);
}

/* Search Input Container */
.search-input-container[b-mc1qkr4zr4] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-mc1qkr4zr4] {
    width: 100%;
    padding: var(--aa-spacing-sm) 3rem var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    transition: all var(--aa-transition-base) ease;
    background: var(--aa-white);
}

.search-input:focus[b-mc1qkr4zr4] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.search-loading[b-mc1qkr4zr4] {
    position: absolute;
    right: var(--aa-spacing-md);
    color: var(--aa-primary);
    font-size: var(--aa-font-size-sm);
    z-index: 1;
}

.search-clear-btn[b-mc1qkr4zr4] {
    position: absolute;
    right: var(--aa-spacing-md);
    background: none;
    border: none;
    color: var(--aa-secondary);
    cursor: pointer;
    padding: var(--aa-spacing-xs);
    border-radius: 50%;
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-sm);
    z-index: 1;
}

.search-clear-btn:hover[b-mc1qkr4zr4] {
    background: #f8d7da;
    color: var(--aa-danger);
}

.filter-input[b-mc1qkr4zr4],
.filter-select[b-mc1qkr4zr4] {
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    background: var(--aa-white);
    font-size: var(--aa-font-size-sm);
    transition: all var(--aa-transition-base) ease;
    width: 100%;
}

.filter-input:focus[b-mc1qkr4zr4],
.filter-select:focus[b-mc1qkr4zr4] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.filter-actions[b-mc1qkr4zr4] {
    display: flex;
    gap: var(--aa-spacing-sm);
    align-items: end;
}

.btn-clear-filters[b-mc1qkr4zr4] {
    background: var(--aa-secondary);
    color: var(--aa-white);
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-sm);
    white-space: nowrap;
}

.btn-clear-filters:hover[b-mc1qkr4zr4] {
    background: color-mix(in srgb, var(--aa-secondary) 90%, black);
}

/* Content Area */
.content-area[b-mc1qkr4zr4] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-lg);
    box-shadow: var(--aa-shadow-md);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid var(--aa-medium-gray);
}

/* Loading State */
.loading-state[b-mc1qkr4zr4] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-secondary);
}

.loading-spinner[b-mc1qkr4zr4] {
    font-size: 3rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-lg);
}

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

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

/* Error State */
.error-state[b-mc1qkr4zr4] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.error-icon[b-mc1qkr4zr4] {
    font-size: 4rem;
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-lg);
}

.error-message[b-mc1qkr4zr4] {
    color: var(--aa-danger);
    background: #f8d7da;
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: var(--aa-font-family-mono);
}

.btn-retry[b-mc1qkr4zr4] {
    background: var(--aa-primary);
    color: var(--aa-white);
    border: none;
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    border-radius: var(--aa-border-radius-md);
    font-weight: var(--aa-font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
}

.btn-retry:hover[b-mc1qkr4zr4] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-mc1qkr4zr4] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.empty-illustration[b-mc1qkr4zr4] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-mc1qkr4zr4] {
    font-size: 5rem;
    color: var(--aa-secondary);
    opacity: 0.5;
}

.btn-primary-large[b-mc1qkr4zr4],
.btn-secondary-large[b-mc1qkr4zr4] {
    padding: var(--aa-spacing-md) var(--aa-spacing-xl);
    border-radius: var(--aa-border-radius-md);
    font-weight: var(--aa-font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    font-size: 1rem;
    border: none;
}

.btn-primary-large[b-mc1qkr4zr4] {
    background: var(--aa-primary);
    color: var(--aa-white);
}

.btn-secondary-large[b-mc1qkr4zr4] {
    background: var(--aa-secondary);
    color: var(--aa-white);
}

.btn-primary-large:hover[b-mc1qkr4zr4],
.btn-secondary-large:hover[b-mc1qkr4zr4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Results Header */
.results-header[b-mc1qkr4zr4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2);
    background: linear-gradient(135deg, var(--aa-light) 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--aa-medium-gray);
}

.results-info[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-weight: var(--aa-font-weight-medium);
}

.results-text[b-mc1qkr4zr4] {
    color: var(--aa-dark);
}

.page-size-control[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: var(--aa-font-size-sm);
}

.page-size-select[b-mc1qkr4zr4] {
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border: 2px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    background: var(--aa-white);
    transition: all var(--aa-transition-base) ease;
}

.page-size-select:focus[b-mc1qkr4zr4] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

/* Enhanced Table - Compact Design */
.table-container[b-mc1qkr4zr4] {
    overflow-x: auto;
    width: 100%;
}

.catalogs-table[b-mc1qkr4zr4] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--aa-font-size-xs);
}

.catalogs-table thead th[b-mc1qkr4zr4] {
    background: var(--aa-light);
    padding: var(--aa-spacing-1);
    text-align: left;
    border-bottom: 2px solid var(--aa-medium-gray);
    font-weight: var(--aa-font-weight-semibold);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.catalogs-table td[b-mc1qkr4zr4] {
    padding: var(--aa-spacing-1);
    vertical-align: top;
    border-bottom: 1px solid var(--aa-light-gray);
}

.sort-btn[b-mc1qkr4zr4] {
    background: none;
    border: none;
    color: var(--aa-dark);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs);
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
    width: 100%;
}

.sort-btn:hover[b-mc1qkr4zr4] {
    background: #e9ecef;
    color: var(--aa-primary);
}

.sort-icon[b-mc1qkr4zr4] {
    color: var(--aa-primary);
}

.catalog-row[b-mc1qkr4zr4] {
    transition: all var(--aa-transition-base) ease;
    border-bottom: 1px solid var(--aa-light-gray);
}

.catalog-row:hover[b-mc1qkr4zr4] {
    background: var(--aa-light);
}

.catalog-row.inactive[b-mc1qkr4zr4] {
    opacity: 0.6;
    background: #fff3cd;
}

/* Catalog Info */
.catalog-info[b-mc1qkr4zr4] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.catalog-avatar[b-mc1qkr4zr4] {
    width: var(--aa-spacing-10);
    height: var(--aa-spacing-10);
    border-radius: var(--aa-border-radius-md);
    background: linear-gradient(135deg, #7F709B, #b8a9d9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-icon[b-mc1qkr4zr4] {
    color: var(--aa-white);
    font-size: var(--aa-font-size-lg);
}

.catalog-details[b-mc1qkr4zr4] {
    min-width: 0;
    flex: 1;
}

.catalog-name[b-mc1qkr4zr4] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    line-height: var(--aa-line-height-tight);
    margin-bottom: var(--aa-spacing-1);
}

.catalog-description[b-mc1qkr4zr4] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-secondary);
    line-height: var(--aa-line-height-base);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status and Badge Styles */
.status-badge[b-mc1qkr4zr4],
.completion-status[b-mc1qkr4zr4],
.print-status[b-mc1qkr4zr4],
.version-badge[b-mc1qkr4zr4],
.date-info[b-mc1qkr4zr4] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    line-height: 1;
}

.status-badge.active[b-mc1qkr4zr4] {
    background-color: #d4edda;
    color: #155724;
}

.status-badge.inactive[b-mc1qkr4zr4] {
    background-color: #f8d7da;
    color: #721c24;
}

.completion-status.completed[b-mc1qkr4zr4] {
    background-color: #d4edda;
    color: #155724;
}

.completion-status.in-progress[b-mc1qkr4zr4] {
    background-color: #fff3cd;
    color: #856404;
}

.print-status.received[b-mc1qkr4zr4] {
    background-color: #d4edda;
    color: #155724;
}

.print-status.pending[b-mc1qkr4zr4] {
    background-color: #f8d7da;
    color: #721c24;
}

.version-badge[b-mc1qkr4zr4] {
    background-color: #e7f3ff;
    color: #004085;
    border: 1px solid #b8daff;
}

.date-info[b-mc1qkr4zr4] {
    background-color: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-medium-gray);
}

.date-info.effective.future[b-mc1qkr4zr4] {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

.date-info.effective.past[b-mc1qkr4zr4] {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.date-info.expiration.expired[b-mc1qkr4zr4] {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.date-info.expiration.warning[b-mc1qkr4zr4] {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;
}

.date-info.expiration.future[b-mc1qkr4zr4] {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.completion-status small[b-mc1qkr4zr4],
.print-status small[b-mc1qkr4zr4] {
    display: block;
    font-size: var(--aa-font-size-xs);
    opacity: 0.8;
    margin-top: 0.1rem;
}

.no-data[b-mc1qkr4zr4] {
    color: var(--aa-secondary);
    font-style: italic;
    font-size: var(--aa-font-size-sm);
}

/* Action Buttons - Compact Circular Design (24x24px) */
.action-buttons[b-mc1qkr4zr4] {
    display: flex;
    gap: var(--aa-spacing-xs);
}

.action-btn[b-mc1qkr4zr4] {
    width: var(--aa-spacing-6);
    height: var(--aa-spacing-6);
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-xs);
}

.action-btn:hover[b-mc1qkr4zr4] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn.view[b-mc1qkr4zr4] {
    background: #e7f3ff;
    color: #0066cc;
}

.action-btn.edit[b-mc1qkr4zr4] {
    background: #fff3cd;
    color: #856404;
}

.action-btn.complete[b-mc1qkr4zr4] {
    background: #d4edda;
    color: #155724;
}

.action-btn.print-received[b-mc1qkr4zr4] {
    background: #e7d9ff;
    color: #6f42c1;
}

.action-btn.deactivate[b-mc1qkr4zr4] {
    background: #f8d7da;
    color: #721c24;
}

.action-btn.activate[b-mc1qkr4zr4] {
    background: #d4edda;
    color: #155724;
}

/* ADMIN ONLY - Permanent Delete Button */
.action-btn.permanent-delete[b-mc1qkr4zr4] {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: var(--aa-white);
    border: 2px solid #dc3545;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    position: relative;
}

.action-btn.permanent-delete:hover[b-mc1qkr4zr4] {
    background: linear-gradient(135deg, #c82333, #a02331);
    border-color: #c82333;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
    animation: danger-pulse-b-mc1qkr4zr4 0.5s ease-in-out;
}

.action-btn.permanent-delete[b-mc1qkr4zr4]::after {
    content: "??";
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.6rem;
    background: #ffc107;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@keyframes danger-pulse-b-mc1qkr4zr4 {
    0%, 100% { box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5); }
    50% { box-shadow: 0 6px 20px rgba(220, 53, 69, 0.8); }
}

/* Pagination */
.pagination-container[b-mc1qkr4zr4] {
    padding: var(--aa-spacing-lg);
    background: var(--aa-light);
    border-top: 1px solid var(--aa-medium-gray);
}

.pagination[b-mc1qkr4zr4] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.page-btn[b-mc1qkr4zr4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--aa-medium-gray);
    background: var(--aa-white);
    color: var(--aa-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
}

.page-btn:hover:not(:disabled)[b-mc1qkr4zr4] {
    background: var(--aa-primary);
    color: var(--aa-white);
    transform: scale(1.05);
}

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

.page-info[b-mc1qkr4zr4] {
    margin: 0 var(--aa-spacing-lg);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .catalogs-actions-content[b-mc1qkr4zr4] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        text-align: center;
    }
    
    .catalogs-actions-left[b-mc1qkr4zr4],
    .catalogs-actions-right[b-mc1qkr4zr4] {
        width: 100%;
    }
    
    .status-filter[b-mc1qkr4zr4] {
        justify-content: center;
    }
    
    .radio-group[b-mc1qkr4zr4] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-add-catalog[b-mc1qkr4zr4] {
        width: 100%;
        justify-content: center;
    }

    .filter-controls[b-mc1qkr4zr4] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }
    
    .filter-actions[b-mc1qkr4zr4] {
        grid-column: span 1;
        justify-content: stretch;
        margin-top: var(--aa-spacing-sm);
    }
    
    .filter-actions .btn-clear-filters[b-mc1qkr4zr4] {
        flex: 1;
    }
    
    .results-header[b-mc1qkr4zr4] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        align-items: stretch;
    }
    
    .action-buttons[b-mc1qkr4zr4] {
        flex-direction: column;
        gap: 2px;
    }
    
    .catalogs-table[b-mc1qkr4zr4] {
        font-size: var(--aa-font-size-sm);
        min-width: 800px;
    }
    
    .catalog-info[b-mc1qkr4zr4] {
        flex-direction: column;
        text-align: center;
        gap: var(--aa-spacing-xs);
    }
    
    .catalog-avatar[b-mc1qkr4zr4] {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .radio-group[b-mc1qkr4zr4] {
        gap: var(--aa-spacing-md);
    }

    .radio-label span[b-mc1qkr4zr4] {
        display: none;
    }
}

/* Animations */
@keyframes aa-spin-b-mc1qkr4zr4 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Src/Presentation/Areas/Admin/Pages/Customers/Details.razor.rz.scp.css */
/* Customer Details Page - Two Column Layout with Actions Sidebar */
/* Following WrittenExpressions Coding Standards */

/* Breadcrumb Navigation */
.breadcrumb-section[b-9bkvn3im2w] {
    margin-bottom: var(--aa-spacing-lg);
}

.breadcrumb-nav[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: 0.875rem;
}

.breadcrumb-link[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: var(--aa-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover[b-9bkvn3im2w] {
    color: var(--aa-dark);
    text-decoration: underline;
}

.breadcrumb-separator[b-9bkvn3im2w] {
    color: var(--aa-secondary);
    font-size: 0.75rem;
}

.breadcrumb-current[b-9bkvn3im2w] {
    color: var(--aa-dark);
    font-weight: 600;
}

/* Main Layout - Two Column Design */
.details-layout[b-9bkvn3im2w] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--aa-spacing-xl);
    align-items: start;
}

.details-content[b-9bkvn3im2w] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-lg);
}

.details-sidebar[b-9bkvn3im2w] {
    position: sticky;
    top: var(--aa-spacing-lg);
}

/* Content Sections */
.details-section[b-9bkvn3im2w] {
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: var(--aa-spacing-lg);
    border: 1px solid #e9ecef;
}

.section-header[b-9bkvn3im2w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--aa-spacing-lg);
    padding-bottom: var(--aa-spacing-md);
    border-bottom: 1px solid #f1f3f4;
}

.section-title[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--aa-dark);
    margin: 0;
}

.section-title svg[b-9bkvn3im2w] {
    color: var(--aa-primary);
    width: 20px;
    height: 20px;
}

/* Status Badge */
.status-badge[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-success) 10%, transparent);
    color: var(--aa-success);
}

.status-badge.inactive[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-danger) 10%, transparent);
    color: var(--aa-danger);
}

/* Details Grid */
.details-grid[b-9bkvn3im2w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--aa-spacing-lg);
}

.detail-item[b-9bkvn3im2w] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.detail-label[b-9bkvn3im2w] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--aa-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-9bkvn3im2w] {
    font-size: 1rem;
    color: var(--aa-dark);
    font-weight: 500;
}

.detail-primary[b-9bkvn3im2w] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--aa-primary);
}

.detail-code[b-9bkvn3im2w] {
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid #e9ecef;
    font-size: 0.875rem;
}

.detail-subvalue[b-9bkvn3im2w] {
    font-size: 0.875rem;
    color: var(--aa-secondary);
    margin-top: 2px;
}

.datetime[b-9bkvn3im2w] {
    color: var(--aa-dark);
    font-weight: 500;
}

/* Customer Type Badge */
.customer-type-badge[b-9bkvn3im2w] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.customer-type-badge.incarcerated[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-primary) 10%, transparent);
    color: var(--aa-primary);
}

.customer-type-badge.public[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-success) 10%, transparent);
    color: var(--aa-success);
}

/* Contact Links */
.contact-link[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: var(--aa-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-9bkvn3im2w] {
    color: var(--aa-dark);
    text-decoration: underline;
}

/* DOC Number & Facility Info */
.doc-number[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-family: 'Courier New', monospace;
    font-weight: 600;
    background: color-mix(in srgb, var(--aa-primary) 10%, transparent);
    color: var(--aa-primary);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.875rem;
    display: inline-flex;
    width: fit-content;
}

.facility-info[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

/* Release Date */
.release-date[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 500;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.875rem;
    width: fit-content;
}

.release-date.future[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-success) 10%, transparent);
    color: var(--aa-success);
}

.release-date.past[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-warning) 10%, transparent);
    color: var(--aa-warning);
}

.future-date[b-9bkvn3im2w] {
    color: var(--aa-success);
    font-weight: 500;
}

.past-date[b-9bkvn3im2w] {
    color: var(--aa-warning);
    font-weight: 500;
}

/* User Account Status */
.user-linked[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: var(--aa-success);
    font-weight: 500;
}

/* Actions Sidebar */
.actions-card[b-9bkvn3im2w] {
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.actions-list[b-9bkvn3im2w] {
    display: flex;
    flex-direction: column;
}

.action-item[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
    padding: var(--aa-spacing-md);
    border: none;
    background: white;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f3f4;
}

.action-item:last-child[b-9bkvn3im2w] {
    border-bottom: none;
}

.action-item:hover:not(:disabled)[b-9bkvn3im2w] {
    background: #f8f9fa;
    transform: translateX(2px);
}

.action-item:disabled[b-9bkvn3im2w] {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-item:disabled:hover[b-9bkvn3im2w] {
    background: white;
    transform: none;
}

.action-item svg[b-9bkvn3im2w] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.action-item.primary svg[b-9bkvn3im2w] {
    color: var(--aa-primary);
}

.action-item.secondary svg[b-9bkvn3im2w] {
    color: var(--aa-secondary);
}

.action-item.success svg[b-9bkvn3im2w] {
    color: var(--aa-success);
}

.action-item.danger svg[b-9bkvn3im2w] {
    color: var(--aa-danger);
}

.action-content[b-9bkvn3im2w] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.action-title[b-9bkvn3im2w] {
    font-weight: 600;
    color: var(--aa-dark);
    font-size: 0.95rem;
}

.action-description[b-9bkvn3im2w] {
    font-size: 0.875rem;
    color: var(--aa-secondary);
    margin-top: 2px;
}

/* Loading, Error, and Empty States */
.loading-container[b-9bkvn3im2w] {
    text-align: center;
    padding: var(--aa-spacing-xl);
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-9bkvn3im2w] {
    font-size: 2rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-md);
}

.spin-animation[b-9bkvn3im2w] {
    animation: spin-b-9bkvn3im2w 1s linear infinite;
}

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

.error-container[b-9bkvn3im2w] {
    text-align: center;
    padding: var(--aa-spacing-xl);
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-icon[b-9bkvn3im2w] {
    font-size: 3rem;
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-md);
}

.error-message[b-9bkvn3im2w] {
    color: var(--aa-danger);
    background: color-mix(in srgb, var(--aa-danger) 10%, transparent);
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: monospace;
}

.error-actions[b-9bkvn3im2w] {
    display: flex;
    gap: var(--aa-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-retry[b-9bkvn3im2w],
.btn-back[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-retry[b-9bkvn3im2w] {
    background: var(--aa-primary);
    color: white;
}

.btn-retry:hover[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
}

.btn-back[b-9bkvn3im2w] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-secondary);
}

.btn-back:hover[b-9bkvn3im2w] {
    background: var(--aa-secondary);
    color: white;
}

.empty-state[b-9bkvn3im2w] {
    text-align: center;
    padding: var(--aa-spacing-xl);
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.empty-illustration[b-9bkvn3im2w] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-9bkvn3im2w] {
    font-size: 4rem;
    color: var(--aa-secondary);
    opacity: 0.5;
}

.btn-primary-large[b-9bkvn3im2w] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    background: var(--aa-primary);
    color: white;
    border: none;
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--aa-spacing-md);
}

.btn-primary-large:hover[b-9bkvn3im2w] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.no-data[b-9bkvn3im2w] {
    color: var(--aa-secondary);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .details-layout[b-9bkvn3im2w] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-lg);
    }

    .details-sidebar[b-9bkvn3im2w] {
        position: static;
        order: -1;
    }

    .actions-list[b-9bkvn3im2w] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-item[b-9bkvn3im2w] {
        flex: 1;
        min-width: 200px;
        border-bottom: none;
        border-right: 1px solid #f1f3f4;
    }

    .action-item:last-child[b-9bkvn3im2w] {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .details-grid[b-9bkvn3im2w] {
        grid-template-columns: 1fr;
    }

    .breadcrumb-nav[b-9bkvn3im2w] {
        flex-wrap: wrap;
    }

    .actions-list[b-9bkvn3im2w] {
        flex-direction: column;
    }

    .action-item[b-9bkvn3im2w] {
        border-right: none;
        border-bottom: 1px solid #f1f3f4;
    }

    .action-item:last-child[b-9bkvn3im2w] {
        border-bottom: none;
    }

    .section-header[b-9bkvn3im2w] {
        flex-direction: column;
        gap: var(--aa-spacing-sm);
        align-items: flex-start;
    }

    .error-actions[b-9bkvn3im2w] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .detail-primary[b-9bkvn3im2w] {
        font-size: 1.25rem;
    }

    .section-title[b-9bkvn3im2w] {
        font-size: 1.125rem;
    }

    .action-content[b-9bkvn3im2w] {
        gap: 2px;
    }

    .action-title[b-9bkvn3im2w] {
        font-size: 0.875rem;
    }

    .action-description[b-9bkvn3im2w] {
        font-size: 0.8rem;
    }
}

/* Associated Catalogs Section */
.section-info[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.catalog-count[b-9bkvn3im2w] {
    background: var(--aa-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Loading and Error States for Catalogs */
.loading-state-small[b-9bkvn3im2w],
.error-state-small[b-9bkvn3im2w],
.empty-state-small[b-9bkvn3im2w] {
    text-align: center;
    padding: var(--aa-spacing-lg);
    border-radius: var(--aa-border-radius-md);
    margin: var(--aa-spacing-md) 0;
}

.loading-state-small[b-9bkvn3im2w] {
    background: #f8f9fa;
    color: var(--aa-secondary);
}

.error-state-small[b-9bkvn3im2w] {
    background: #f8d7da;
    color: var(--aa-danger);
    border: 1px solid #f5c6cb;
}

.empty-state-small[b-9bkvn3im2w] {
    background: #f8f9fa;
    color: var(--aa-secondary);
    border: 1px solid #e9ecef;
}

.empty-state-small .empty-icon[b-9bkvn3im2w] {
    font-size: 3rem;
    margin-bottom: var(--aa-spacing-md);
    opacity: 0.3;
}

.empty-state-small h4[b-9bkvn3im2w] {
    margin-bottom: var(--aa-spacing-sm);
    color: var(--aa-dark);
}

/* Catalogs Table */
.catalogs-table-container[b-9bkvn3im2w] {
    background: white;
    border-radius: var(--aa-border-radius-md);
    overflow: hidden;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: var(--aa-spacing-md);
}

.catalogs-table[b-9bkvn3im2w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.catalogs-table thead[b-9bkvn3im2w] {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.catalogs-table thead th[b-9bkvn3im2w] {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--aa-dark);
    border-right: 1px solid #e9ecef;
    position: relative;
}

.catalogs-table thead th:last-child[b-9bkvn3im2w] {
    border-right: none;
}

.catalogs-table thead th .icon[b-9bkvn3im2w] {
    margin-right: 0.375rem;
}

.catalogs-table tbody tr[b-9bkvn3im2w] {
    transition: background-color 0.2s ease;
}

.catalogs-table tbody tr:hover[b-9bkvn3im2w] {
    background-color: #f8f9fa;
}

.catalogs-table tbody tr:not(:last-child)[b-9bkvn3im2w] {
    border-bottom: 1px solid #e9ecef;
}

.catalogs-table tbody td[b-9bkvn3im2w] {
    padding: 0.75rem;
    vertical-align: top;
    border-right: 1px solid #e9ecef;
}

.catalogs-table tbody td:last-child[b-9bkvn3im2w] {
    border-right: none;
}

/* Catalog Name Cell */
.catalog-name-cell[b-9bkvn3im2w] {
    min-width: 250px;
}

.catalog-name-info[b-9bkvn3im2w] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.catalog-name[b-9bkvn3im2w] {
    font-weight: 600;
}

.catalog-link[b-9bkvn3im2w] {
    color: var(--aa-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.catalog-link:hover[b-9bkvn3im2w] {
    color: var(--aa-dark);
    text-decoration: underline;
}

.catalog-description[b-9bkvn3im2w] {
    font-size: 0.8rem;
    color: var(--aa-secondary);
    line-height: 1.3;
}

/* Version Cell */
.version-cell[b-9bkvn3im2w] {
    min-width: 100px;
}

.version-badge[b-9bkvn3im2w] {
    background: #e9ecef;
    color: var(--aa-dark);
    padding: 0.25rem 0.5rem;
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Status Cells */
.status-cell[b-9bkvn3im2w] {
    text-align: center;
    min-width: 80px;
}

.status-indicator[b-9bkvn3im2w] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

.status-indicator.yes[b-9bkvn3im2w] {
    background-color: #d4edda;
    color: #155724;
}

.status-indicator.no[b-9bkvn3im2w] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Date Cell */
.date-cell[b-9bkvn3im2w] {
    min-width: 120px;
}

.date-info[b-9bkvn3im2w] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.date-primary[b-9bkvn3im2w] {
    font-weight: 500;
    color: var(--aa-dark);
}

.date-relative[b-9bkvn3im2w] {
    font-size: 0.75rem;
    color: var(--aa-secondary);
}

/* Catalog Status Cell */
.catalog-status-cell[b-9bkvn3im2w] {
    text-align: center;
    min-width: 100px;
}

.catalog-status-badge[b-9bkvn3im2w] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

.catalog-status-badge.active[b-9bkvn3im2w] {
    background-color: #d4edda;
    color: #155724;
}

.catalog-status-badge.inactive[b-9bkvn3im2w] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Common for Catalog Table */
.no-date[b-9bkvn3im2w] {
    color: var(--aa-secondary);
    font-style: italic;
}

/* Responsive Design for Catalog Table */
@media (max-width: 768px) {
    .catalogs-table-container[b-9bkvn3im2w] {
        overflow-x: auto;
    }
    
    .catalogs-table[b-9bkvn3im2w] {
        min-width: 800px;
    }
    
    .catalogs-table thead th[b-9bkvn3im2w],
    .catalogs-table tbody td[b-9bkvn3im2w] {
        padding: 0.5rem;
    }
    
    .catalog-name-cell[b-9bkvn3im2w] {
        min-width: 200px;
    }
    
    .version-cell[b-9bkvn3im2w],
    .status-cell[b-9bkvn3im2w],
    .date-cell[b-9bkvn3im2w],
    .catalog-status-cell[b-9bkvn3im2w] {
        min-width: 70px;
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Customers/Index.razor.rz.scp.css */
/* Customer Index Page - Clean Modern Styles */
/* Hero section styles now come from aa-admin.css global styles */

/* Full Width Layout */
.aa-page-container[b-prf8iqrevt] {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Actions Section - Below Hero */
.customers-actions[b-prf8iqrevt] {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(184, 169, 217, 0.2);
    padding: var(--aa-spacing-sm) 0;
}

.customers-actions-content[b-prf8iqrevt] {
    padding: 0 var(--aa-spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-xl);
}

/* Left side - Customer Type Filter */
.customers-actions-left[b-prf8iqrevt] {
    flex: 1;
}

.customer-type-filter[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.customer-type-label[b-prf8iqrevt] {
    font-weight: 600;
    color: var(--aa-dark);
    white-space: nowrap;
}

.radio-group[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-lg);
}

.radio-option[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.radio-option input[type="radio"][b-prf8iqrevt] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--aa-primary);
}

.radio-label[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    cursor: pointer;
    font-weight: 500;
    color: var(--aa-dark);
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s ease;
}

.radio-label:hover[b-prf8iqrevt] {
    color: var(--aa-primary);
}

.radio-option input[type="radio"]:checked + .radio-label[b-prf8iqrevt] {
    color: var(--aa-primary);
    font-weight: 600;
}

.radio-label svg[b-prf8iqrevt] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Right side - Primary Actions */
.customers-actions-right[b-prf8iqrevt] {
    flex-shrink: 0;
}

.customers-actions-primary[b-prf8iqrevt] {
    display: flex;
    gap: var(--aa-spacing-md);
}

.btn-add-customer[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: white;
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(184, 169, 217, 0.3);
    white-space: nowrap;
}

.btn-add-customer:hover[b-prf8iqrevt] {
    background: linear-gradient(135deg, #9b87c4, #b8a9d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
}

.btn-add-customer i[b-prf8iqrevt] {
    font-size: 0.75rem;
}

/* Filters Panel */
.filters-panel[b-prf8iqrevt] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.filters-header[b-prf8iqrevt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-sm);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.filters-title[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-weight: 600;
    color: var(--aa-dark);
}

.btn-clear-all[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    background: #dc3545;
    color: white;
    border: none;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-all:hover[b-prf8iqrevt] {
    background: #c82333;
    transform: scale(1.05);
}

.filters-content[b-prf8iqrevt] {
    padding: var(--aa-spacing-sm);
}

.search-group[b-prf8iqrevt] {
    margin-bottom: var(--aa-spacing-sm);
}

.filter-label[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 600;
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-xs);
    font-size: 0.875rem;
}

/* Search Input Container */
.search-input-container[b-prf8iqrevt] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-prf8iqrevt] {
    width: 100%;
    padding: var(--aa-spacing-sm) 3rem var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-md);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: white;
}

.search-input:focus[b-prf8iqrevt] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.search-loading[b-prf8iqrevt] {
    position: absolute;
    right: var(--aa-spacing-md);
    color: var(--aa-primary);
    font-size: 0.875rem;
    z-index: 1;
}

.search-clear-btn[b-prf8iqrevt] {
    position: absolute;
    right: var(--aa-spacing-md);
    background: none;
    border: none;
    color: var(--aa-secondary);
    cursor: pointer;
    padding: var(--aa-spacing-xs);
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    z-index: 1;
}

.search-clear-btn:hover[b-prf8iqrevt] {
    background: #f8d7da;
    color: var(--aa-danger);
}

.filter-controls[b-prf8iqrevt] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr auto;
    gap: var(--aa-spacing-md);
    align-items: end;
}

.filter-group[b-prf8iqrevt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter-label[b-prf8iqrevt] {
    font-weight: 600;
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-xs);
    font-size: 0.875rem;
}

.filter-input[b-prf8iqrevt] {
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    width: 100%;
}

.filter-input:focus[b-prf8iqrevt] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.filter-select[b-prf8iqrevt] {
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    width: 100%;
}

.filter-select:focus[b-prf8iqrevt] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.filter-actions[b-prf8iqrevt] {
    display: flex;
    gap: var(--aa-spacing-sm);
    align-items: end;
}

.btn-apply-filters[b-prf8iqrevt] {
    background: var(--aa-primary);
    color: white;
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
}

.btn-apply-filters:hover[b-prf8iqrevt] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
}

.btn-clear-filters[b-prf8iqrevt] {
    background: #6c757d;
    color: white;
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
}

.btn-clear-filters:hover[b-prf8iqrevt] {
    background: color-mix(in srgb, #6c757d 90%, black);
}

/* Content Area */
.content-area[b-prf8iqrevt] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Loading State */
.loading-state[b-prf8iqrevt] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-secondary);
}

.loading-spinner[b-prf8iqrevt] {
    font-size: 3rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-lg);
}

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

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

/* Error State */
.error-state[b-prf8iqrevt] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.error-icon[b-prf8iqrevt] {
    font-size: 4rem;
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-lg);
}

.error-message[b-prf8iqrevt] {
    color: var(--aa-danger);
    background: #f8d7da;
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: monospace;
}

.btn-retry[b-prf8iqrevt] {
    background: var(--aa-primary);
    color: white;
    border: none;
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover[b-prf8iqrevt] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-prf8iqrevt] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.empty-illustration[b-prf8iqrevt] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-prf8iqrevt] {
    font-size: 5rem;
    color: var(--aa-secondary);
    opacity: 0.5;
}

.btn-primary-large[b-prf8iqrevt], .btn-secondary-large[b-prf8iqrevt] {
    padding: var(--aa-spacing-md) var(--aa-spacing-xl);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    border: none;
}

.btn-primary-large[b-prf8iqrevt] {
    background: var(--aa-primary);
    color: white;
}

.btn-secondary-large[b-prf8iqrevt] {
    background: var(--aa-secondary);
    color: white;
}

.btn-primary-large:hover[b-prf8iqrevt], .btn-secondary-large:hover[b-prf8iqrevt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Results Header */
.results-header[b-prf8iqrevt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.results-info[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-weight: 500;
}

.results-text[b-prf8iqrevt] {
    color: var(--aa-dark);
}

.page-size-control[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: 0.875rem;
}

.page-size-select[b-prf8iqrevt] {
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border: 2px solid #dee2e6;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    transition: all 0.2s ease;
}

.page-size-select:focus[b-prf8iqrevt] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

/* Enhanced Table - Full Width */
.table-container[b-prf8iqrevt] {
    overflow-x: auto;
    width: 100%;
}

.customers-table[b-prf8iqrevt] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--aa-font-size-xs); /* Using CSS variable: 0.50rem / 8px */
}

.customers-table thead th[b-prf8iqrevt] {
    background: #f8f9fa;
    padding: var(--aa-spacing-1);
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.customers-table td[b-prf8iqrevt] {
    padding: var(--aa-spacing-1);
    vertical-align: top;
    border-bottom: 1px solid #f1f3f4;
}

.sort-btn[b-prf8iqrevt] {
    background: none;
    border: none;
    color: var(--aa-dark);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs);
    border-radius: var(--aa-border-radius-sm);
    transition: all 0.2s ease;
    width: 100%;
}

.sort-btn:hover[b-prf8iqrevt] {
    background: #e9ecef;
    color: var(--aa-primary);
}

.sort-icon[b-prf8iqrevt] {
    color: var(--aa-primary);
}

.customer-row[b-prf8iqrevt] {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f3f4;
}

.customer-row:hover[b-prf8iqrevt] {
    background: #f8f9fa;
}

.customer-row.inactive[b-prf8iqrevt] {
    opacity: 0.6;
    background: #fff3cd;
}

/* Customer Info */
.customer-info[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.customer-avatar[b-prf8iqrevt] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aa-font-size-sm);
}

.avatar-icon.incarcerated[b-prf8iqrevt] {
    background: #e3f2fd;
    color: #1976d2;
}

.avatar-icon.public[b-prf8iqrevt] {
    background: #e8f5e8;
    color: #2e7d32;
}

.customer-details[b-prf8iqrevt] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.customer-name[b-prf8iqrevt] {
    font-weight: 600;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-xs);
}

.customer-type-badge[b-prf8iqrevt] {
    max-width: 75px;
    font-size: var(--aa-font-size-xxs);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-xs);
    font-weight: 500;
    text-transform: uppercase;
}

.customer-type-badge.incarcerated[b-prf8iqrevt] {
    background: #e3f2fd;
    color: #1976d2;
}

.customer-type-badge.public[b-prf8iqrevt] {
    background: #e8f5e8;
    color: #2e7d32;
}

/* Contact Info - Email Only */
.contact-info[b-prf8iqrevt] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
    min-width: 200px;
}

.contact-item[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: 0.875rem;
}

.contact-link[b-prf8iqrevt] {
    color: var(--aa-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-prf8iqrevt] {
    color: var(--aa-dark);
    text-decoration: underline;
}

.no-contact[b-prf8iqrevt] {
    color: var(--aa-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

/* DOC Number */
.doc-number[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-family: 'Courier New', monospace;
    font-weight: 600;
    background: #e3f2fd;
    color: #1976d2;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    white-space: nowrap;
}

/* Facility Info */
.facility-info[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

/* Release Date */
.release-date[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 500;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    white-space: nowrap;
}

.release-date.future[b-prf8iqrevt] {
    background: #d4edda;
    color: #155724;
}

.release-date.past[b-prf8iqrevt] {
    background: #f8d7da;
    color: #721c24;
}

/* Created Info */
.created-info[b-prf8iqrevt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.created-date[b-prf8iqrevt] {
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

.created-by[b-prf8iqrevt] {
    font-size: var(--aa-font-size-2);
    color: var(--aa-secondary);
}

/* Status Badge */
.status-badge[b-prf8iqrevt] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-prf8iqrevt] {
    background: #d4edda;
    color: #155724;
}

.status-badge.inactive[b-prf8iqrevt] {
    background: #f8d7da;
    color: #721c24;
}

/* Action Buttons */
.action-buttons[b-prf8iqrevt] {
    display: flex;
    gap: var(--aa-spacing-xs);
}

.action-btn[b-prf8iqrevt] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--aa-font-size-xs);
}

.action-btn.view[b-prf8iqrevt] {
    background: #e7f3ff;
    color: #0066cc;
}

.action-btn.edit[b-prf8iqrevt] {
    background: #fff3cd;
    color: #856404;
}

.action-btn.deactivate[b-prf8iqrevt] {
    background: #f8d7da;
    color: #721c24;
}

.action-btn.activate[b-prf8iqrevt] {
    background: #d4edda;
    color: #155724;
}

/* ADMIN ONLY - Permanent Delete Button */
.action-btn.permanent-delete[b-prf8iqrevt] {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: white;
    border: 2px solid #dc3545;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    position: relative;
}

.action-btn.permanent-delete:hover[b-prf8iqrevt] {
    background: linear-gradient(135deg, #c82333, #a02331);
    border-color: #c82333;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
    animation: danger-pulse-b-prf8iqrevt 0.5s ease-in-out;
}

@keyframes danger-pulse-b-prf8iqrevt {
    0%, 100% { box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5); }
    50% { box-shadow: 0 6px 20px rgba(220, 53, 69, 0.8); }
}

.action-btn:hover[b-prf8iqrevt] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pagination */
.pagination-container[b-prf8iqrevt] {
    padding: var(--aa-spacing-lg);
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.pagination[b-prf8iqrevt] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.page-btn[b-prf8iqrevt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    color: var(--aa-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-prf8iqrevt] {
    background: var(--aa-primary);
    color: white;
    transform: scale(1.05);
}

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

.page-info[b-prf8iqrevt] {
    margin: 0 var(--aa-spacing-lg);
    font-weight: 500;
    color: var(--aa-dark);
}

.no-data[b-prf8iqrevt] {
    color: var(--aa-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .customers-actions-content[b-prf8iqrevt] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        text-align: center;
    }
    
    .customers-actions-left[b-prf8iqrevt],
    .customers-actions-right[b-prf8iqrevt] {
        width: 100%;
    }
    
    .customer-type-filter[b-prf8iqrevt] {
        justify-content: center;
    }
    
    .radio-group[b-prf8iqrevt] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .customers-actions-primary[b-prf8iqrevt] {
        width: 100%;
        justify-content: center;
    }
    
    .btn-add-customer[b-prf8iqrevt] {
        padding: var(--aa-spacing-sm) var(--aa-spacing-md);
        font-size: 0.9rem;
        justify-content: center;
        width: 100%;
    }

    .filter-controls[b-prf8iqrevt] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }
    
    .filter-actions[b-prf8iqrevt] {
        grid-column: span 1;
        justify-content: stretch;
        margin-top: var(--aa-spacing-sm);
    }
    
    .filter-actions .btn-apply-filters[b-prf8iqrevt],
    .filter-actions .btn-clear-filters[b-prf8iqrevt] {
        flex: 1;
    }
    
    .results-header[b-prf8iqrevt] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        align-items: stretch;
    }
    
    .action-buttons[b-prf8iqrevt] {
        flex-direction: column;
        gap: 2px;
    }
    
    .customers-table[b-prf8iqrevt] {
        font-size: 0.875rem;
        min-width: 800px;
    }
    
    .customer-info[b-prf8iqrevt] {
        flex-direction: column;
        text-align: center;
        gap: var(--aa-spacing-xs);
    }
    
    .customer-avatar[b-prf8iqrevt] {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .radio-group[b-prf8iqrevt] {
        gap: var(--aa-spacing-md);
    }

    .radio-label span[b-prf8iqrevt] {
        display: none;
    }

    .customer-type-label[b-prf8iqrevt] {
        font-size: 0.875rem;
    }
}

/* Animations */
@keyframes aa-spin-b-prf8iqrevt {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Src/Presentation/Areas/Admin/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard Specific Styles - Full Width Layout */
/* Hero section styles now come from aa-admin.css global styles */

/* Dashboard Main Content Container - Full Width */
.dashboard-main-content[b-cktef5qs9i] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--aa-spacing-xl);
    background: #f8f9fa;
    min-height: calc(100vh - 200px);
}

.dashboard-section-title[b-cktef5qs9i] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2d1b49;
    margin: 0 0 var(--aa-spacing-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.dashboard-section-title[b-cktef5qs9i]::before {
    content: '';
    width: 4px;
    height: 24px;
    background: #b8a9d9;
    border-radius: var(--aa-border-radius-sm);
}

/* Subsection Titles */
.subsection-title[b-cktef5qs9i] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d1b49;
    margin: var(--aa-spacing-lg) 0 var(--aa-spacing-md) 0;
    padding-bottom: var(--aa-spacing-xs);
    border-bottom: 2px solid #e9ecef;
}

/* Statistics Grid - Improved for Full Width */
.dashboard-stats[b-cktef5qs9i] {
    margin-bottom: var(--aa-spacing-xl);
}

.stats-grid[b-cktef5qs9i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--aa-spacing-lg);
    max-width: none;
}

.stat-card[b-cktef5qs9i] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    padding: var(--aa-spacing-lg);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.1);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.stat-card:hover[b-cktef5qs9i] {
    border-color: rgba(184, 169, 217, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 169, 217, 0.15);
}

.stat-icon[b-cktef5qs9i] {
    width: 60px;
    height: 60px;
    border-radius: var(--aa-border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon-orders[b-cktef5qs9i] { background: linear-gradient(135deg, #3498db, #2980b9); }
.stat-icon-revenue[b-cktef5qs9i] { background: linear-gradient(135deg, #27ae60, #229954); }
.stat-icon-customers[b-cktef5qs9i] { background: linear-gradient(135deg, #e67e22, #d35400); }
.stat-icon-delivery[b-cktef5qs9i] { background: linear-gradient(135deg, #9b59b6, #8e44ad); }

.stat-content[b-cktef5qs9i] {
    flex: 1;
}

.stat-number[b-cktef5qs9i] {
    font-size: 2rem;
    font-weight: 700;
    color: #2d1b49;
    margin: 0 0 var(--aa-spacing-xs) 0;
    line-height: 1;
}

.stat-label[b-cktef5qs9i] {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0 0 var(--aa-spacing-xs) 0;
    font-weight: 500;
}

.stat-change[b-cktef5qs9i] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.stat-change-positive[b-cktef5qs9i] { color: #27ae60; }
.stat-change-negative[b-cktef5qs9i] { color: #e74c3c; }
.stat-change-neutral[b-cktef5qs9i] { color: #6c757d; }

/* Two Column Layout for Customer Statistics and Quick Actions */
.dashboard-content-grid[b-cktef5qs9i] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--aa-spacing-xl);
    margin-top: var(--aa-spacing-xl);
}

/* Customer Statistics Section */
.dashboard-customer-stats[b-cktef5qs9i] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    padding: var(--aa-spacing-lg);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.1);
}

/* Customer Stats Overview */
.customer-stats-overview[b-cktef5qs9i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--aa-spacing-md);
    margin-bottom: var(--aa-spacing-lg);
}

.stat-card-small[b-cktef5qs9i] {
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.stat-card-small:hover[b-cktef5qs9i] {
    background: #e9ecef;
    transform: translateY(-1px);
}

.stat-icon-small[b-cktef5qs9i] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon-total[b-cktef5qs9i] { background: #b8a9d9; }
.stat-icon-active[b-cktef5qs9i] { background: #27ae60; }
.stat-icon-new[b-cktef5qs9i] { background: #3498db; }

.stat-content-small[b-cktef5qs9i] {
    flex: 1;
}

.stat-number-small[b-cktef5qs9i] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d1b49;
    margin: 0;
    line-height: 1;
}

.stat-label-small[b-cktef5qs9i] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 2px 0 0 0;
    font-weight: 500;
}

/* Customer Type Breakdown */
.customer-type-breakdown[b-cktef5qs9i] {
    margin-bottom: var(--aa-spacing-lg);
}

.type-stats-grid[b-cktef5qs9i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-md);
}

.type-stat-card[b-cktef5qs9i] {
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-md);
    border: 1px solid #e9ecef;
}

.type-stat-header[b-cktef5qs9i] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    margin-bottom: var(--aa-spacing-sm);
}

.type-icon[b-cktef5qs9i] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
}

.type-icon.incarcerated[b-cktef5qs9i] { background: #6f42c1; }
.type-icon.public[b-cktef5qs9i] { background: #17a2b8; }

.type-label[b-cktef5qs9i] {
    font-weight: 600;
    color: #2d1b49;
    font-size: 0.875rem;
}

.type-stat-content[b-cktef5qs9i] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--aa-spacing-sm);
}

.type-stat-number[b-cktef5qs9i] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d1b49;
}

.type-stat-percentage[b-cktef5qs9i] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
}

.type-stat-bar[b-cktef5qs9i] {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.type-stat-fill[b-cktef5qs9i] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.incarcerated-fill[b-cktef5qs9i] { background: #6f42c1; }
.public-fill[b-cktef5qs9i] { background: #17a2b8; }

/* State Distribution */
.state-distribution[b-cktef5qs9i] {
    margin-bottom: var(--aa-spacing-lg);
}

.state-stats-list[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-sm);
}

.state-stat-item[b-cktef5qs9i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-sm);
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.state-stat-item:hover[b-cktef5qs9i] {
    background: #e9ecef;
}

.state-info[b-cktef5qs9i] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.state-name[b-cktef5qs9i] {
    font-weight: 600;
    color: #2d1b49;
}

.state-abbr[b-cktef5qs9i] {
    font-size: 0.75rem;
    background: #b8a9d9;
    color: white;
    padding: 2px 6px;
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
}

.state-numbers[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.state-count[b-cktef5qs9i] {
    font-weight: 700;
    color: #2d1b49;
}

.state-facilities[b-cktef5qs9i] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Facility Distribution */
.facility-distribution[b-cktef5qs9i] {
    margin-bottom: var(--aa-spacing-lg);
}

.facility-stats-list[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.facility-stat-item[b-cktef5qs9i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-sm);
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.facility-stat-item:hover[b-cktef5qs9i] {
    background: #e9ecef;
}

.facility-info[b-cktef5qs9i] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.facility-info i[b-cktef5qs9i] {
    color: #b8a9d9;
}

.facility-name[b-cktef5qs9i] {
    font-weight: 500;
    color: #2d1b49;
}

.facility-count[b-cktef5qs9i] {
    font-weight: 600;
    color: #2d1b49;
    font-size: 0.875rem;
}

/* Footer Links */
.state-stats-footer[b-cktef5qs9i],
.facility-stats-footer[b-cktef5qs9i] {
    margin-top: var(--aa-spacing-md);
    text-align: center;
}

.view-all-link[b-cktef5qs9i] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: #b8a9d9;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    transition: all 0.2s ease;
}

.view-all-link:hover[b-cktef5qs9i] {
    background: rgba(184, 169, 217, 0.1);
    color: #9b87c4;
}

/* Loading and Error States */
.loading-state[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-xl);
    color: #6c757d;
}

.loading-spinner[b-cktef5qs9i] {
    font-size: 2rem;
    color: #b8a9d9;
    margin-bottom: var(--aa-spacing-md);
}

.error-state[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-xl);
    text-align: center;
}

.error-icon[b-cktef5qs9i] {
    font-size: 3rem;
    color: #e74c3c;
    margin-bottom: var(--aa-spacing-md);
}

.error-content h4[b-cktef5qs9i] {
    color: #2d1b49;
    margin: 0 0 var(--aa-spacing-sm) 0;
}

.error-content p[b-cktef5qs9i] {
    color: #6c757d;
    margin: 0 0 var(--aa-spacing-md) 0;
}

/* Quick Actions Section */
.dashboard-quick-actions[b-cktef5qs9i] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    padding: var(--aa-spacing-lg);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.1);
}

.quick-actions-grid[b-cktef5qs9i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-md);
    margin-bottom: var(--aa-spacing-lg);
}

.quick-action-btn[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-md);
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 2px solid rgba(184, 169, 217, 0.2);
    border-radius: var(--aa-border-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #4a4a4a;
    text-align: center;
}

.quick-action-btn:hover[b-cktef5qs9i] {
    background: linear-gradient(135deg, #f0eef7, #f8f6fc);
    border-color: rgba(184, 169, 217, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.2);
}

.quick-action-icon[b-cktef5qs9i] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.quick-action-label[b-cktef5qs9i] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #2d1b49;
    text-align: center;
    line-height: 1.2;
}

.quick-action-btn:hover .quick-action-icon[b-cktef5qs9i] {
    background: linear-gradient(135deg, #9b87c4, #b8a9d9);
    transform: scale(1.05);
}

/* Recent Activity in Quick Actions */
.recent-activity-section[b-cktef5qs9i] {
    border-top: 1px solid #e9ecef;
    padding-top: var(--aa-spacing-lg);
}

.activity-list-compact[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-sm);
    margin-bottom: var(--aa-spacing-md);
}

.activity-item-compact[b-cktef5qs9i] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-sm);
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.activity-item-compact:hover[b-cktef5qs9i] {
    background: #f0eef7;
    border-color: rgba(184, 169, 217, 0.3);
}

.activity-icon-compact[b-cktef5qs9i] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
}

.activity-icon-compact.activity-icon-success[b-cktef5qs9i] { background: #27ae60; }
.activity-icon-compact.activity-icon-info[b-cktef5qs9i] { background: #3498db; }
.activity-icon-compact.activity-icon-warning[b-cktef5qs9i] { background: #f39c12; }

.activity-content-compact[b-cktef5qs9i] {
    flex: 1;
    min-width: 0;
}

.activity-title-compact[b-cktef5qs9i] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d1b49;
    margin: 0 0 2px 0;
    line-height: 1.2;
}

.activity-description-compact[b-cktef5qs9i] {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.activity-time-compact[b-cktef5qs9i] {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
}

.activity-actions-compact[b-cktef5qs9i] {
    text-align: center;
}

/* Small button style */
.aa-btn-small[b-cktef5qs9i] {
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    font-size: 0.75rem;
}

/* Small Empty State (for individual sections) */
.empty-state-small[b-cktef5qs9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-lg);
    text-align: center;
    background: #f8f9fa;
    border-radius: var(--aa-border-radius-md);
    border: 1px solid #e9ecef;
    color: #6c757d;
}

.empty-state-small i[b-cktef5qs9i] {
    font-size: 1.5rem;
    color: #b8a9d9;
    margin-bottom: var(--aa-spacing-sm);
}

.empty-state-small p[b-cktef5qs9i] {
    margin: 0 0 var(--aa-spacing-xs) 0;
    font-weight: 500;
    color: #2d1b49;
}

.empty-state-small small[b-cktef5qs9i] {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-content-grid[b-cktef5qs9i] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-lg);
    }
    
    .dashboard-quick-actions[b-cktef5qs9i] {
        order: -1;
    }
    
    .dashboard-main-content[b-cktef5qs9i] {
        padding: var(--aa-spacing-lg);
    }
    
    .stats-grid[b-cktef5qs9i] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--aa-spacing-md);
    }
}

@media (max-width: 768px) {
    .dashboard-main-content[b-cktef5qs9i] {
        padding: var(--aa-spacing-md);
    }
    
    .stats-grid[b-cktef5qs9i] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }
    
    .stat-card[b-cktef5qs9i] {
        padding: var(--aa-spacing-md);
    }
    
    .customer-stats-overview[b-cktef5qs9i] {
        grid-template-columns: 1fr;
    }
    
    .type-stats-grid[b-cktef5qs9i] {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid[b-cktef5qs9i] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-sm);
    }
    
    .quick-action-btn[b-cktef5qs9i] {
        padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    }
    
    .quick-action-icon[b-cktef5qs9i] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .quick-action-label[b-cktef5qs9i] {
        font-size: 0.8rem;
    }
    
    .state-stat-item[b-cktef5qs9i],
    .facility-stat-item[b-cktef5qs9i] {
        flex-direction: column;
        gap: var(--aa-spacing-xs);
        text-align: center;
    }
    
    .state-numbers[b-cktef5qs9i] {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .stat-card[b-cktef5qs9i] {
        flex-direction: column;
        text-align: center;
        gap: var(--aa-spacing-sm);
    }
    
    .stat-card-small[b-cktef5qs9i] {
        flex-direction: column;
        text-align: center;
        gap: var(--aa-spacing-xs);
    }
    
    .dashboard-section-title[b-cktef5qs9i] {
        font-size: 1.25rem;
    }
    
    .subsection-title[b-cktef5qs9i] {
        font-size: 1rem;
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Database/Status.razor.rz.scp.css */
/* Database Status Page - Admin Area */
/* Following WrittenExpressions Coding Standards */

.page-actions[b-ga4djlw7mn] {
    margin-bottom: var(--aa-spacing-lg);
}

.page-actions-content[b-ga4djlw7mn] {
    display: flex;
    justify-content: flex-end;
}

.btn-test-connection[b-ga4djlw7mn] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    background: var(--aa-primary);
    color: white;
    border: none;
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-test-connection:hover:not(:disabled)[b-ga4djlw7mn] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-test-connection:disabled[b-ga4djlw7mn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

.status-card[b-ga4djlw7mn] {
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    padding: var(--aa-spacing-lg);
}

.status-card-title[b-ga4djlw7mn] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--aa-dark);
    margin: 0 0 var(--aa-spacing-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.status-grid[b-ga4djlw7mn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-lg);
}

.status-item[b-ga4djlw7mn] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.status-item.full-width[b-ga4djlw7mn] {
    grid-column: span 2;
}

.status-label[b-ga4djlw7mn] {
    font-weight: 600;
    color: var(--aa-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-value[b-ga4djlw7mn] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 500;
    font-size: 1rem;
    color: var(--aa-dark);
}

.status-connected[b-ga4djlw7mn] {
    color: var(--aa-success);
}

.status-disconnected[b-ga4djlw7mn] {
    color: var(--aa-danger);
}

.status-testing[b-ga4djlw7mn] {
    color: var(--aa-warning);
}

.error-details[b-ga4djlw7mn] {
    background: color-mix(in srgb, var(--aa-danger) 10%, transparent);
    color: var(--aa-danger);
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--aa-danger) 20%, transparent);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .status-grid[b-ga4djlw7mn] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }

    .status-item.full-width[b-ga4djlw7mn] {
        grid-column: span 1;
    }

    .page-actions-content[b-ga4djlw7mn] {
        justify-content: center;
    }

    .btn-test-connection[b-ga4djlw7mn] {
        width: 100%;
        justify-content: center;
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Facilities/Details.razor.rz.scp.css */
/* Facility Details Page - Two Column Layout with Actions Sidebar */
/* Following WrittenExpressions Coding Standards */

/* Breadcrumb Navigation */
.breadcrumb-section[b-hlw543cfni] {
    margin-bottom: var(--aa-spacing-lg);
}

.breadcrumb-nav[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: var(--aa-font-size-sm);
}

.breadcrumb-link[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: var(--aa-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover[b-hlw543cfni] {
    color: var(--aa-dark);
    text-decoration: underline;
}

.breadcrumb-separator[b-hlw543cfni] {
    color: var(--aa-secondary);
    font-size: var(--aa-font-size-xs);
}

.breadcrumb-current[b-hlw543cfni] {
    color: var(--aa-dark);
    font-weight: 600;
}

/* Main Layout - Two Column Design */
.details-layout[b-hlw543cfni] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--aa-spacing-xl);
    align-items: start;
}

.details-content[b-hlw543cfni] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-lg);
}

.details-sidebar[b-hlw543cfni] {
    position: sticky;
    top: var(--aa-spacing-lg);
}

/* Content Sections */
.details-section[b-hlw543cfni] {
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: var(--aa-spacing-lg);
    border: 1px solid #e9ecef;
}

.section-header[b-hlw543cfni] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--aa-spacing-lg);
    padding-bottom: var(--aa-spacing-md);
    border-bottom: 1px solid #f1f3f4;
}

.section-title[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: var(--aa-font-size-xl);
    font-weight: 600;
    color: var(--aa-dark);
    margin: 0;
}

.section-title svg[b-hlw543cfni] {
    color: var(--aa-primary);
    width: 20px;
    height: 20px;
}

/* Status Badge */
.status-badge[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-hlw543cfni] {
    background: color-mix(in srgb, var(--aa-success) 10%, transparent);
    color: var(--aa-success);
}

.status-badge.inactive[b-hlw543cfni] {
    background: color-mix(in srgb, var(--aa-danger) 10%, transparent);
    color: var(--aa-danger);
}

/* Details Grid */
.details-grid[b-hlw543cfni] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--aa-spacing-lg);
}

.detail-item[b-hlw543cfni] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

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

.detail-label[b-hlw543cfni] {
    font-size: var(--aa-font-size-sm);
    font-weight: 600;
    color: var(--aa-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-hlw543cfni] {
    font-size: var(--aa-font-size-base);
    color: var(--aa-dark);
    font-weight: 500;
}

.detail-primary[b-hlw543cfni] {
    font-size: var(--aa-font-size-2xl);
    font-weight: 700;
    color: var(--aa-primary);
}

.detail-code[b-hlw543cfni] {
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid #e9ecef;
    font-size: var(--aa-font-size-sm);
}

.detail-subvalue[b-hlw543cfni] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-secondary);
    margin-top: 2px;
}

.datetime[b-hlw543cfni] {
    color: var(--aa-dark);
    font-weight: 500;
}

/* Jurisdiction Badge */
.jurisdiction-badge[b-hlw543cfni] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.jurisdiction-badge.federal[b-hlw543cfni] {
    background: color-mix(in srgb, #1976d2 10%, transparent);
    color: #1976d2;
}

.jurisdiction-badge.state[b-hlw543cfni] {
    background: color-mix(in srgb, #2e7d32 10%, transparent);
    color: #2e7d32;
}

.jurisdiction-badge.county[b-hlw543cfni] {
    background: color-mix(in srgb, #856404 10%, transparent);
    color: #856404;
}

/* Contact Links */
.contact-link[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: var(--aa-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-hlw543cfni] {
    color: var(--aa-dark);
    text-decoration: underline;
}

/* State Info */
.state-info[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

/* Facility Type Badge */
.facility-type-badge[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 500;
    background: color-mix(in srgb, var(--aa-primary) 10%, transparent);
    color: var(--aa-primary);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    display: inline-flex;
    width: fit-content;
}

/* Permissions Grid */
.permissions-grid[b-hlw543cfni] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--aa-spacing-md);
}

.permission-item[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-md);
    border: 2px solid;
    transition: all 0.2s ease;
}

.permission-item.allowed[b-hlw543cfni] {
    border-color: color-mix(in srgb, var(--aa-success) 30%, transparent);
    background: color-mix(in srgb, var(--aa-success) 5%, transparent);
}

.permission-item.allowed svg[b-hlw543cfni] {
    color: var(--aa-success);
    width: 24px;
    height: 24px;
}

.permission-item.denied[b-hlw543cfni] {
    border-color: color-mix(in srgb, var(--aa-danger) 30%, transparent);
    background: color-mix(in srgb, var(--aa-danger) 5%, transparent);
}

.permission-item.denied svg[b-hlw543cfni] {
    color: var(--aa-danger);
    width: 24px;
    height: 24px;
}

.permission-info[b-hlw543cfni] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.permission-title[b-hlw543cfni] {
    font-weight: 600;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.permission-status[b-hlw543cfni] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-secondary);
    font-weight: 500;
}

/* Notes Content */
.notes-content[b-hlw543cfni] {
    background: #f8f9fa;
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    border-left: 4px solid var(--aa-primary);
    font-size: var(--aa-font-size-sm);
    line-height: 1.6;
    color: var(--aa-dark);
    white-space: pre-wrap;
}

/* Actions Sidebar */
.actions-card[b-hlw543cfni] {
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.actions-list[b-hlw543cfni] {
    display: flex;
    flex-direction: column;
}

.action-item[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
    padding: var(--aa-spacing-md);
    border: none;
    background: white;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f3f4;
}

.action-item:last-child[b-hlw543cfni] {
    border-bottom: none;
}

.action-item:hover:not(:disabled)[b-hlw543cfni] {
    background: #f8f9fa;
    transform: translateX(2px);
}

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

.action-item:disabled:hover[b-hlw543cfni] {
    background: white;
    transform: none;
}

.action-item svg[b-hlw543cfni] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.action-item.primary svg[b-hlw543cfni] {
    color: var(--aa-primary);
}

.action-item.secondary svg[b-hlw543cfni] {
    color: var(--aa-secondary);
}

.action-item.success svg[b-hlw543cfni] {
    color: var(--aa-success);
}

.action-item.danger svg[b-hlw543cfni] {
    color: var(--aa-danger);
}

.action-content[b-hlw543cfni] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.action-title[b-hlw543cfni] {
    font-weight: 600;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.action-description[b-hlw543cfni] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-secondary);
    margin-top: 2px;
}

/* Loading, Error, and Empty States */
.loading-container[b-hlw543cfni] {
    text-align: center;
    padding: var(--aa-spacing-xl);
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-hlw543cfni] {
    font-size: var(--aa-font-size-3xl);
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-md);
}

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

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

.error-container[b-hlw543cfni] {
    text-align: center;
    padding: var(--aa-spacing-xl);
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-icon[b-hlw543cfni] {
    font-size: var(--aa-font-size-4xl);
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-md);
}

.error-message[b-hlw543cfni] {
    color: var(--aa-danger);
    background: color-mix(in srgb, var(--aa-danger) 10%, transparent);
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: monospace;
}

.error-actions[b-hlw543cfni] {
    display: flex;
    gap: var(--aa-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-retry[b-hlw543cfni],
.btn-back[b-hlw543cfni] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-retry[b-hlw543cfni] {
    background: var(--aa-primary);
    color: white;
}

.btn-retry:hover[b-hlw543cfni] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
}

.btn-back[b-hlw543cfni] {
    background: var(--aa-light);
    color: var(--aa-dark);
    border: 1px solid var(--aa-secondary);
}

.btn-back:hover[b-hlw543cfni] {
    background: var(--aa-secondary);
    color: white;
}

.empty-state[b-hlw543cfni] {
    text-align: center;
    padding: var(--aa-spacing-xl);
    background: white;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.empty-illustration[b-hlw543cfni] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-hlw543cfni] {
    font-size: var(--aa-font-size-5xl);
    color: var(--aa-secondary);
    opacity: 0.5;
}

.btn-primary-large[b-hlw543cfni] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    background: var(--aa-primary);
    color: white;
    border: none;
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--aa-spacing-md);
}

.btn-primary-large:hover[b-hlw543cfni] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.no-data[b-hlw543cfni] {
    color: var(--aa-secondary);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .details-layout[b-hlw543cfni] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-lg);
    }

    .details-sidebar[b-hlw543cfni] {
        position: static;
        order: -1;
    }

    .actions-list[b-hlw543cfni] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-item[b-hlw543cfni] {
        flex: 1;
        min-width: 200px;
        border-bottom: none;
        border-right: 1px solid #f1f3f4;
    }

    .action-item:last-child[b-hlw543cfni] {
        border-right: none;
    }
}

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

    .permissions-grid[b-hlw543cfni] {
        grid-template-columns: 1fr;
    }

    .breadcrumb-nav[b-hlw543cfni] {
        flex-wrap: wrap;
    }

    .actions-list[b-hlw543cfni] {
        flex-direction: column;
    }

    .action-item[b-hlw543cfni] {
        border-right: none;
        border-bottom: 1px solid #f1f3f4;
    }

    .action-item:last-child[b-hlw543cfni] {
        border-bottom: none;
    }

    .section-header[b-hlw543cfni] {
        flex-direction: column;
        gap: var(--aa-spacing-sm);
        align-items: flex-start;
    }

    .error-actions[b-hlw543cfni] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .detail-primary[b-hlw543cfni] {
        font-size: var(--aa-font-size-xl);
    }

    .section-title[b-hlw543cfni] {
        font-size: var(--aa-font-size-lg);
    }

    .action-content[b-hlw543cfni] {
        gap: 2px;
    }

    .action-title[b-hlw543cfni] {
        font-size: var(--aa-font-size-xs);
    }

    .action-description[b-hlw543cfni] {
        font-size: var(--aa-font-size-2);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Facilities/Index.razor.rz.scp.css */
/* Facilities Index Page - Clean Modern Styles */
/* Hero section styles now come from aa-admin.css global styles */

/* Full Width Layout */
.aa-page-container[b-bh4dvgdljs] {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Actions Section - Below Hero */
.facilities-actions[b-bh4dvgdljs] {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(184, 169, 217, 0.2);
    padding: var(--aa-spacing-sm) 0;
}

.facilities-actions-content[b-bh4dvgdljs] {
    padding: 0 var(--aa-spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-xl);
}

/* Left side - Jurisdiction Filter */
.facilities-actions-left[b-bh4dvgdljs] {
    flex: 1;
}

.jurisdiction-filter[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.jurisdiction-label[b-bh4dvgdljs] {
    font-weight: 600;
    color: var(--aa-dark);
    white-space: nowrap;
}

.radio-group[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-lg);
}

.radio-option[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.radio-option input[type="radio"][b-bh4dvgdljs] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--aa-primary);
}

.radio-label[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    cursor: pointer;
    font-weight: 500;
    color: var(--aa-dark);
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s ease;
}

.radio-label:hover[b-bh4dvgdljs] {
    color: var(--aa-primary);
}

.radio-option input[type="radio"]:checked + .radio-label[b-bh4dvgdljs] {
    color: var(--aa-primary);
    font-weight: 600;
}

.radio-label svg[b-bh4dvgdljs] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Right side - Primary Actions */
.facilities-actions-right[b-bh4dvgdljs] {
    flex-shrink: 0;
}

.btn-add-facility[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: white;
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    font-size: var(--aa-font-size-xs);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(184, 169, 217, 0.3);
    white-space: nowrap;
}

.btn-add-facility:hover[b-bh4dvgdljs] {
    background: linear-gradient(135deg, #9b87c4, #b8a9d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
}

.btn-add-facility i[b-bh4dvgdljs] {
    font-size: var(--aa-font-size-xs);
}

/* Filters Panel */
.filters-panel[b-bh4dvgdljs] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.filters-content[b-bh4dvgdljs] {
    padding: var(--aa-spacing-sm);
}

.filter-label[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 600;
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-sm);
}

/* Search Input Container */
.search-input-container[b-bh4dvgdljs] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-bh4dvgdljs] {
    width: 100%;
    padding: var(--aa-spacing-sm) 3rem var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    transition: all 0.3s ease;
    background: white;
}

.search-input:focus[b-bh4dvgdljs] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.search-loading[b-bh4dvgdljs] {
    position: absolute;
    right: var(--aa-spacing-md);
    color: var(--aa-primary);
    font-size: var(--aa-font-size-sm);
    z-index: 1;
}

.search-clear-btn[b-bh4dvgdljs] {
    position: absolute;
    right: var(--aa-spacing-md);
    background: none;
    border: none;
    color: var(--aa-secondary);
    cursor: pointer;
    padding: var(--aa-spacing-xs);
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: var(--aa-font-size-sm);
    z-index: 1;
}

.search-clear-btn:hover[b-bh4dvgdljs] {
    background: #f8d7da;
    color: var(--aa-danger);
}

.filter-controls[b-bh4dvgdljs] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--aa-spacing-md);
    align-items: end;
}

.filter-group[b-bh4dvgdljs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter-select[b-bh4dvgdljs] {
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    font-size: var(--aa-font-size-sm);
    transition: all 0.2s ease;
    width: 100%;
}

.filter-select:focus[b-bh4dvgdljs] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.filter-actions[b-bh4dvgdljs] {
    display: flex;
    gap: var(--aa-spacing-sm);
    align-items: end;
}

.btn-clear-filters[b-bh4dvgdljs] {
    background: #6c757d;
    color: white;
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--aa-font-size-sm);
    white-space: nowrap;
}

/* Content Area */
.content-area[b-bh4dvgdljs] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Loading State */
.loading-state[b-bh4dvgdljs] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-secondary);
}

.loading-spinner[b-bh4dvgdljs] {
    font-size: 3rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-lg);
}

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

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

/* Error State */
.error-state[b-bh4dvgdljs] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.error-icon[b-bh4dvgdljs] {
    font-size: 4rem;
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-lg);
}

.error-message[b-bh4dvgdljs] {
    color: var(--aa-danger);
    background: #f8d7da;
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: monospace;
}

.btn-retry[b-bh4dvgdljs] {
    background: var(--aa-primary);
    color: white;
    border: none;
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover[b-bh4dvgdljs] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-bh4dvgdljs] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.empty-illustration[b-bh4dvgdljs] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-bh4dvgdljs] {
    font-size: 5rem;
    color: var(--aa-secondary);
    opacity: 0.5;
}

.btn-primary-large[b-bh4dvgdljs], .btn-secondary-large[b-bh4dvgdljs] {
    padding: var(--aa-spacing-md) var(--aa-spacing-xl);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--aa-font-size-base);
    border: none;
}

.btn-primary-large[b-bh4dvgdljs] {
    background: var(--aa-primary);
    color: white;
}

.btn-secondary-large[b-bh4dvgdljs] {
    background: var(--aa-secondary);
    color: white;
}

.btn-primary-large:hover[b-bh4dvgdljs], .btn-secondary-large:hover[b-bh4dvgdljs] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Results Header */
.results-header[b-bh4dvgdljs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.results-info[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-weight: 500;
}

.results-text[b-bh4dvgdljs] {
    color: var(--aa-dark);
}

.page-size-control[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: var(--aa-font-size-sm);
}

.page-size-select[b-bh4dvgdljs] {
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border: 2px solid #dee2e6;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    transition: all 0.2s ease;
}

.page-size-select:focus[b-bh4dvgdljs] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

/* Enhanced Table - Full Width */
.table-container[b-bh4dvgdljs] {
    overflow-x: auto;
    width: 100%;
}

.facilities-table[b-bh4dvgdljs] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--aa-font-size-xs);
}

.facilities-table thead th[b-bh4dvgdljs] {
    background: #f8f9fa;
    padding: var(--aa-spacing-1);
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.facilities-table td[b-bh4dvgdljs] {
    padding: var(--aa-spacing-1);
    vertical-align: top;
    border-bottom: 1px solid #f1f3f4;
}

.sort-btn[b-bh4dvgdljs] {
    background: none;
    border: none;
    color: var(--aa-dark);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs);
    border-radius: var(--aa-border-radius-sm);
    transition: all 0.2s ease;
    width: 100%;
}

.sort-btn:hover[b-bh4dvgdljs] {
    background: #e9ecef;
    color: var(--aa-primary);
}

.sort-icon[b-bh4dvgdljs] {
    color: var(--aa-primary);
}

.facility-row[b-bh4dvgdljs] {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f3f4;
}

.facility-row:hover[b-bh4dvgdljs] {
    background: #f8f9fa;
}

.facility-row.inactive[b-bh4dvgdljs] {
    opacity: 0.6;
    background: #fff3cd;
}

/* Facility Info */
.facility-info[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.facility-avatar[b-bh4dvgdljs] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aa-font-size-sm);
    background: #e3f2fd;
    color: #1976d2;
}

.facility-details[b-bh4dvgdljs] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.facility-name[b-bh4dvgdljs] {
    font-weight: 600;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-xs);
}

/* Location Info */
.location-info[b-bh4dvgdljs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.location-city[b-bh4dvgdljs] {
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

.location-address[b-bh4dvgdljs] {
    font-size: var(--aa-font-size-2);
    color: var(--aa-secondary);
}

/* State Badge */
.state-badge[b-bh4dvgdljs] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-weight: 600;
    background: #e3f2fd;
    color: #1976d2;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    white-space: nowrap;
}

/* Jurisdiction Badge */
.jurisdiction-badge[b-bh4dvgdljs] {
    display: inline-flex;
    align-items: center;
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.jurisdiction-badge.federal[b-bh4dvgdljs] {
    background: #e3f2fd;
    color: #1976d2;
}

.jurisdiction-badge.state[b-bh4dvgdljs] {
    background: #e8f5e8;
    color: #2e7d32;
}

.jurisdiction-badge.county[b-bh4dvgdljs] {
    background: #fff3cd;
    color: #856404;
}

/* Facility Type */
.facility-type[b-bh4dvgdljs] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-dark);
}

/* Created Info */
.created-info[b-bh4dvgdljs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.created-date[b-bh4dvgdljs] {
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

.created-by[b-bh4dvgdljs] {
    font-size: var(--aa-font-size-2);
    color: var(--aa-secondary);
}

/* Status Badge */
.status-badge[b-bh4dvgdljs] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-bh4dvgdljs] {
    background: #d4edda;
    color: #155724;
}

.status-badge.inactive[b-bh4dvgdljs] {
    background: #f8d7da;
    color: #721c24;
}

/* Action Buttons */
.action-buttons[b-bh4dvgdljs] {
    display: flex;
    gap: var(--aa-spacing-xs);
}

.action-btn[b-bh4dvgdljs] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--aa-font-size-xs);
}

.action-btn.view[b-bh4dvgdljs] {
    background: #e7f3ff;
    color: #0066cc;
}

.action-btn.edit[b-bh4dvgdljs] {
    background: #fff3cd;
    color: #856404;
}

.action-btn.deactivate[b-bh4dvgdljs] {
    background: #f8d7da;
    color: #721c24;
}

.action-btn.activate[b-bh4dvgdljs] {
    background: #d4edda;
    color: #155724;
}

.action-btn:hover[b-bh4dvgdljs] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pagination */
.pagination-container[b-bh4dvgdljs] {
    padding: var(--aa-spacing-lg);
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.pagination[b-bh4dvgdljs] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.page-btn[b-bh4dvgdljs] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    color: var(--aa-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-bh4dvgdljs] {
    background: var(--aa-primary);
    color: white;
    transform: scale(1.05);
}

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

.page-info[b-bh4dvgdljs] {
    margin: 0 var(--aa-spacing-lg);
    font-weight: 500;
    color: var(--aa-dark);
}

.no-data[b-bh4dvgdljs] {
    color: var(--aa-secondary);
    font-style: italic;
    font-size: var(--aa-font-size-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .facilities-actions-content[b-bh4dvgdljs] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        text-align: center;
    }
    
    .facilities-actions-left[b-bh4dvgdljs],
    .facilities-actions-right[b-bh4dvgdljs] {
        width: 100%;
    }
    
    .jurisdiction-filter[b-bh4dvgdljs] {
        justify-content: center;
    }
    
    .radio-group[b-bh4dvgdljs] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-add-facility[b-bh4dvgdljs] {
        padding: var(--aa-spacing-sm) var(--aa-spacing-md);
        font-size: var(--aa-font-size-sm);
        justify-content: center;
        width: 100%;
    }

    .filter-controls[b-bh4dvgdljs] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }
    
    .filter-actions[b-bh4dvgdljs] {
        grid-column: span 1;
        justify-content: stretch;
        margin-top: var(--aa-spacing-sm);
    }
    
    .filter-actions .btn-clear-filters[b-bh4dvgdljs] {
        flex: 1;
    }
    
    .results-header[b-bh4dvgdljs] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        align-items: stretch;
    }
    
    .action-buttons[b-bh4dvgdljs] {
        flex-direction: column;
        gap: 2px;
    }
    
    .facilities-table[b-bh4dvgdljs] {
        font-size: var(--aa-font-size-sm);
        min-width: 800px;
    }
}

@media (max-width: 480px) {
    .radio-group[b-bh4dvgdljs] {
        gap: var(--aa-spacing-md);
    }

    .radio-label span[b-bh4dvgdljs] {
        display: none;
    }

    .jurisdiction-label[b-bh4dvgdljs] {
        font-size: var(--aa-font-size-sm);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Roles/Index.razor.rz.scp.css */
/* Roles Management Page Styles - Following Admin Section Standards */

/* Full Width Layout */
.aa-page-container[b-s7vhkrcq1o] {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Page Actions Section */
.roles-actions[b-s7vhkrcq1o] {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(184, 169, 217, 0.2);
    padding: var(--aa-spacing-sm) 0;
}

.roles-actions-content[b-s7vhkrcq1o] {
    padding: 0 var(--aa-spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-xl);
}

.roles-actions-left[b-s7vhkrcq1o],
.roles-actions-right[b-s7vhkrcq1o] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
}

/* Action Buttons */
.btn-back[b-s7vhkrcq1o],
.btn-add-role[b-s7vhkrcq1o] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-back[b-s7vhkrcq1o] {
    background: white;
    color: var(--aa-dark);
    border: 2px solid #dee2e6;
}

.btn-back:hover[b-s7vhkrcq1o] {
    background: #f8f9fa;
    border-color: var(--aa-primary);
    color: var(--aa-primary);
}

.btn-add-role[b-s7vhkrcq1o] {
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: white;
    box-shadow: 0 2px 6px rgba(184, 169, 217, 0.3);
}

.btn-add-role:hover[b-s7vhkrcq1o] {
    background: linear-gradient(135deg, #9b87c4, #b8a9d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
}

/* Content Area */
.content-area[b-s7vhkrcq1o] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Loading State */
.loading-state[b-s7vhkrcq1o] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-secondary);
}

.loading-spinner[b-s7vhkrcq1o] {
    font-size: 3rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-lg);
}

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

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

/* Error State */
.error-state[b-s7vhkrcq1o] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.error-icon[b-s7vhkrcq1o] {
    font-size: 4rem;
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-lg);
}

.error-message[b-s7vhkrcq1o] {
    color: var(--aa-danger);
    background: #f8d7da;
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: monospace;
}

.btn-retry[b-s7vhkrcq1o] {
    background: var(--aa-primary);
    color: white;
    border: none;
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover[b-s7vhkrcq1o] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-s7vhkrcq1o] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.empty-illustration[b-s7vhkrcq1o] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-s7vhkrcq1o] {
    font-size: 5rem;
    color: var(--aa-secondary);
    opacity: 0.5;
}

.btn-primary-large[b-s7vhkrcq1o] {
    padding: var(--aa-spacing-md) var(--aa-spacing-xl);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    border: none;
    background: var(--aa-primary);
    color: white;
}

.btn-primary-large:hover[b-s7vhkrcq1o] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Roles Grid */
.roles-grid[b-s7vhkrcq1o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--aa-spacing-4);
    padding: var(--aa-spacing-4);
}

/* Role Card */
.role-card[b-s7vhkrcq1o] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-sm);
    padding: var(--aa-spacing-4);
    transition: all var(--aa-transition-base) ease;
    border: 2px solid transparent;
}

.role-card:hover[b-s7vhkrcq1o] {
    box-shadow: var(--aa-shadow-md);
    transform: translateY(-2px);
}

.role-card.system-role[b-s7vhkrcq1o] {
    border-color: var(--aa-warning);
    background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
}

.role-card.custom-role[b-s7vhkrcq1o] {
    border-color: var(--aa-info);
    background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
}

/* Role Card Header */
.role-card-header[b-s7vhkrcq1o] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
    margin-bottom: var(--aa-spacing-3);
    padding-bottom: var(--aa-spacing-3);
    border-bottom: 2px solid var(--aa-light-gray);
}

.role-icon[b-s7vhkrcq1o] {
    width: var(--aa-spacing-10);
    height: var(--aa-spacing-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aa-font-size-xxl);
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 100%);
    color: #2d1b49;
    flex-shrink: 0;
}

.role-info[b-s7vhkrcq1o] {
    flex: 1;
}

.role-name[b-s7vhkrcq1o] {
    margin: 0;
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-dark);
}

.system-badge[b-s7vhkrcq1o] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: 2px var(--aa-spacing-2);
    background: var(--aa-warning-light);
    color: var(--aa-warning);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    margin-top: var(--aa-spacing-1);
}

/* Role Card Body */
.role-card-body[b-s7vhkrcq1o] {
    margin-bottom: var(--aa-spacing-3);
}

.role-stat[b-s7vhkrcq1o] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    color: var(--aa-dark);
    font-size: var(--aa-font-size-sm);
}

.role-stat svg[b-s7vhkrcq1o] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-lg);
}

/* Role Card Footer */
.role-card-footer[b-s7vhkrcq1o] {
    display: flex;
    gap: var(--aa-spacing-2);
    padding-top: var(--aa-spacing-3);
    border-top: 1px solid var(--aa-light-gray);
}

.role-action-btn[b-s7vhkrcq1o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    border: none;
    flex: 1;
}

.role-action-btn.view[b-s7vhkrcq1o] {
    background: var(--aa-info-light);
    color: var(--aa-info);
}

.role-action-btn.view:hover[b-s7vhkrcq1o] {
    background: var(--aa-info);
    color: var(--aa-white);
}

.role-action-btn.edit[b-s7vhkrcq1o] {
    background: var(--aa-warning-light);
    color: var(--aa-warning);
    padding: var(--aa-spacing-2);
    flex: 0;
}

.role-action-btn.edit:hover[b-s7vhkrcq1o] {
    background: var(--aa-warning);
    color: var(--aa-white);
}

.role-action-btn.delete[b-s7vhkrcq1o] {
    background: var(--aa-error-light);
    color: var(--aa-error);
    padding: var(--aa-spacing-2);
    flex: 0;
}

.role-action-btn.delete:hover[b-s7vhkrcq1o] {
    background: var(--aa-error);
    color: var(--aa-white);
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 768px) {
    .roles-grid[b-s7vhkrcq1o] {
        grid-template-columns: 1fr;
        padding: var(--aa-spacing-2);
    }

    .roles-actions-content[b-s7vhkrcq1o] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
    }

    .roles-actions-left[b-s7vhkrcq1o],
    .roles-actions-right[b-s7vhkrcq1o] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .role-card-footer[b-s7vhkrcq1o] {
        flex-direction: column;
    }

    .role-action-btn[b-s7vhkrcq1o] {
        flex: 1;
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Users/Index.razor.rz.scp.css */
/* Users Management Page Styles - Following Admin Section Standards */
/* Hero section styles come from aa-admin.css global styles */

/* Full Width Layout */
.aa-page-container[b-y18dskp0j1] {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Actions Section - Below Hero */
.users-actions[b-y18dskp0j1] {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(184, 169, 217, 0.2);
    padding: var(--aa-spacing-sm) 0;
}

.users-actions-content[b-y18dskp0j1] {
    padding: 0 var(--aa-spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-xl);
}

/* Left side - Status Filter */
.users-actions-left[b-y18dskp0j1] {
    flex: 1;
}

.user-status-filter[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.user-status-label[b-y18dskp0j1] {
    font-weight: 600;
    color: var(--aa-dark);
    white-space: nowrap;
}

.radio-group[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-lg);
}

.radio-option[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.radio-option input[type="radio"][b-y18dskp0j1] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--aa-primary);
}

.radio-label[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    cursor: pointer;
    font-weight: 500;
    color: var(--aa-dark);
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s ease;
}

.radio-label:hover[b-y18dskp0j1] {
    color: var(--aa-primary);
}

.radio-option input[type="radio"]:checked + .radio-label[b-y18dskp0j1] {
    color: var(--aa-primary);
    font-weight: 600;
}

.radio-label svg[b-y18dskp0j1] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Right side - Primary Actions */
.users-actions-right[b-y18dskp0j1] {
    flex-shrink: 0;
    display: flex;
    gap: var(--aa-spacing-md);
}

.btn-manage-roles[b-y18dskp0j1],
.btn-add-user[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-manage-roles[b-y18dskp0j1] {
    background: white;
    color: var(--aa-dark);
    border: 2px solid #dee2e6;
}

.btn-manage-roles:hover[b-y18dskp0j1] {
    background: #f8f9fa;
    border-color: var(--aa-primary);
    color: var(--aa-primary);
}

.btn-add-user[b-y18dskp0j1] {
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: white;
    box-shadow: 0 2px 6px rgba(184, 169, 217, 0.3);
}

.btn-add-user:hover[b-y18dskp0j1] {
    background: linear-gradient(135deg, #9b87c4, #b8a9d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
}

/* Filters Panel */
.filters-panel[b-y18dskp0j1] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.filters-content[b-y18dskp0j1] {
    padding: var(--aa-spacing-sm);
}

.filter-controls[b-y18dskp0j1] {
    display: grid;
    grid-template-columns: 2fr 1.5fr auto;
    gap: var(--aa-spacing-md);
    align-items: end;
}

.filter-group[b-y18dskp0j1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter-label[b-y18dskp0j1] {
    font-weight: 600;
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-xs);
    font-size: 0.875rem;
}

/* Search Input Container */
.search-input-container[b-y18dskp0j1] {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-input[b-y18dskp0j1],
.search-input[b-y18dskp0j1] {
    width: 100%;
    padding: var(--aa-spacing-sm) 3rem var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-md);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: white;
}

.filter-input:focus[b-y18dskp0j1],
.search-input:focus[b-y18dskp0j1] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.search-loading[b-y18dskp0j1] {
    position: absolute;
    right: var(--aa-spacing-md);
    color: var(--aa-primary);
    font-size: 0.875rem;
    z-index: 1;
}

.search-clear-btn[b-y18dskp0j1] {
    position: absolute;
    right: var(--aa-spacing-md);
    background: none;
    border: none;
    color: var(--aa-secondary);
    cursor: pointer;
    padding: var(--aa-spacing-xs);
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    z-index: 1;
}

.search-clear-btn:hover[b-y18dskp0j1] {
    background: #f8d7da;
    color: var(--aa-danger);
}

.filter-select[b-y18dskp0j1] {
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    width: 100%;
}

.filter-select:focus[b-y18dskp0j1] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

.filter-actions[b-y18dskp0j1] {
    display: flex;
    gap: var(--aa-spacing-sm);
    align-items: end;
}

.btn-clear-filters[b-y18dskp0j1] {
    background: #6c757d;
    color: white;
    border: none;
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
}

.btn-clear-filters:hover[b-y18dskp0j1] {
    background: color-mix(in srgb, #6c757d 90%, black);
}

/* Content Area */
.content-area[b-y18dskp0j1] {
    background: white;
    border-radius: var(--aa-border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: var(--aa-spacing-sm);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Loading State */
.loading-state[b-y18dskp0j1] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-secondary);
}

.loading-spinner[b-y18dskp0j1] {
    font-size: 3rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-lg);
}

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

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

/* Error State */
.error-state[b-y18dskp0j1] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.error-icon[b-y18dskp0j1] {
    font-size: 4rem;
    color: var(--aa-danger);
    margin-bottom: var(--aa-spacing-lg);
}

.error-message[b-y18dskp0j1] {
    color: var(--aa-danger);
    background: #f8d7da;
    padding: var(--aa-spacing-md);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-md) 0;
    font-family: monospace;
}

.btn-retry[b-y18dskp0j1] {
    background: var(--aa-primary);
    color: white;
    border: none;
    padding: var(--aa-spacing-md) var(--aa-spacing-lg);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover[b-y18dskp0j1] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-y18dskp0j1] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
}

.empty-illustration[b-y18dskp0j1] {
    margin-bottom: var(--aa-spacing-lg);
}

.empty-icon[b-y18dskp0j1] {
    font-size: 5rem;
    color: var(--aa-secondary);
    opacity: 0.5;
}

.empty-actions[b-y18dskp0j1] {
    margin-top: var(--aa-spacing-lg);
}

.btn-primary-large[b-y18dskp0j1], .btn-secondary-large[b-y18dskp0j1] {
    padding: var(--aa-spacing-md) var(--aa-spacing-xl);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    border: none;
}

.btn-primary-large[b-y18dskp0j1] {
    background: var(--aa-primary);
    color: white;
}

.btn-secondary-large[b-y18dskp0j1] {
    background: var(--aa-secondary);
    color: white;
}

.btn-primary-large:hover[b-y18dskp0j1], .btn-secondary-large:hover[b-y18dskp0j1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Results Header */
.results-header[b-y18dskp0j1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.results-info[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-weight: 500;
}

.results-text[b-y18dskp0j1] {
    color: var(--aa-dark);
}

.results-controls[b-y18dskp0j1] {
    display: flex;
    gap: var(--aa-spacing-md);
}

.page-size-control[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: 0.875rem;
}

.page-size-select[b-y18dskp0j1] {
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border: 2px solid #dee2e6;
    border-radius: var(--aa-border-radius-sm);
    background: white;
    transition: all 0.2s ease;
}

.page-size-select:focus[b-y18dskp0j1] {
    outline: none;
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(127, 112, 155, 0.1);
}

/* Enhanced Table */
.table-container[b-y18dskp0j1] {
    overflow-x: auto;
    width: 100%;
}

.users-table[b-y18dskp0j1] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--aa-font-size-xs);
}

.users-table thead th[b-y18dskp0j1] {
    background: #f8f9fa;
    padding: var(--aa-spacing-1);
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.users-table td[b-y18dskp0j1] {
    padding: var(--aa-spacing-1);
    vertical-align: top;
    border-bottom: 1px solid #f1f3f4;
}

.sort-btn[b-y18dskp0j1] {
    background: none;
    border: none;
    color: var(--aa-dark);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs);
    border-radius: var(--aa-border-radius-sm);
    transition: all 0.2s ease;
    width: 100%;
}

.sort-btn:hover[b-y18dskp0j1] {
    background: #e9ecef;
    color: var(--aa-primary);
}

.sort-icon[b-y18dskp0j1] {
    color: var(--aa-primary);
}

.user-row[b-y18dskp0j1] {
    transition: all 0.2s ease;
}

.user-row:hover[b-y18dskp0j1] {
    background: #f8f9fa;
}

.user-row.locked[b-y18dskp0j1] {
    opacity: 0.6;
    background: #fff3cd;
}

/* User Info */
.user-info[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
}

.user-avatar[b-y18dskp0j1] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
}

.avatar-icon[b-y18dskp0j1] {
    font-size: var(--aa-font-size-sm);
    color: #1976d2;
}

.user-details[b-y18dskp0j1] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.user-email[b-y18dskp0j1] {
    font-weight: 600;
    color: var(--aa-dark);
    font-size: var(--aa-font-size-xs);
}

.verified-badge[b-y18dskp0j1],
.unverified-badge[b-y18dskp0j1] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xxs);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-xs);
    font-weight: 500;
}

.verified-badge[b-y18dskp0j1] {
    background: #d4edda;
    color: #155724;
}

.unverified-badge[b-y18dskp0j1] {
    background: #f8d7da;
    color: #721c24;
}

/* Customer Link */
.customer-link[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

/* Roles Container */
.roles-container[b-y18dskp0j1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aa-spacing-xs);
}

.role-badge[b-y18dskp0j1] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xxs);
    font-weight: 600;
    text-transform: uppercase;
}

.role-admin[b-y18dskp0j1] {
    background: #f8d7da;
    color: #721c24;
}

.role-manager[b-y18dskp0j1] {
    background: #e3f2fd;
    color: #1976d2;
}

.role-custom[b-y18dskp0j1] {
    background: #e8f5e8;
    color: #2e7d32;
}

/* Phone Info */
.phone-info[b-y18dskp0j1] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
}

.verified-icon[b-y18dskp0j1] {
    color: #155724;
    font-size: var(--aa-font-size-xs);
}

/* 2FA Badge */
.\32 fa-badge[b-y18dskp0j1] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    background: #e3f2fd;
    color: #1976d2;
    font-size: var(--aa-font-size-xxs);
    font-weight: 600;
    margin-top: var(--aa-spacing-xs);
}

/* Created Info */
.created-info[b-y18dskp0j1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.created-date[b-y18dskp0j1] {
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-dark);
}

/* Status Badge */
.status-badge[b-y18dskp0j1] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-y18dskp0j1] {
    background: #d4edda;
    color: #155724;
}

.status-badge.locked[b-y18dskp0j1] {
    background: #f8d7da;
    color: #721c24;
}

/* Action Buttons */
.action-buttons[b-y18dskp0j1] {
    display: flex;
    gap: var(--aa-spacing-xs);
}

.action-btn[b-y18dskp0j1] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--aa-font-size-xs);
}

.action-btn.edit[b-y18dskp0j1] {
    background: #fff3cd;
    color: #856404;
}

.action-btn.lock[b-y18dskp0j1] {
    background: #f8d7da;
    color: #721c24;
}

.action-btn.unlock[b-y18dskp0j1] {
    background: #d4edda;
    color: #155724;
}

.action-btn.reset-password[b-y18dskp0j1] {
    background: #e7f3ff;
    color: #0066cc;
}

.action-btn.permanent-delete[b-y18dskp0j1] {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: white;
    border: 2px solid #dc3545;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.action-btn.permanent-delete:hover[b-y18dskp0j1] {
    background: linear-gradient(135deg, #c82333, #a02331);
    border-color: #c82333;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
    animation: danger-pulse-b-y18dskp0j1 0.5s ease-in-out;
}

@keyframes danger-pulse-b-y18dskp0j1 {
    0%, 100% { box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5); }
    50% { box-shadow: 0 6px 20px rgba(220, 53, 69, 0.8); }
}

.action-btn:hover[b-y18dskp0j1] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pagination */
.pagination-container[b-y18dskp0j1] {
    padding: var(--aa-spacing-lg);
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.pagination[b-y18dskp0j1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

.page-btn[b-y18dskp0j1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    color: var(--aa-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-y18dskp0j1] {
    background: var(--aa-primary);
    color: white;
    transform: scale(1.05);
}

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

.page-info[b-y18dskp0j1] {
    margin: 0 var(--aa-spacing-lg);
    font-weight: 500;
    color: var(--aa-dark);
}

.no-data[b-y18dskp0j1] {
    color: var(--aa-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .users-actions-content[b-y18dskp0j1] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        text-align: center;
    }
    
    .users-actions-left[b-y18dskp0j1],
    .users-actions-right[b-y18dskp0j1] {
        width: 100%;
    }
    
    .user-status-filter[b-y18dskp0j1] {
        justify-content: center;
    }
    
    .radio-group[b-y18dskp0j1] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .users-actions-right[b-y18dskp0j1] {
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }
    
    .btn-manage-roles[b-y18dskp0j1],
    .btn-add-user[b-y18dskp0j1] {
        width: 100%;
        justify-content: center;
    }

    .filter-controls[b-y18dskp0j1] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }
    
    .filter-actions[b-y18dskp0j1] {
        justify-content: stretch;
        margin-top: var(--aa-spacing-sm);
    }
    
    .filter-actions .btn-clear-filters[b-y18dskp0j1] {
        flex: 1;
    }
    
    .results-header[b-y18dskp0j1] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        align-items: stretch;
    }
    
    .action-buttons[b-y18dskp0j1] {
        flex-direction: column;
        gap: 2px;
    }
    
    .users-table[b-y18dskp0j1] {
        font-size: 0.875rem;
        min-width: 800px;
    }
    
    .user-info[b-y18dskp0j1] {
        flex-direction: column;
        text-align: center;
        gap: var(--aa-spacing-xs);
    }
    
    .user-avatar[b-y18dskp0j1] {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .radio-group[b-y18dskp0j1] {
        gap: var(--aa-spacing-md);
    }

    .radio-label span[b-y18dskp0j1] {
        display: none;
    }

    .user-status-label[b-y18dskp0j1] {
        font-size: 0.875rem;
    }
}
/* /Src/Presentation/Areas/Admin/Shared/AdminLayout.razor.rz.scp.css */
/* Admin Layout - Horizontal Navigation Styling */

.admin-layout[b-jcqwosh7yl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* Admin Header - Horizontal Navigation */
.admin-header[b-jcqwosh7yl] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    color: #4a4a4a;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-navbar[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    padding: var(--aa-spacing-6) var(--aa-spacing-6); /* Using correct numbered spacing */
    max-width: none;
    width: 100%;
    gap: var(--aa-spacing-8); /* Using correct numbered spacing */
    min-height: 64px; /* Ensure minimum navbar height */
}

.admin-navbar-brand[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.admin-brand-link[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: #2d1b49;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.admin-brand-link:hover[b-jcqwosh7yl] {
    color: #1a0f29;
}

/* Horizontal Navigation Section */
.admin-navbar-nav[b-jcqwosh7yl] {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 var(--aa-spacing-6);
}

.admin-nav-links[b-jcqwosh7yl] {
    display: flex;
    gap: 16px; /* Fixed spacing between buttons */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.admin-nav-link[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: #2d1b49;
    text-decoration: none;
    padding: var(--aa-spacing-1) var(--aa-spacing-2); /* Keep the original button padding */
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px; /* Fixed border radius */
    transition: background-color 0.2s ease; /* Simple transition for background only */
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(184, 169, 217, 0.2);
    min-width: 100px;
    justify-content: center;
    text-align: center;
}

.admin-nav-link:hover[b-jcqwosh7yl] {
    background: #fff9c4; /* Simple pale yellow background on hover */
    color: #2d1b49;
    border-color: #f0e68c; /* Slightly darker yellow border on hover */
}

.admin-nav-link.active[b-jcqwosh7yl] {
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: white;
    border-color: #9b87c4;
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.5);
}

.admin-nav-link.active:hover[b-jcqwosh7yl] {
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8); /* Keep active state on hover */
}

.admin-nav-link i[b-jcqwosh7yl] {
    font-size: 1rem;
    flex-shrink: 0;
}

.admin-nav-link span[b-jcqwosh7yl] {
    white-space: nowrap;
}

.admin-navbar-menu[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-6);
    flex-shrink: 0;
}

.admin-utility-links[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
}

.admin-main-site-link[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: #2d1b49;
    text-decoration: none;
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(184, 169, 217, 0.6);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(184, 169, 217, 0.2);
}

.admin-main-site-link:hover[b-jcqwosh7yl] {
    background: #fff9c4; /* Same pale yellow hover effect */
    border-color: #f0e68c;
}

.admin-user-menu[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-4);
}

/* User Dropdown Styles - Bootstrap Collapse Based */
.admin-user-dropdown[b-jcqwosh7yl] {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-user-dropdown-btn[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    background: rgba(255, 255, 255, 0.9);
    color: #2d1b49;
    border: 2px solid rgba(184, 169, 217, 0.6);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(184, 169, 217, 0.2);
    min-width: 120px;
}

.admin-user-dropdown-btn:hover[b-jcqwosh7yl] {
    background: #fff9c4;
    border-color: #f0e68c;
}

.admin-user-dropdown-btn:focus[b-jcqwosh7yl] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(184, 169, 217, 0.5);
}

/* Bootstrap collapse arrow animation */
.admin-user-dropdown-btn .dropdown-arrow[b-jcqwosh7yl] {
    font-size: 0.75rem;
    transition: transform 0.35s ease;
    margin-left: auto;
}

.admin-user-dropdown-btn[aria-expanded="true"] .dropdown-arrow[b-jcqwosh7yl] {
    transform: rotate(180deg);
}

.user-role[b-jcqwosh7yl] {
    flex: 1;
    text-align: left;
}

/* Dropdown Menu - Works with Bootstrap Collapse */
.admin-user-dropdown-menu[b-jcqwosh7yl] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid rgba(184, 169, 217, 0.3);
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 8px 24px rgba(184, 169, 217, 0.4);
    min-width: 220px;
    z-index: 2000;
    margin-top: var(--aa-spacing-1);
    overflow: hidden;
}

/* Bootstrap collapse handles the show/hide animation */
.admin-user-dropdown-menu.show[b-jcqwosh7yl] {
    /* Bootstrap adds this class when expanded */
}

.dropdown-header[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-4);
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid rgba(184, 169, 217, 0.2);
}

.dropdown-header i[b-jcqwosh7yl] {
    font-size: 1.5rem;
    color: #b8a9d9;
}

.user-details[b-jcqwosh7yl] {
    flex: 1;
}

.user-name[b-jcqwosh7yl] {
    font-weight: 600;
    color: #2d1b49;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.user-role-label[b-jcqwosh7yl] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 500;
}

.dropdown-divider[b-jcqwosh7yl] {
    height: 1px;
    background: rgba(184, 169, 217, 0.2);
    margin: var(--aa-spacing-1) 0;
}

.dropdown-item[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    color: #2d1b49;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-item:hover[b-jcqwosh7yl] {
    background: #f8f9fa;
    color: #b8a9d9;
    text-decoration: none;
}

.dropdown-item:focus[b-jcqwosh7yl] {
    outline: 2px solid #b8a9d9;
    outline-offset: -2px;
    background: #f8f9fa;
    text-decoration: none;
}

.dropdown-item i[b-jcqwosh7yl] {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.logout-item[b-jcqwosh7yl] {
    color: #e74c3c;
    border-top: 1px solid rgba(184, 169, 217, 0.2);
    margin-top: var(--aa-spacing-1);
}

.logout-item:hover[b-jcqwosh7yl] {
    background: #fff5f5;
    color: #c0392b;
}

.logout-item:focus[b-jcqwosh7yl] {
    outline: 2px solid #e74c3c;
    outline-offset: -2px;
    background: #fff5f5;
}

.admin-logout-form[b-jcqwosh7yl] {
    margin: 0;
    width: 100%;
}

.admin-login-btn[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    background: linear-gradient(135deg, #b8a9d9, #9b87c4);
    color: white;
    border: none;
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-md);
    text-decoration: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(184, 169, 217, 0.3);
}

.admin-login-btn:hover[b-jcqwosh7yl] {
    background: linear-gradient(135deg, #9b87c4, #7f6eb0);
}

/* Main Content - Full Width */
.admin-main[b-jcqwosh7yl] {
    flex: 1;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    overflow-x: hidden;
}

.admin-content[b-jcqwosh7yl] {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Admin Footer */
.admin-footer[b-jcqwosh7yl] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-top: 1px solid rgba(184, 169, 217, 0.3);
    padding: var(--aa-spacing-4) 0;
    margin-top: auto;
}

.admin-footer-content[b-jcqwosh7yl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--aa-spacing-6);
    color: #6c757d;
    font-size: 0.875rem;
}

.admin-footer-links[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-4);
}

.admin-footer-links a[b-jcqwosh7yl] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
}

.admin-footer-links a:hover[b-jcqwosh7yl] {
    color: #b8a9d9;
    background: rgba(184, 169, 217, 0.1);
}

/* Error Boundary */
.admin-error-boundary[b-jcqwosh7yl] {
    background: linear-gradient(135deg, var(--aa-danger), #dc2626);
    color: white;
    padding: var(--aa-spacing-6);
    text-align: center;
    position: fixed;
    bottom: var(--aa-spacing-6);
    left: var(--aa-spacing-6);
    right: var(--aa-spacing-6);
    z-index: 9999;
    border-radius: var(--aa-border-radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideUp-b-jcqwosh7yl 0.3s ease-out;
}

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

.error-content[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    margin-bottom: var(--aa-spacing-4);
    font-weight: 500;
    font-size: 1rem;
}

.error-content i[b-jcqwosh7yl] {
    font-size: 1.25rem;
    animation: pulse-b-jcqwosh7yl 2s infinite;
}

@keyframes pulse-b-jcqwosh7yl {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.error-actions[b-jcqwosh7yl] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aa-spacing-4);
}

.aa-error-link[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: white;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-sm);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.aa-error-link:hover[b-jcqwosh7yl] {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
}

.aa-error-dismiss[b-jcqwosh7yl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.aa-error-dismiss:hover[b-jcqwosh7yl] {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .admin-nav-links[b-jcqwosh7yl] {
        gap: 12px; /* Slightly smaller gap on medium screens */
    }
    
    .admin-nav-link[b-jcqwosh7yl] {
        min-width: 100px;
        padding: 6px 16px; /* Keep consistent button padding */
        font-size: 0.85rem;
    }
    
    .admin-user-dropdown-btn[b-jcqwosh7yl] {
        min-width: 100px;
        font-size: 0.85rem;
    }
}

@media (max-width: 1200px) {
    .admin-navbar[b-jcqwosh7yl] {
        gap: var(--aa-spacing-4);
        padding: var(--aa-spacing-4) var(--aa-spacing-6); /* Reduce navbar padding on smaller screens */
    }
    
    .admin-nav-links[b-jcqwosh7yl] {
        gap: 8px; /* Smaller gap for tablet */
    }
    
    .admin-nav-link span[b-jcqwosh7yl] {
        display: none;
    }
    
    .admin-nav-link[b-jcqwosh7yl] {
        min-width: 50px;
        padding: 6px; /* Keep consistent button padding */
        justify-content: center;
    }
    
    .admin-user-dropdown-btn .user-role[b-jcqwosh7yl] {
        display: none;
    }
    
    .admin-user-dropdown-btn[b-jcqwosh7yl] {
        min-width: 50px;
        padding: 6px;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .admin-navbar[b-jcqwosh7yl] {
        flex-direction: column;
        gap: var(--aa-spacing-4);
        align-items: stretch;
        padding: var(--aa-spacing-4); /* Consistent mobile padding */
    }
    
    .admin-navbar-nav[b-jcqwosh7yl] {
        order: 2;
        padding: 0;
    }
    
    .admin-nav-links[b-jcqwosh7yl] {
        justify-content: space-around;
        gap: 8px;
    }
    
    .admin-nav-link[b-jcqwosh7yl] {
        flex: 1;
        min-width: auto;
        padding: 6px 8px; /* Keep consistent button padding */
        font-size: 0.8rem;
    }
    
    .admin-navbar-menu[b-jcqwosh7yl] {
        order: 1;
        justify-content: space-between;
        width: 100%;
        gap: var(--aa-spacing-4);
    }
    
    .admin-user-dropdown-menu[b-jcqwosh7yl] {
        right: 0;
        min-width: 200px;
    }
    
    .admin-footer-content[b-jcqwosh7yl] {
        flex-direction: column;
        gap: var(--aa-spacing-2);
        text-align: center;
    }
}
/* /Src/Presentation/Areas/Customer/Pages/Error.razor.rz.scp.css */
/* Error Page Styles */

.aa-error-container[b-zpivu62dmn] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--aa-spacing-8) 0;
    text-align: center;
}

.aa-error-card[b-zpivu62dmn] {
    padding: var(--aa-spacing-10);
    margin-bottom: var(--aa-spacing-8);
    background: linear-gradient(135deg, var(--aa-white) 0%, var(--aa-light) 100%);
}

.aa-error-icon[b-zpivu62dmn] {
    width: 6rem;
    height: 6rem;
    margin: 0 auto var(--aa-spacing-6);
    background: linear-gradient(135deg, var(--aa-warning), var(--aa-accent));
    color: var(--aa-white);
    border-radius: var(--aa-border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: var(--aa-shadow-lg);
}

.aa-error-title[b-zpivu62dmn] {
    font-size: var(--aa-font-size-4xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-3);
    line-height: var(--aa-line-height-tight);
}

.aa-error-subtitle[b-zpivu62dmn] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-secondary);
    margin-bottom: var(--aa-spacing-6);
}

.aa-error-message[b-zpivu62dmn] {
    font-size: var(--aa-font-size-lg);
    color: var(--aa-dark-gray);
    line-height: var(--aa-line-height-relaxed);
    margin-bottom: var(--aa-spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.aa-error-details[b-zpivu62dmn] {
    background-color: var(--aa-light-gray);
    padding: var(--aa-spacing-4);
    border-radius: var(--aa-border-radius-lg);
    margin-bottom: var(--aa-spacing-8);
    border-left: 4px solid var(--aa-warning);
}

.aa-error-reference[b-zpivu62dmn] {
    margin-bottom: var(--aa-spacing-2);
    color: var(--aa-dark);
}

.aa-error-code[b-zpivu62dmn] {
    background-color: var(--aa-dark);
    color: var(--aa-light);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-sm);
}

.aa-error-actions[b-zpivu62dmn] {
    display: flex;
    gap: var(--aa-spacing-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--aa-spacing-6);
}

.aa-error-help[b-zpivu62dmn] {
    margin-top: var(--aa-spacing-8);
}

.aa-help-card[b-zpivu62dmn] {
    padding: var(--aa-spacing-6);
    text-align: left;
    transition: var(--aa-transition-base);
}

.aa-help-card:hover[b-zpivu62dmn] {
    transform: translateY(-4px);
    box-shadow: var(--aa-shadow-lg);
}

.aa-help-icon[b-zpivu62dmn] {
    width: 3rem;
    height: 3rem;
    background-color: var(--aa-primary);
    color: var(--aa-white);
    border-radius: var(--aa-border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aa-font-size-lg);
    margin-bottom: var(--aa-spacing-4);
}

.aa-help-title[b-zpivu62dmn] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-dark);
    margin-bottom: var(--aa-spacing-3);
}

.aa-help-description[b-zpivu62dmn] {
    color: var(--aa-dark-gray);
    line-height: var(--aa-line-height-relaxed);
    margin-bottom: var(--aa-spacing-4);
    font-size: var(--aa-font-size-base);
}

@media (max-width: 768px) {
    .aa-error-container[b-zpivu62dmn] {
        padding: var(--aa-spacing-4) 0;
    }

    .aa-error-card[b-zpivu62dmn] {
        padding: var(--aa-spacing-6);
    }

    .aa-error-title[b-zpivu62dmn] {
        font-size: var(--aa-font-size-2xl);
    }

    .aa-error-subtitle[b-zpivu62dmn] {
        font-size: var(--aa-font-size-lg);
    }

    .aa-error-actions[b-zpivu62dmn] {
        flex-direction: column;
        align-items: center;
    }

    .aa-error-actions .aa-btn[b-zpivu62dmn] {
        width: 100%;
        max-width: 300px;
    }

    .aa-grid-cols-2[b-zpivu62dmn] {
        grid-template-columns: 1fr;
    }
}
/* /Src/Presentation/Areas/Customer/Pages/Home.razor.rz.scp.css */
/* WrittenExpressions - Home Page Styles
 * Professional home page design for incarcerated friends and family portal
 */

/* =============================================================================
   HOME PAGE HERO
   ============================================================================= */

.home-hero[b-a556lfouzy] {
  background: linear-gradient(135deg, var(--aa-primary) 0%, var(--aa-primary-light) 50%, var(--aa-accent) 100%);
  color: var(--aa-white);
  padding: var(--aa-spacing-20) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.home-hero[b-a556lfouzy]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hearts" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M10,6 C10,3 7,1 5,3 C3,1 0,3 0,6 C0,8 10,16 10,16 S20,8 20,6 C20,3 17,1 15,3 C13,1 10,3 10,6 Z" fill="white" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23hearts)"/></svg>');
  pointer-events: none;
}

.home-hero-content[b-a556lfouzy] {
  position: relative;
  z-index: 1;
  max-width: var(--aa-container-lg);
  margin: 0 auto;
  padding: 0 var(--aa-spacing-4);
}

.home-hero-title[b-a556lfouzy] {
  font-size: var(--aa-font-size-5xl);
  font-weight: var(--aa-font-weight-bold);
  line-height: var(--aa-line-height-tight);
  margin-bottom: var(--aa-spacing-6);
  color: var(--aa-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.home-hero-subtitle[b-a556lfouzy] {
  font-size: var(--aa-font-size-xl);
  font-weight: var(--aa-font-weight-normal);
  line-height: var(--aa-line-height-relaxed);
  margin-bottom: var(--aa-spacing-3);
  color: var(--aa-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-hero-description[b-a556lfouzy] {
  font-size: var(--aa-font-size-lg);
  line-height: var(--aa-line-height-relaxed);
  margin-bottom: var(--aa-spacing-8);
  color: var(--aa-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.home-hero-actions[b-a556lfouzy] {
  display: flex;
  gap: var(--aa-spacing-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--aa-spacing-8);
}

.home-hero-stats[b-a556lfouzy] {
  display: flex;
  justify-content: center;
  gap: var(--aa-spacing-8);
  flex-wrap: wrap;
  margin-top: var(--aa-spacing-10);
}

.home-hero-stat[b-a556lfouzy] {
  text-align: center;
}

.home-hero-stat-number[b-a556lfouzy] {
  display: block;
  font-size: var(--aa-font-size-3xl);
  font-weight: var(--aa-font-weight-bold);
  line-height: 1;
  margin-bottom: var(--aa-spacing-1);
  color: var(--aa-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-hero-stat-label[b-a556lfouzy] {
  font-size: var(--aa-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   HOME PAGE FEATURES
   ============================================================================= */

.home-features[b-a556lfouzy] {
  padding: var(--aa-spacing-16) 0;
  background-color: var(--aa-white);
}

.home-features-grid[b-a556lfouzy] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--aa-spacing-8);
  margin-top: var(--aa-spacing-12);
}

.home-feature[b-a556lfouzy] {
  text-align: center;
  padding: var(--aa-spacing-8) var(--aa-spacing-6);
  background-color: var(--aa-white);
  border-radius: var(--aa-border-radius-xl);
  box-shadow: var(--aa-shadow-md);
  transition: var(--aa-transition-base);
  position: relative;
  overflow: hidden;
}

.home-feature[b-a556lfouzy]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--aa-primary), var(--aa-accent));
}

.home-feature:hover[b-a556lfouzy] {
  transform: translateY(-8px);
  box-shadow: var(--aa-shadow-xl);
}

.home-feature-icon[b-a556lfouzy] {
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--aa-spacing-6);
  background: linear-gradient(135deg, var(--aa-primary), var(--aa-primary-light));
  color: var(--aa-white);
  border-radius: var(--aa-border-radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--aa-font-size-3xl);
  box-shadow: var(--aa-shadow-lg);
  position: relative;
}

.home-feature-icon i[b-a556lfouzy] {
  font-size: 2.5rem;
}

.home-feature-icon[b-a556lfouzy]::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--aa-primary), var(--aa-accent));
  border-radius: inherit;
  z-index: -1;
  padding: 2px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: subtract;
}

.home-feature-title[b-a556lfouzy] {
  font-size: var(--aa-font-size-xl);
  font-weight: var(--aa-font-weight-semibold);
  color: var(--aa-dark);
  margin-bottom: var(--aa-spacing-4);
  line-height: var(--aa-line-height-tight);
}

.home-feature-description[b-a556lfouzy] {
  color: var(--aa-dark-gray);
  line-height: var(--aa-line-height-relaxed);
  font-size: var(--aa-font-size-base);
}

/* =============================================================================
   HOME PAGE TRUST SECTION
   ============================================================================= */

.home-trust[b-a556lfouzy] {
  padding: var(--aa-spacing-16) 0;
  background: linear-gradient(180deg, var(--aa-light) 0%, var(--aa-white) 100%);
}

.home-trust-content[b-a556lfouzy] {
  text-align: center;
  max-width: var(--aa-container-md);
  margin: 0 auto;
}

.home-trust-badge[b-a556lfouzy] {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-spacing-2);
  background-color: var(--aa-success);
  color: var(--aa-white);
  padding: var(--aa-spacing-2) var(--aa-spacing-4);
  border-radius: var(--aa-border-radius-full);
  font-size: var(--aa-font-size-sm);
  font-weight: var(--aa-font-weight-medium);
  margin-bottom: var(--aa-spacing-6);
  box-shadow: var(--aa-shadow-sm);
}

.home-trust-badge i[b-a556lfouzy] {
  font-size: 1rem;
}

.home-trust-title[b-a556lfouzy] {
  font-size: var(--aa-font-size-3xl);
  font-weight: var(--aa-font-weight-bold);
  color: var(--aa-dark);
  margin-bottom: var(--aa-spacing-4);
  line-height: var(--aa-line-height-tight);
}

.home-trust-description[b-a556lfouzy] {
  font-size: var(--aa-font-size-lg);
  color: var(--aa-dark-gray);
  line-height: var(--aa-line-height-relaxed);
  margin-bottom: var(--aa-spacing-8);
}

.home-trust-features[b-a556lfouzy] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--aa-spacing-6);
  margin-top: var(--aa-spacing-8);
}

.home-trust-feature[b-a556lfouzy] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-3);
  background-color: var(--aa-white);
  padding: var(--aa-spacing-4);
  border-radius: var(--aa-border-radius-lg);
  box-shadow: var(--aa-shadow-sm);
}

.home-trust-feature-icon[b-a556lfouzy] {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--aa-success);
  color: var(--aa-white);
  border-radius: var(--aa-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--aa-font-size-lg);
}

.home-trust-feature-icon i[b-a556lfouzy] {
  font-size: 1.25rem;
}

.home-trust-feature-text[b-a556lfouzy] {
  color: var(--aa-dark);
  font-weight: var(--aa-font-weight-medium);
  font-size: var(--aa-font-size-base);
}

/* =============================================================================
   HOME PAGE HOW IT WORKS
   ============================================================================= */

.home-how-it-works[b-a556lfouzy] {
  padding: var(--aa-spacing-16) 0;
  background-color: var(--aa-white);
}

.home-steps[b-a556lfouzy] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--aa-spacing-8);
  margin-top: var(--aa-spacing-12);
  position: relative;
}

.home-step[b-a556lfouzy] {
  text-align: center;
  padding: var(--aa-spacing-6);
  position: relative;
}

.home-step[b-a556lfouzy]::after {
  content: '';
  position: absolute;
  top: 3rem;
  right: -4rem;
  width: 8rem;
  height: 2px;
  background: linear-gradient(90deg, var(--aa-primary), transparent);
  opacity: 0.3;
}

.home-step:last-child[b-a556lfouzy]::after {
  display: none;
}

.home-step-number[b-a556lfouzy] {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--aa-spacing-4);
  background: linear-gradient(135deg, var(--aa-primary), var(--aa-accent));
  color: var(--aa-white);
  border-radius: var(--aa-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--aa-font-size-xl);
  font-weight: var(--aa-font-weight-bold);
  box-shadow: var(--aa-shadow-lg);
  position: relative;
  z-index: 1;
}

.home-step-title[b-a556lfouzy] {
  font-size: var(--aa-font-size-lg);
  font-weight: var(--aa-font-weight-semibold);
  color: var(--aa-dark);
  margin-bottom: var(--aa-spacing-3);
  line-height: var(--aa-line-height-tight);
}

.home-step-description[b-a556lfouzy] {
  color: var(--aa-dark-gray);
  line-height: var(--aa-line-height-relaxed);
}

/* =============================================================================
   HOME PAGE CTA SECTION
   ============================================================================= */

.home-cta[b-a556lfouzy] {
  background: linear-gradient(135deg, var(--aa-primary) 0%, var(--aa-primary-dark) 100%);
  color: var(--aa-white);
  padding: var(--aa-spacing-16) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.home-cta[b-a556lfouzy]::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  animation: home-cta-pulse-b-a556lfouzy 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes home-cta-pulse-b-a556lfouzy {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.home-cta-content[b-a556lfouzy] {
  position: relative;
  z-index: 1;
  max-width: var(--aa-container-md);
  margin: 0 auto;
  padding: 0 var(--aa-spacing-4);
}

.home-cta-title[b-a556lfouzy] {
  font-size: var(--aa-font-size-3xl);
  font-weight: var(--aa-font-weight-bold);
  margin-bottom: var(--aa-spacing-4);
  line-height: var(--aa-line-height-tight);
  color: var(--aa-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.home-cta-description[b-a556lfouzy] {
  font-size: var(--aa-font-size-lg);
  line-height: var(--aa-line-height-relaxed);
  margin-bottom: var(--aa-spacing-8);
  color: var(--aa-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-cta-actions[b-a556lfouzy] {
  display: flex;
  gap: var(--aa-spacing-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Special white button for CTA section */
.home-cta .aa-btn-white[b-a556lfouzy] {
  background-color: var(--aa-white);
  color: var(--aa-primary);
  border-color: var(--aa-white);
  font-weight: var(--aa-font-weight-semibold);
}

.home-cta .aa-btn-white:hover[b-a556lfouzy] {
  background-color: var(--aa-light);
  color: var(--aa-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

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

@media (max-width: 1024px) {
  .home-step[b-a556lfouzy]::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-hero[b-a556lfouzy] {
    padding: var(--aa-spacing-16) 0;
  }
  
  .home-hero-title[b-a556lfouzy] {
    font-size: var(--aa-font-size-3xl);
  }
  
  .home-hero-subtitle[b-a556lfouzy] {
    font-size: var(--aa-font-size-lg);
  }
  
  .home-hero-description[b-a556lfouzy] {
    font-size: var(--aa-font-size-base);
  }
  
  .home-hero-actions[b-a556lfouzy] {
    flex-direction: column;
    align-items: center;
  }
  
  .home-hero-stats[b-a556lfouzy] {
    gap: var(--aa-spacing-4);
  }
  
  .home-features-grid[b-a556lfouzy] {
    grid-template-columns: 1fr;
    gap: var(--aa-spacing-6);
  }
  
  .home-feature[b-a556lfouzy] {
    padding: var(--aa-spacing-6) var(--aa-spacing-4);
  }
  
  .home-trust-features[b-a556lfouzy] {
    grid-template-columns: 1fr;
  }
  
  .home-steps[b-a556lfouzy] {
    grid-template-columns: 1fr;
    gap: var(--aa-spacing-6);
  }
  
  .home-cta-title[b-a556lfouzy] {
    font-size: var(--aa-font-size-2xl);
  }
  
  .home-cta-actions[b-a556lfouzy] {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .home-hero[b-a556lfouzy] {
    padding: var(--aa-spacing-12) 0;
  }
  
  .home-hero-title[b-a556lfouzy] {
    font-size: var(--aa-font-size-2xl);
  }
  
  .home-hero-subtitle[b-a556lfouzy] {
    font-size: var(--aa-font-size-base);
  }
  
  .home-hero-stats[b-a556lfouzy] {
    gap: var(--aa-spacing-3);
  }
  
  .home-hero-stat-number[b-a556lfouzy] {
    font-size: var(--aa-font-size-xl);
  }
  
  .home-feature-icon[b-a556lfouzy] {
    width: 4rem;
    height: 4rem;
    font-size: var(--aa-font-size-2xl);
  }
  
  .home-feature-icon i[b-a556lfouzy] {
    font-size: 2rem;
  }
  
  .home-trust-feature[b-a556lfouzy] {
    flex-direction: column;
    text-align: center;
    gap: var(--aa-spacing-2);
  }
  
  .home-step-number[b-a556lfouzy] {
    width: 3rem;
    height: 3rem;
    font-size: var(--aa-font-size-lg);
  }
}
/* /Src/Presentation/Shared/Layout/MainLayout.razor.rz.scp.css */
/* WrittenExpressions - Main Layout Styles */

/* Error Boundary Styles */
#blazor-error-ui[b-sq1krm9wh8] {
    position: fixed;
    top: var(--aa-spacing-4);
    right: var(--aa-spacing-4);
    z-index: var(--aa-z-modal);
    max-width: 400px;
    min-width: 300px;
    display: none;
}

.aa-error-boundary[b-sq1krm9wh8] {
    background: linear-gradient(135deg, var(--aa-danger), #dc2626);
    color: var(--aa-white);
    border-radius: var(--aa-border-radius-lg);
    box-shadow: var(--aa-shadow-xl);
    padding: var(--aa-spacing-4) var(--aa-spacing-6) var(--aa-spacing-4) var(--aa-spacing-4);
    position: relative;
    border-left: 4px solid #b91c1c;
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    line-height: var(--aa-line-height-base);
    animation: slideIn-b-sq1krm9wh8 0.3s ease-out;
}

.aa-error-boundary[b-sq1krm9wh8]::after {
    content: "An error has occurred. Please try refreshing the page or returning to the home page.";
    display: block;
    margin-bottom: var(--aa-spacing-3);
}

.aa-error-link[b-sq1krm9wh8] {
    display: inline-block;
    color: var(--aa-white);
    text-decoration: underline;
    font-weight: var(--aa-font-weight-semibold);
    margin-top: var(--aa-spacing-2);
    margin-right: var(--aa-spacing-4);
}

.aa-error-link:hover[b-sq1krm9wh8] {
    color: var(--aa-accent-light);
    text-decoration: none;
}

.aa-error-dismiss[b-sq1krm9wh8] {
    position: absolute;
    top: var(--aa-spacing-2);
    right: var(--aa-spacing-3);
    background: rgba(255, 255, 255, 0.2);
    color: var(--aa-white);
    border-radius: var(--aa-border-radius-sm);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-bold);
    line-height: 1;
    user-select: none;
    transition: var(--aa-transition-base);
}

.aa-error-dismiss:hover[b-sq1krm9wh8] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

@keyframes slideIn-b-sq1krm9wh8 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Footer Styles */
.aa-footer[b-sq1krm9wh8] {
    background-color: var(--aa-dark);
    color: var(--aa-light);
    padding: var(--aa-spacing-12) 0 var(--aa-spacing-4);
    margin-top: auto;
}

.aa-footer-content[b-sq1krm9wh8] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--aa-spacing-8);
    margin-bottom: var(--aa-spacing-8);
}

.aa-footer-title[b-sq1krm9wh8] {
    color: var(--aa-white);
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    margin-bottom: var(--aa-spacing-3);
}

.aa-footer-description[b-sq1krm9wh8] {
    color: var(--aa-medium-gray);
    line-height: var(--aa-line-height-relaxed);
    margin-bottom: 0;
}

.aa-footer-heading[b-sq1krm9wh8] {
    color: var(--aa-white);
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-semibold);
    margin-bottom: var(--aa-spacing-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aa-footer-nav[b-sq1krm9wh8] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.aa-footer-link[b-sq1krm9wh8] {
    color: var(--aa-medium-gray);
    text-decoration: none;
    transition: var(--aa-transition-base);
    font-size: var(--aa-font-size-sm);
}

.aa-footer-link:hover[b-sq1krm9wh8] {
    color: var(--aa-primary-light);
    text-decoration: none;
}

.aa-footer-bottom[b-sq1krm9wh8] {
    padding-top: var(--aa-spacing-6);
    border-top: 1px solid var(--aa-secondary);
    text-align: center;
}

.aa-footer-copyright[b-sq1krm9wh8] {
    color: var(--aa-medium-gray);
    font-size: var(--aa-font-size-sm);
    margin: 0;
}

@media (max-width: 768px) {
    .aa-footer-content[b-sq1krm9wh8] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-6);
    }

    .aa-footer[b-sq1krm9wh8] {
        padding: var(--aa-spacing-8) 0 var(--aa-spacing-4);
    }
    
    #blazor-error-ui[b-sq1krm9wh8] {
        left: var(--aa-spacing-4);
        right: var(--aa-spacing-4);
        max-width: none;
    }
    
    .aa-error-boundary[b-sq1krm9wh8] {
        font-size: var(--aa-font-size-xs);
    }
}
/* /Src/Presentation/Shared/Layout/NavMenu.razor.rz.scp.css */
/* WrittenExpressions - Navigation Menu Styles
 * Professional navigation component styles
 */

/* Bootstrap Icon Styling */
.aa-nav-link i[b-kdo3ocetmt],
.aa-mobile-nav-link i[b-kdo3ocetmt],
.aa-user-menu-item i[b-kdo3ocetmt],
.home-feature-icon i[b-kdo3ocetmt],
.home-trust-feature-icon i[b-kdo3ocetmt],
.home-trust-badge i[b-kdo3ocetmt] {
  font-size: inherit;
  vertical-align: middle;
}

.aa-mobile-nav-icon i[b-kdo3ocetmt] {
  font-size: var(--aa-font-size-lg);
}

.aa-dropdown-arrow i[b-kdo3ocetmt] {
  font-size: var(--aa-font-size-xs);
  transition: var(--aa-transition-base);
}

/* User Menu Dropdown */
.aa-user-dropdown[b-kdo3ocetmt] {
  position: relative;
}

.aa-user-menu-toggle[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
  background: none;
  border: none;
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  border-radius: var(--aa-border-radius-md);
  cursor: pointer;
  transition: var(--aa-transition-base);
  color: var(--aa-dark-gray);
}

.aa-user-menu-toggle:hover[b-kdo3ocetmt] {
  background-color: var(--aa-light);
  color: var(--aa-primary);
}

.aa-user-name[b-kdo3ocetmt] {
  font-weight: var(--aa-font-weight-medium);
  font-size: var(--aa-font-size-sm);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-dropdown-arrow[b-kdo3ocetmt] {
  font-size: var(--aa-font-size-xs);
  transition: var(--aa-transition-base);
}

.aa-user-menu-toggle[aria-expanded="true"] .aa-dropdown-arrow[b-kdo3ocetmt] {
  transform: rotate(180deg);
}

.aa-user-menu-dropdown[b-kdo3ocetmt] {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background-color: var(--aa-white);
  border: 1px solid var(--aa-medium-gray);
  border-radius: var(--aa-border-radius-lg);
  box-shadow: var(--aa-shadow-lg);
  padding: var(--aa-spacing-2);
  z-index: var(--aa-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--aa-transition-base);
}

.aa-user-menu-dropdown.open[b-kdo3ocetmt] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aa-user-menu-item[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-3);
  width: 100%;
  padding: var(--aa-spacing-3) var(--aa-spacing-4);
  color: var(--aa-dark-gray);
  text-decoration: none;
  border-radius: var(--aa-border-radius-md);
  transition: var(--aa-transition-base);
  font-size: var(--aa-font-size-sm);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.aa-user-menu-item:hover[b-kdo3ocetmt] {
  background-color: var(--aa-light);
  color: var(--aa-primary);
  text-decoration: none;
}

.aa-user-menu-divider[b-kdo3ocetmt] {
  height: 1px;
  background-color: var(--aa-light-gray);
  margin: var(--aa-spacing-2) 0;
}

.aa-logout-form[b-kdo3ocetmt],
.aa-mobile-logout-form[b-kdo3ocetmt] {
  width: 100%;
}

.aa-logout-btn[b-kdo3ocetmt],
.aa-mobile-logout-btn[b-kdo3ocetmt] {
  width: 100%;
  text-align: left;
  font-family: inherit;
}

/* Auth Actions */
.aa-auth-actions[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
}

/* Mobile Navigation Enhancements */
.aa-mobile-nav-icon[b-kdo3ocetmt] {
  font-size: var(--aa-font-size-lg);
  transition: var(--aa-transition-base);
}

.aa-mobile-nav-toggle:hover .aa-mobile-nav-icon[b-kdo3ocetmt] {
  transform: scale(1.1);
}

.aa-mobile-nav-list[b-kdo3ocetmt] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aa-mobile-nav-divider[b-kdo3ocetmt] {
  height: 1px;
  background-color: var(--aa-light-gray);
  margin: var(--aa-spacing-3) var(--aa-spacing-4);
}

/* Enhanced focus styles */
.aa-nav-link:focus[b-kdo3ocetmt],
.aa-mobile-nav-link:focus[b-kdo3ocetmt],
.aa-user-menu-toggle:focus[b-kdo3ocetmt],
.aa-user-menu-item:focus[b-kdo3ocetmt] {
  outline: 2px solid var(--aa-primary);
  outline-offset: 2px;
}

/* Active state improvements */
.aa-nav-link.active[b-kdo3ocetmt],
.aa-mobile-nav-link.active[b-kdo3ocetmt] {
  font-weight: var(--aa-font-weight-semibold);
  position: relative;
}

/* Loading states */
.aa-nav-link.loading[b-kdo3ocetmt] {
  pointer-events: none;
  opacity: 0.7;
}

/* Notification badge (for future use) */
.aa-nav-badge[b-kdo3ocetmt] {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--aa-danger);
  color: var(--aa-white);
  font-size: 10px;
  font-weight: var(--aa-font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--aa-border-radius-full);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive improvements */
@media (max-width: 1024px) {
  .aa-user-name[b-kdo3ocetmt] {
    display: none;
  }
  
  .aa-auth-actions .aa-btn[b-kdo3ocetmt] {
    font-size: var(--aa-font-size-xs);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
  }
}

@media (max-width: 768px) {
  .aa-navbar-brand span[b-kdo3ocetmt] {
    font-size: var(--aa-font-size-lg);
  }
  
  .aa-user-menu-dropdown[b-kdo3ocetmt] {
    right: auto;
    left: 0;
    min-width: 180px;
  }
}

@media (max-width: 480px) {
  .aa-navbar-container[b-kdo3ocetmt] {
    padding: var(--aa-spacing-3);
  }
  
  .aa-navbar-brand[b-kdo3ocetmt] {
    font-size: var(--aa-font-size-base);
    gap: var(--aa-spacing-2);
  }
  
  .aa-navbar-logo[b-kdo3ocetmt] {
    width: 1.75rem;
    height: 1.75rem;
    font-size: var(--aa-font-size-sm);
  }
  
  .aa-auth-actions[b-kdo3ocetmt] {
    gap: var(--aa-spacing-1);
  }
  
  .aa-auth-actions .aa-btn[b-kdo3ocetmt] {
    font-size: 11px;
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
  }
}