@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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

.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-text-primary);
}

.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-text-primary);
    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/ImageTypes/ImageTypeModal.razor.rz.scp.css */
/* ImageTypeModal Component-Specific Styles */
/* All global modal styles are in wwwroot/css/aa-modals.css */
/* This file is intentionally minimal - add only ImageTypeModal-specific overrides here if needed */
/* /Src/Presentation/Areas/Admin/Components/Orders/OrderItemCustomizationModal.razor.rz.scp.css */
/* OrderItemCustomization Modal - Compact Admin Design */
/* ALL form styles inherited from aa-admin.css global admin form classes */
/* Following CODING_STANDARDS.md Compact Design Pattern */

/* Modal Overlay */
.modal-overlay[b-jxeuz2cap3] {
    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-jxeuz2cap3 var(--aa-transition-fast) ease-out;
}

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

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

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

/* Modal Header - Compact Admin Gradient */
.modal-header[b-jxeuz2cap3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--aa-spacing-2) var(--aa-spacing-3); /* Reduced from spacing-3 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-jxeuz2cap3] {
    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-jxeuz2cap3] {
    color: #2d1b49;
    width: 18px; /* Slightly smaller */
    height: 18px;
}

.modal-close-btn[b-jxeuz2cap3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; /* Reduced from 32px */
    height: 28px;
    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-jxeuz2cap3] {
    background: #fff9c4;
    border-color: #b8a9d9;
    color: #2d1b49;
    transform: scale(1.05);
}

.modal-close-btn svg[b-jxeuz2cap3] {
    width: 14px; /* Reduced from 16px */
    height: 14px;
}

/* Modal Content - Compact Scrolling */
.modal-content[b-jxeuz2cap3] {
    flex: 1;
    padding: var(--aa-spacing-3); /* Reduced from spacing-4 */
    overflow-y: auto;
    max-height: calc(92vh - 100px); /* Adjusted for smaller header */
}

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

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

.modal-error[b-jxeuz2cap3] {
    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-jxeuz2cap3] {
    animation: spin-b-jxeuz2cap3 1s linear infinite;
}

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

/* Modal Form Container - Compact Spacing */
.modal-form[b-jxeuz2cap3] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2); /* Reduced from spacing-3 - tighter section spacing */
}

/* Modal Footer - Compact Admin Styling */
.modal-footer[b-jxeuz2cap3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-2); /* Reduced from spacing-3 */
    padding: var(--aa-spacing-2) var(--aa-spacing-3); /* Reduced from spacing-3 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-jxeuz2cap3] {
        padding: var(--aa-spacing-1);
    }

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

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

    .modal-content[b-jxeuz2cap3] {
        max-height: calc(95vh - 90px); /* Adjusted for compact header */
    }

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

    .modal-footer[b-jxeuz2cap3] {
        flex-direction: column-reverse;
        gap: var(--aa-spacing-1);
    }

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

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

    .modal-content[b-jxeuz2cap3] {
        max-height: calc(100vh - 110px);
        padding: var(--aa-spacing-2);
    }
    
    .modal-form[b-jxeuz2cap3] {
        gap: var(--aa-spacing-1); /* Even tighter on mobile */
    }
}
/* /Src/Presentation/Areas/Admin/Components/Orders/OrderItemModal.razor.rz.scp.css */
/* Order Item Modal - Compact Admin Design */
/* Following Admin Section Standards from CODING_STANDARDS.md */
/* ALL styles use CSS variables from aa-variables.css */

/* Modal Overlay */
.modal-overlay[b-tt3y03xmyx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--aa-z-modal);
    padding: var(--aa-spacing-4);
}

/* Modal Container */
.modal-container[b-tt3y03xmyx] {
    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;
    overflow: hidden;
}

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

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

.modal-close-btn[b-tt3y03xmyx] {
    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);
    width: var(--aa-spacing-8);
    height: var(--aa-spacing-8);
}

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

/* Modal Content */
.modal-content[b-tt3y03xmyx] {
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    flex-grow: 1;
    min-height: calc(80vh - 140px);
}

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

.modal-error[b-tt3y03xmyx] {
    color: var(--aa-danger);
    background-color: rgba(239, 68, 68, 0.1);
    border-radius: var(--aa-border-radius-md);
}

/* Form Container */
.form-container[b-tt3y03xmyx] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-4);
}

/* Form Section */
.form-section[b-tt3y03xmyx] {
    background: var(--aa-light);
    padding: var(--aa-spacing-3);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-light-gray);
}

.section-title[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding-bottom: var(--aa-spacing-2);
    border-bottom: 2px solid #b8a9d9;
}

/* Form Group */
.form-group[b-tt3y03xmyx] {
    margin-bottom: var(--aa-spacing-3);
}

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

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

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

/* Form Inputs */
.form-input[b-tt3y03xmyx],
.form-select[b-tt3y03xmyx] {
    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);
    color: var(--aa-text-primary);
    background-color: var(--aa-white);
    transition: all var(--aa-transition-base) ease;
}

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

    .form-input:disabled[b-tt3y03xmyx],
    .form-select:disabled[b-tt3y03xmyx] {
        background-color: var(--aa-light);
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Validation Message */
.validation-message[b-tt3y03xmyx] {
    color: var(--aa-danger);
    font-size: var(--aa-font-size-xs);
    margin-top: var(--aa-spacing-1);
    display: block;
}

/* ==========================================================================
   SEARCHABLE DROPDOWN STYLES
   ========================================================================== */

/* Searchable Dropdown Container */
.searchable-dropdown[b-tt3y03xmyx] {
    position: relative;
    width: 100%;
}

/* Dropdown Container Wrapper - contains results + info footer */
.dropdown-container[b-tt3y03xmyx] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: var(--aa-spacing-1);
    background: var(--aa-white);
    border: 2px solid #b8a9d9;
    border-radius: var(--aa-border-radius-sm);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    overflow: hidden; /* Ensures clean corners */
}

/* Dropdown Results Container - Scrollable area only */
.dropdown-results[b-tt3y03xmyx] {
    max-height: 240px; /* Exactly 5 items at 48px each = 240px */
    overflow-y: auto;
    background: var(--aa-white);
    scroll-behavior: smooth; /* Smooth scrolling for keyboard navigation */
    scroll-padding: 48px 0; /* Ensure items don't scroll under edges */
}

/* Dropdown Item */
.dropdown-item[b-tt3y03xmyx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    cursor: pointer;
    border-bottom: 1px solid var(--aa-light-gray);
    transition: all var(--aa-transition-fast) ease;
    min-height: 48px; /* Consistent height for predictable scrolling */
    scroll-margin-top: 4px; /* Keep space at top when scrolling into view */
    scroll-margin-bottom: 4px; /* Keep space at bottom when scrolling into view */
}

.dropdown-item:last-child[b-tt3y03xmyx] {
    border-bottom: none;
}

.dropdown-item:hover[b-tt3y03xmyx] {
    background: #fff9c4;
    border-left: 3px solid #b8a9d9;
}

.dropdown-item.highlighted[b-tt3y03xmyx] {
    background: linear-gradient(135deg, #e0d4f7 0%, #ede7f6 100%);
    border-left: 4px solid #7c3aed;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.2);
    /* Enhanced scroll behavior for highlighted item */
    scroll-margin-block: 8px; /* More space top and bottom for better visibility */
}

.dropdown-item.selected[b-tt3y03xmyx] {
    background: linear-gradient(135deg, #f0e6ff 0%, #f5f0ff 100%);
    border-left: 4px solid #9b87c4;
}

.dropdown-item-main[b-tt3y03xmyx] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    flex: 1;
}

.dropdown-item-main .product-group[b-tt3y03xmyx] {
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
}

.offer-type-separator[b-tt3y03xmyx] {
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-bold);
    margin: 0 var(--aa-spacing-xs);
}

.offer-type[b-tt3y03xmyx] {
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
    font-style: italic;
}

.dropdown-item-price[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-bold);
    color: #059669;
    margin-left: var(--aa-spacing-2);
}

/* Dropdown No Results */
.dropdown-no-results[b-tt3y03xmyx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-4);
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-sm);
    font-style: italic;
}

/* Dropdown More Info - Shows total count */
.dropdown-more-info[b-tt3y03xmyx] {
    padding: var(--aa-spacing-2);
    text-align: center;
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
    font-style: italic;
    background: var(--aa-light);
    border-top: 1px solid var(--aa-light-gray);
    position: relative; /* Not sticky - fixed position outside scroll */
}

/* Selected Offer Display Badge */
.selected-offer-display[b-tt3y03xmyx] {
    margin-top: var(--aa-spacing-2);
}

.selected-offer-badge[b-tt3y03xmyx] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #6ee7b7;
    border-radius: var(--aa-border-radius-sm);
    color: #065f46;
    font-size: var(--aa-font-size-sm);
}

.selected-offer-badge svg[b-tt3y03xmyx] {
    color: #059669;
    flex-shrink: 0;
}

.clear-selection-btn[b-tt3y03xmyx] {
    background: transparent;
    border: none;
    color: #059669;
    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-fast) ease;
    margin-left: auto;
}

.clear-selection-btn:hover[b-tt3y03xmyx] {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
    transform: scale(1.1);
}

/* ==========================================================================
   END SEARCHABLE DROPDOWN STYLES
   ========================================================================== */

/* Price Input Container - Custom Pricing */
.price-input-container[b-tt3y03xmyx] {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol[b-tt3y03xmyx] {
    position: absolute;
    left: var(--aa-spacing-3);
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-secondary);
    pointer-events: none;
    z-index: 1;
}

.price-input[b-tt3y03xmyx] {
    padding-left: var(--aa-spacing-6) !important; /* Space for $ symbol */
    font-weight: var(--aa-font-weight-semibold);
}

/* Price Override Warning */
.price-override-warning[b-tt3y03xmyx] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    margin-top: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    color: #92400e;
}

.price-override-warning svg[b-tt3y03xmyx] {
    color: #f59e0b;
    flex-shrink: 0;
    font-size: var(--aa-font-size-sm);
}

.price-override-warning strong[b-tt3y03xmyx] {
    color: #78350f;
    font-weight: var(--aa-font-weight-bold);
}

/* Product Info Display */
.product-info-display[b-tt3y03xmyx] {
    margin-top: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid var(--aa-medium-gray);
}

.info-row[b-tt3y03xmyx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-1) 0;
    border-bottom: 1px solid var(--aa-light-gray);
}

    .info-row:last-child[b-tt3y03xmyx] {
        border-bottom: none;
    }

.info-label[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-secondary);
}

.info-value[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

    .info-value.price[b-tt3y03xmyx] {
        font-size: var(--aa-font-size-md);
        font-weight: var(--aa-font-weight-bold);
        color: #059669;
    }

/* Calculation Display */
.calculation-display[b-tt3y03xmyx] {
    margin-top: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--aa-border-radius-sm);
    border: 2px solid #86efac;
}

.calc-row[b-tt3y03xmyx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-1) 0;
}

    .calc-row.total[b-tt3y03xmyx] {
        margin-top: var(--aa-spacing-2);
        padding-top: var(--aa-spacing-2);
        border-top: 2px solid #86efac;
    }

.calc-label[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.calc-row.total .calc-label[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-md);
    color: #059669;
}

.calc-value[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
}

.calc-row.total .calc-value[b-tt3y03xmyx] {
    font-size: var(--aa-font-size-lg);
    color: #059669;
}

/* Modal Footer */
.modal-footer[b-tt3y03xmyx] {
    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);
    flex-shrink: 0;
}

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

.btn-secondary[b-tt3y03xmyx] {
    background-color: var(--aa-medium-gray);
    color: var(--aa-text-primary);
}

    .btn-secondary:hover:not(:disabled)[b-tt3y03xmyx] {
        background-color: var(--aa-dark-gray);
    }

.btn-primary[b-tt3y03xmyx] {
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: #2d1b49;
}

    .btn-primary:hover:not(:disabled)[b-tt3y03xmyx] {
        background: linear-gradient(135deg, #a393c9, #c4b5d8);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
    }

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

/* Spin Animation */
.spin-animation[b-tt3y03xmyx] {
    animation: spin-b-tt3y03xmyx 1s linear infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

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

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

    .modal-header[b-tt3y03xmyx] {
        padding: var(--aa-spacing-2) var(--aa-spacing-3);
    }

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

    .modal-content[b-tt3y03xmyx] {
        padding: var(--aa-spacing-3);
        max-height: calc(95vh - 120px);
    }

    .modal-footer[b-tt3y03xmyx] {
        padding: var(--aa-spacing-2) var(--aa-spacing-3);
        flex-direction: column;
    }

    .btn[b-tt3y03xmyx] {
        width: 100%;
        justify-content: center;
    }

    .info-row[b-tt3y03xmyx],
    .calc-row[b-tt3y03xmyx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--aa-spacing-1);
    }
}

@media (max-width: 480px) {
    .modal-container[b-tt3y03xmyx] {
        max-height: 98vh;
    }

    .section-title[b-tt3y03xmyx] {
        font-size: var(--aa-font-size-sm);
    }

    .form-section[b-tt3y03xmyx] {
        padding: var(--aa-spacing-2);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Orders/OrderModal.razor.rz.scp.css */
/* Order Modal - COMPACT ADMIN DESIGN */
/* All spacing reduced for efficient admin use */

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

/* Modal Container - Compact */
.modal-container[b-yqh6r608z5] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    max-width: 550px; /* Narrower for compact design */
    width: 100%;
    max-height: 85vh; /* Reduced height */
    display: flex;
    flex-direction: column;
}

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

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

.modal-close-btn[b-yqh6r608z5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; /* Smaller close button */
    height: 28px;
    border: 1px 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);
}

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

/* Modal Content - Very Compact */
.modal-content[b-yqh6r608z5] {
    flex: 1;
    padding: var(--aa-spacing-3); /* Reduced padding */
    overflow-y: auto;
    max-height: calc(85vh - 100px);
}

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

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

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

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

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

/* Modal Form - Tight Spacing */
.modal-form[b-yqh6r608z5] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2); /* Minimal gap between fields */
}

/* Modal Footer - Compact */
.modal-footer[b-yqh6r608z5] {
    display: flex;
    justify-content: flex-end;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3); /* Reduced padding */
    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);
}

/* Customer Info Banner - Compact */
.customer-info-banner[b-yqh6r608z5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2); /* Very compact */
    background: linear-gradient(135deg, #e7f3ff 0%, #d1ecf1 100%);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid #0066cc;
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

.customer-info-banner svg[b-yqh6r608z5] {
    color: #0066cc;
    flex-shrink: 0;
}

/* Status Badge - Compact */
.status-badge[b-yqh6r608z5] {
    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-full);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-white);
    white-space: nowrap;
}

.status-badge.status-pending[b-yqh6r608z5] {
    background: #FFA500;
}

/* Alert Compact */
.admin-alert-compact[b-yqh6r608z5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2); /* Very compact alert */
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 3px solid #2196F3;
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

.admin-alert[b-yqh6r608z5] {
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
}

.admin-alert-warning[b-yqh6r608z5] {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    color: #856404;
}

/* Form Row - Two Column */
.admin-form-row[b-yqh6r608z5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-2); /* Reduced gap */
}

/* Responsive - Mobile Compact */
@media (max-width: 768px) {
    .modal-container[b-yqh6r608z5] {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .modal-header[b-yqh6r608z5] {
        padding: var(--aa-spacing-2);
    }
    
    .modal-content[b-yqh6r608z5] {
        padding: var(--aa-spacing-2);
    }
    
    .admin-form-row[b-yqh6r608z5] {
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: var(--aa-spacing-2);
    }
    
    .modal-footer[b-yqh6r608z5] {
        padding: var(--aa-spacing-2);
        flex-direction: column-reverse;
    }
    
    .admin-btn[b-yqh6r608z5] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-container[b-yqh6r608z5] {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-header[b-yqh6r608z5] {
        border-radius: 0;
    }
    
    .modal-title[b-yqh6r608z5] {
        font-size: var(--aa-font-size-sm);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Orders/OrderPaymentModal.razor.rz.scp.css */
/* OrderPaymentModal.razor.css - Compact Admin Design using CSS Variables */

/* Modal Overlay */
.modal-overlay[b-5g7wjy8ywq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--aa-z-modal);
    backdrop-filter: blur(4px);
}

/* Modal Container - Compact */
.modal-container[b-5g7wjy8ywq] {
    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;
    overflow: hidden;
    animation: modalSlideIn-b-5g7wjy8ywq var(--aa-transition-base) ease-out;
}

@keyframes modalSlideIn-b-5g7wjy8ywq {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

.modal-close-btn[b-5g7wjy8ywq] {
    background: rgba(45, 27, 73, 0.1);
    border: none;
    border-radius: 50%;
    width: var(--aa-spacing-6);
    height: var(--aa-spacing-6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2d1b49;
    transition: all var(--aa-transition-base) ease;
}

.modal-close-btn:hover[b-5g7wjy8ywq] {
    background: rgba(45, 27, 73, 0.2);
    transform: scale(1.1);
}

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

/* Form Container */
.form-container[b-5g7wjy8ywq] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-4);
}

/* Admin Form Section */
.admin-form-section[b-5g7wjy8ywq] {
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    border: 1px solid var(--aa-light-gray);
}

.admin-section-title[b-5g7wjy8ywq] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding-bottom: var(--aa-spacing-2);
    border-bottom: 2px solid var(--aa-medium-gray);
}

/* Admin Form Group */
.admin-form-group[b-5g7wjy8ywq] {
    margin-bottom: var(--aa-spacing-3);
}

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

.admin-form-label[b-5g7wjy8ywq] {
    display: block;
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    margin-bottom: var(--aa-spacing-1);
}

.admin-form-input[b-5g7wjy8ywq] {
    width: 100%;
    padding: var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
    border: 1px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    background: var(--aa-white);
    color: var(--aa-text-primary);
    transition: all var(--aa-transition-base) ease;
}

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

.admin-form-textarea[b-5g7wjy8ywq] {
    width: 100%;
    padding: var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
    border: 1px solid var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    background: var(--aa-white);
    color: var(--aa-text-primary);
    transition: all var(--aa-transition-base) ease;
    resize: vertical;
    font-family: inherit;
}

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

/* Admin Form Row - Side-by-side fields */
.admin-form-row[b-5g7wjy8ywq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-3);
}

/* Currency Input */
.currency-input-wrapper[b-5g7wjy8ywq] {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol[b-5g7wjy8ywq] {
    position: absolute;
    left: var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-secondary);
    pointer-events: none;
}

.currency-input[b-5g7wjy8ywq] {
    padding-left: var(--aa-spacing-5) !important;
}

/* Payment Summary Box */
.payment-summary-box[b-5g7wjy8ywq] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    margin-bottom: var(--aa-spacing-3);
}

.summary-row[b-5g7wjy8ywq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-1) 0;
    font-size: var(--aa-font-size-sm);
}

.summary-row.balance[b-5g7wjy8ywq] {
    margin-top: var(--aa-spacing-2);
    padding-top: var(--aa-spacing-2);
    border-top: 2px solid #bae6fd;
    font-weight: var(--aa-font-weight-semibold);
}

.summary-label[b-5g7wjy8ywq] {
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-medium);
}

.summary-value[b-5g7wjy8ywq] {
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-md);
}

.summary-value.paid[b-5g7wjy8ywq] {
    color: var(--aa-success);
}

/* Payment Warning */
.payment-warning[b-5g7wjy8ywq] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    background: var(--aa-warning-light);
    color: var(--aa-warning);
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    margin-top: var(--aa-spacing-2);
}

/* Payment Method Dropdown Items */
.payment-method-name[b-5g7wjy8ywq] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.payment-method-desc[b-5g7wjy8ywq] {
    display: block;
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    margin-top: var(--aa-spacing-xs);
}

/* Validation Message */
.admin-validation-message[b-5g7wjy8ywq] {
    color: var(--aa-danger);
    font-size: var(--aa-font-size-xs);
    margin-top: var(--aa-spacing-1);
    display: block;
}

/* Loading State */
.modal-loading[b-5g7wjy8ywq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-8);
    gap: var(--aa-spacing-3);
    color: var(--aa-text-secondary);
}

.modal-loading .spin-animation[b-5g7wjy8ywq] {
    font-size: var(--aa-font-size-2xl);
    animation: spin-b-5g7wjy8ywq 1s linear infinite;
}

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

/* Error State */
.modal-error[b-5g7wjy8ywq] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    background: var(--aa-danger-light);
    color: var(--aa-danger);
    padding: var(--aa-spacing-3);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-danger);
}

/* Modal Footer */
.modal-footer[b-5g7wjy8ywq] {
    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-2);
    flex-shrink: 0;
}

/* Admin Buttons */
.admin-btn[b-5g7wjy8ywq] {
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    white-space: nowrap;
}

.admin-btn:disabled[b-5g7wjy8ywq] {
    opacity: 0.5;
    cursor: not-allowed;
}

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

.admin-btn-primary:hover:not(:disabled)[b-5g7wjy8ywq] {
    background: linear-gradient(135deg, #a797c9 0%, #c3b4d8 100%);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
    transform: translateY(-1px);
}

.admin-btn-primary:active:not(:disabled)[b-5g7wjy8ywq] {
    transform: translateY(0);
}

.admin-btn-secondary[b-5g7wjy8ywq] {
    background: var(--aa-white);
    color: var(--aa-text-primary);
    border: 1px solid var(--aa-medium-gray);
}

.admin-btn-secondary:hover:not(:disabled)[b-5g7wjy8ywq] {
    background: var(--aa-light);
    border-color: var(--aa-dark-gray);
}

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

    .modal-header[b-5g7wjy8ywq] {
        padding: var(--aa-spacing-2) var(--aa-spacing-3);
    }

    .modal-title[b-5g7wjy8ywq] {
        font-size: var(--aa-font-size-md);
    }

    .modal-content[b-5g7wjy8ywq] {
        padding: var(--aa-spacing-3);
    }

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

    .modal-footer[b-5g7wjy8ywq] {
        flex-direction: column;
        gap: var(--aa-spacing-2);
    }

    .admin-btn[b-5g7wjy8ywq] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-container[b-5g7wjy8ywq] {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .payment-summary-box[b-5g7wjy8ywq] {
        font-size: var(--aa-font-size-xs);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Orders/OrderStatusRecalculationResultsModal.razor.rz.scp.css */
/* Order Status Recalculation Results Modal - Compact Admin Design */

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

/* Modal Container */
.recalc-modal-container[b-oh67zigxlu] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-lg);
    box-shadow: var(--aa-shadow-2xl);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-oh67zigxlu 0.3s ease-out;
}

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

/* Modal Header */
.recalc-modal-header[b-oh67zigxlu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-4);
    border-bottom: 1px solid var(--aa-light-gray);
}

.recalc-modal-icon[b-oh67zigxlu] {
    width: 48px;
    height: 48px;
    border-radius: var(--aa-border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aa-font-size-2xl);
    color: var(--aa-white);
    flex-shrink: 0;
}

.recalc-modal-icon.success[b-oh67zigxlu] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.recalc-modal-icon.warning[b-oh67zigxlu] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.recalc-modal-icon.info[b-oh67zigxlu] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.recalc-modal-title[b-oh67zigxlu] {
    flex: 1;
    margin: 0;
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
}

.recalc-modal-close[b-oh67zigxlu] {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--aa-text-secondary);
    transition: all var(--aa-transition-base) ease;
    flex-shrink: 0;
}

.recalc-modal-close:hover[b-oh67zigxlu] {
    background: var(--aa-medium-light);
    color: var(--aa-text-primary);
}

/* Modal Content */
.recalc-modal-content[b-oh67zigxlu] {
    padding: var(--aa-spacing-4);
    overflow-y: auto;
    flex: 1;
}

/* Summary Stats Grid */
.recalc-summary-grid[b-oh67zigxlu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--aa-spacing-3);
    margin-bottom: var(--aa-spacing-4);
}

.recalc-stat-card[b-oh67zigxlu] {
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    border: 2px solid transparent;
    transition: all var(--aa-transition-base) ease;
}

.recalc-stat-card:hover[b-oh67zigxlu] {
    transform: translateY(-2px);
    box-shadow: var(--aa-shadow-sm);
}

.recalc-stat-card.total[b-oh67zigxlu] {
    border-color: #b8a9d9;
}

.recalc-stat-card.updated[b-oh67zigxlu] {
    border-color: #10b981;
}

.recalc-stat-card.unchanged[b-oh67zigxlu] {
    border-color: #6b7280;
}

.recalc-stat-card.errors[b-oh67zigxlu] {
    border-color: #ef4444;
}

.recalc-stat-icon[b-oh67zigxlu] {
    font-size: var(--aa-font-size-2xl);
    flex-shrink: 0;
}

.recalc-stat-card.total .recalc-stat-icon[b-oh67zigxlu] {
    color: #b8a9d9;
}

.recalc-stat-card.updated .recalc-stat-icon[b-oh67zigxlu] {
    color: #10b981;
}

.recalc-stat-card.unchanged .recalc-stat-icon[b-oh67zigxlu] {
    color: #6b7280;
}

.recalc-stat-card.errors .recalc-stat-icon[b-oh67zigxlu] {
    color: #ef4444;
}

.recalc-stat-content[b-oh67zigxlu] {
    flex: 1;
    min-width: 0;
}

.recalc-stat-label[b-oh67zigxlu] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--aa-spacing-xxs);
}

.recalc-stat-value[b-oh67zigxlu] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-family-mono);
    line-height: 1;
}

/* Timestamp */
.recalc-timestamp[b-oh67zigxlu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-secondary);
    margin-bottom: var(--aa-spacing-4);
}

.recalc-timestamp .bi[b-oh67zigxlu] {
    color: #b8a9d9;
}

/* Success Message */
.recalc-success-message[b-oh67zigxlu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.1));
    border: 1px solid #10b981;
    border-radius: var(--aa-border-radius-md);
    color: #059669;
    font-weight: var(--aa-font-weight-medium);
}

.recalc-success-message .bi[b-oh67zigxlu] {
    font-size: var(--aa-font-size-xl);
    color: #10b981;
}

/* Error Section */
.recalc-errors-section[b-oh67zigxlu] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(248, 113, 113, 0.05));
    border: 1px solid #ef4444;
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
}

.recalc-errors-header[b-oh67zigxlu] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    margin-bottom: var(--aa-spacing-3);
    color: #dc2626;
}

.recalc-errors-header .bi[b-oh67zigxlu] {
    font-size: var(--aa-font-size-lg);
}

.recalc-errors-header h4[b-oh67zigxlu] {
    margin: 0;
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-semibold);
}

.recalc-errors-list[b-oh67zigxlu] {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-1);
}

.recalc-error-item[b-oh67zigxlu] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

.recalc-error-item .bi[b-oh67zigxlu] {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Modal Footer */
.recalc-modal-footer[b-oh67zigxlu] {
    padding: var(--aa-spacing-4);
    border-top: 1px solid var(--aa-light-gray);
    display: flex;
    justify-content: flex-end;
}

.btn-close-modal[b-oh67zigxlu] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-4);
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 100%);
    color: #2d1b49;
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-base);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    box-shadow: var(--aa-shadow-sm);
}

.btn-close-modal:hover[b-oh67zigxlu] {
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
}

.btn-close-modal:active[b-oh67zigxlu] {
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .recalc-modal-overlay[b-oh67zigxlu] {
        padding: var(--aa-spacing-2);
    }

    .recalc-summary-grid[b-oh67zigxlu] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--aa-spacing-2);
    }

    .recalc-modal-header[b-oh67zigxlu] {
        padding: var(--aa-spacing-3);
    }

    .recalc-modal-content[b-oh67zigxlu] {
        padding: var(--aa-spacing-3);
    }

    .recalc-modal-footer[b-oh67zigxlu] {
        padding: var(--aa-spacing-3);
    }

    .recalc-modal-title[b-oh67zigxlu] {
        font-size: var(--aa-font-size-lg);
    }

    .recalc-stat-value[b-oh67zigxlu] {
        font-size: var(--aa-font-size-lg);
    }
}

@media (max-width: 480px) {
    .recalc-summary-grid[b-oh67zigxlu] {
        grid-template-columns: 1fr;
    }

    .recalc-modal-icon[b-oh67zigxlu] {
        width: 40px;
        height: 40px;
        font-size: var(--aa-font-size-xl);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Orders/RequestedDateBadge.razor.rz.scp.css */
/* ============================================================================
   REQUESTED DATE BADGE COMPONENT - Reusable Component Styles
   ============================================================================
   Color-coded badge for requested dates based on urgency and fulfillment status
   
   Status Color Legend:
   - Green (status-completed): Item already mailed
   - Orange (status-safe): Requested date > 7 days away and not mailed  
   - Red (status-urgent): Requested date ≤ 7 days OR ASAP and not mailed
   
   Follows CODING_STANDARDS.md - Uses CSS variables from aa-variables.css
   ============================================================================ */

/* Base Badge Styling - Inherited from parent context */
/* The .status-badge class is defined globally, this file only adds status-specific colors */

.status-badge[b-i9bg36gidk] {
    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);
}

.requested-status[b-i9bg36gidk] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

/* Green - All items mailed (completed) */
.status-badge.status-completed[b-i9bg36gidk] {
    background: color-mix(in srgb, var(--aa-success) 15%, transparent);
    color: var(--aa-success);
}

.status-badge.status-completed svg[b-i9bg36gidk] {
    color: var(--aa-success);
}

/* Orange - Requested date > 7 days away (safe/plenty of time) */
.status-badge.status-safe[b-i9bg36gidk] {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
}

.status-badge.status-safe svg[b-i9bg36gidk] {
    color: #f59e0b;
}

/* Red - Urgent (≤7 days OR ASAP and not mailed) */
.status-badge.status-urgent[b-i9bg36gidk] {
    background: color-mix(in srgb, var(--aa-danger) 15%, transparent);
    color: var(--aa-danger);
}

.status-badge.status-urgent svg[b-i9bg36gidk] {
    color: var(--aa-danger);
}
/* /Src/Presentation/Areas/Admin/Components/ProductCategories/ProductCategoryModal.razor.rz.scp.css */
/* ProductCategoryModal Component-Specific Styles */
/* All global modal styles are in aa-admin.css */
/* This file is intentionally minimal - add only ProductCategoryModal-specific overrides here if needed */
/* /Src/Presentation/Areas/Admin/Components/ProductGroupImageTypes/ProductGroupImageTypeModal.razor.rz.scp.css */
/* ProductGroupImageTypeModal Component-Specific Styles */
/* All global modal styles are in wwwroot/css/aa-modals.css */
/* This file is intentionally minimal - add only ProductGroupImageTypeModal-specific overrides here if needed */
/* /Src/Presentation/Areas/Admin/Components/ProductGroups/ProductGroupModal.razor.rz.scp.css */
/* ProductGroupModal Component-Specific Styles */
/* All global modal styles are in wwwroot/css/aa-modals.css */
/* This file is intentionally minimal - add only ProductGroupModal-specific overrides here if needed */
/* /Src/Presentation/Areas/Admin/Components/ProductOffers/ProductOfferModal.razor.rz.scp.css */
/* ProductOfferModal Component-Specific Styles */
/* All global modal styles are in wwwroot/css/aa-modals.css */
/* This file is intentionally minimal - add only ProductOfferModal-specific overrides here if needed */

/* Price Preview - ProductOffer-specific component */
.price-preview[b-p4vztsugve] {
    background: linear-gradient(135deg, var(--aa-light) 0%, var(--aa-light-gray) 100%);
    border: 2px solid var(--aa-purple);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    margin-top: var(--aa-spacing-3);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aa-spacing-3);
}

.preview-item[b-p4vztsugve] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-1);
}

.preview-item label[b-p4vztsugve] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-secondary);
    text-transform: uppercase;
}

.price-value[b-p4vztsugve] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-primary);
}

.discount-value[b-p4vztsugve] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-success);
}

.final-price[b-p4vztsugve] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-success);
}

/* Input with Prefix (for currency) - ProductOffer-specific */
.input-with-prefix[b-p4vztsugve] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-p4vztsugve] {
    position: absolute;
    left: var(--aa-spacing-3);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-secondary);
    pointer-events: none;
    font-size: var(--aa-font-size-sm);
}

.admin-form-input.with-prefix[b-p4vztsugve] {
    padding-left: var(--aa-spacing-8);
}

/* Responsive - Price Preview */
@media (max-width: 768px) {
    .price-preview[b-p4vztsugve] {
        grid-template-columns: 1fr;
    }
}
/* /Src/Presentation/Areas/Admin/Components/ProductOfferTypes/ProductOfferTypeModal.razor.rz.scp.css */
/* ProductOfferTypeModal Component-Specific Styles */
/* All global modal styles are in wwwroot/css/aa-modals.css */
/* This file is intentionally minimal - add only ProductOfferTypeModal-specific overrides here if needed */
/* /Src/Presentation/Areas/Admin/Components/Products/ProductImageBatchUploader.razor.rz.scp.css */
/* ProductImageBatchUploader.razor.css - Batch upload interface styles */

/* ==========================================================================
   BATCH UPLOADER MODAL
   ========================================================================== */

.batch-uploader-modal[b-vld2yq0n9f] {
    max-width: 900px;
    max-height: 90vh;
}

.batch-uploader-modal .modal-content[b-vld2yq0n9f] {
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

/* ==========================================================================
   WIZARD PROGRESS (shared with ProductImageModal)
   ========================================================================== */

.wizard-progress[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: linear-gradient(135deg, var(--aa-bg-light) 0%, var(--aa-bg-medium) 100%);
    border-radius: var(--aa-border-radius-md);
    margin-bottom: var(--aa-spacing-3);
    border: 1px solid var(--aa-border-light);
}

.wizard-step[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
}

.wizard-step.completed[b-vld2yq0n9f] {
    color: var(--aa-state-completed-text);
    background: var(--aa-state-completed-bg);
}

.wizard-step.active[b-vld2yq0n9f] {
    color: var(--aa-primary);
    background: color-mix(in srgb, var(--aa-primary) 10%, transparent);
}

.wizard-arrow[b-vld2yq0n9f] {
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-bold);
}

/* Wizard Intro */
.wizard-intro[b-vld2yq0n9f] {
    text-align: center;
    padding: var(--aa-spacing-4) var(--aa-spacing-2);
}

.wizard-intro .success-icon[b-vld2yq0n9f] {
    font-size: 4rem;
    color: var(--aa-state-completed-text);
    margin-bottom: var(--aa-spacing-3);
    animation: success-bounce-b-vld2yq0n9f 0.6s ease-out;
}

@keyframes success-bounce-b-vld2yq0n9f {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.required-images-info[b-vld2yq0n9f] {
    background: var(--aa-bg-light);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    margin-top: var(--aa-spacing-3);
}

.required-images-list[b-vld2yq0n9f] {
    list-style: none;
    padding: 0;
    margin: var(--aa-spacing-2) 0;
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.required-images-list li[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: var(--aa-white);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-sm);
}

.optional-images-note[b-vld2yq0n9f] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    font-style: italic;
    margin-top: var(--aa-spacing-2);
}

/* ==========================================================================
   BATCH UPLOAD CONTAINER
   ========================================================================== */

.batch-upload-container[b-vld2yq0n9f] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-4);
}

/* Progress Summary */
.upload-progress-summary[b-vld2yq0n9f] {
    background: var(--aa-bg-light);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
}

.progress-info[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    margin-bottom: var(--aa-spacing-2);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

.progress-info svg[b-vld2yq0n9f] {
    color: var(--aa-primary);
}

.progress-bar-container[b-vld2yq0n9f] {
    height: 8px;
    background: var(--aa-bg-medium);
    border-radius: var(--aa-border-radius-full);
    overflow: hidden;
}

.progress-bar[b-vld2yq0n9f] {
    height: 100%;
    background: linear-gradient(90deg, var(--aa-primary) 0%, var(--aa-primary-dark) 100%);
    border-radius: var(--aa-border-radius-full);
    transition: width 0.3s ease;
}

/* Upload Sections */
.upload-section[b-vld2yq0n9f] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.upload-section.optional-section[b-vld2yq0n9f] {
    border-top: 1px solid var(--aa-border-light);
    padding-top: var(--aa-spacing-3);
}

.section-header[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    margin-bottom: var(--aa-spacing-2);
}

.section-header svg[b-vld2yq0n9f] {
    color: var(--aa-primary);
}

.section-header h3[b-vld2yq0n9f] {
    margin: 0;
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

/* Add Optional Button */
.btn-add-optional[b-vld2yq0n9f] {
    align-self: flex-start;
    margin-top: var(--aa-spacing-2);
}

/* Upload Warning */
.upload-warning[b-vld2yq0n9f] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-2);
    background: var(--aa-state-warning-bg);
    border: 1px solid var(--aa-state-warning-border);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-2);
    color: var(--aa-state-warning-text);
    font-size: var(--aa-font-size-sm);
}

.upload-warning svg[b-vld2yq0n9f] {
    flex-shrink: 0;
    margin-top: 2px;
}

.upload-warning strong[b-vld2yq0n9f] {
    font-weight: var(--aa-font-weight-semibold);
}

/* Validation Summary */
.validation-summary[b-vld2yq0n9f] {
    background: var(--aa-danger-bg-light);
    border: 1px solid var(--aa-danger);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-2);
    color: var(--aa-danger);
    font-size: var(--aa-font-size-sm);
}

.validation-summary svg[b-vld2yq0n9f] {
    vertical-align: middle;
    margin-right: var(--aa-spacing-1);
}

.validation-summary ul[b-vld2yq0n9f] {
    margin: var(--aa-spacing-1) 0 0 var(--aa-spacing-4);
    padding: 0;
}

/* ==========================================================================
   PRODUCT CONTEXT HEADER
   ========================================================================== */

.product-context-header[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: linear-gradient(135deg, var(--aa-bg-primary) 0%, var(--aa-bg-secondary) 100%);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    margin-bottom: var(--aa-spacing-3);
}

.product-context-header .product-icon[b-vld2yq0n9f] {
    font-size: var(--aa-font-size-2xl);
    color: var(--aa-primary);
    flex-shrink: 0;
}

.product-context-header .product-info[b-vld2yq0n9f] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
    flex: 1;
    min-width: 0;
}

.product-context-header .product-label[b-vld2yq0n9f] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-medium);
}

.product-context-header .product-code[b-vld2yq0n9f] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-family-mono);
}

.product-context-header .product-description[b-vld2yq0n9f] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-secondary);
    line-height: var(--aa-line-height-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-context-header .product-meta[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    flex-shrink: 0;
}

.product-context-header .product-group-badge[b-vld2yq0n9f] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    background: var(--aa-white);
    border: 1px solid var(--aa-primary);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-primary);
}

.product-context-header .product-group-badge svg[b-vld2yq0n9f] {
    font-size: var(--aa-font-size-sm);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .batch-uploader-modal[b-vld2yq0n9f] {
        max-width: 95%;
    }

    .wizard-progress[b-vld2yq0n9f] {
        flex-direction: column;
        gap: var(--aa-spacing-1);
    }

    .wizard-arrow[b-vld2yq0n9f] {
        transform: rotate(90deg);
    }

    .upload-progress-summary[b-vld2yq0n9f] {
        padding: var(--aa-spacing-2);
    }

    .product-context-header[b-vld2yq0n9f] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--aa-spacing-2);
    }

    .product-context-header .product-meta[b-vld2yq0n9f] {
        width: 100%;
    }

    .product-context-header .product-description[b-vld2yq0n9f] {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .batch-uploader-modal .modal-content[b-vld2yq0n9f] {
        max-height: calc(100vh - 180px);
    }

    .wizard-intro[b-vld2yq0n9f] {
        padding: var(--aa-spacing-3) var(--aa-spacing-1);
    }

    .wizard-intro .success-icon[b-vld2yq0n9f] {
        font-size: 3rem;
    }
}

/* ==========================================================================
   GLOBAL CLASSES USED
   ========================================================================== */

/* Modal structure (from aa-admin.css):
 * - .modal-overlay
 * - .modal-container
 * - .modal-header
 * - .modal-title
 * - .modal-close-btn
 * - .modal-content
 * - .modal-footer
 */

/* Buttons (from aa-admin.css):
 * - .btn
 * - .btn-primary
 * - .btn-secondary
 * - .btn-icon
 */

/* Status badges (from aa-admin.css):
 * - .status-badge
 * - .status-badge.required
 * - .status-badge.optional
 */
/* /Src/Presentation/Areas/Admin/Components/Products/ProductImageCard.razor.rz.scp.css */
/* ProductImageCard.razor.css
 * Component-specific styles for Product Image Card
 * Following CSS_STANDARDS.md - Minimal component-specific styles
 * Displays 4 versions of each image: Original, Thumbnail, Watermarked, WM Thumbnail
 */

.product-image-card[b-vdt8ux3xjn] {
    background: var(--aa-white);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    overflow: hidden;
    transition: all var(--aa-transition-base);
    display: flex;
    flex-direction: column;
}

.product-image-card:hover[b-vdt8ux3xjn] {
    transform: translateY(-2px);
    box-shadow: var(--aa-shadow-md);
}

.product-image-card.inactive[b-vdt8ux3xjn] {
    opacity: 0.6;
    border-color: var(--aa-medium-gray);
}

/* Image Card Header */
.image-card-header[b-vdt8ux3xjn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--aa-spacing-3);
    border-bottom: 1px solid var(--aa-border-light);
    background: var(--aa-light);
}

.image-type[b-vdt8ux3xjn] {
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    margin: 0;
}

/* Small Status Badges */
.status-badge.required-small[b-vdt8ux3xjn],
.status-badge.optional-small[b-vdt8ux3xjn] {
    font-size: var(--aa-font-size-xs);
    padding: var(--aa-spacing-0) var(--aa-spacing-2);
    flex-shrink: 0;
}

.status-badge.required-small[b-vdt8ux3xjn] {
    background: #fff3cd;
    color: #856404;
}

.status-badge.optional-small[b-vdt8ux3xjn] {
    background: #e7f3ff;
    color: #004085;
}

/* Four Image Versions Grid (2x2) */
.image-versions-grid[b-vdt8ux3xjn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-3);
    background: var(--aa-light-gray);
}

.image-version-item[b-vdt8ux3xjn] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-1);
}

.version-preview[b-vdt8ux3xjn] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--aa-white);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-sm);
    overflow: hidden;
    transition: all var(--aa-transition-base);
}

.version-preview:hover[b-vdt8ux3xjn] {
    border-color: var(--aa-primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.version-image[b-vdt8ux3xjn] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--aa-white);
}

.inactive-overlay-small[b-vdt8ux3xjn] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aa-white);
    font-size: var(--aa-font-size-lg);
}

.version-label[b-vdt8ux3xjn] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-medium);
    padding: 0 var(--aa-spacing-1);
}

/* Image Info Section */
.image-info[b-vdt8ux3xjn] {
    padding: var(--aa-spacing-3);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
    border-top: 1px solid var(--aa-border-light);
}

/* Print Specifications */
.image-specs[b-vdt8ux3xjn] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
}

/* Alt Text Preview */
.image-alt-text[b-vdt8ux3xjn] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    line-height: var(--aa-line-height-tight);
}

.image-alt-text span[b-vdt8ux3xjn] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Metadata */
.image-metadata[b-vdt8ux3xjn] {
    display: flex;
    gap: var(--aa-spacing-3);
    padding-top: var(--aa-spacing-2);
    border-top: 1px solid var(--aa-border-light);
}

.metadata-item[b-vdt8ux3xjn] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
}

/* Action Buttons */
.image-actions[b-vdt8ux3xjn] {
    display: flex;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    border-top: 1px solid var(--aa-border-light);
    background: var(--aa-light);
}

/* ===== IMAGE LIGHTBOX MODAL ===== */

.image-lightbox-overlay[b-vdt8ux3xjn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--aa-spacing-4);
    animation: fadeIn-b-vdt8ux3xjn 0.2s ease-in-out;
}

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

.lightbox-container[b-vdt8ux3xjn] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-lg);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--aa-shadow-xl);
    animation: slideUp-b-vdt8ux3xjn 0.3s ease-out;
}

@keyframes slideUp-b-vdt8ux3xjn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.lightbox-header[b-vdt8ux3xjn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-bottom: 1px solid var(--aa-border-light);
    background: var(--aa-light);
}

.lightbox-title[b-vdt8ux3xjn] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.lightbox-close[b-vdt8ux3xjn] {
    background: transparent;
    border: none;
    padding: var(--aa-spacing-2);
    cursor: pointer;
    color: var(--aa-text-secondary);
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base);
    font-size: var(--aa-font-size-xl);
    line-height: 1;
}

.lightbox-close:hover[b-vdt8ux3xjn] {
    background: var(--aa-danger-light);
    color: var(--aa-danger);
}

.lightbox-body[b-vdt8ux3xjn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-4);
    overflow: auto;
    background: #f8f9fa;
}

.lightbox-image[b-vdt8ux3xjn] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
}

.lightbox-footer[b-vdt8ux3xjn] {
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    border-top: 1px solid var(--aa-border-light);
    background: var(--aa-white);
}

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

.lightbox-alt-text[b-vdt8ux3xjn] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-medium);
}

.lightbox-specs[b-vdt8ux3xjn] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .image-versions-grid[b-vdt8ux3xjn] {
        gap: var(--aa-spacing-0);
    }
    
    .version-label[b-vdt8ux3xjn] {
        font-size: 10px;
    }

    .lightbox-container[b-vdt8ux3xjn] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .lightbox-image[b-vdt8ux3xjn] {
        max-height: 60vh;
    }
}

@media (max-width: 480px) {
    .image-card-header[b-vdt8ux3xjn] {
        padding: var(--aa-spacing-2);
    }
    
    .image-versions-grid[b-vdt8ux3xjn] {
        padding: var(--aa-spacing-2);
    }

    .image-info[b-vdt8ux3xjn] {
        padding: var(--aa-spacing-2);
    }

    .image-type[b-vdt8ux3xjn] {
        font-size: var(--aa-font-size-sm);
    }
    
    .version-label span[b-vdt8ux3xjn] {
        display: none; /* Hide text, show only icons on mobile */
    }

    .image-lightbox-overlay[b-vdt8ux3xjn] {
        padding: 0;
    }

    .lightbox-container[b-vdt8ux3xjn] {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .lightbox-header[b-vdt8ux3xjn] {
        padding: var(--aa-spacing-2) var(--aa-spacing-3);
    }

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

    .lightbox-body[b-vdt8ux3xjn] {
        padding: var(--aa-spacing-2);
    }

    .lightbox-image[b-vdt8ux3xjn] {
        max-height: 50vh;
    }

    .lightbox-footer[b-vdt8ux3xjn] {
        padding: var(--aa-spacing-2) var(--aa-spacing-3);
    }
}
/* /Src/Presentation/Areas/Admin/Components/Products/ProductImageModal.razor.rz.scp.css */
/* ProductImageModal.razor.css - Modal-specific styles with Wizard support */

/* ==========================================================================
   WIZARD-SPECIFIC STYLES
   ========================================================================== */

/* Wizard Modal Container - Slightly Wider */
.wizard-modal[b-zj5b9yutge] {
    max-width: 650px;
}

/* Wizard Progress Header */
.wizard-progress[b-zj5b9yutge] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: linear-gradient(135deg, var(--aa-bg-light) 0%, var(--aa-bg-medium) 100%);
    border-radius: var(--aa-border-radius-md);
    margin-bottom: var(--aa-spacing-3);
    border: 1px solid var(--aa-border-light);
}

.wizard-step[b-zj5b9yutge] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    transition: all var(--aa-transition-base) ease;
}

.wizard-step.completed[b-zj5b9yutge] {
    color: var(--aa-state-completed-text);
    background: var(--aa-state-completed-bg);
}

.wizard-step.active[b-zj5b9yutge] {
    color: var(--aa-primary);
    background: color-mix(in srgb, var(--aa-primary) 10%, transparent);
}

.wizard-arrow[b-zj5b9yutge] {
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-bold);
    font-size: var(--aa-font-size-lg);
}

/* Wizard Intro Screen */
.wizard-intro[b-zj5b9yutge] {
    text-align: center;
    padding: var(--aa-spacing-4) var(--aa-spacing-2);
}

.wizard-intro .success-icon[b-zj5b9yutge] {
    font-size: 4rem;
    color: var(--aa-state-completed-text);
    margin-bottom: var(--aa-spacing-3);
    animation: success-bounce-b-zj5b9yutge 0.6s ease-out;
}

@keyframes success-bounce-b-zj5b9yutge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.wizard-intro h3[b-zj5b9yutge] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-2) 0;
}

.wizard-intro p[b-zj5b9yutge] {
    font-size: var(--aa-font-size-base);
    color: var(--aa-text-secondary);
    margin: 0 0 var(--aa-spacing-3) 0;
}

/* Required Images Info */
.required-images-info[b-zj5b9yutge] {
    background: var(--aa-bg-light);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    margin-top: var(--aa-spacing-3);
}

.required-images-info .text-muted[b-zj5b9yutge] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-secondary);
    margin-bottom: var(--aa-spacing-2);
}

.required-images-list[b-zj5b9yutge] {
    list-style: none;
    padding: 0;
    margin: var(--aa-spacing-2) 0;
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.required-images-list li[b-zj5b9yutge] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    background: var(--aa-white);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
}

.required-images-list li svg[b-zj5b9yutge] {
    color: var(--aa-state-active-text);
    font-size: var(--aa-font-size-base);
    flex-shrink: 0;
}

.required-images-list li strong[b-zj5b9yutge] {
    flex: 1;
    color: var(--aa-text-primary);
}

.optional-images-note[b-zj5b9yutge] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    font-style: italic;
    margin-top: var(--aa-spacing-2);
    margin-bottom: 0;
}

/* ==========================================================================
   FORM STYLES
   ========================================================================== */

/* Three Column Layout for Print Specs */
.admin-form-row.three-column[b-zj5b9yutge] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aa-spacing-2);
}

/* Image Preview */
.image-preview-container[b-zj5b9yutge] {
    margin-top: var(--aa-spacing-2);
    text-align: center;
}

.image-preview[b-zj5b9yutge] {
    max-width: 100%;
    max-height: 200px;
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-sm);
}

/* Character Counter */
.character-counter[b-zj5b9yutge] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    text-align: right;
    margin-top: var(--aa-spacing-1);
}

/* Validation Summary */
.validation-summary[b-zj5b9yutge] {
    background: var(--aa-danger-bg-light);
    border: 1px solid var(--aa-danger);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-2);
    margin-top: var(--aa-spacing-3);
    color: var(--aa-danger);
    font-size: var(--aa-font-size-sm);
}

.validation-summary svg[b-zj5b9yutge] {
    font-size: var(--aa-font-size-base);
    vertical-align: middle;
    margin-right: var(--aa-spacing-1);
}

.validation-summary ul[b-zj5b9yutge] {
    margin: var(--aa-spacing-1) 0 0 var(--aa-spacing-4);
    padding: 0;
}

.validation-summary li[b-zj5b9yutge] {
    margin-bottom: var(--aa-spacing-1);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .wizard-modal[b-zj5b9yutge] {
        max-width: 95%;
    }

    .wizard-progress[b-zj5b9yutge] {
        flex-direction: column;
        gap: var(--aa-spacing-1);
    }

    .wizard-arrow[b-zj5b9yutge] {
        transform: rotate(90deg);
        font-size: var(--aa-font-size-base);
    }

    .wizard-intro[b-zj5b9yutge] {
        padding: var(--aa-spacing-3) var(--aa-spacing-1);
    }

    .wizard-intro .success-icon[b-zj5b9yutge] {
        font-size: 3rem;
    }

    .admin-form-row.three-column[b-zj5b9yutge] {
        grid-template-columns: 1fr;
    }

    .required-images-list li[b-zj5b9yutge] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--aa-spacing-1);
    }
}

@media (max-width: 480px) {
    .wizard-step[b-zj5b9yutge] {
        font-size: var(--aa-font-size-xs);
        padding: var(--aa-spacing-0) var(--aa-spacing-1);
    }

    .wizard-intro h3[b-zj5b9yutge] {
        font-size: var(--aa-font-size-lg);
    }
}

/* ==========================================================================
   GLOBAL CLASSES USED (from aa-admin.css)
   ========================================================================== */

/* Modal structure:
 * - .modal-overlay (from aa-admin.css or modal globals)
 * - .modal-container
 * - .modal-header
 * - .modal-title
 * - .modal-close-btn
 * - .modal-content
 * - .modal-footer
 * - .btn, .btn-primary, .btn-secondary (from aa-admin.css)
 */

/* Form elements:
 * - .admin-form-group (from aa-admin.css)
 * - .admin-form-section (from aa-admin.css)
 * - .admin-section-title (from aa-admin.css)
 * - .form-label, .form-control (from aa-forms.css)
 */

/* Status badges:
 * - .status-badge, .status-badge.required (from aa-admin.css)
 */

/* Loading/Error states:
 * - .modal-loading, .modal-error (define if not in globals)
 * - .spin-animation (from aa-admin.css)
 */
/* /Src/Presentation/Areas/Admin/Components/Products/ProductImageSection.razor.rz.scp.css */
/* ProductImageSection.razor.css
 * Page-specific styles for Product Image Section component
 * All common styles come from global CSS files (aa-admin.css, aa-components.css)
 * Following CSS_STANDARDS.md - Page-specific CSS < 50 lines
 */

/* Image Grid Layout */
.image-grid[b-qp9wvhjtag] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--aa-spacing-3);
    margin-top: var(--aa-spacing-3);
}

/* Alert Styling (Uses design system variables) */
.alert[b-qp9wvhjtag] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3);
    border-radius: var(--aa-border-radius-md);
    margin-bottom: var(--aa-spacing-3);
    font-size: var(--aa-font-size-sm);
}

.alert-warning[b-qp9wvhjtag] {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.alert-content[b-qp9wvhjtag] {
    flex: 1;
}

.alert strong[b-qp9wvhjtag] {
    display: block;
    margin-bottom: var(--aa-spacing-1);
}

/* Empty State Compact */
.empty-state-compact[b-qp9wvhjtag] {
    text-align: center;
    padding: var(--aa-spacing-8);
    color: var(--aa-text-secondary);
}

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

/* Responsive */
@media (max-width: 768px) {
    .image-grid[b-qp9wvhjtag] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--aa-spacing-2);
    }
}

@media (max-width: 480px) {
    .image-grid[b-qp9wvhjtag] {
        grid-template-columns: 1fr;
    }
}
/* /Src/Presentation/Areas/Admin/Components/Products/ProductImageUploadRow.razor.rz.scp.css */
/* ProductImageUploadRow.razor.css - Individual upload row styles */

/* ==========================================================================
   UPLOAD ROW CONTAINER
   ========================================================================== */

.image-upload-row[b-z0v3d7vyum] {
    border: 2px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    background: var(--aa-white);
    transition: all var(--aa-transition-base) ease;
}

.image-upload-row.required[b-z0v3d7vyum] {
    border-left: 4px solid var(--aa-primary);
}

.image-upload-row.optional[b-z0v3d7vyum] {
    border-left: 4px solid var(--aa-text-secondary);
}

.image-upload-row.uploaded[b-z0v3d7vyum] {
    background: var(--aa-state-completed-bg);
    border-color: var(--aa-state-completed-border);
}

.image-upload-row:hover[b-z0v3d7vyum] {
    box-shadow: var(--aa-shadow-sm);
}

/* ==========================================================================
   ROW HEADER
   ========================================================================== */

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

.image-type-info[b-z0v3d7vyum] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

.image-type-info svg[b-z0v3d7vyum] {
    font-size: var(--aa-font-size-lg);
    color: var(--aa-primary);
}

.image-upload-row.uploaded .image-type-info svg[b-z0v3d7vyum] {
    color: var(--aa-state-completed-text);
}

.image-type-info strong[b-z0v3d7vyum] {
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.row-actions[b-z0v3d7vyum] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
}

/* ==========================================================================
   ROW CONTENT
   ========================================================================== */

.row-content[b-z0v3d7vyum] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

/* ==========================================================================
   UPLOAD ZONE
   ========================================================================== */

.upload-zone[b-z0v3d7vyum] {
    position: relative;
    border: 2px dashed var(--aa-border-medium);
    border-radius: var(--aa-border-radius-md);
    background: var(--aa-bg-light);
    transition: all var(--aa-transition-base) ease;
    cursor: pointer;
}

.upload-zone:hover[b-z0v3d7vyum] {
    border-color: var(--aa-primary);
    background: color-mix(in srgb, var(--aa-primary) 5%, var(--aa-bg-light));
}

.upload-zone .file-input[b-z0v3d7vyum] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-zone-content[b-z0v3d7vyum] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--aa-spacing-4) var(--aa-spacing-2);
    text-align: center;
    min-height: 150px;
    cursor: pointer;
}

.upload-zone-content.dragging[b-z0v3d7vyum] {
    background: color-mix(in srgb, var(--aa-primary) 10%, var(--aa-bg-light));
    border-color: var(--aa-primary);
}

.upload-icon[b-z0v3d7vyum] {
    font-size: 3rem;
    color: var(--aa-primary);
    margin-bottom: var(--aa-spacing-2);
}

.upload-text[b-z0v3d7vyum] {
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-1) 0;
}

.upload-hint[b-z0v3d7vyum] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
}

.upload-progress[b-z0v3d7vyum] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    margin-top: var(--aa-spacing-2);
    color: var(--aa-primary);
    font-weight: var(--aa-font-weight-medium);
}

/* ==========================================================================
   URL INPUT
   ========================================================================== */

.url-input-section[b-z0v3d7vyum] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.divider[b-z0v3d7vyum] {
    position: relative;
    text-align: center;
    margin: var(--aa-spacing-2) 0;
}

.divider[b-z0v3d7vyum]::before,
.divider[b-z0v3d7vyum]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: var(--aa-border-light);
}

.divider[b-z0v3d7vyum]::before {
    left: 0;
}

.divider[b-z0v3d7vyum]::after {
    right: 0;
}

.divider span[b-z0v3d7vyum] {
    background: var(--aa-white);
    padding: 0 var(--aa-spacing-2);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    font-weight: var(--aa-font-weight-medium);
}

.url-input-group[b-z0v3d7vyum] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2);
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    background: var(--aa-white);
}

.url-input-group svg[b-z0v3d7vyum] {
    color: var(--aa-text-secondary);
    flex-shrink: 0;
}

.url-input-group .form-control[b-z0v3d7vyum] {
    border: none;
    padding: 0;
    margin: 0;
}

.url-input-group .form-control:focus[b-z0v3d7vyum] {
    outline: none;
    box-shadow: none;
}

/* ==========================================================================
   IMAGE PREVIEW SECTION
   ========================================================================== */

.image-preview-section[b-z0v3d7vyum] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--aa-spacing-3);
}

.preview-container[b-z0v3d7vyum] {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid var(--aa-border-light);
    border-radius: var(--aa-border-radius-md);
    overflow: hidden;
    background: var(--aa-bg-light);
}

.preview-thumbnail[b-z0v3d7vyum] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-overlay[b-z0v3d7vyum] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--aa-transition-base) ease;
}

.preview-container:hover .preview-overlay[b-z0v3d7vyum] {
    opacity: 1;
}

.btn-preview[b-z0v3d7vyum] {
    background: var(--aa-white);
    color: var(--aa-text-primary);
    border: none;
    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-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
}

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

/* Image Metadata Form */
.image-metadata[b-z0v3d7vyum] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

.image-metadata .form-group[b-z0v3d7vyum] {
    margin-bottom: 0;
}

.image-metadata .form-label[b-z0v3d7vyum] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    margin-bottom: var(--aa-spacing-1);
}

.image-metadata .form-label svg[b-z0v3d7vyum] {
    font-size: var(--aa-font-size-base);
    color: var(--aa-text-secondary);
}

.image-metadata .form-text[b-z0v3d7vyum] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    margin-top: var(--aa-spacing-1);
}

/* Three Column Layout */
.form-row.three-column[b-z0v3d7vyum] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aa-spacing-2);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .image-preview-section[b-z0v3d7vyum] {
        grid-template-columns: 1fr;
    }

    .preview-container[b-z0v3d7vyum] {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

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

@media (max-width: 480px) {
    .image-upload-row[b-z0v3d7vyum] {
        padding: var(--aa-spacing-2);
    }

    .upload-zone-content[b-z0v3d7vyum] {
        padding: var(--aa-spacing-3) var(--aa-spacing-1);
        min-height: 120px;
    }

    .upload-icon[b-z0v3d7vyum] {
        font-size: 2rem;
    }

    .upload-text[b-z0v3d7vyum] {
        font-size: var(--aa-font-size-sm);
    }

    .preview-container[b-z0v3d7vyum] {
        height: 150px;
    }
}

/* ==========================================================================
   GLOBAL CLASSES USED
   ========================================================================== */

/* Form elements (from aa-forms.css):
 * - .form-group
 * - .form-label
 * - .form-control
 * - .form-text
 */

/* Buttons (from aa-admin.css):
 * - .btn-icon
 */

/* Status badges (from aa-admin.css):
 * - .status-badge
 * - .status-badge.required
 * - .status-badge.optional
 */

/* Animations (from aa-admin.css):
 * - .spin-animation
 */
/* /Src/Presentation/Areas/Admin/Components/Products/ProductModal.razor.rz.scp.css */

/* ProductModal Component-Specific Styles */
/* All global modal styles are in wwwroot/css/aa-modals.css */
/* This file is intentionally minimal - add only ProductModal-specific overrides here if needed */
/* /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-text-primary);
    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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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/Shared/NotificationToast.razor.rz.scp.css */
/* Toast Notification Container */
.toast-container[b-in5ku8dwiq] {
    position: fixed;
    top: var(--aa-spacing-4);
    right: var(--aa-spacing-4);
    z-index: var(--aa-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
    pointer-events: none;
    max-width: 400px;
}

/* Individual Toast */
.toast[b-in5ku8dwiq] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    overflow: hidden;
    pointer-events: all;
    opacity: 0;
    transform: translateX(400px);
    transition: all var(--aa-transition-base) ease;
    min-width: 320px;
    max-width: 400px;
    position: relative;
}

/* Show Animation */
.toast.show[b-in5ku8dwiq] {
    opacity: 1;
    transform: translateX(0);
}

/* Toast Header */
.toast-header[b-in5ku8dwiq] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border-bottom: 1px solid var(--aa-light-gray);
}

.toast-icon[b-in5ku8dwiq] {
    width: var(--aa-spacing-5);
    height: var(--aa-spacing-5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--aa-font-size-base);
}

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

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

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

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

.toast-title[b-in5ku8dwiq] {
    flex: 1;
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    margin: 0;
}

.toast-close-btn[b-in5ku8dwiq] {
    width: var(--aa-spacing-5);
    height: var(--aa-spacing-5);
    border: none;
    background: transparent;
    color: var(--aa-text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--aa-transition-base) ease;
    font-size: var(--aa-font-size-sm);
    flex-shrink: 0;
}

.toast-close-btn:hover[b-in5ku8dwiq] {
    background: var(--aa-light);
    color: var(--aa-text-primary);
}

/* Toast Body */
.toast-body[b-in5ku8dwiq] {
    padding: var(--aa-spacing-3);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
    line-height: var(--aa-line-height-relaxed);
}

.toast-details[b-in5ku8dwiq] {
    margin-top: var(--aa-spacing-2);
    padding-top: var(--aa-spacing-2);
    border-top: 1px solid var(--aa-light-gray);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    line-height: var(--aa-line-height-base);
}

/* Toast Border Colors */
.toast-success[b-in5ku8dwiq] {
    border-left: 4px solid var(--aa-success);
}

.toast-error[b-in5ku8dwiq] {
    border-left: 4px solid var(--aa-danger);
}

.toast-warning[b-in5ku8dwiq] {
    border-left: 4px solid var(--aa-warning);
}

.toast-info[b-in5ku8dwiq] {
    border-left: 4px solid var(--aa-info);
}

/* Progress Bar Animation */
.toast-progress[b-in5ku8dwiq] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation: toast-progress-b-in5ku8dwiq 4s linear forwards;
}

.progress-success[b-in5ku8dwiq] {
    background: var(--aa-success);
}

.progress-error[b-in5ku8dwiq] {
    background: var(--aa-danger);
    animation-duration: 6s; /* Longer for errors */
}

.progress-warning[b-in5ku8dwiq] {
    background: var(--aa-warning);
    animation-duration: 5s;
}

.progress-info[b-in5ku8dwiq] {
    background: var(--aa-info);
}

@keyframes toast-progress-b-in5ku8dwiq {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .toast-container[b-in5ku8dwiq] {
        top: var(--aa-spacing-2);
        right: var(--aa-spacing-2);
        left: var(--aa-spacing-2);
        max-width: none;
    }

    .toast[b-in5ku8dwiq] {
        min-width: auto;
        max-width: none;
        transform: translateY(-100px);
    }

    .toast.show[b-in5ku8dwiq] {
        transform: translateY(0);
    }
}

/* Stacking Multiple Toasts */
.toast-container .toast:not(:first-child)[b-in5ku8dwiq] {
    margin-top: calc(var(--aa-spacing-2) * -1);
}

.toast-container .toast:hover[b-in5ku8dwiq] {
    z-index: 1;
    transform: scale(1.02);
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .toast[b-in5ku8dwiq] {
        background: var(--aa-dark);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .toast-header[b-in5ku8dwiq] {
        border-bottom-color: var(--aa-gray);
    }

    .toast-body[b-in5ku8dwiq] {
        color: var(--aa-light);
    }

    .toast-details[b-in5ku8dwiq] {
        border-top-color: var(--aa-gray);
        color: var(--aa-medium-gray);
    }

    .toast-close-btn[b-in5ku8dwiq] {
        color: var(--aa-medium-gray);
    }

    .toast-close-btn:hover[b-in5ku8dwiq] {
        background: var(--aa-gray);
        color: var(--aa-light);
    }
}
/* /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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    font-size: var(--aa-font-size-md);
    margin-bottom: var(--aa-spacing-1);
}

.warning-text p[b-hckw6xtgd3] {
    margin: 0;
    color: var(--aa-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary-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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

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

/* Date Cell */
.date-cell[b-nmslj4t7hu] {
    color: var(--aa-text-primary);
    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/AccessDenied.razor.rz.scp.css */
/* Admin Access Denied Page - Following Coding Standards */

.access-denied-container[b-2c0x6lm5ij] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--aa-spacing-8);
}

.access-denied-content[b-2c0x6lm5ij] {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

/* Lock Icon */
.access-denied-icon[b-2c0x6lm5ij] {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--aa-spacing-6);
    border-radius: 50%;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.2);
}

.access-denied-icon i[b-2c0x6lm5ij] {
    font-size: 3rem;
    color: #dc3545;
}

/* Title and Message */
.access-denied-title[b-2c0x6lm5ij] {
    font-size: 2rem;
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-3) 0;
}

.access-denied-message[b-2c0x6lm5ij] {
    font-size: var(--aa-font-size-base);
    color: var(--aa-text-secondary);
    line-height: var(--aa-line-height-relaxed);
    margin: 0 0 var(--aa-spacing-6) 0;
}

/* Info Box */
.access-denied-info[b-2c0x6lm5ij] {
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border: 2px solid #b8a9d9;
    border-radius: var(--aa-border-radius-lg);
    padding: var(--aa-spacing-4);
    margin-bottom: var(--aa-spacing-6);
    text-align: left;
}

.info-item[b-2c0x6lm5ij] {
    display: flex;
    gap: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    margin-bottom: var(--aa-spacing-3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-item:last-child[b-2c0x6lm5ij] {
    margin-bottom: 0;
}

.info-item i[b-2c0x6lm5ij] {
    font-size: 1.5rem;
    color: #b8a9d9;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.info-content strong[b-2c0x6lm5ij] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.info-content span[b-2c0x6lm5ij] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    line-height: var(--aa-line-height-relaxed);
}

/* Action Buttons */
.access-denied-actions[b-2c0x6lm5ij] {
    display: flex;
    gap: var(--aa-spacing-3);
    justify-content: center;
    margin-bottom: var(--aa-spacing-6);
    flex-wrap: wrap;
}

.btn-admin-dashboard[b-2c0x6lm5ij],
.btn-login[b-2c0x6lm5ij] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-3) var(--aa-spacing-6);
    border: 2px solid transparent;
    border-radius: var(--aa-border-radius-md);
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-sm);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    justify-content: center;
}

.btn-admin-dashboard[b-2c0x6lm5ij] {
    background: linear-gradient(135deg, #b8a9d9 0%, #9b87c4 100%);
    color: var(--aa-white);
    border-color: #9b87c4;
}

.btn-admin-dashboard:hover[b-2c0x6lm5ij] {
    background: linear-gradient(135deg, #9b87c4 0%, #7f6eb0 100%);
    border-color: #7f6eb0;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(155, 135, 196, 0.4);
}

.btn-login[b-2c0x6lm5ij] {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #2d1b49;
    border-color: #b8a9d9;
}

.btn-login:hover[b-2c0x6lm5ij] {
    background: #fff9c4;
    border-color: #9b87c4;
    color: #2d1b49;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(184, 169, 217, 0.3);
}

.btn-admin-dashboard i[b-2c0x6lm5ij],
.btn-login i[b-2c0x6lm5ij] {
    font-size: 1rem;
}

/* Help Text */
.access-denied-help[b-2c0x6lm5ij] {
    padding: var(--aa-spacing-4);
    background: rgba(184, 169, 217, 0.1);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid rgba(184, 169, 217, 0.3);
}

.access-denied-help p[b-2c0x6lm5ij] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    margin: 0;
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    font-style: italic;
}

.access-denied-help i[b-2c0x6lm5ij] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .access-denied-container[b-2c0x6lm5ij] {
        padding: var(--aa-spacing-4);
    }

    .access-denied-icon[b-2c0x6lm5ij] {
        width: 80px;
        height: 80px;
    }

    .access-denied-icon i[b-2c0x6lm5ij] {
        font-size: 2.5rem;
    }

    .access-denied-title[b-2c0x6lm5ij] {
        font-size: 1.5rem;
    }

    .access-denied-message[b-2c0x6lm5ij] {
        font-size: var(--aa-font-size-sm);
    }

    .access-denied-actions[b-2c0x6lm5ij] {
        flex-direction: column;
        gap: var(--aa-spacing-2);
    }

    .btn-admin-dashboard[b-2c0x6lm5ij],
    .btn-login[b-2c0x6lm5ij] {
        width: 100%;
        min-width: auto;
    }

    .info-item[b-2c0x6lm5ij] {
        flex-direction: column;
        text-align: center;
    }

    .info-item i[b-2c0x6lm5ij] {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .access-denied-title[b-2c0x6lm5ij] {
        font-size: 1.25rem;
    }

    .btn-admin-dashboard[b-2c0x6lm5ij],
    .btn-login[b-2c0x6lm5ij] {
        padding: var(--aa-spacing-2) var(--aa-spacing-4);
        font-size: var(--aa-font-size-xs);
    }
}
/* /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-text-primary);
    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-text-primary);
    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;
}

/* Statistics Section */
.statistics-section[b-x12m76cmx8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--aa-spacing-md);
    margin-bottom: var(--aa-spacing-lg);
}

.stat-card[b-x12m76cmx8] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-md);
    box-shadow: var(--aa-shadow-sm);
    border: 1px solid var(--aa-light-gray);
    transition: all var(--aa-transition-base) ease;
}

.stat-card:hover[b-x12m76cmx8] {
    box-shadow: var(--aa-shadow-md);
    transform: translateY(-2px);
}

.stat-icon[b-x12m76cmx8] {
    width: 48px;
    height: 48px;
    border-radius: var(--aa-border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--aa-font-size-xl);
    flex-shrink: 0;
}

.stat-icon.solicited[b-x12m76cmx8] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

.stat-icon.requested[b-x12m76cmx8] {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
}

.stat-icon.mailed[b-x12m76cmx8] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.stat-icon.pending[b-x12m76cmx8] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.stat-content[b-x12m76cmx8] {
    flex: 1;
}

.stat-value[b-x12m76cmx8] {
    font-size: var(--aa-font-size-2xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    line-height: 1.2;
}

.stat-label[b-x12m76cmx8] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-gray);
    margin-top: var(--aa-spacing-xs);
}

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

/* Compact Card Content */
.card-content-compact[b-x12m76cmx8] {
    padding: var(--aa-spacing-3);
    display: grid;
    gap: var(--aa-spacing-xs);
}

.detail-row-compact[b-x12m76cmx8] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--aa-spacing-md);
    align-items: start;
    padding: var(--aa-spacing-xs) 0;
    border-bottom: 1px solid var(--aa-light-gray);
}

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

.detail-row-compact label[b-x12m76cmx8] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-gray);
    margin: 0;
}

.detail-row-compact span[b-x12m76cmx8],
.detail-row-compact code[b-x12m76cmx8] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

.detail-row-compact code[b-x12m76cmx8] {
    background: var(--aa-light);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.detail-row-compact em[b-x12m76cmx8] {
    color: var(--aa-gray);
    font-style: italic;
}

/* Customer Filters */
.customer-filters[b-x12m76cmx8] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-3);
    margin-bottom: var(--aa-spacing-md);
    border: 1px solid var(--aa-light-gray);
}

.filter-row[b-x12m76cmx8] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--aa-spacing-md);
    align-items: center;
}

.search-input-container[b-x12m76cmx8] {
    position: relative;
    flex: 1;
}

.filter-input[b-x12m76cmx8] {
    width: 100%;
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border: 1px solid var(--aa-light-gray);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    transition: all var(--aa-transition-base) ease;
}

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

.search-loading[b-x12m76cmx8] {
    position: absolute;
    right: var(--aa-spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: #b8a9d9;
}

.search-clear-btn[b-x12m76cmx8] {
    position: absolute;
    right: var(--aa-spacing-2);
    top: 50%;
    transform: translateY(-50%);
    background: var(--aa-light-gray);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
}

.search-clear-btn:hover[b-x12m76cmx8] {
    background: var(--aa-medium-gray);
}

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

.filter-group label[b-x12m76cmx8] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-gray);
    white-space: nowrap;
}

.filter-select[b-x12m76cmx8] {
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border: 1px solid var(--aa-light-gray);
    border-radius: var(--aa-border-radius-md);
    font-size: var(--aa-font-size-sm);
    background: var(--aa-white);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
}

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

/* Results Summary */
.results-summary[b-x12m76cmx8] {
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-md);
    margin-bottom: var(--aa-spacing-md);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-gray);
}

/* Pagination */
.pagination-container[b-x12m76cmx8] {
    display: flex;
    justify-content: center;
    margin-top: var(--aa-spacing-md);
    padding: var(--aa-spacing-3);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-light-gray);
}

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

.page-btn[b-x12m76cmx8] {
    width: 32px;
    height: 32px;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid var(--aa-light-gray);
    background: var(--aa-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    color: var(--aa-text-primary);
}

.page-btn:hover:not(:disabled)[b-x12m76cmx8] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 100%);
    border-color: #b8a9d9;
    color: #2d1b49;
    transform: translateY(-1px);
}

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

.page-info[b-x12m76cmx8] {
    padding: 0 var(--aa-spacing-md);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-gray);
}

.page-info strong[b-x12m76cmx8] {
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-semibold);
}

/* 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, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    border-bottom: 2px solid #b8a9d9;
}

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

.card-header .bi[b-x12m76cmx8] {
    color: #2d1b49;
}

.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-text-primary);
    min-width: 140px;
    flex-shrink: 0;
    font-size: var(--aa-font-size-sm);
}

.detail-value[b-x12m76cmx8] {
    flex: 1;
    color: var(--aa-text-primary);
    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-text-primary);
}

.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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
  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-text-primary);
}

/* 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);
  overflow-x: auto;
}

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

.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-2);
  text-align: left;
  font-weight: var(--aa-font-weight-semibold);
  color: var(--aa-text-primary);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.customers-table thead th .bi[b-x12m76cmx8] {
  margin-right: var(--aa-spacing-xs);
  color: #b8a9d9;
}

.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-2);
  vertical-align: middle;
  border-bottom: 1px solid var(--aa-light-gray);
}

/* Customer Name Cell */
.customer-name-cell[b-x12m76cmx8] {
  font-weight: var(--aa-font-weight-medium);
}

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

.customer-name[b-x12m76cmx8] {
  color: var(--aa-text-primary);
  font-size: var(--aa-font-size-sm);
}

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

/* State Cell */
.state-cell[b-x12m76cmx8] {
  white-space: nowrap;
}

.state-info[b-x12m76cmx8] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

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

.status-indicator[b-x12m76cmx8] {
  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);
  white-space: nowrap;
}

.status-indicator.yes[b-x12m76cmx8] {
  background: var(--aa-success-light);
  color: var(--aa-success-dark);
}

.status-indicator.no[b-x12m76cmx8] {
  background: var(--aa-light);
  color: var(--aa-gray);
}

/* Date Cell */
.date-cell[b-x12m76cmx8] {
  white-space: nowrap;
}

.date-info[b-x12m76cmx8] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.no-date[b-x12m76cmx8] {
  color: var(--aa-light-gray);
  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: 1024px) {
    .details-grid-compact[b-x12m76cmx8] {
        grid-template-columns: 1fr;
    }

    .filter-row[b-x12m76cmx8] {
        grid-template-columns: 1fr;
    }

    .filter-group[b-x12m76cmx8] {
        width: 100%;
        justify-content: space-between;
    }

    .filter-select[b-x12m76cmx8] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .statistics-section[b-x12m76cmx8] {
        grid-template-columns: 1fr;
    }

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

    .detail-row-compact[b-x12m76cmx8] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-xs);
    }

    .customers-table[b-x12m76cmx8] {
        min-width: 800px;
    }

    .pagination[b-x12m76cmx8] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .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);
    }
  
    .section-header[b-x12m76cmx8] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--aa-spacing-sm);
    }
}

@media (max-width: 480px) {
    .catalog-header[b-x12m76cmx8] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
    }

    .catalog-header-actions[b-x12m76cmx8] {
        width: 100%;
        justify-content: stretch;
    }

    .catalog-header-actions .btn[b-x12m76cmx8] {
        flex: 1;
    }
}
/* /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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
    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);
}

/* Note: Action button styles (.action-btn, .action-btn.view, .action-btn.edit, etc.) 
   are now in global aa-admin.css for consistency across all admin pages */

/* 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-text-primary);
    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-text-primary);
}

/* 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 - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

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

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

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

.breadcrumb-link[b-9bkvn3im2w] {
    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-9bkvn3im2w] {
    color: var(--aa-primary);
}

.breadcrumb-item.active[b-9bkvn3im2w] {
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-medium);
}

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

/* Compact Customer Header */
.customer-header-compact[b-9bkvn3im2w] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    margin-bottom: var(--aa-spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-4);
}

.customer-header-left[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
    flex: 1;
    min-width: 0;
}

.customer-icon-compact[b-9bkvn3im2w] {
    width: 48px;
    height: 48px;
    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-2xl);
}

.customer-info-compact[b-9bkvn3im2w] {
    flex: 1;
    min-width: 0;
}

.customer-name-compact[b-9bkvn3im2w] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-1) 0;
    line-height: var(--aa-line-height-tight);
}

.customer-badges-compact[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    flex-wrap: wrap;
}

.customer-actions-compact[b-9bkvn3im2w] {
    display: flex;
    gap: var(--aa-spacing-xs);
    flex-shrink: 0;
}

/* Consolidated Details Grid */
.details-grid-compact[b-9bkvn3im2w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aa-spacing-md);
    margin-bottom: var(--aa-spacing-lg);
}

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

/* Full-width card for Associated Catalogs */
.details-card.full-width[b-9bkvn3im2w] {
    grid-column: 1 / -1;
}

.card-header[b-9bkvn3im2w] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    border-bottom: 2px solid #b8a9d9;
}

.card-header h3[b-9bkvn3im2w] {
    margin: 0;
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-semibold);
    color: #2d1b49;
}

.card-header .bi[b-9bkvn3im2w] {
    color: #2d1b49;
}

/* Compact Card Content */
.card-content-compact[b-9bkvn3im2w] {
    padding: var(--aa-spacing-3);
    display: grid;
    gap: var(--aa-spacing-xs);
}

.detail-row-compact[b-9bkvn3im2w] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--aa-spacing-md);
    align-items: start;
    padding: var(--aa-spacing-xs) 0;
    border-bottom: 1px solid var(--aa-light-gray);
}

.detail-row-compact:last-child[b-9bkvn3im2w] {
    border-bottom: none;
}

.detail-row-compact label[b-9bkvn3im2w] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-gray);
    margin: 0;
}

.detail-row-compact span[b-9bkvn3im2w],
.detail-row-compact code[b-9bkvn3im2w] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

.detail-row-compact code[b-9bkvn3im2w] {
    background: var(--aa-light);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.detail-row-compact em[b-9bkvn3im2w] {
    color: var(--aa-gray);
    font-style: italic;
}

/* Facility Link */
.facility-link[b-9bkvn3im2w] {
    color: var(--aa-primary);
    text-decoration: none;
    transition: color var(--aa-transition-base) ease;
}

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

/* Order History Table - Compact */
.orders-table-container[b-9bkvn3im2w] {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--aa-spacing-2);
}

.orders-table-compact[b-9bkvn3im2w] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

.orders-table-compact thead[b-9bkvn3im2w] {
    background: var(--aa-light);
    position: sticky;
    top: 0;
    z-index: 1;
}

.orders-table-compact thead th[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    text-align: left;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-xs);
    border-bottom: 1px solid var(--aa-medium-gray);
}

.orders-table-compact tbody tr[b-9bkvn3im2w] {
    transition: background-color var(--aa-transition-base) ease;
    border-bottom: 1px solid var(--aa-light-gray);
}

.orders-table-compact tbody tr:hover[b-9bkvn3im2w] {
    background-color: var(--aa-light);
}

.orders-table-compact tbody td[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    vertical-align: middle;
    font-size: var(--aa-font-size-xs);
}

.order-number-cell[b-9bkvn3im2w] {
    font-weight: var(--aa-font-weight-medium);
}

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

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

.order-date-cell[b-9bkvn3im2w] {
    color: var(--aa-text-primary);
}

.order-amount-cell[b-9bkvn3im2w] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    text-align: right;
}

/* Order Pagination - Compact */
.order-pagination[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding-top: var(--aa-spacing-2);
    border-top: 1px solid var(--aa-light-gray);
}

/* Catalogs Table - Compact (matching orders) */
.catalogs-table-container[b-9bkvn3im2w] {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--aa-spacing-2);
}

.catalogs-table-compact[b-9bkvn3im2w] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

.catalogs-table-compact thead[b-9bkvn3im2w] {
    background: var(--aa-light);
    position: sticky;
    top: 0;
    z-index: 1;
}

.catalogs-table-compact thead th[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    text-align: left;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-xs);
    border-bottom: 1px solid var(--aa-medium-gray);
}

.catalogs-table-compact tbody tr[b-9bkvn3im2w] {
    transition: background-color var(--aa-transition-base) ease;
    border-bottom: 1px solid var(--aa-light-gray);
}

.catalogs-table-compact tbody tr:hover[b-9bkvn3im2w] {
    background-color: var(--aa-light);
}

.catalogs-table-compact tbody td[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    vertical-align: middle;
    font-size: var(--aa-font-size-xs);
}

.catalog-name-cell[b-9bkvn3im2w] {
    font-weight: var(--aa-font-weight-medium);
}

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

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

.catalog-date-cell[b-9bkvn3im2w] {
    color: var(--aa-text-primary);
}

.catalog-status-cell[b-9bkvn3im2w] {
    text-align: right;
}

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

/* Status Indicators for Catalogs */
.status-indicator[b-9bkvn3im2w] {
    display: inline-block;
    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);
}

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

.status-indicator.requested[b-9bkvn3im2w] {
    background: #d1ecf1;
    color: #0c5460;
}

.status-indicator.solicited[b-9bkvn3im2w] {
    background: #fff3cd;
    color: #856404;
}

.status-indicator.pending[b-9bkvn3im2w] {
    background: var(--aa-light);
    color: var(--aa-gray);
}

/* Catalog Pagination - Compact */
.catalog-pagination[b-9bkvn3im2w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding-top: var(--aa-spacing-2);
    border-top: 1px solid var(--aa-light-gray);
}

/* Pagination Buttons - Shared */
.page-btn-sm[b-9bkvn3im2w] {
    width: 24px;
    height: 24px;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid var(--aa-light-gray);
    background: var(--aa-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    color: var(--aa-text-primary);
}

.page-btn-sm:hover:not(:disabled)[b-9bkvn3im2w] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 100%);
    border-color: #b8a9d9;
    color: #2d1b49;
    transform: translateY(-1px);
}

.page-btn-sm:disabled[b-9bkvn3im2w] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info-sm[b-9bkvn3im2w] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-gray);
    font-weight: var(--aa-font-weight-medium);
}

/* Empty state for orders and catalogs */
.empty-icon-small[b-9bkvn3im2w] {
    font-size: 2rem;
    margin-bottom: var(--aa-spacing-2);
    opacity: 0.3;
    color: var(--aa-text-primary);
}

.empty-hint[b-9bkvn3im2w] {
    display: block;
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
    margin-top: var(--aa-spacing-xs);
}

/* Credits/Debts Table - Compact */
.credits-table-container[b-9bkvn3im2w] {
    overflow-x: auto;
    margin-bottom: var(--aa-spacing-2);
}

.credits-table-compact[b-9bkvn3im2w] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

.credits-table-compact thead[b-9bkvn3im2w] {
    background: var(--aa-light);
    position: sticky;
    top: 0;
    z-index: 1;
}

.credits-table-compact thead th[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    text-align: left;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-xs);
    border-bottom: 1px solid var(--aa-medium-gray);
    white-space: nowrap;
}

.credits-table-compact tbody tr[b-9bkvn3im2w] {
    transition: background-color var(--aa-transition-base) ease;
    border-bottom: 1px solid var(--aa-light-gray);
}

.credits-table-compact tbody tr:hover[b-9bkvn3im2w] {
    background-color: var(--aa-light);
}

.credits-table-compact tbody td[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    vertical-align: middle;
    font-size: var(--aa-font-size-xs);
}

/* Credit/Debt Row Highlighting */
.credits-table-compact tbody tr.credit-row[b-9bkvn3im2w] {
    background-color: color-mix(in srgb, var(--aa-success) 5%, transparent);
}

.credits-table-compact tbody tr.debt-row[b-9bkvn3im2w] {
    background-color: color-mix(in srgb, var(--aa-danger) 5%, transparent);
}

.credits-table-compact tbody tr.credit-row:hover[b-9bkvn3im2w] {
    background-color: color-mix(in srgb, var(--aa-success) 10%, transparent);
}

.credits-table-compact tbody tr.debt-row:hover[b-9bkvn3im2w] {
    background-color: color-mix(in srgb, var(--aa-danger) 10%, transparent);
}

/* Credit Table Cells */
.credit-order-cell[b-9bkvn3im2w] {
    font-weight: var(--aa-font-weight-medium);
}

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

.credit-reason-cell[b-9bkvn3im2w] {
    color: var(--aa-text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credit-amount-cell[b-9bkvn3im2w] {
    text-align: right;
    font-weight: var(--aa-font-weight-semibold);
}

.credit-amount-cell.credit-amount .credit-indicator[b-9bkvn3im2w] {
    color: var(--aa-success);
}

.credit-amount-cell.debt-amount .debt-indicator[b-9bkvn3im2w] {
    color: var(--aa-danger);
}

.credit-redeemed-cell[b-9bkvn3im2w] {
    text-align: right;
    color: var(--aa-text-secondary);
}

.credit-remaining-cell[b-9bkvn3im2w] {
    text-align: right;
    font-weight: var(--aa-font-weight-bold);
}

.credit-remaining-cell.credit-remaining .credit-balance[b-9bkvn3im2w] {
    color: var(--aa-success);
}

.credit-remaining-cell.debt-remaining .debt-balance[b-9bkvn3im2w] {
    color: var(--aa-danger);
}

/* Table Footer - Totals */
.credits-table-compact tfoot[b-9bkvn3im2w] {
    background: var(--aa-light);
    border-top: 2px solid var(--aa-medium-gray);
}

.credits-table-compact tfoot td[b-9bkvn3im2w] {
    padding: var(--aa-spacing-2);
    font-size: var(--aa-font-size-xs);
}

.credit-totals-row[b-9bkvn3im2w] {
    font-weight: var(--aa-font-weight-bold);
}

.totals-label[b-9bkvn3im2w] {
    text-align: right;
    color: var(--aa-text-primary);
}

.totals-amount[b-9bkvn3im2w] {
    text-align: right;
    font-size: var(--aa-font-size-sm);
}

.totals-amount.credit-total .credit-total-value[b-9bkvn3im2w] {
    color: var(--aa-success);
    font-size: var(--aa-font-size-md);
}

.totals-amount.debt-total .debt-total-value[b-9bkvn3im2w] {
    color: var(--aa-danger);
    font-size: var(--aa-font-size-md);
}

.totals-amount.balanced-total .balanced-value[b-9bkvn3im2w] {
    color: var(--aa-gray);
    font-size: var(--aa-font-size-md);
}

/* Summary Rows */
.credit-summary-row[b-9bkvn3im2w] {
    font-weight: var(--aa-font-weight-medium);
    background: var(--aa-white);
}

.summary-label[b-9bkvn3im2w] {
    text-align: right;
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
}

.summary-amount[b-9bkvn3im2w] {
    text-align: right;
    font-weight: var(--aa-font-weight-semibold);
}

.summary-amount.credit-available[b-9bkvn3im2w] {
    color: var(--aa-success);
}

.summary-amount.debt-outstanding[b-9bkvn3im2w] {
    color: var(--aa-danger);
}

/* Type Badge */
.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: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

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

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

/* Status Badge */
.status-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: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

.status-badge.active[b-9bkvn3im2w] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

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

/* Loading and Error States */
.loading-state[b-9bkvn3im2w],
.error-state[b-9bkvn3im2w] {
    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-9bkvn3im2w],
.error-icon[b-9bkvn3im2w] {
    font-size: 4rem;
    margin-bottom: var(--aa-spacing-6);
    color: var(--aa-primary);
}

.loading-state h3[b-9bkvn3im2w],
.error-state h3[b-9bkvn3im2w] {
    color: var(--aa-text-primary);
    margin-bottom: var(--aa-spacing-2);
}

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

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

.btn-retry[b-9bkvn3im2w],
.btn-back[b-9bkvn3im2w] {
    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-9bkvn3im2w] {
    background-color: var(--aa-secondary);
    color: var(--aa-white);
}

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

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

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

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

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

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

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

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

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

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

/* Button Styles */
.btn[b-9bkvn3im2w] {
    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-9bkvn3im2w] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

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

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

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

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

.btn-sm[b-9bkvn3im2w] {
    padding: var(--aa-spacing-1) var(--aa-spacing-3);
    font-size: var(--aa-font-size-xs);
    min-width: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .details-grid-compact[b-9bkvn3im2w] {
        grid-template-columns: 1fr;
    }
    
    /* Full-width cards are already full-width on single column */
    .details-card.full-width[b-9bkvn3im2w] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .detail-row-compact[b-9bkvn3im2w] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-xs);
    }

    .customer-header-compact[b-9bkvn3im2w] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--aa-spacing-3);
    }
    
    .customer-header-left[b-9bkvn3im2w] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .customer-name-compact[b-9bkvn3im2w] {
        font-size: var(--aa-font-size-lg);
    }
    
    .customer-actions-compact[b-9bkvn3im2w] {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .customer-icon-compact[b-9bkvn3im2w] {
        width: 40px;
        height: 40px;
        font-size: var(--aa-font-size-xl);
    }
    
    .customer-name-compact[b-9bkvn3im2w] {
        font-size: var(--aa-font-size-md);
    }
}
/* /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-text-primary); /* Use theme-safe text color */
    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-text-primary); /* Use theme-safe text color */
    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-text-primary); /* Use theme-safe text color */
}

.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-text-primary); /* Use theme-safe text color */
    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;
    color: var(--aa-text-primary); /* Use theme-safe text color */
}

.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-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%;
    color: var(--aa-text-primary); /* Use theme-safe text color */
}

.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%;
    color: var(--aa-text-primary); /* Use theme-safe text color */
}

.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-text-primary); /* Use theme-safe text color */
}

.page-size-control[b-prf8iqrevt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-size: 0.875rem;
    color: var(--aa-text-primary); /* Use theme-safe text color */
}

.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;
    color: var(--aa-text-primary); /* Use theme-safe text color */
}

.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-text-primary); /* Use theme-safe text color */
    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-text-primary); /* Use theme-safe text color */
    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-text-primary); /* Use theme-safe text color */
    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-text-primary); /* Use theme-safe text color */
}

/* 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-text-primary); /* Use theme-safe text color */
}

.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;
}

/* 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-text-primary); /* Use theme-safe text color */
    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-text-primary); /* Use theme-safe text color */
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

/* 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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
}

.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-text-primary);
}

/* 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-text-primary);
}

.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;
}

/* 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-text-primary);
    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-text-primary);
}

.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/ImageTypes/Details.razor.rz.scp.css */
/* Image Type Details Page - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* Badge Styles - Page-Specific */
.usage-badge[b-nb91hw1yal] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background-color: color-mix(in srgb, var(--aa-primary) 15%, white);
    color: var(--aa-primary);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

/* Image Type-Specific Helper Classes */
.detail-info-box[b-nb91hw1yal] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-2);
    background-color: color-mix(in srgb, var(--aa-info) 10%, white);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid var(--aa-info);
    color: color-mix(in srgb, var(--aa-info) 80%, black);
    font-size: var(--aa-font-size-xs);
    margin-top: var(--aa-spacing-1);
}

/* Status Badges - Page-Specific Variants */
.status-badge[b-nb91hw1yal] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.status-badge.active[b-nb91hw1yal] {
    background: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
}

.status-badge.inactive[b-nb91hw1yal] {
    background: var(--aa-state-inactive-bg);
    color: var(--aa-state-inactive-text);
}

/* Product Groups Table - Compact Design */
.product-groups-table-container[b-nb91hw1yal] {
    max-height: 400px;
    overflow-y: auto;
}

.product-groups-table[b-nb91hw1yal] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

.product-groups-table thead[b-nb91hw1yal] {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, var(--aa-purple) 0%, var(--aa-purple-light) 50%, var(--aa-purple-lighter) 100%);
    z-index: 10;
}

.product-groups-table th[b-nb91hw1yal] {
    padding: var(--aa-spacing-1);
    text-align: left;
    border-bottom: 2px solid var(--aa-purple);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-purple-dark);
    white-space: nowrap;
    font-size: var(--aa-font-size-xs);
}

.product-groups-table td[b-nb91hw1yal] {
    padding: var(--aa-spacing-1);
    vertical-align: middle;
    border-bottom: 1px solid var(--aa-light-gray);
}

.product-group-row[b-nb91hw1yal] {
    transition: all var(--aa-transition-base) ease;
    cursor: pointer;
}

.product-group-row:hover[b-nb91hw1yal] {
    background: var(--aa-row-hover);
}

.product-group-row.inactive[b-nb91hw1yal] {
    opacity: 0.6;
}

.group-name[b-nb91hw1yal] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

.group-name svg[b-nb91hw1yal] {
    width: 12px;
    height: 12px;
    color: var(--aa-primary);
}

.required-indicator[b-nb91hw1yal] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
}

.required-icon[b-nb91hw1yal] {
    color: var(--aa-warning);
    width: 12px;
    height: 12px;
}

.optional-icon[b-nb91hw1yal] {
    color: var(--aa-text-secondary);
    width: 12px;
    height: 12px;
}

.display-order-cell[b-nb91hw1yal] {
    text-align: center;
}

.display-order-cell code[b-nb91hw1yal] {
    background: var(--aa-light);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-xs);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.loading-mini[b-nb91hw1yal] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-4);
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
}

.empty-product-groups[b-nb91hw1yal] {
    text-align: center;
    padding: var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

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

.empty-product-groups p[b-nb91hw1yal] {
    margin: 0;
    font-size: var(--aa-font-size-xs);
}

/* Action Section */
.action-section[b-nb91hw1yal] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    box-shadow: var(--aa-shadow-sm);
    border: 1px solid var(--aa-border-light);
}

.action-buttons[b-nb91hw1yal] {
    display: flex;
    gap: var(--aa-spacing-2);
    justify-content: flex-end;
}

/* Loading and Error States */
.loading-state[b-nb91hw1yal], .error-state[b-nb91hw1yal] {
    text-align: center;
    padding: var(--aa-spacing-8) var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

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

.loading-spinner[b-nb91hw1yal] {
    color: var(--aa-primary);
}

.error-icon[b-nb91hw1yal] {
    color: var(--aa-danger);
}

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

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

.error-message[b-nb91hw1yal] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-2) 0;
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.error-actions[b-nb91hw1yal] {
    display: flex;
    gap: var(--aa-spacing-2);
    justify-content: center;
    margin-top: var(--aa-spacing-4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons[b-nb91hw1yal] {
        flex-direction: column;
    }

    .product-groups-table-container[b-nb91hw1yal] {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .content-area[b-nb91hw1yal] {
        padding: var(--aa-spacing-1);
    }

    .product-groups-table[b-nb91hw1yal] {
        font-size: var(--aa-font-size-xs);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ImageTypes/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
*/
/* ==========================================================================
   IMAGE TYPES-SPECIFIC STYLES ONLY
   ========================================================================== */

/* ImageTypes-Specific Filter Grid - 3 filters (Search + Status + Clear) */
.filter-controls[b-fpxohvdl1h] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   IMAGE TYPE-SPECIFIC TABLE CELL STYLES
   NOTE: Use global .admin-table and .admin-table-row classes from aa-admin.css
   Only cell content styling is ImageTypes-specific
   ========================================================================== */

.image-type-name[b-fpxohvdl1h] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.image-type-name svg[b-fpxohvdl1h] {
    width: 14px;
    height: 14px;
    color: #b8a9d9;
}

.description[b-fpxohvdl1h] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display-order[b-fpxohvdl1h] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    justify-content: center;
}

.display-order svg[b-fpxohvdl1h] {
    width: 12px;
    height: 12px;
    color: var(--aa-text-secondary);
}

.usage-count[b-fpxohvdl1h] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

.usage-count svg[b-fpxohvdl1h] {
    width: 12px;
    height: 12px;
    color: #b8a9d9;
}

/* Responsive Design - ImageTypes-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-fpxohvdl1h] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Orders/Details.razor.rz.scp.css */
/* Order Details Page - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

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

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

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

.breadcrumb-link[b-3ii5j2xu9v] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    color: var(--aa-secondary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--aa-transition-base) ease;
}

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

.breadcrumb-item.active[b-3ii5j2xu9v] {
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-medium);
}

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

/* Compact Order Header */
.order-header-compact[b-3ii5j2xu9v] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
    padding: var(--aa-spacing-3) var(--aa-spacing-4);
    margin-bottom: var(--aa-spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--aa-spacing-4);
}

.order-header-left[b-3ii5j2xu9v] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-3);
    flex: 1;
    min-width: 0;
}

.order-icon-compact[b-3ii5j2xu9v] {
    width: 48px;
    height: 48px;
    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-2xl);
}

.order-info-compact[b-3ii5j2xu9v] {
    flex: 1;
    min-width: 0;
}

.order-number-compact[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    margin: 0 0 var(--aa-spacing-1) 0;
    line-height: var(--aa-line-height-tight);
    font-family: var(--aa-font-family-mono);
}

.order-badges-compact[b-3ii5j2xu9v] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    flex-wrap: wrap;
}

.order-actions-compact[b-3ii5j2xu9v] {
    display: flex;
    gap: var(--aa-spacing-xs);
    flex-shrink: 0;
}

/* Action buttons are styled globally in aa-admin.css */
/* Additional specific button colors can be added here if needed */

/* Print button - Green/Success theme */
.action-btn.print[b-3ii5j2xu9v] {
    background: var(--aa-success);
    color: var(--aa-white);
}

.action-btn.print:hover[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-success) 80%, black);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* ============================================
   Print Dropdown Menu - Pure CSS (No JavaScript)
   ============================================== */

/* Print Dropdown Container */
.print-dropdown-container[b-3ii5j2xu9v] {
    position: relative;
    display: inline-block;
}

/* Print Dropdown Toggle Button - Matches existing action-btn style */
.print-dropdown-toggle[b-3ii5j2xu9v] {
    position: relative;
}

/* Print Dropdown Menu */
.print-dropdown-menu[b-3ii5j2xu9v] {
    position: absolute;
    top: calc(100% + 4px); /* Reduced gap from var(--aa-spacing-xs) to fixed 4px */
    right: 0;
    min-width: 220px;
    background: var(--aa-white);
    border: 1px solid var(--aa-light-gray);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-xl);
    padding: var(--aa-spacing-1);
    z-index: 1000;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

/* Create invisible bridge between button and menu to prevent gap */
.print-dropdown-menu[b-3ii5j2xu9v]::before {
    content: '';
    position: absolute;
    top: -8px; /* Covers the 4px gap + extra 4px */
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

/* Show dropdown on hover - Pure CSS (No JavaScript) */
.print-dropdown-container:hover .print-dropdown-menu[b-3ii5j2xu9v] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Keep dropdown open when hovering over it */
.print-dropdown-menu:hover[b-3ii5j2xu9v] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Print Dropdown Items */
.print-dropdown-item[b-3ii5j2xu9v] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    width: 100%;
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    background: transparent;
    border: none;
    border-radius: var(--aa-border-radius-sm);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    text-align: left;
    cursor: pointer;
    transition: background var(--aa-transition-base);
}

.print-dropdown-item span:first-of-type[b-3ii5j2xu9v] {
    flex: 1;
}

/* Dropdown Item Hover */
.print-dropdown-item:hover:not(.disabled)[b-3ii5j2xu9v] {
    background: var(--aa-light);
}

.print-dropdown-item:active:not(.disabled)[b-3ii5j2xu9v] {
    background: var(--aa-medium-light);
}

/* Disabled Items */
.print-dropdown-item.disabled[b-3ii5j2xu9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Print Dropdown Divider */
.print-dropdown-divider[b-3ii5j2xu9v] {
    height: 1px;
    background: var(--aa-light-gray);
    margin: var(--aa-spacing-1) 0;
}

/* Coming Soon Badge */
.badge-soon[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-xs) var(--aa-spacing-1);
    background: var(--aa-warning);
    color: var(--aa-white);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    border-radius: var(--aa-border-radius-sm);
}

/* Icon styling within dropdown items */
.print-dropdown-item > :global(.bi)[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-base);
    color: var(--aa-text-secondary);
}

.print-dropdown-item:hover:not(.disabled) > :global(.bi)[b-3ii5j2xu9v] {
    color: var(--aa-text-primary);
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .print-dropdown-menu[b-3ii5j2xu9v] {
        right: auto;
        left: 0;
        min-width: 200px;
    }
}

@media (max-width: 480px) {
    .print-dropdown-menu[b-3ii5j2xu9v] {
        min-width: 180px;
    }
    
    .print-dropdown-item[b-3ii5j2xu9v] {
        font-size: var(--aa-font-size-xs);
        padding: var(--aa-spacing-1) var(--aa-spacing-2);
    }
}

/* End Print Dropdown Styles */

/* Status Badge */
.status-badge[b-3ii5j2xu9v] {
    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);
}

/* NOTE: Base .status-badge and common variants (.active, .inactive, .pending, .completed) 
   are defined globally in aa-admin.css for reuse across all admin pages.
   Only order-specific fulfillment status variants are defined below. */

.status-badge svg[b-3ii5j2xu9v] {
    flex-shrink: 0;
    font-size: var(--aa-font-size-xs);
}

/* Order Fulfillment Status Badge Variants (Order-specific) */
.status-badge.delivered[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-success) 15%, transparent);
    color: var(--aa-success);
}

.status-badge.delivered svg[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

.status-badge.returned[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-warning) 15%, transparent);
    color: var(--aa-warning);
}

.status-badge.returned svg[b-3ii5j2xu9v] {
    color: var(--aa-warning);
}

.status-badge.mailed[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-info) 15%, transparent);
    color: var(--aa-info);
}

.status-badge.mailed svg[b-3ii5j2xu9v] {
    color: var(--aa-info);
}

.status-badge.completed[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-primary) 15%, transparent);
    color: var(--aa-primary);
}

.status-badge.completed svg[b-3ii5j2xu9v] {
    color: var(--aa-primary);
}

.status-badge.processing[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-secondary) 15%, transparent);
    color: var(--aa-secondary);
}

.status-badge.processing svg[b-3ii5j2xu9v] {
    color: var(--aa-secondary);
}

.status-badge.requested[b-3ii5j2xu9v] {
    background: var(--aa-light);
    color: var(--aa-gray);
}

.status-badge.requested svg[b-3ii5j2xu9v] {
    color: var(--aa-gray);
}

/* Consolidated Details Grid */
.details-grid-compact[b-3ii5j2xu9v] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aa-spacing-md);
    margin-bottom: var(--aa-spacing-lg);
}

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

.details-card.full-width[b-3ii5j2xu9v] {
    grid-column: 1 / -1;
    margin-top: var(--aa-spacing-md);
}

/* Card Header with Flexible Layout for Badge and Button */
.card-header[b-3ii5j2xu9v] {
    background: linear-gradient(135deg, #b8a9d9 0%, #d4c5e8 50%, #e8ddf0 100%);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    border-bottom: 2px solid #b8a9d9;
}

.card-header h3[b-3ii5j2xu9v] {
    margin: 0;
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-semibold);
    color: #2d1b49;
}

.card-header .bi[b-3ii5j2xu9v] {
    color: #2d1b49;
}

/* Item Count Badge in Header */
.item-count-badge[b-3ii5j2xu9v] {
    background: #2d1b49;
    color: var(--aa-white);
    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);
    margin-left: auto;
}

/* Card Header Actions */
.card-header-actions[b-3ii5j2xu9v] {
    display: flex;
    gap: var(--aa-spacing-2);
}

/* Compact Add Item Button in Header */
.btn-add-item-compact[b-3ii5j2xu9v] {
    background: #2d1b49;
    color: var(--aa-white);
    padding: 4px var(--aa-spacing-2);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    transition: all var(--aa-transition-base) ease;
}

.btn-add-item-compact:hover[b-3ii5j2xu9v] {
    background: #1f1335;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(45, 27, 73, 0.3);
}

.btn-add-item-compact:active[b-3ii5j2xu9v] {
    transform: translateY(0);
}

.btn-add-item-compact svg[b-3ii5j2xu9v] {
    width: 12px;
    height: 12px;
}

/* Compact Card Content */
.card-content-compact[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-3);
    display: grid;
    gap: var(--aa-spacing-xs);
}

.detail-row-compact[b-3ii5j2xu9v] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--aa-spacing-md);
    align-items: start;
    padding: var(--aa-spacing-xs) 0;
    border-bottom: 1px solid var(--aa-light-gray);
}

.detail-row-compact:last-child[b-3ii5j2xu9v] {
    border-bottom: none;
}

.detail-row-compact label[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-gray);
    margin: 0;
}

.detail-row-compact span[b-3ii5j2xu9v],
.detail-row-compact code[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
}

.detail-row-compact code[b-3ii5j2xu9v] {
    background: var(--aa-light);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.detail-row-compact.total-row[b-3ii5j2xu9v] {
    border-top: 2px solid var(--aa-medium-gray);
    border-bottom: none;
    padding-top: var(--aa-spacing-2);
    margin-top: var(--aa-spacing-2);
}

.detail-row-compact.total-row label[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
}

/* Order Number Display */
.order-number-display[b-3ii5j2xu9v] {
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-bold);
    background: color-mix(in srgb, var(--aa-primary) 10%, transparent);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
    color: var(--aa-primary);
}

/* Customer Link */
.customer-link[b-3ii5j2xu9v] {
    color: var(--aa-primary);
    text-decoration: none;
    font-weight: var(--aa-font-weight-medium);
    transition: color var(--aa-transition-base) ease;
}

.customer-link:hover[b-3ii5j2xu9v] {
    color: var(--aa-text-primary);
    text-decoration: underline;
}

/* Tracking Number */
.tracking-number[b-3ii5j2xu9v] {
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-medium);
    background: var(--aa-light);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    border-radius: var(--aa-border-radius-sm);
}

/* Amount Display */
.amount[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-sm);
}

.discount-amount[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

.total-amount[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-primary);
}

/* Status Badge */
.status-badge[b-3ii5j2xu9v] {
    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);
}

/* Amount Badge */
.amount-badge[b-3ii5j2xu9v] {
    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-bold);
    background: color-mix(in srgb, var(--aa-success) 10%, transparent);
    color: var(--aa-success);
}

/* Notes Content */
.notes-content[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid var(--aa-primary);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Order Items Section */
.order-items-section[b-3ii5j2xu9v] {
    margin-top: var(--aa-spacing-lg);
    padding: var(--aa-spacing-md);
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
}

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

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

.section-title h3[b-3ii5j2xu9v] {
    margin: 0;
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-lg);
}

.item-count[b-3ii5j2xu9v] {
    background: var(--aa-primary);
    color: var(--aa-white);
    padding: var(--aa-spacing-xs) 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);
}

.section-actions[b-3ii5j2xu9v] {
    display: flex;
    gap: var(--aa-spacing-2);
}

.btn-add-item[b-3ii5j2xu9v] {
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: #2d1b49;
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    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);
    transition: all var(--aa-transition-base) ease;
}

.btn-add-item:hover[b-3ii5j2xu9v] {
    background: linear-gradient(135deg, #a393c9, #c4b5d8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.4);
}

.btn-add-item:active[b-3ii5j2xu9v] {
    transform: translateY(0);
}

/* Items Table - COMPACT */
.items-table-container[b-3ii5j2xu9v] {
    max-height: none; /* Remove height restriction for main table */
    overflow-x: auto;
    margin: 0; /* Remove margin, card-content-compact handles padding */
}

.items-table[b-3ii5j2xu9v] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

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

.items-table thead th[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-2);
    text-align: left;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    white-space: nowrap;
    font-size: var(--aa-font-size-xs);
}

.items-table thead th .bi[b-3ii5j2xu9v] {
    margin-right: var(--aa-spacing-xs);
    color: #b8a9d9;
    font-size: var(--aa-font-size-xs);
}

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

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

.items-table tbody td[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-0);
    vertical-align: middle;
    font-size: var(--aa-font-size-xs);
}

/* Order Items Table - Specific Cells - COMPACT */
.product-name-cell[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-medium);
    min-width: 180px;
    max-width: 250px;
}

.product-info[b-3ii5j2xu9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-name[b-3ii5j2xu9v] {
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-xs);
    line-height: 1.3;
}

.product-group[b-3ii5j2xu9v] {
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
    font-style: italic;
    line-height: 1.2;
}

.offer-type-cell[b-3ii5j2xu9v] {
    text-align: center;
    min-width: 80px;
}

.offer-type-badge[b-3ii5j2xu9v] {
    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-xs);
    font-weight: var(--aa-font-weight-medium);
    white-space: nowrap;
}

.quantity-cell[b-3ii5j2xu9v],
.item-quantity-cell[b-3ii5j2xu9v],
.total-items-cell[b-3ii5j2xu9v] {
    text-align: center;
    min-width: 60px;
}

.quantity-value[b-3ii5j2xu9v],
.item-quantity-value[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-xs);
}

.total-items-value[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-primary);
    font-size: var(--aa-font-size-xs);
}

.unit-price-cell[b-3ii5j2xu9v],
.line-total-cell[b-3ii5j2xu9v] {
    text-align: right;
    min-width: 80px;
}

.currency-value[b-3ii5j2xu9v] {
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-xs);
}

.currency-value.line-total[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-primary);
}

/* Action Cell - Layout Only */
.action-cell[b-3ii5j2xu9v] {
    text-align: center;
    width: 60px;
    padding: var(--aa-spacing-1) !important;
}

/* Note: Action button styles (.action-btn, .action-btn.edit, .action-btn.delete, etc.) 
   are now in global aa-admin.css for consistency across all admin pages */

/* Table Footer - Totals Row - COMPACT */
.items-table tfoot[b-3ii5j2xu9v] {
    background: var(--aa-light);
    border-top: 2px solid var(--aa-medium-gray);
}

.totals-row[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-bold);
}

.totals-label[b-3ii5j2xu9v] {
    text-align: right;
    padding: var(--aa-spacing-2);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-sm);
}

.totals-value[b-3ii5j2xu9v] {
    text-align: right;
    padding: var(--aa-spacing-2);
}

.totals-value .total-amount[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-md);
}

/* Item Row Hover Effect */
.item-row[b-3ii5j2xu9v] {
    transition: all var(--aa-transition-base) ease;
}

.item-row:hover[b-3ii5j2xu9v] {
    background-color: color-mix(in srgb, var(--aa-primary) 3%, transparent);
}

/* Notes Row - Inline Version */
.detail-row-compact.notes-row[b-3ii5j2xu9v] {
    grid-template-columns: 180px 1fr;
    align-items: start;
}

.notes-content-inline[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-2);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid var(--aa-primary);
    font-size: var(--aa-font-size-sm);
    color: var(--aa-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
}

/* Customizations Section - COMPACT */
.customizations-row[b-3ii5j2xu9v] {
    background-color: var(--aa-light);
}

.customizations-cell[b-3ii5j2xu9v] {
    padding: 0 !important;
}

.customizations-container[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-3);
    border-top: 2px solid var(--aa-medium-gray);
}

/* Customizations Header with Add Button */
.customizations-header[b-3ii5j2xu9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--aa-spacing-2);
    padding-bottom: var(--aa-spacing-2);
    border-bottom: 1px solid var(--aa-medium-gray);
}

.customizations-title[b-3ii5j2xu9v] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    margin: 0;
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.customizations-title svg[b-3ii5j2xu9v] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-sm);
}

/* Compact Add Customization Button */
.btn-add-customization-compact[b-3ii5j2xu9v] {
    background: #2d1b49;
    color: var(--aa-white);
    padding: 4px var(--aa-spacing-2);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    transition: all var(--aa-transition-base) ease;
}

.btn-add-customization-compact:hover[b-3ii5j2xu9v] {
    background: #1f1335;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(45, 27, 73, 0.3);
}

.btn-add-customization-compact:active[b-3ii5j2xu9v] {
    transform: translateY(0);
}

.btn-add-customization-compact svg[b-3ii5j2xu9v] {
    width: 12px;
    height: 12px;
}

/* Customizations Table - COMPACT */
.customizations-table-container[b-3ii5j2xu9v] {
    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);
    overflow-x: auto;
}

.customizations-table[b-3ii5j2xu9v] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

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

.customizations-table thead th[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-2);
    text-align: left;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: var(--aa-font-size-xs);
}

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

.customizations-table tbody tr:hover[b-3ii5j2xu9v] {
    background-color: color-mix(in srgb, var(--aa-primary) 3%, transparent);
}

.customizations-table tbody tr:last-child[b-3ii5j2xu9v] {
    border-bottom: none;
}

.customizations-table td[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-2);
    vertical-align: top;
    font-size: var(--aa-font-size-xs);
}

/* Table Cell Styles - COMPACT */
.sequence-cell[b-3ii5j2xu9v] {
    text-align: center;
    width: 35px;
}

.sequence-badge[b-3ii5j2xu9v] {
    background: var(--aa-primary);
    color: var(--aa-white);
    padding: 2px var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-bold);
    display: inline-block;
    min-width: 20px;
    text-align: center;
}

.sku-cell[b-3ii5j2xu9v] {
    width: 70px;
}

.product-sku[b-3ii5j2xu9v] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
    background: var(--aa-light);
    padding: 2px var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    display: inline-block;
    font-weight: var(--aa-font-weight-medium);
}

.personalization-cell[b-3ii5j2xu9v] {
    min-width: 200px;
    max-width: 300px;
}

.personalization-content[b-3ii5j2xu9v] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.greeting-text[b-3ii5j2xu9v],
.message-text[b-3ii5j2xu9v] {
    display: flex;
    align-items: flex-start;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-1) var(--aa-spacing-2);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-sm);
    border-left: 2px solid #b8a9d9;
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
    line-height: 1.3;
}

.greeting-text svg[b-3ii5j2xu9v],
.message-text svg[b-3ii5j2xu9v] {
    color: #b8a9d9;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: var(--aa-font-size-xs);
}

.greeting-text em[b-3ii5j2xu9v] {
    font-style: italic;
}

.signature-text[b-3ii5j2xu9v] {
    text-align: right;
    font-weight: var(--aa-font-weight-medium);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
    padding: 0 var(--aa-spacing-2);
    line-height: 1.3;
}

.recipient-cell[b-3ii5j2xu9v] {
    width: 130px;
}

.recipient-name[b-3ii5j2xu9v] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

.recipient-name svg[b-3ii5j2xu9v] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-xs);
}

.state-cell[b-3ii5j2xu9v] {
    width: 70px;
}

.state-badge[b-3ii5j2xu9v] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    background: var(--aa-light);
    padding: 2px var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

.state-badge svg[b-3ii5j2xu9v] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-xs);
}

.fulfillment-cell[b-3ii5j2xu9v] {
    min-width: 140px;
}

.fulfillment-status[b-3ii5j2xu9v] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.status-badge svg[b-3ii5j2xu9v] {
    flex-shrink: 0;
    font-size: var(--aa-font-size-xs);
}

.status-badge.delivered[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-success) 15%, transparent);
    color: var(--aa-success);
}

.status-badge.delivered svg[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

.status-badge.returned[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-warning) 15%, transparent);
    color: var(--aa-warning);
}

.status-badge.returned svg[b-3ii5j2xu9v] {
    color: var(--aa-warning);
}

.status-badge.mailed[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-info) 15%, transparent);
    color: var(--aa-info);
}

.status-badge.mailed svg[b-3ii5j2xu9v] {
    color: var(--aa-info);
}

.status-badge.completed[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-primary) 15%, transparent);
    color: var(--aa-primary);
}

.status-badge.completed svg[b-3ii5j2xu9v] {
    color: var(--aa-primary);
}

.status-badge.processing[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-secondary) 15%, transparent);
    color: var(--aa-secondary);
}

.status-badge.processing svg[b-3ii5j2xu9v] {
    color: var(--aa-secondary);
}

.status-badge.requested[b-3ii5j2xu9v] {
    background: var(--aa-light);
    color: var(--aa-gray);
}

.status-badge.requested svg[b-3ii5j2xu9v] {
    color: var(--aa-gray);
}

.notes-cell[b-3ii5j2xu9v] {
    min-width: 130px;
    max-width: 200px;
}

.notes-text[b-3ii5j2xu9v] {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
    line-height: 1.3;
}

.notes-text svg[b-3ii5j2xu9v] {
    color: var(--aa-warning);
    flex-shrink: 0;
    margin-top: 2px;
    font-size: var(--aa-font-size-xs);
}

.no-data[b-3ii5j2xu9v] {
    color: var(--aa-text-light);
    font-style: italic;
    font-size: var(--aa-font-size-xs);
}

/* Fulfillment Actions Cell */
.fulfillment-actions-cell[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-1) !important;
    min-width: 140px;
}

.fulfillment-action-buttons[b-3ii5j2xu9v] {
    display: flex;
    gap: var(--aa-spacing-xs);
    align-items: center;
    justify-content: end;
    flex-wrap: nowrap;
}

/* Fulfillment Action Buttons - Compact Circular Design */
.fulfillment-btn[b-3ii5j2xu9v] {
    width: var(--aa-spacing-6);
    height: var(--aa-spacing-6);
    padding: 0;
    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);
    flex-shrink: 0;
}

.fulfillment-btn:not(:disabled):hover[b-3ii5j2xu9v] {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fulfillment-btn:not(:disabled):active[b-3ii5j2xu9v] {
    transform: scale(1.05);
}

.fulfillment-btn:disabled[b-3ii5j2xu9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Process Button - Purple/Gray */
.fulfillment-btn.process[b-3ii5j2xu9v] {
    background: var(--aa-secondary);
    color: var(--aa-white);
}

.fulfillment-btn.process:not(:disabled):hover[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-secondary) 80%, black);
}

/* Complete Button - Purple/Primary */
.fulfillment-btn.complete[b-3ii5j2xu9v] {
    background: var(--aa-primary);
    color: var(--aa-white);
}

.fulfillment-btn.complete:not(:disabled):hover[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-primary) 80%, black);
}

/* Mail Button - Blue/Info */
.fulfillment-btn.mail[b-3ii5j2xu9v] {
    background: var(--aa-info);
    color: var(--aa-white);
}

.fulfillment-btn.mail:not(:disabled):hover[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-info) 80%, black);
}

/* Deliver Button - Green/Success */
.fulfillment-btn.deliver[b-3ii5j2xu9v] {
    background: var(--aa-success);
    color: var(--aa-white);
}

.fulfillment-btn.deliver:not(:disabled):hover[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-success) 80%, black);
}

/* Return Button - Yellow/Warning */
.fulfillment-btn.return[b-3ii5j2xu9v] {
    background: var(--aa-warning);
    color: var(--aa-white);
}

.fulfillment-btn.return:not(:disabled):hover[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-warning) 80%, black);
}

/* Print Envelope Button - Teal/Cyan */
.fulfillment-btn.print-envelope[b-3ii5j2xu9v] {
    background: #14b8a6; /* Teal-500 */
    color: var(--aa-white);
}

.fulfillment-btn.print-envelope:not(:disabled):hover[b-3ii5j2xu9v] {
    background: #0d9488; /* Teal-600 */
}

/* Icon sizing within fulfillment buttons */
.fulfillment-btn svg[b-3ii5j2xu9v] {
    width: 12px;
    height: 12px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .details-grid-compact[b-3ii5j2xu9v] {
        grid-template-columns: 1fr;
    }
    
    /* Full-width cards are already full-width on single column */
    .details-card.full-width[b-3ii5j2xu9v] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .detail-row-compact[b-3ii5j2xu9v] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-xs);
    }

    .items-table[b-3ii5j2xu9v] {
        min-width: 600px;
    }

    .order-header-compact[b-3ii5j2xu9v] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--aa-spacing-3);
    }

    .order-header-left[b-3ii5j2xu9v] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .order-number-compact[b-3ii5j2xu9v] {
        font-size: var(--aa-font-size-lg);
    }

    .order-actions-compact[b-3ii5j2xu9v] {
        justify-content: center;
        width: 100%;
    }

    .section-header[b-3ii5j2xu9v] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--aa-spacing-sm);
    }

    .customizations-table[b-3ii5j2xu9v] {
        min-width: 900px;
    }
    
    .customizations-container[b-3ii5j2xu9v] {
        padding: var(--aa-spacing-2);
    }
}

@media (max-width: 480px) {
    .order-icon-compact[b-3ii5j2xu9v] {
        width: 40px;
        height: 40px;
        font-size: var(--aa-font-size-xl);
    }
    
    .order-number-compact[b-3ii5j2xu9v] {
        font-size: var(--aa-font-size-md);
    }

    .items-table[b-3ii5j2xu9v] {
        min-width: 900px;
    }
}

/* Order Payments Styles */
.payment-summary-status[b-3ii5j2xu9v] {
    display: flex;
    gap: var(--aa-spacing-4);
    align-items: center;
    margin-bottom: var(--aa-spacing-3);
    padding: var(--aa-spacing-3);
    background: var(--aa-light);
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-light-gray);
}

.summary-stat[b-3ii5j2xu9v] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-xs);
}

.stat-label[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-family-mono);
}

.stat-value.paid[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

.stat-value.paid-full[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

.stat-value.partial[b-3ii5j2xu9v] {
    color: var(--aa-warning);
}

.payment-status-badge[b-3ii5j2xu9v] {
    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-semibold);
    margin-left: auto;
}

.payment-status-badge.paid-full[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-success) 15%, transparent);
    color: var(--aa-success);
}

.payment-status-badge.partial[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-warning) 15%, transparent);
    color: var(--aa-warning);
}

/* Payments Table */
.payments-table-container[b-3ii5j2xu9v] {
    overflow-x: auto;
    margin: 0;
}

.payments-table[b-3ii5j2xu9v] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aa-font-size-xs);
}

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

.payments-table thead th[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-2);
    text-align: left;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    white-space: nowrap;
    font-size: var(--aa-font-size-xs);
}

.payments-table thead th .bi[b-3ii5j2xu9v] {
    margin-right: var(--aa-spacing-xs);
    color: #b8a9d9;
    font-size: var(--aa-font-size-xs);
}

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

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

.payments-table tbody td[b-3ii5j2xu9v] {
    padding: var(--aa-spacing-2);
    vertical-align: middle;
    font-size: var(--aa-font-size-xs);
}

.payment-method-cell[b-3ii5j2xu9v] {
    min-width: 120px;
}

.payment-method-badge[b-3ii5j2xu9v] {
    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-xs);
    font-weight: var(--aa-font-weight-medium);
    white-space: nowrap;
}

.reference-cell[b-3ii5j2xu9v] {
    min-width: 100px;
}

.reference-number[b-3ii5j2xu9v] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

.amount-cell[b-3ii5j2xu9v] {
    text-align: right;
    min-width: 80px;
}

.payment-amount[b-3ii5j2xu9v] {
    color: var(--aa-success);
    font-weight: var(--aa-font-weight-bold);
}

.date-cell[b-3ii5j2xu9v] {
    min-width: 90px;
    font-size: var(--aa-font-size-xs);
}

.notes-cell .payment-notes[b-3ii5j2xu9v] {
    display: block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--aa-font-size-xs);
}

.payments-table tfoot[b-3ii5j2xu9v] {
    background: var(--aa-light);
    border-top: 2px solid var(--aa-medium-gray);
}

.payments-table tfoot .totals-row[b-3ii5j2xu9v] {
    font-weight: var(--aa-font-weight-bold);
}

.payments-table tfoot .totals-label[b-3ii5j2xu9v] {
    text-align: right;
    padding: var(--aa-spacing-2);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-sm);
}

.payments-table tfoot .totals-value[b-3ii5j2xu9v] {
    text-align: right;
    padding: var(--aa-spacing-2);
}

/* Financial Summary Section */
.financial-summary-container[b-3ii5j2xu9v] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--aa-spacing-md);
    margin-bottom: var(--aa-spacing-lg);
}

.financial-summary-card[b-3ii5j2xu9v] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    box-shadow: var(--aa-shadow-md);
    border: 2px solid var(--aa-light-gray);
    padding: var(--aa-spacing-4);
    min-width: 320px;
    max-width: 400px;
}

.financial-summary-row[b-3ii5j2xu9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2) 0;
    border-bottom: 1px solid var(--aa-light-gray);
}

.financial-summary-row:last-child[b-3ii5j2xu9v] {
    border-bottom: none;
}

.financial-summary-row.total[b-3ii5j2xu9v] {
    border-top: 2px solid var(--aa-medium-gray);
    padding-top: var(--aa-spacing-3);
    margin-top: var(--aa-spacing-2);
}

.financial-label[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-secondary);
}

.financial-summary-row.total .financial-label[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
}

.financial-value[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-md);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-family-mono);
}

.financial-value.discount[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

.financial-summary-row.total .financial-value[b-3ii5j2xu9v] {
    font-size: var(--aa-font-size-xl);
    color: var(--aa-primary);
}

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

.empty-state-small .empty-icon[b-3ii5j2xu9v] {
    font-size: 48px;
    color: var(--aa-text-light);
    margin-bottom: var(--aa-spacing-3);
}

.empty-state-small h4[b-3ii5j2xu9v] {
    margin: 0 0 var(--aa-spacing-2) 0;
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-md);
}

.empty-state-small p[b-3ii5j2xu9v] {
    margin: 0;
    color: var(--aa-text-light);
    font-size: var(--aa-font-size-sm);
}

/* Requested Date Column Styles */
.requested-cell[b-3ii5j2xu9v] {
    min-width: 120px;
    text-align: left;
    padding: var(--aa-spacing-2);
}

/* Requested Date Status Badge Styles - Matching Fulfillment Badge Pattern */
.requested-cell .status-badge[b-3ii5j2xu9v] {
    display: flex;
    width: 100%;
}

/* Orange - All items mailed (completed) */
.status-badge.status-completed[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-success) 15%, transparent);
    color: var(--aa-success);
}

.status-badge.status-completed svg[b-3ii5j2xu9v] {
    color: var(--aa-success);
}

/* Green - Requested date > 7 days away (safe/plenty of time) */
.status-badge.status-safe[b-3ii5j2xu9v] {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
}

.status-badge.status-safe svg[b-3ii5j2xu9v] {
    color: #f59e0b;
}

/* Red - Urgent (≤7 days OR ASAP and not mailed) */
.status-badge.status-urgent[b-3ii5j2xu9v] {
    background: color-mix(in srgb, var(--aa-danger) 15%, transparent);
    color: var(--aa-danger);
}

.status-badge.status-urgent svg[b-3ii5j2xu9v] {
    color: var(--aa-danger);
}
/* /Src/Presentation/Areas/Admin/Pages/Orders/Index.razor.rz.scp.css */
/* Order Index Page - Clean Modern Styles */
/* Hero section styles now come from aa-admin.css global styles */

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

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

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

/* Left side - Quick Stats */
.orders-actions-left[b-y1uo5y1h8e] {
    flex: 1;
}

.quick-stats[b-y1uo5y1h8e] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-lg);
}

.stat-item[b-y1uo5y1h8e] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    padding: var(--aa-spacing-sm) var(--aa-spacing-md);
    background: white;
    border-radius: var(--aa-border-radius-md);
    border: 1px solid #e9ecef;
}

.stat-label[b-y1uo5y1h8e] {
    font-weight: 500;
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
}

.stat-value[b-y1uo5y1h8e] {
    font-weight: 700;
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-md);
}

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

.btn-add-order[b-y1uo5y1h8e] {
    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-order:hover[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    padding: var(--aa-spacing-sm);
}

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

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

.search-input[b-y1uo5y1h8e] {
    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;
    color: var(--aa-text-primary);
}

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

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

.search-clear-btn[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    background: #f8d7da;
    color: var(--aa-danger);
}

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

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

.filter-input[b-y1uo5y1h8e] {
    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%;
    color: var(--aa-text-primary);
}

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

.filter-select[b-y1uo5y1h8e] {
    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%;
    color: var(--aa-text-primary);
}

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

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

.btn-clear-filters[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    background: color-mix(in srgb, #6c757d 90%, black);
}

/* Content Area */
.content-area[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-secondary);
}

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

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

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

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

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

.error-message[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    background: color-mix(in srgb, var(--aa-primary) 90%, black);
    transform: translateY(-1px);
}

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

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

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

.btn-primary-large[b-y1uo5y1h8e], .btn-secondary-large[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    background: var(--aa-primary);
    color: white;
}

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

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

/* Results Header */
.results-header[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
    font-weight: 500;
}

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

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

.page-size-select[b-y1uo5y1h8e] {
    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;
    color: var(--aa-text-primary);
}

.page-size-select:focus[b-y1uo5y1h8e] {
    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-y1uo5y1h8e] {
    overflow-x: auto;
    width: 100%;
}

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

.orders-table thead th[b-y1uo5y1h8e] {
    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;
}

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

.sort-btn[b-y1uo5y1h8e] {
    background: none;
    border: none;
    color: var(--aa-text-primary);
    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-y1uo5y1h8e] {
    background: #e9ecef;
    color: var(--aa-primary);
}

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

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

.order-row:hover[b-y1uo5y1h8e] {
    background: #f8f9fa;
}

/* Order Info */
.order-number[b-y1uo5y1h8e] {
    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;
}

.customer-info[b-y1uo5y1h8e] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-sm);
}

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

.order-date[b-y1uo5y1h8e] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-text-primary);
}

.item-count[b-y1uo5y1h8e] {
    font-size: var(--aa-font-size-xs);
    font-weight: 500;
    color: var(--aa-text-secondary);
}

.total-amount[b-y1uo5y1h8e] {
    font-size: var(--aa-font-size-xs);
    font-weight: 700;
    color: var(--aa-text-primary);
}

/* Status Badge */
.status-badge[b-y1uo5y1h8e] {
    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;
}

/* Pagination */
.pagination-container[b-y1uo5y1h8e] {
    padding: var(--aa-spacing-lg);
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

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

.page-btn[b-y1uo5y1h8e] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    color: var(--aa-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

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

.page-info[b-y1uo5y1h8e] {
    margin: 0 var(--aa-spacing-lg);
    font-weight: 500;
    color: var(--aa-text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .orders-actions-content[b-y1uo5y1h8e] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        text-align: center;
    }
    
    .orders-actions-left[b-y1uo5y1h8e],
    .orders-actions-right[b-y1uo5y1h8e] {
        width: 100%;
    }
    
    .quick-stats[b-y1uo5y1h8e] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-add-order[b-y1uo5y1h8e] {
        width: 100%;
        justify-content: center;
    }

    .filter-controls[b-y1uo5y1h8e] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-md);
    }
    
    .filter-actions[b-y1uo5y1h8e] {
        grid-column: span 1;
        justify-content: stretch;
    }
    
    .results-header[b-y1uo5y1h8e] {
        flex-direction: column;
        gap: var(--aa-spacing-md);
        align-items: stretch;
    }
    
    .action-buttons[b-y1uo5y1h8e] {
        flex-direction: column;
        gap: 2px;
    }
    
    .orders-table[b-y1uo5y1h8e] {
        font-size: 0.875rem;
        min-width: 800px;
    }
}

/* Animations */
@keyframes aa-spin-b-y1uo5y1h8e {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Src/Presentation/Areas/Admin/Pages/Orders/Management.razor.rz.scp.css */
/* ============================================================================
   ORDER MANAGEMENT DASHBOARD - PAGE-SPECIFIC STYLES
   ============================================================================
   Order-specific table columns for Active Orders table
   Follows CODING_STANDARDS.md - Uses CSS variables from aa-variables.css
   ============================================================================ */

/* ============================================================================
   ORDER MANAGEMENT SPECIFIC BUTTONS
   ============================================================================ */

/* Recalculate All Button - Admin Warning Style (Order Management Only) */
.btn-recalculate[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-1) var(--aa-spacing-3);
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: var(--aa-white);
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
    box-shadow: var(--aa-shadow-sm);
}

.btn-recalculate:hover:not(:disabled)[b-ekhuxtg5qp] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
}

.btn-recalculate:active:not(:disabled)[b-ekhuxtg5qp] {
    transform: translateY(0);
}

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

.btn-recalculate svg[b-ekhuxtg5qp] {
    font-size: var(--aa-font-size-base);
}

/* Retry Button (used in error state) */
.btn-retry[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-1) var(--aa-spacing-3);
    background: linear-gradient(135deg, #b8a9d9, #d4c5e8);
    color: #2d1b49;
    border: none;
    border-radius: var(--aa-border-radius-sm);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    transition: all var(--aa-transition-base) ease;
}

.btn-retry:hover[b-ekhuxtg5qp] {
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
}

/* ============================================================================
   ACTIVE ORDERS TABLE COLUMNS
   ============================================================================ */

/* Active Orders Table Column Widths */
.order-number-col[b-ekhuxtg5qp] {
    width: 80px;
}

.customer-col[b-ekhuxtg5qp] {
    width: 160px;
}

.facility-col[b-ekhuxtg5qp] {
    width: 120px;
}

.date-col[b-ekhuxtg5qp] {
    width: 70px;
}

.customizations-col[b-ekhuxtg5qp] {
    width: 90px;
    text-align: center;
}

.actions-col[b-ekhuxtg5qp] {
    width: 60px;
    text-align: center;
}

/* Cell Styling */
.order-number-cell[b-ekhuxtg5qp] {
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

/* Order Number Link */
.order-number-link[b-ekhuxtg5qp] {
    color: var(--aa-primary);
    text-decoration: none;
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-semibold);
    transition: color var(--aa-transition-base) ease;
    display: inline-block;
}

.order-number-link:hover[b-ekhuxtg5qp] {
    color: var(--aa-text-primary);
    text-decoration: underline;
}

.order-number-link:active[b-ekhuxtg5qp] {
    color: var(--aa-secondary);
}

.customer-cell[b-ekhuxtg5qp] {
    padding: var(--aa-spacing-0);
}

.customer-info[b-ekhuxtg5qp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.customer-name[b-ekhuxtg5qp] {
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

.customer-doc[b-ekhuxtg5qp] {
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-secondary);
    font-family: var(--aa-font-family-mono);
}

.facility-cell[b-ekhuxtg5qp] {
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xxs);
}

.date-cell[b-ekhuxtg5qp] {
    font-family: var(--aa-font-family-mono);
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xxs);
}

.customizations-cell[b-ekhuxtg5qp] {
    text-align: center;
}

.customizations-badge[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 var(--aa-spacing-1);
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: var(--aa-white);
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-bold);
    font-size: var(--aa-font-size-xxs);
    border-radius: var(--aa-border-radius-sm);
    box-shadow: var(--aa-shadow-sm);
}

.production-badge[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 var(--aa-spacing-1);
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: var(--aa-white);
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-bold);
    font-size: var(--aa-font-size-xxs);
    border-radius: var(--aa-border-radius-sm);
    box-shadow: var(--aa-shadow-sm);
}

.mail-badge[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 var(--aa-spacing-1);
    background: linear-gradient(135deg, #14b8a6, #5eead4);
    color: var(--aa-white);
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-bold);
    font-size: var(--aa-font-size-xxs);
    border-radius: var(--aa-border-radius-sm);
    box-shadow: var(--aa-shadow-sm);
}

.no-customizations[b-ekhuxtg5qp] {
    color: var(--aa-text-light);
    font-size: var(--aa-font-size-xs);
}

.amount-cell[b-ekhuxtg5qp] {
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    text-align: right;
}

.items-cell[b-ekhuxtg5qp] {
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    text-align: center;
}

/* Order Management Dashboard - Two Column Layout */
/* Following Product Management Dashboard Standards */

/* Two Column Grid ONLY for Fulfillment Tables */
.fulfillment-tables-grid[b-ekhuxtg5qp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aa-spacing-lg);
    margin-top: var(--aa-spacing-lg);
}

.fulfillment-column-left[b-ekhuxtg5qp],
.fulfillment-column-right[b-ekhuxtg5qp] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-lg);
}

/* ============================================================================
   READY TO MAIL TABLE - Customization-level details
   ============================================================================ */

/* SKU Column */
.sku-col[b-ekhuxtg5qp] {
    width: 70px;
}

.sku-cell[b-ekhuxtg5qp] {
    padding: var(--aa-spacing-0);
}

.product-sku[b-ekhuxtg5qp] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-primary);
    background: var(--aa-light);
    padding: 2px var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    display: inline-block;
    font-weight: var(--aa-font-weight-medium);
}

/* Recipient Column */
.recipient-col[b-ekhuxtg5qp] {
    width: 140px;
}

.recipient-cell[b-ekhuxtg5qp] {
    padding: var(--aa-spacing-0);
}

.recipient-name[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-primary);
}

.recipient-name svg[b-ekhuxtg5qp] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-xxs);
}

/* State Column */
.state-col[b-ekhuxtg5qp] {
    width: 60px;
}

.state-cell[b-ekhuxtg5qp] {
    padding: var(--aa-spacing-0);
}

.state-badge[b-ekhuxtg5qp] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    background: var(--aa-light);
    padding: 2px var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xxs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

.state-badge svg[b-ekhuxtg5qp] {
    color: #b8a9d9;
    font-size: var(--aa-font-size-xxs);
}

/* Requested Date Styling */
.requested-date[b-ekhuxtg5qp] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-secondary);
}

.requested-asap[b-ekhuxtg5qp] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xxs);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-danger);
}

.no-data[b-ekhuxtg5qp] {
    color: var(--aa-text-light);
    font-style: italic;
    font-size: var(--aa-font-size-xxs);
}

/* Responsive - Stack on smaller screens */
@media (max-width: 1200px) {
    .fulfillment-tables-grid[b-ekhuxtg5qp] {
        grid-template-columns: 1fr;
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ProductCategories/Details.razor.rz.scp.css */
/* Product Category Details Page - Minimal Page-Specific Styles */
/* Following CSS Standards - All common styles in aa-admin.css */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Status badge styles (.status-badge, .status-badge.active, etc.) 
   are in global aa-admin.css for reuse across all admin pages */

/* NOTE: Loading/error state styles (.loading-state, .error-state, etc.) 
   are in global aa-admin.css for reuse across all admin pages */

/* ==========================================================================
   CATEGORY-SPECIFIC STYLES ONLY
   ========================================================================== */

/* Category Image Display */
.category-image-detail[b-ru0q8ilnzl] {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--aa-border-radius-md);
    border: 1px solid var(--aa-border-light);
}

/* Product Count Badge - Category-specific variant */
.product-count-badge[b-ru0q8ilnzl] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background: var(--aa-info-light);
    color: var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.product-count-highlight[b-ru0q8ilnzl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-info);
    font-weight: var(--aa-font-weight-semibold);
}

/* Card Header Extensions for Products Card */
.card-header-left[b-ru0q8ilnzl] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    flex: 1;
}

.card-header-actions[b-ru0q8ilnzl] {
    display: flex;
    gap: var(--aa-spacing-1);
}

/* Products Card Content - Scrollable */
.products-card-content[b-ru0q8ilnzl] {
    max-height: 400px;
    overflow-y: auto;
}

/* Compact Products Table */
.products-compact-table[b-ru0q8ilnzl] {
    font-size: var(--aa-font-size-xs);
}

.products-compact-table thead th[b-ru0q8ilnzl] {
    padding: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    position: sticky;
    top: 0;
    background: var(--aa-bg-light);
    z-index: 1;
}

.products-compact-table td[b-ru0q8ilnzl] {
    padding: var(--aa-spacing-1);
}

.product-code[b-ru0q8ilnzl] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.product-description[b-ru0q8ilnzl] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

/* Small State Messages */
.loading-state-small[b-ru0q8ilnzl],
.error-state-small[b-ru0q8ilnzl],
.empty-state-small[b-ru0q8ilnzl] {
    text-align: center;
    padding: var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

.error-state-small[b-ru0q8ilnzl] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    border-radius: var(--aa-border-radius-sm);
}

.empty-state-small h4[b-ru0q8ilnzl] {
    margin: var(--aa-spacing-2) 0 var(--aa-spacing-1) 0;
    color: var(--aa-text-primary);
}

.empty-state-small p[b-ru0q8ilnzl] {
    margin: 0;
    font-size: var(--aa-font-size-sm);
}

.empty-icon[b-ru0q8ilnzl] {
    font-size: 2rem;
    opacity: 0.5;
}

/* /Src/Presentation/Areas/Admin/Pages/ProductCategories/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
*/
/* ==========================================================================
   PRODUCT CATEGORIES-SPECIFIC STYLES ONLY
   ========================================================================== */

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

/* Categories-Specific Filter Grid - 3 filters (Search + Status + Clear) */
.filter-controls[b-k0sbp5qv0z] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   CATEGORY-SPECIFIC TABLE CELL STYLES
   NOTE: Use global .admin-table and .admin-table-row classes from aa-admin.css
   Only cell content styling is Categories-specific
   ========================================================================== */

.category-name[b-k0sbp5qv0z] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.category-description[b-k0sbp5qv0z] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

.display-order[b-k0sbp5qv0z] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    text-align: center;
}

.product-count[b-k0sbp5qv0z] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

/* Responsive Design - Categories-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-k0sbp5qv0z] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ProductGroupImageTypes/Details.razor.rz.scp.css */
/* Product Group Image Type Details Page - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* Badge Styles - Page-Specific */
.group-badge[b-mdgmgtdx6a] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background-color: color-mix(in srgb, var(--aa-primary) 15%, white);
    color: var(--aa-primary);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.required-badge[b-mdgmgtdx6a] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.required-badge.required[b-mdgmgtdx6a] {
    background: #fff3cd;
    color: #856404;
}

.required-badge.optional[b-mdgmgtdx6a] {
    background: #e7f3ff;
    color: #004085;
}

.usage-count[b-mdgmgtdx6a] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-text-primary);
    font-weight: var(--aa-font-weight-medium);
}

/* ProductGroupImageType-Specific Helper Classes */
.detail-info-box[b-mdgmgtdx6a] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-2);
    background-color: color-mix(in srgb, var(--aa-info) 10%, white);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid var(--aa-info);
    color: color-mix(in srgb, var(--aa-info) 80%, black);
    font-size: var(--aa-font-size-xs);
    margin-top: var(--aa-spacing-1);
}

/* Entity Links */
.entity-link[b-mdgmgtdx6a] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-primary);
    text-decoration: none;
    transition: color var(--aa-transition-base);
    font-size: var(--aa-font-size-xs);
}

.entity-link:hover[b-mdgmgtdx6a] {
    color: var(--aa-primary-dark);
    text-decoration: underline;
}

/* Status Badges - Page-Specific Variants */
.status-badge[b-mdgmgtdx6a] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.status-badge.active[b-mdgmgtdx6a] {
    background: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
}

.status-badge.inactive[b-mdgmgtdx6a] {
    background: var(--aa-state-inactive-bg);
    color: var(--aa-state-inactive-text);
}

/* Loading and Error States */
.loading-state[b-mdgmgtdx6a], .error-state[b-mdgmgtdx6a] {
    text-align: center;
    padding: var(--aa-spacing-8) var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

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

.loading-spinner[b-mdgmgtdx6a] {
    color: var(--aa-primary);
}

.error-icon[b-mdgmgtdx6a] {
    color: var(--aa-danger);
}

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

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

.error-message[b-mdgmgtdx6a] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-2) 0;
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.error-actions[b-mdgmgtdx6a] {
    display: flex;
    gap: var(--aa-spacing-2);
    justify-content: center;
    margin-top: var(--aa-spacing-4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-header-badges[b-mdgmgtdx6a] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .content-area[b-mdgmgtdx6a] {
        padding: var(--aa-spacing-1);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ProductGroupImageTypes/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
*/
/* ==========================================================================
   PRODUCT GROUP IMAGE TYPES-SPECIFIC STYLES ONLY
   ========================================================================== */

/* ProductGroupImageTypes-Specific Filter Grid - 4 filters (Search + Product Group + Status + Clear) */
.filter-controls[b-om5ewdakvd] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   PRODUCT GROUP IMAGE TYPE-SPECIFIC TABLE CELL STYLES
   NOTE: Use global .admin-table and .admin-table-row classes from aa-admin.css
   Only cell content styling is ProductGroupImageTypes-specific
   ========================================================================== */

.product-group-info[b-om5ewdakvd] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.image-type-name[b-om5ewdakvd] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.description[b-om5ewdakvd] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

.required-badge[b-om5ewdakvd] {
    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: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.required-badge.required[b-om5ewdakvd] {
    background: #fff3cd;
    color: #856404;
}

.required-badge.optional[b-om5ewdakvd] {
    background: #e7f3ff;
    color: #004085;
}

.display-order[b-om5ewdakvd] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    justify-content: center;
}

.usage-count[b-om5ewdakvd] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

/* Responsive Design - ProductGroupImageTypes-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-om5ewdakvd] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ProductGroups/Details.razor.rz.scp.css */
/* Product Groups Details Page - Minimal Page-Specific Styles */
/* Following CSS Standards - All common styles in aa-admin.css */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Status badge styles (.status-badge, .status-badge.active, etc.) 
   are in global aa-admin.css for reuse across all admin pages */

/* NOTE: Loading/error state styles (.loading-state, .error-state, etc.) 
   are in global aa-admin.css for reuse across all admin pages */

/* ==========================================================================
   PRODUCT GROUP-SPECIFIC STYLES ONLY
   ========================================================================== */

/* Price Badge - Product Group-specific variant */
.price-badge[b-hasgd1ncca] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background: var(--aa-success-light);
    color: var(--aa-success);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

/* Price Highlight - Larger price display */
.price-highlight[b-hasgd1ncca] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-success);
    font-weight: var(--aa-font-weight-bold);
    font-size: var(--aa-font-size-lg);
}

/* Product Count Badge - Product Group-specific variant */
.product-count-badge[b-hasgd1ncca] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background: var(--aa-info-light);
    color: var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.product-count-highlight[b-hasgd1ncca] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-info);
    font-weight: var(--aa-font-weight-semibold);
}

/* Card Header Extensions for Products Card */
.card-header-left[b-hasgd1ncca] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    flex: 1;
}

.card-header-actions[b-hasgd1ncca] {
    display: flex;
    gap: var(--aa-spacing-1);
}

/* Products Card Content - Scrollable */
.products-card-content[b-hasgd1ncca] {
    max-height: 400px;
    overflow-y: auto;
}

/* Compact Products Table */
.products-compact-table[b-hasgd1ncca] {
    font-size: var(--aa-font-size-xs);
}

.products-compact-table thead th[b-hasgd1ncca] {
    padding: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    position: sticky;
    top: 0;
    background: var(--aa-bg-light);
    z-index: 1;
}

.products-compact-table td[b-hasgd1ncca] {
    padding: var(--aa-spacing-1);
}

.product-code[b-hasgd1ncca] {
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.product-description[b-hasgd1ncca] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

/* Small State Messages */
.loading-state-small[b-hasgd1ncca],
.error-state-small[b-hasgd1ncca],
.empty-state-small[b-hasgd1ncca] {
    text-align: center;
    padding: var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

.error-state-small[b-hasgd1ncca] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    border-radius: var(--aa-border-radius-sm);
}

.empty-state-small h4[b-hasgd1ncca] {
    margin: var(--aa-spacing-2) 0 var(--aa-spacing-1) 0;
    color: var(--aa-text-primary);
}

.empty-state-small p[b-hasgd1ncca] {
    margin: 0;
    font-size: var(--aa-font-size-sm);
}

.empty-icon[b-hasgd1ncca] {
    font-size: 2rem;
    opacity: 0.5;
}

/* /Src/Presentation/Areas/Admin/Pages/ProductGroups/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
*/
/* ==========================================================================
   PRODUCT GROUPS-SPECIFIC STYLES ONLY
   ========================================================================== */

/* Product Groups-Specific Filter Grid - 3 filters (Search + Status + Clear) */
.filter-controls[b-t76i6ecnxt] {
    display: grid;
    grid-template-columns: 2fr 2fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   PRODUCT GROUP-SPECIFIC TABLE CELL STYLES
   NOTE: Use global .admin-table and .admin-table-row classes from aa-admin.css
   Only cell content styling is Product Groups-specific
   ========================================================================== */

.group-name[b-t76i6ecnxt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
}

.group-description[b-t76i6ecnxt] {
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-primary);
}

.price-info[b-t76i6ecnxt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-success);
    font-size: var(--aa-font-size-xs);
}

.display-order[b-t76i6ecnxt] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    text-align: center;
    color: var(--aa-text-primary);
}

.product-count[b-t76i6ecnxt] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

/* Responsive Design - Product Groups-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-t76i6ecnxt] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}

/* /Src/Presentation/Areas/Admin/Pages/ProductOffers/Details.razor.rz.scp.css */
/* Product Offer Details Page - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* Badge Styles - Page-Specific */
.expired-badge[b-rbxumtbk4i] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background-color: var(--aa-danger-bg-light);
    color: var(--aa-danger);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.effective-badge[b-rbxumtbk4i] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background-color: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

/* Pricing Display - Page-Specific */
.price-value[b-rbxumtbk4i] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-primary);
}

.discount-value[b-rbxumtbk4i] {
    font-size: var(--aa-font-size-base);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-success);
}

.final-price-value[b-rbxumtbk4i] {
    font-size: var(--aa-font-size-xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-success);
}

.expired-indicator[b-rbxumtbk4i] {
    color: var(--aa-danger);
    font-weight: var(--aa-font-weight-semibold);
    margin-left: var(--aa-spacing-1);
    text-transform: uppercase;
    font-size: var(--aa-font-size-xs);
}

/* Status Badges - Page-Specific Variants */
.status-badge[b-rbxumtbk4i] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.status-badge.active[b-rbxumtbk4i] {
    background: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
}

.status-badge.inactive[b-rbxumtbk4i] {
    background: var(--aa-state-inactive-bg);
    color: var(--aa-state-inactive-text);
}

/* Loading and Error States */
.loading-state[b-rbxumtbk4i], .error-state[b-rbxumtbk4i] {
    text-align: center;
    padding: var(--aa-spacing-8) var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

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

.loading-spinner[b-rbxumtbk4i] {
    color: var(--aa-primary);
}

.error-icon[b-rbxumtbk4i] {
    color: var(--aa-danger);
}

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

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

.error-message[b-rbxumtbk4i] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-2) 0;
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.error-actions[b-rbxumtbk4i] {
    display: flex;
    gap: var(--aa-spacing-2);
    justify-content: center;
    margin-top: var(--aa-spacing-4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-area[b-rbxumtbk4i] {
        padding: var(--aa-spacing-2);
    }
}

@media (max-width: 480px) {
    .content-area[b-rbxumtbk4i] {
        padding: var(--aa-spacing-1);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ProductOffers/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
   NOTE: Global table styles (.admin-table, .admin-table-row) are in aa-admin.css
   NOTE: Global action buttons (.action-btn) are in aa-admin.css
   NOTE: Global status badges (.status-badge) are in aa-admin.css
   NOTE: Global loading/error/empty states are in aa-admin.css
   NOTE: Global pagination styles are in aa-admin.css
*/

/* ==========================================================================
   PRODUCT OFFERS-SPECIFIC STYLES ONLY
   ========================================================================== */

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

/* Product Offers Filter Grid - 5 filters (Search + OfferType + Group + Status + Clear) */
.filter-controls[b-gbkz8rmk4u] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   PRODUCT OFFER-SPECIFIC TABLE CELL STYLES
   ========================================================================== */

.offer-type[b-gbkz8rmk4u] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.product-group[b-gbkz8rmk4u] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

.price-info[b-gbkz8rmk4u] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
}

.price[b-gbkz8rmk4u] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
}

.final-price[b-gbkz8rmk4u] {
    font-size: var(--aa-font-size-xxs);
    color: #0066cc;
    font-weight: var(--aa-font-weight-semibold);
}

.discount-badge[b-gbkz8rmk4u] {
    display: inline-flex;
    align-items: center;
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xxs);
    font-weight: var(--aa-font-weight-bold);
    text-transform: uppercase;
    background: #d4edda;
    color: #155724;
}

.date-info[b-gbkz8rmk4u] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
}

.expired-badge[b-gbkz8rmk4u] {
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-danger);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

/* Responsive Design - Product Offers-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-gbkz8rmk4u] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}

/* /Src/Presentation/Areas/Admin/Pages/ProductOfferTypes/Details.razor.rz.scp.css */
/* Product Offer Type Details Page - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* Badge Styles - Page-Specific */
.quantity-badge[b-bf864nx5ji] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    padding: var(--aa-spacing-xs) var(--aa-spacing-sm);
    background: color-mix(in srgb, var(--aa-info) 15%, white);
    color: var(--aa-info);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.type-badge[b-bf864nx5ji] {
    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-semibold);
    text-transform: uppercase;
}

.type-badge.bundle[b-bf864nx5ji] {
    background: color-mix(in srgb, var(--aa-info) 15%, white);
    color: var(--aa-info);
}

.type-badge.free[b-bf864nx5ji] {
    background: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
}

/* Product Offer Count - Page-Specific */
.product-offer-count[b-bf864nx5ji] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-xs);
    color: var(--aa-primary);
    font-weight: var(--aa-font-weight-semibold);
    font-size: var(--aa-font-size-xs);
}

/* Status Badges - Page-Specific Variants */
.status-badge[b-bf864nx5ji] {
    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-semibold);
    text-transform: uppercase;
}

.status-badge.active[b-bf864nx5ji] {
    background: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
}

.status-badge.inactive[b-bf864nx5ji] {
    background: var(--aa-state-inactive-bg);
    color: var(--aa-state-inactive-text);
}

/* Loading and Error States */
.loading-state[b-bf864nx5ji], .error-state[b-bf864nx5ji] {
    text-align: center;
    padding: var(--aa-spacing-xl) var(--aa-spacing-lg);
    color: var(--aa-text-secondary);
}

.loading-spinner[b-bf864nx5ji], .error-icon[b-bf864nx5ji] {
    font-size: 3rem;
    margin-bottom: var(--aa-spacing-lg);
}

.loading-spinner[b-bf864nx5ji] {
    color: var(--aa-primary);
}

.error-icon[b-bf864nx5ji] {
    color: var(--aa-danger);
}

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

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

.error-message[b-bf864nx5ji] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    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);
    font-size: var(--aa-font-size-xs);
}

.error-actions[b-bf864nx5ji] {
    display: flex;
    gap: var(--aa-spacing-md);
    justify-content: center;
    margin-top: var(--aa-spacing-lg);
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-area[b-bf864nx5ji] {
        padding: var(--aa-spacing-2);
    }
}

@media (max-width: 480px) {
    .content-area[b-bf864nx5ji] {
        padding: var(--aa-spacing-1);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/ProductOfferTypes/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
   NOTE: Global table styles (.admin-table, .admin-table-row) are in aa-admin.css
   NOTE: Global action buttons (.action-btn) are in aa-admin.css
   NOTE: Global status badges (.status-badge) are in aa-admin.css
   NOTE: Global loading/error/empty states are in aa-admin.css
   NOTE: Global pagination styles are in aa-admin.css
*/

/* ==========================================================================
   PRODUCT OFFER TYPES-SPECIFIC STYLES ONLY
   ========================================================================== */

/* Full Width Layout Override */
.admin-page-container[b-2sdm7bt5j5] {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Product Offer Types Filter Grid - 3 filters (Search + Status + Clear) */
.filter-controls[b-2sdm7bt5j5] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   PRODUCT OFFER TYPE-SPECIFIC TABLE CELL STYLES
   ========================================================================== */

.offer-type-name[b-2sdm7bt5j5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.item-quantity[b-2sdm7bt5j5] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    text-align: center;
}

.type-flags[b-2sdm7bt5j5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aa-spacing-1);
}

.flag-badge[b-2sdm7bt5j5] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-0);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-xs);
    font-size: var(--aa-font-size-xxs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.flag-badge.bundle[b-2sdm7bt5j5] {
    background: #e7f3ff;
    color: #0066cc;
}

.flag-badge.free[b-2sdm7bt5j5] {
    background: #d4edda;
    color: #155724;
}

.flag-badge.single[b-2sdm7bt5j5] {
    background: var(--aa-light-gray);
    color: var(--aa-text-secondary);
}

.display-order[b-2sdm7bt5j5] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    text-align: center;
}

.offer-count[b-2sdm7bt5j5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

/* Responsive Design - Product Offer Types-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-2sdm7bt5j5] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}

/* /Src/Presentation/Areas/Admin/Pages/Products/Details.razor.rz.scp.css */
/* Product Details Page - Compact Admin Design */
/* Following Admin Section Standards with CSS Variables */

/* NOTE: Breadcrumb styles (.admin-breadcrumb-section, .admin-breadcrumb, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin header styles (.admin-header, .admin-header-icon, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* NOTE: Admin detail card styles (.admin-detail-grid, .admin-detail-card, etc.) 
   are now in global aa-admin.css for reuse across all admin detail pages */

/* Badge Styles - Page-Specific */
.legacy-badge[b-yhy5m50oi0] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background-color: var(--aa-light-gray);
    color: var(--aa-text-secondary);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
}

.featured-badge[b-yhy5m50oi0] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    background-color: var(--aa-accent-light);
    color: var(--aa-text-primary);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

/* Product-Specific Helper Classes */
.long-text[b-yhy5m50oi0] {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: var(--aa-line-height-relaxed);
}

.price-value[b-yhy5m50oi0] {
    color: var(--aa-success);
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-bold);
}

.detail-info-box[b-yhy5m50oi0] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-2);
    background-color: color-mix(in srgb, var(--aa-info) 10%, white);
    border-radius: var(--aa-border-radius-sm);
    border-left: 3px solid var(--aa-info);
    color: color-mix(in srgb, var(--aa-info) 80%, black);
    font-size: var(--aa-font-size-xs);
    margin-top: var(--aa-spacing-1);
}

/* Entity Links */
.entity-link[b-yhy5m50oi0] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-primary);
    text-decoration: none;
    transition: color var(--aa-transition-base);
    font-size: var(--aa-font-size-xs);
}

.entity-link:hover[b-yhy5m50oi0] {
    color: var(--aa-primary-dark);
    text-decoration: underline;
}

/* Status Badges - Page-Specific Variants */
.status-badge[b-yhy5m50oi0] {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    padding: var(--aa-spacing-0) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    text-transform: uppercase;
}

.status-badge.active[b-yhy5m50oi0] {
    background: var(--aa-state-active-bg);
    color: var(--aa-state-active-text);
}

.status-badge.inactive[b-yhy5m50oi0] {
    background: var(--aa-state-inactive-bg);
    color: var(--aa-state-inactive-text);
}

.status-badge.featured[b-yhy5m50oi0] {
    background-color: var(--aa-accent-light);
    color: var(--aa-text-primary);
}

.status-badge.normal[b-yhy5m50oi0] {
    background-color: var(--aa-light-gray);
    color: var(--aa-text-secondary);
}

/* Action Section */
.action-section[b-yhy5m50oi0] {
    background: var(--aa-white);
    border-radius: var(--aa-border-radius-md);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    box-shadow: var(--aa-shadow-sm);
    border: 1px solid var(--aa-border-light);
}

.action-buttons[b-yhy5m50oi0] {
    display: flex;
    gap: var(--aa-spacing-2);
    justify-content: flex-end;
}

/* Loading and Error States */
.loading-state[b-yhy5m50oi0], .error-state[b-yhy5m50oi0] {
    text-align: center;
    padding: var(--aa-spacing-8) var(--aa-spacing-4);
    color: var(--aa-text-secondary);
}

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

.loading-spinner[b-yhy5m50oi0] {
    color: var(--aa-primary);
}

.error-icon[b-yhy5m50oi0] {
    color: var(--aa-danger);
}

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

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

.error-message[b-yhy5m50oi0] {
    color: var(--aa-danger);
    background: var(--aa-danger-bg-light);
    padding: var(--aa-spacing-2);
    border-radius: var(--aa-border-radius-sm);
    margin: var(--aa-spacing-2) 0;
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.error-actions[b-yhy5m50oi0] {
    display: flex;
    gap: var(--aa-spacing-2);
    justify-content: center;
    margin-top: var(--aa-spacing-4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons[b-yhy5m50oi0] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .content-area[b-yhy5m50oi0] {
        padding: var(--aa-spacing-1);
    }
}
/* /Src/Presentation/Areas/Admin/Pages/Products/Index.razor.rz.scp.css */
/* 
   NOTE: .filter-controls is PAGE-SPECIFIC (each page has different number of filters)
*/
/* ==========================================================================
   PRODUCTS-SPECIFIC STYLES ONLY
   ========================================================================== */
/* Products-Specific Filter Grid - 5 filters (Search + Category + Group + Status + Clear) */
.filter-controls[b-hb5p9rvin5] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--aa-spacing-2);
    align-items: end;
}

/* ==========================================================================
   PRODUCT-SPECIFIC TABLE CELL STYLES
   NOTE: Use global .admin-table and .admin-table-row classes from aa-admin.css
   Only cell content styling is Products-specific
   ========================================================================== */

.product-code[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
}

.featured-icon[b-hb5p9rvin5] {
    color: var(--aa-accent-gold);
    font-size: var(--aa-font-size-xs);
}

.legacy-id[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-family: var(--aa-font-family-mono);
    font-size: var(--aa-font-size-xs);
    color: var(--aa-text-secondary);
}

.product-info[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

.product-thumbnail[b-hb5p9rvin5] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid var(--aa-border-medium);
}

.product-thumbnail-placeholder[b-hb5p9rvin5] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aa-bg-light);
    border-radius: var(--aa-border-radius-sm);
    border: 1px solid var(--aa-border-medium);
    color: var(--aa-secondary);
    font-size: var(--aa-font-size-xs);
}

.product-details[b-hb5p9rvin5] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
}

.product-description[b-hb5p9rvin5] {
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    font-size: var(--aa-font-size-xs);
    line-height: var(--aa-line-height-tight);
}

.design-code[b-hb5p9rvin5] {
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-secondary);
    font-family: var(--aa-font-family-mono);
}

.category-info[b-hb5p9rvin5], .group-info[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

.price-info[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-success);
    font-size: var(--aa-font-size-xs);
}

/* Image Status Cell */
.image-status-cell[b-hb5p9rvin5] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
}

.image-status-complete[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-success-text-dark);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.image-status-complete svg[b-hb5p9rvin5] {
    color: var(--aa-success);
    font-size: var(--aa-font-size-sm);
}

.image-status-missing[b-hb5p9rvin5] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
}

.image-status-missing svg[b-hb5p9rvin5] {
    color: var(--aa-warning);
    font-size: var(--aa-font-size-sm);
    margin-right: var(--aa-spacing-1);
}

.missing-text[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-warning-text-dark);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.missing-types[b-hb5p9rvin5] {
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-secondary);
    font-style: italic;
    margin-left: var(--aa-spacing-4);
}

/* Image Status Missing Button - Interactive */
.image-status-missing-btn[b-hb5p9rvin5] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: all var(--aa-transition-base) ease;
    border-radius: var(--aa-border-radius-sm);
}

.image-status-missing-btn:hover[b-hb5p9rvin5] {
    background: var(--aa-warning-bg-light);
    padding: var(--aa-spacing-1);
    margin: calc(-1 * var(--aa-spacing-1));
}

.image-status-missing-btn:hover .warning-icon[b-hb5p9rvin5] {
    transform: scale(1.1);
    animation: pulse-b-hb5p9rvin5 1s ease-in-out infinite;
}

.image-status-missing-btn .warning-icon[b-hb5p9rvin5] {
    color: var(--aa-warning);
    font-size: var(--aa-font-size-sm);
    transition: transform var(--aa-transition-base) ease;
}

.image-status-missing-btn .missing-info[b-hb5p9rvin5] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-0);
}

.image-status-missing-btn .missing-text[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-warning-text-dark);
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
}

.image-status-missing-btn .missing-types[b-hb5p9rvin5] {
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-secondary);
    font-style: italic;
}

@keyframes pulse-b-hb5p9rvin5 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.image-status-unknown[b-hb5p9rvin5] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
}

.image-status-unknown svg[b-hb5p9rvin5] {
    color: var(--aa-text-light);
    font-size: var(--aa-font-size-sm);
}

/* Responsive Design - Products-specific */
@media (max-width: 768px) {
    /* Stack filters vertically on mobile */
    .filter-controls[b-hb5p9rvin5] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }
}

/* /Src/Presentation/Areas/Admin/Pages/Products/Management.razor.rz.scp.css */
/* ============================================================================
   PRODUCT MANAGEMENT DASHBOARD - PAGE-SPECIFIC STYLES
   ============================================================================
   Product-specific table columns and font statistics styling
   Follows CODING_STANDARDS.md - Uses CSS variables from aa-variables.css
   ============================================================================ */

/* Product Code Column */
.code-col[b-sfoo5aotzn] {
    width: 70px;
}

.code-cell[b-sfoo5aotzn] {
    font-family: var(--aa-font-family-mono);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

/* Category Column */
.category-col[b-sfoo5aotzn] {
    min-width: 90px;
}

.category-cell[b-sfoo5aotzn] {
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xxs);
}

/* Product Group Column */
.group-name-col[b-sfoo5aotzn] {
    min-width: 100px;
}

.group-name-cell[b-sfoo5aotzn] {
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

/* Category Name Column */
.category-name-col[b-sfoo5aotzn] {
    min-width: 120px;
}

.category-name-cell[b-sfoo5aotzn] {
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
}

/* Font Usage Statistics */
.font-stats-compact[b-sfoo5aotzn] {
    padding: var(--aa-spacing-2);
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-1);
}

.font-stat-row[b-sfoo5aotzn] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--aa-spacing-xs) var(--aa-spacing-2);
    padding: var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-sm);
    background: var(--aa-light);
    transition: all var(--aa-transition-base) ease;
}

.font-stat-row:hover[b-sfoo5aotzn] {
    background: var(--aa-white);
    box-shadow: var(--aa-shadow-sm);
}

.font-name[b-sfoo5aotzn] {
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    grid-column: 1;
    grid-row: 1;
}

.font-usage[b-sfoo5aotzn] {
    font-size: var(--aa-font-size-xxs);
    color: var(--aa-text-secondary);
    text-align: right;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: var(--aa-spacing-xs);
    align-items: center;
}

.usage-count[b-sfoo5aotzn] {
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-family-mono);
}

.usage-percentage[b-sfoo5aotzn] {
    color: var(--aa-text-secondary);
}

.font-bar[b-sfoo5aotzn] {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 3px;
    background: var(--aa-medium-gray);
    border-radius: var(--aa-border-radius-sm);
    overflow: hidden;
}

.font-fill[b-sfoo5aotzn] {
    height: 100%;
    background: linear-gradient(90deg, #b8a9d9, #d4c5e8);
    transition: width var(--aa-transition-base) ease;
}
/* /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-text-primary);
    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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
    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-text-primary);
}

.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-text-primary);
    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-text-primary);
    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-text-primary);
}

/* 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-text-primary);
}

/* 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;
}

/* Note: Action button styles (.action-btn, .action-btn.edit, .action-btn.lock, etc.) 
   are now in global aa-admin.css for consistency across all admin pages */

/* 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-text-primary);
    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-text-primary);
}

.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/Public/Pages/Error.razor.rz.scp.css */
/* Error Page Styles */

.aa-error-container[b-bywl8hg9j3] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--aa-spacing-8) 0;
    text-align: center;
}

.aa-error-card[b-bywl8hg9j3] {
    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-bywl8hg9j3] {
    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-bywl8hg9j3] {
    font-size: var(--aa-font-size-4xl);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    margin-bottom: var(--aa-spacing-3);
    line-height: var(--aa-line-height-tight);
}

.aa-error-subtitle[b-bywl8hg9j3] {
    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-bywl8hg9j3] {
    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-bywl8hg9j3] {
    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-bywl8hg9j3] {
    margin-bottom: var(--aa-spacing-2);
    color: var(--aa-text-primary);
}

.aa-error-code[b-bywl8hg9j3] {
    background-color: var(--aa-text-primary);
    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-bywl8hg9j3] {
    display: flex;
    gap: var(--aa-spacing-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--aa-spacing-6);
}

.aa-error-help[b-bywl8hg9j3] {
    margin-top: var(--aa-spacing-8);
}

.aa-help-card[b-bywl8hg9j3] {
    padding: var(--aa-spacing-6);
    text-align: left;
    transition: var(--aa-transition-base);
}

.aa-help-card:hover[b-bywl8hg9j3] {
    transform: translateY(-4px);
    box-shadow: var(--aa-shadow-lg);
}

.aa-help-icon[b-bywl8hg9j3] {
    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-bywl8hg9j3] {
    font-size: var(--aa-font-size-lg);
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-text-primary);
    margin-bottom: var(--aa-spacing-3);
}

.aa-help-description[b-bywl8hg9j3] {
    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-bywl8hg9j3] {
        padding: var(--aa-spacing-4) 0;
    }

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

    .aa-error-title[b-bywl8hg9j3] {
        font-size: var(--aa-font-size-2xl);
    }

    .aa-error-subtitle[b-bywl8hg9j3] {
        font-size: var(--aa-font-size-lg);
    }

    .aa-error-actions[b-bywl8hg9j3] {
        flex-direction: column;
        align-items: center;
    }

    .aa-error-actions .aa-btn[b-bywl8hg9j3] {
        width: 100%;
        max-width: 300px;
    }

    .aa-grid-cols-2[b-bywl8hg9j3] {
        grid-template-columns: 1fr;
    }
}
/* /Src/Presentation/Areas/Public/Pages/Home.razor.rz.scp.css */
/* WrittenExpressions - Home Page Styles
 * ONLY truly home-specific styles - uses global components from aa-public.css
 * 
 * Global Components Used:
 * - .public-hero (hero section from aa-public.css)
 * - .aa-section (section spacing from aa-pages.css)
 * - .aa-container (container from aa-components.css)
 * 
 * Page-Specific Overrides/Extensions ONLY Below
 */

/* =============================================================================
   HOME-SPECIFIC HERO CUSTOMIZATIONS
   ============================================================================= */

/* Extend .public-hero with home-specific gradient and pattern */
.home-hero-extended[b-o7d1sswpud] {
  background: linear-gradient(135deg, var(--aa-primary) 0%, var(--aa-primary-light) 50%, var(--aa-accent) 100%);
  padding: var(--aa-spacing-20) 0;
}

/* Home-specific decorative heart pattern overlay */
.home-hero-hearts[b-o7d1sswpud]::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 description (extra text not in standard public-hero) */
.home-hero-description[b-o7d1sswpud] {
  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 action buttons container */
.home-hero-actions[b-o7d1sswpud] {
  display: flex;
  gap: var(--aa-spacing-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--aa-spacing-8);
}

/* Home hero stats (unique to home page) */
.home-hero-stats[b-o7d1sswpud] {
  display: flex;
  justify-content: center;
  gap: var(--aa-spacing-8);
  flex-wrap: wrap;
  margin-top: var(--aa-spacing-10);
}

.home-hero-stat[b-o7d1sswpud] {
  text-align: center;
}

.home-hero-stat-number[b-o7d1sswpud] {
  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-o7d1sswpud] {
  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-SPECIFIC FEATURE CARD DECORATIONS
   ============================================================================= */

/* Top gradient bar on feature cards (home-specific decoration) */
.home-feature-bar[b-o7d1sswpud]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--aa-primary), var(--aa-accent));
}

/* Fancy gradient border effect on feature icons (home-specific) */
.home-feature-icon-border[b-o7d1sswpud]::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-SPECIFIC TRUST SECTION
   ============================================================================= */

/* Trust badge (home-specific component) */
.home-trust-badge[b-o7d1sswpud] {
  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-SPECIFIC HOW IT WORKS - STEP CONNECTORS
   ============================================================================= */

/* Decorative arrow connector between steps (home-specific) */
.home-step-connector[b-o7d1sswpud]::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-connector:last-child[b-o7d1sswpud]::after {
  display: none;
}

/* =============================================================================
   HOME-SPECIFIC CTA SECTION - ANIMATED BACKGROUND
   ============================================================================= */

/* Pulsing glow effect (home-specific decoration) */
.home-cta-glow[b-o7d1sswpud]::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-o7d1sswpud 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes home-cta-pulse-b-o7d1sswpud {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* White button variant for CTA section (home-specific) */
.home-cta .aa-btn-white[b-o7d1sswpud] {
  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-o7d1sswpud] {
  background-color: var(--aa-bg-primary);
  color: var(--aa-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   RESPONSIVE DESIGN - HOME-SPECIFIC ADJUSTMENTS
   ============================================================================= */

@media (max-width: 1024px) {
  .home-step-connector[b-o7d1sswpud]::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-hero-extended[b-o7d1sswpud] {
    padding: var(--aa-spacing-16) 0;
  }
  
  .home-hero-stats[b-o7d1sswpud] {
    gap: var(--aa-spacing-4);
  }
}

@media (max-width: 480px) {
  .home-hero-extended[b-o7d1sswpud] {
    padding: var(--aa-spacing-12) 0;
  }
  
  .home-hero-stats[b-o7d1sswpud] {
    gap: var(--aa-spacing-3);
  }
  
  .home-hero-stat-number[b-o7d1sswpud] {
    font-size: var(--aa-font-size-xl);
  }
}
/* /Src/Presentation/Areas/Public/Pages/Products/Index.razor.rz.scp.css */
/* Products Page - Sidebar Layout with Category Filters */

/* Main Layout: Sidebar + Products Grid */
.products-layout[b-1lizdmt1ky] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--aa-spacing-6);
    margin-top: var(--aa-spacing-4);
}

/* Category Sidebar */
.category-sidebar[b-1lizdmt1ky] {
    background: var(--aa-white);
    border: 1px solid var(--aa-light-gray);
    border-radius: var(--aa-border-radius-lg);
    padding: var(--aa-spacing-2);
    box-shadow: var(--aa-shadow-sm);
    position: sticky;
    top: var(--aa-spacing-6);
    align-self: start;
    overflow-y: auto;
}

.sidebar-header[b-1lizdmt1ky] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
    margin-bottom: var(--aa-spacing-3);
}

.sidebar-title[b-1lizdmt1ky] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-bold);
    color: var(--aa-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-1);
}

.sidebar-title i[b-1lizdmt1ky] {
    color: var(--aa-primary);
    font-size: var(--aa-font-size-sm);
}

.clear-filters-btn[b-1lizdmt1ky] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-1);
    background: var(--aa-danger);
    color: var(--aa-white);
    border: none;
    font-size: var(--aa-font-size-xs);
    font-weight: var(--aa-font-weight-semibold);
    cursor: pointer;
    padding: var(--aa-spacing-1) var(--aa-spacing-1);
    border-radius: var(--aa-border-radius-md);
    transition: var(--aa-transition-base);
    width: 100%;
}

    .clear-filters-btn:hover:not(:disabled)[b-1lizdmt1ky] {
        background: var(--aa-danger-bg-dark);
        transform: translateY(-1px);
        box-shadow: var(--aa-shadow-md);
    }

    .clear-filters-btn:disabled[b-1lizdmt1ky] {
        background: var(--aa-danger-bg-light);
        color: var(--aa-danger-text-dark);
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Category Filter List */
.category-filter-list[b-1lizdmt1ky] {
    display: flex;
    flex-direction: column;
    gap: var(--aa-spacing-1);
}

.category-filter-item[b-1lizdmt1ky] {
    display: 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);
    cursor: pointer;
    transition: var(--aa-transition-base);
    user-select: none;
}

.category-filter-item:hover[b-1lizdmt1ky] {
    background: var(--aa-light);
}

.category-filter-item:has(.category-checkbox:checked)[b-1lizdmt1ky] {
    background: var(--aa-light);
    border-left: 3px solid var(--aa-primary);
    padding-left: calc(var(--aa-spacing-2) - 3px);
}

.category-checkbox[b-1lizdmt1ky] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--aa-primary);
    flex-shrink: 0;
}

.category-name[b-1lizdmt1ky] {
    font-size: var(--aa-font-size-sm);
    font-weight: var(--aa-font-weight-medium);
    color: var(--aa-text-primary);
    flex: 1;
}

/* Products Content Area */
.products-content[b-1lizdmt1ky] {
    min-width: 0; /* Prevents overflow issues */
}

/* Full-width layout when no sidebar */
.products-layout:has(.category-sidebar:empty)[b-1lizdmt1ky],
.products-layout:not(:has(.category-sidebar))[b-1lizdmt1ky] {
    grid-template-columns: 1fr;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .products-layout[b-1lizdmt1ky] {
        grid-template-columns: 240px 1fr;
        gap: var(--aa-spacing-4);
    }

    .category-sidebar[b-1lizdmt1ky] {
        padding: var(--aa-spacing-3);
    }
}

@media (max-width: 768px) {
    .products-layout[b-1lizdmt1ky] {
        grid-template-columns: 1fr;
        gap: var(--aa-spacing-4);
    }

    .category-sidebar[b-1lizdmt1ky] {
        position: static;
        max-height: none;
        margin-bottom: var(--aa-spacing-4);
    }
}

@media (max-width: 480px) {
    .category-sidebar[b-1lizdmt1ky] {
        padding: var(--aa-spacing-2);
    }

    .sidebar-title[b-1lizdmt1ky] {
        font-size: var(--aa-font-size-xs);
    }

    .category-filter-item[b-1lizdmt1ky] {
        padding: var(--aa-spacing-1);
    }

    .category-name[b-1lizdmt1ky] {
        font-size: var(--aa-font-size-xs);
    }

    .clear-filters-btn[b-1lizdmt1ky] {
        font-size: var(--aa-font-size-xs);
        padding: var(--aa-spacing-1) var(--aa-spacing-2);
    }
}
/* /Src/Presentation/Shared/Components/SearchableDropdown.razor.rz.scp.css */
/* ==========================================================================
   SEARCHABLE DROPDOWN COMPONENT STYLES
   Following Admin Section Standards from CODING_STANDARDS.md
   ALL styles use CSS variables from aa-variables.css
   ========================================================================== */

/* Searchable Dropdown Container */
.searchable-dropdown[b-9s1u99i0vg] {
    position: relative;
    width: 100%;
}

/* Dropdown Container Wrapper - contains results + info footer */
.dropdown-container[b-9s1u99i0vg] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: var(--aa-spacing-1);
    background: var(--aa-white);
    border: 2px solid #b8a9d9;
    border-radius: var(--aa-border-radius-sm);
    box-shadow: 0 4px 12px rgba(184, 169, 217, 0.3);
    overflow: hidden;
}

/* Dropdown Results Container - Scrollable area only */
.dropdown-results[b-9s1u99i0vg] {
    max-height: 240px; /* Exactly 5 items at 48px each */
    overflow-y: auto;
    background: var(--aa-white);
    scroll-behavior: smooth;
    scroll-padding: 48px 0;
}

/* Dropdown Item */
.dropdown-item[b-9s1u99i0vg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    cursor: pointer;
    border-bottom: 1px solid var(--aa-light-gray);
    transition: all var(--aa-transition-fast) ease;
    min-height: 48px;
    scroll-margin-top: 4px;
    scroll-margin-bottom: 4px;
}

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

.dropdown-item:hover[b-9s1u99i0vg] {
    background: #fff9c4;
    border-left: 3px solid #b8a9d9;
}

.dropdown-item.highlighted[b-9s1u99i0vg] {
    background: linear-gradient(135deg, #e0d4f7 0%, #ede7f6 100%);
    border-left: 4px solid #7c3aed;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.2);
    scroll-margin-block: 8px;
}

.dropdown-item.selected[b-9s1u99i0vg] {
    background: linear-gradient(135deg, #f0e6ff 0%, #f5f0ff 100%);
    border-left: 4px solid #9b87c4;
}

/* Dropdown No Results */
.dropdown-no-results[b-9s1u99i0vg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-4);
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-sm);
    font-style: italic;
}

/* Dropdown More Info - Fixed outside scroll area */
.dropdown-more-info[b-9s1u99i0vg] {
    padding: var(--aa-spacing-2);
    text-align: center;
    color: var(--aa-text-secondary);
    font-size: var(--aa-font-size-xs);
    font-style: italic;
    background: var(--aa-light);
    border-top: 1px solid var(--aa-light-gray);
    position: relative;
}

/* Selected Item Display Badge */
.selected-item-display[b-9s1u99i0vg] {
    margin-top: var(--aa-spacing-2);
}

.selected-item-badge[b-9s1u99i0vg] {
    display: flex;
    align-items: center;
    gap: var(--aa-spacing-2);
    padding: var(--aa-spacing-2) var(--aa-spacing-3);
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #6ee7b7;
    border-radius: var(--aa-border-radius-sm);
    color: #065f46;
    font-size: var(--aa-font-size-sm);
}

.selected-item-badge svg[b-9s1u99i0vg] {
    color: #059669;
    flex-shrink: 0;
}

.clear-selection-btn[b-9s1u99i0vg] {
    background: transparent;
    border: none;
    color: #059669;
    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-fast) ease;
    margin-left: auto;
}

.clear-selection-btn:hover[b-9s1u99i0vg] {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
    transform: scale(1.1);
}
/* /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-text-primary);
    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);
}

/* Desktop Navigation Dropdown */
.aa-nav-dropdown[b-kdo3ocetmt] {
  position: relative;
}

.aa-nav-dropdown-toggle[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  color: #2d1b49;
  text-decoration: none;
  font-weight: var(--aa-font-weight-semibold);
  border-radius: var(--aa-border-radius-md);
  transition: var(--aa-transition-base);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(184, 169, 217, 0.2);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
}

.aa-nav-dropdown-toggle:hover[b-kdo3ocetmt] {
  background: #fff9c4;
  color: #2d1b49;
  border-color: #f0e68c;
  text-decoration: none;
}

.aa-nav-dropdown-toggle .dropdown-icon[b-kdo3ocetmt] {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  margin-left: var(--aa-spacing-1);
}

.aa-nav-dropdown-toggle[aria-expanded="true"] .dropdown-icon[b-kdo3ocetmt] {
  transform: rotate(180deg);
}

.aa-nav-dropdown-menu[b-kdo3ocetmt] {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  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);
  margin-top: var(--aa-spacing-2);
  animation: dropdownFadeIn-b-kdo3ocetmt 0.2s ease;
  display: flex;
  flex-direction: column;
}

@keyframes dropdownFadeIn-b-kdo3ocetmt {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aa-nav-dropdown-item[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
  width: 100%;
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  color: var(--aa-dark-gray);
  text-decoration: none;
  border-radius: var(--aa-border-radius-sm);
  transition: var(--aa-transition-base);
  font-size: var(--aa-font-size-sm);
  font-weight: var(--aa-font-weight-medium);
  white-space: nowrap;
}

.aa-nav-dropdown-item:hover[b-kdo3ocetmt] {
  background-color: var(--aa-light);
  color: var(--aa-primary);
  text-decoration: none;
}

.aa-nav-dropdown-divider[b-kdo3ocetmt] {
  height: 1px;
  background-color: var(--aa-light-gray);
  margin: var(--aa-spacing-2) 0;
}

/* Mobile Submenu */
.aa-mobile-submenu[b-kdo3ocetmt] {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: var(--aa-spacing-4);
  background-color: rgba(0, 0, 0, 0.02);
  border-left: 2px solid var(--aa-primary);
  margin-top: var(--aa-spacing-1);
  margin-bottom: var(--aa-spacing-1);
  display: flex;
  flex-direction: column;
}

.aa-mobile-submenu .aa-mobile-nav-item[b-kdo3ocetmt] {
  width: 100%;
}

.aa-mobile-submenu .submenu-item[b-kdo3ocetmt] {
  font-size: var(--aa-font-size-sm);
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
}

.aa-mobile-dropdown-toggle[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  color: #2d1b49;
  text-decoration: none;
  font-weight: var(--aa-font-weight-semibold);
  border-radius: var(--aa-border-radius-md);
  transition: var(--aa-transition-base);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(184, 169, 217, 0.2);
  margin-bottom: var(--aa-spacing-2);
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  justify-content: flex-start;
}

.aa-mobile-dropdown-toggle:hover[b-kdo3ocetmt] {
  background: #fff9c4;
  color: #2d1b49;
  border-color: #f0e68c;
  text-decoration: none;
}

.aa-mobile-dropdown-toggle .dropdown-icon[b-kdo3ocetmt] {
  margin-left: auto;
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

/* User Menu Dropdown */
.aa-user-dropdown[b-kdo3ocetmt] {
  position: relative;
}

/* User Menu Toggle - Match nav link style */
.aa-user-menu-toggle[b-kdo3ocetmt] {
  display: flex;
  align-items: center;
  gap: var(--aa-spacing-2);
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  color: var(--aa-dark-gray);
  background: none;
  border: none;
  border-radius: var(--aa-border-radius-md);
  cursor: pointer;
  transition: var(--aa-transition-base);
  font-weight: var(--aa-font-weight-medium);
}

.aa-user-menu-toggle:hover[b-kdo3ocetmt] {
  color: var(--aa-primary);
  background-color: var(--aa-light);
}

.aa-user-avatar[b-kdo3ocetmt] {
  width: 2rem;
  height: 2rem;
  border-radius: var(--aa-border-radius-full);
  background-color: var(--aa-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aa-white);
  font-weight: var(--aa-font-weight-semibold);
  font-size: var(--aa-font-size-sm);
}

.aa-user-name[b-kdo3ocetmt] {
  font-weight: var(--aa-font-weight-medium);
  font-size: var(--aa-font-size-sm);
  color: inherit;
  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);
  color: inherit;
}

.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);
  margin-top: var(--aa-spacing-2);
}

.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-2);
  width: 100%;
  padding: var(--aa-spacing-2) var(--aa-spacing-3);
  color: var(--aa-dark-gray);
  text-decoration: none;
  border-radius: var(--aa-border-radius-sm);
  transition: var(--aa-transition-base);
  font-size: var(--aa-font-size-sm);
  font-weight: var(--aa-font-weight-medium);
  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;
}

.aa-logout-btn:hover[b-kdo3ocetmt] {
  color: var(--aa-danger);
}

/* 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],
.aa-nav-dropdown-toggle:focus[b-kdo3ocetmt],
.aa-mobile-dropdown-toggle: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;
  }
  
  .aa-nav-dropdown-menu[b-kdo3ocetmt] {
    right: auto;
    left: 0;
  }
}

@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);
  }
}