/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* ========================================
   🎨 Admin Layout - Simplified (No Sidebar)
   ======================================== */

/* � Main Content */
.admin-main-content[b-sd7oofln1b] {
    min-height: calc(100vh - 160px);
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 2rem 0;
}

.admin-container[b-sd7oofln1b] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* 🎯 Scrollbar Styling */
.admin-main-content[b-sd7oofln1b]::-webkit-scrollbar {
    width: 10px;
}

.admin-main-content[b-sd7oofln1b]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.admin-main-content[b-sd7oofln1b]::-webkit-scrollbar-thumb {
    background: #003d7a;
    border-radius: 5px;
}

.admin-main-content[b-sd7oofln1b]::-webkit-scrollbar-thumb:hover {
    background: #d4af37;
}

/* 📱 Responsive Design */
@media (max-width: 1200px) {
    .admin-container[b-sd7oofln1b] {
        max-width: 100%;
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .admin-main-content[b-sd7oofln1b] {
        padding: 1.5rem 0;
    }

    .admin-container[b-sd7oofln1b] {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .admin-main-content[b-sd7oofln1b] {
        padding: 1rem 0;
        min-height: calc(100vh - 140px);
    }

    .admin-container[b-sd7oofln1b] {
        padding: 0 0.75rem;
    }
}

/* ✨ Animations */
@keyframes fadeIn-b-sd7oofln1b {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-container > *[b-sd7oofln1b] {
    animation: fadeIn-b-sd7oofln1b 0.4s ease-out;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ========================================
   🎨 Main Layout - User Interface
   ======================================== */

/* 📄 Main Content */
.hb-main-content[b-1v85bo49ya] {
    min-height: calc(100vh - 160px);
}

/* 🎯 Error UI */
#blazor-error-ui[b-1v85bo49ya] {
    color-scheme: light only;
    background: #ffe5e5;
    border-top: 3px solid #dc3545;
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(220, 53, 69, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    color: #721c24;
}

#blazor-error-ui .dismiss[b-1v85bo49ya] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: #dc3545;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

#blazor-error-ui .dismiss:hover[b-1v85bo49ya] {
    background: #c82333;
    transform: translateY(-50%) scale(1.1);
}

#blazor-error-ui .reload[b-1v85bo49ya] {
    color: #003d7a;
    font-weight: 600;
    text-decoration: underline;
    margin-right: 1rem;
    transition: color 0.3s ease;
}

#blazor-error-ui .reload:hover[b-1v85bo49ya] {
    color: #d4af37;
}

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xcv1z56cyw],
.components-reconnect-repeated-attempt-visible[b-xcv1z56cyw],
.components-reconnect-failed-visible[b-xcv1z56cyw],
.components-pause-visible[b-xcv1z56cyw],
.components-resume-failed-visible[b-xcv1z56cyw],
.components-rejoining-animation[b-xcv1z56cyw] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AuditLogs.razor.rz.scp.css */
/* ====================================
   سجل المراجعة (Audit Logs)
   ==================================== */

/* إضافة مسافات للصفحة */
.admin-page[b-ins7gmyaqa] {
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
}

.admin-page .container-fluid[b-ins7gmyaqa] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* عنوان الصفحة */
.page-title-section[b-ins7gmyaqa] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.section-title[b-ins7gmyaqa] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i[b-ins7gmyaqa] {
    font-size: 2rem;
    color: #d4af37;
}

.section-subtitle[b-ins7gmyaqa] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
}

/* بطاقات الإحصائيات */
.stats-grid[b-ins7gmyaqa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-ins7gmyaqa] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-ins7gmyaqa] {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon[b-ins7gmyaqa] {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.stat-success[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.stat-icon.stat-danger[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.stat-icon.stat-primary[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.stat-content[b-ins7gmyaqa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-ins7gmyaqa] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.stat-value[b-ins7gmyaqa] {
    font-size: 2rem;
    font-weight: 700;
    color: #003d7a;
    line-height: 1;
}

/* الكروت الرئيسية */
.content-card[b-ins7gmyaqa] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

/* قسم الفلاتر */
.filters-section[b-ins7gmyaqa] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.filters-title[b-ins7gmyaqa] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-title i[b-ins7gmyaqa] {
    color: #d4af37;
}

.filters-grid[b-ins7gmyaqa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-item[b-ins7gmyaqa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-actions[b-ins7gmyaqa] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-actions .btn[b-ins7gmyaqa] {
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.filter-actions .btn:hover:not(:disabled)[b-ins7gmyaqa] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-actions .btn i[b-ins7gmyaqa] {
    font-size: 1rem;
}

.form-label[b-ins7gmyaqa] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.form-label i[b-ins7gmyaqa] {
    color: #6c757d;
    font-size: 0.9rem;
}

/* تنسيق حقول الإدخال والاختيار */
.form-select[b-ins7gmyaqa],
.form-control[b-ins7gmyaqa] {
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
    direction: rtl;
    text-align: right;
}

.form-select:focus[b-ins7gmyaqa],
.form-control:focus[b-ins7gmyaqa] {
    border-color: #003d7a;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.15);
    outline: none;
}

.form-select:hover[b-ins7gmyaqa],
.form-control:hover[b-ins7gmyaqa] {
    border-color: #003d7a;
}

/* إزالة السهم الافتراضي وإضافة سهم مخصص */
.form-select[b-ins7gmyaqa] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23003d7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 16px 12px;
    padding-left: 2.5rem;
}

.form-select[b-ins7gmyaqa]::-ms-expand {
    display: none;
}


/* الجدول */
.table-responsive[b-ins7gmyaqa] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.desktop-table[b-ins7gmyaqa] {
    display: block;
}

.mobile-cards[b-ins7gmyaqa] {
    display: none;
}

.table[b-ins7gmyaqa] {
    min-width: 1200px;
    table-layout: fixed;
    width: 100%;
}

.table thead th[b-ins7gmyaqa] {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    padding: 1rem 0.75rem;
    vertical-align: middle;
    text-align: center;
}

.table tbody td[b-ins7gmyaqa] {
    vertical-align: middle;
    padding: 1rem 0.75rem;
    text-align: center;
}

/* تحديد عرض الأعمدة */
.table thead th:nth-child(1)[b-ins7gmyaqa], /* # */
.table tbody td:nth-child(1)[b-ins7gmyaqa] {
    width: 70px;
    text-align: center;
}

.table thead th:nth-child(2)[b-ins7gmyaqa], /* التاريخ والوقت */
.table tbody td:nth-child(2)[b-ins7gmyaqa] {
    width: 140px;
    text-align: center;
}

.table thead th:nth-child(3)[b-ins7gmyaqa], /* المستخدم */
.table tbody td:nth-child(3)[b-ins7gmyaqa] {
    width: 200px;
    text-align: right;
}

.table thead th:nth-child(4)[b-ins7gmyaqa], /* العملية */
.table tbody td:nth-child(4)[b-ins7gmyaqa] {
    width: 150px;
    text-align: center;
}

.table thead th:nth-child(5)[b-ins7gmyaqa], /* الوصف */
.table tbody td:nth-child(5)[b-ins7gmyaqa] {
    width: auto;
    min-width: 250px;
    text-align: right;
}

.table thead th:nth-child(6)[b-ins7gmyaqa], /* عنوان IP */
.table tbody td:nth-child(6)[b-ins7gmyaqa] {
    width: 140px;
    text-align: center;
}

.table thead th:nth-child(7)[b-ins7gmyaqa], /* الحالة */
.table tbody td:nth-child(7)[b-ins7gmyaqa] {
    width: 100px;
    text-align: center;
}

.table tbody tr:hover[b-ins7gmyaqa] {
    background-color: rgba(0, 61, 122, 0.02);
}

.table-danger-row[b-ins7gmyaqa] {
    background-color: rgba(220, 53, 69, 0.05) !important;
    border-left: 3px solid #dc3545;
}

.row-badge[b-ins7gmyaqa] {
    display: inline-block;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info[b-ins7gmyaqa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    text-align: right;
}

.date-info[b-ins7gmyaqa] {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.description-cell[b-ins7gmyaqa] {
    max-width: 400px;
    text-align: right;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.error-message[b-ins7gmyaqa] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #f8d7da;
    border-radius: 6px;
    color: #721c24;
    font-size: 0.8rem;
    border-right: 3px solid #dc3545;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ip-badge[b-ins7gmyaqa] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.ip-badge:hover[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.ip-badge i[b-ins7gmyaqa] {
    color: #6c757d;
    font-size: 0.95rem;
}

/* Pagination */
.pagination-section[b-ins7gmyaqa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
    flex-wrap: wrap;
}

.pagination-info[b-ins7gmyaqa] {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    line-height: 1.6;
}

.pagination-info strong[b-ins7gmyaqa] {
    color: #003d7a;
    font-weight: 700;
    margin: 0 0.2rem;
}

.pagination-controls[b-ins7gmyaqa] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-size-selector[b-ins7gmyaqa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.page-size-selector label[b-ins7gmyaqa] {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.page-size-selector .form-select[b-ins7gmyaqa] {
    width: auto;
    min-width: 80px;
}

.pagination[b-ins7gmyaqa] {
    margin: 0;
}

.page-link[b-ins7gmyaqa] {
    color: #003d7a;
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.page-link:hover:not(:disabled)[b-ins7gmyaqa] {
    background: #003d7a;
    color: white;
    border-color: #003d7a;
}

.page-item.active .page-link[b-ins7gmyaqa] {
    background: #003d7a;
    border-color: #003d7a;
    color: white;
}

.page-item.disabled .page-link[b-ins7gmyaqa] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* حالة التحميل والفراغ */
.loading-container[b-ins7gmyaqa] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state[b-ins7gmyaqa] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon[b-ins7gmyaqa] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-ins7gmyaqa] {
    font-size: 3rem;
    color: #6c757d;
}

.empty-state h3[b-ins7gmyaqa] {
    font-size: 1.5rem;
    color: #003d7a;
    margin-bottom: 0.5rem;
}

.empty-state p[b-ins7gmyaqa] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
}

/* Mobile Cards */
.audit-card[b-ins7gmyaqa] {
    background: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    overflow: hidden;
    transition: all 0.3s ease;
}

.audit-card:hover[b-ins7gmyaqa] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.audit-card-danger[b-ins7gmyaqa] {
    border-color: #dc3545;
    background: #fff5f5;
}

.audit-card-header[b-ins7gmyaqa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.audit-card-danger .audit-card-header[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffd1d1 100%);
    border-bottom-color: #dc3545;
}

.audit-card-body[b-ins7gmyaqa] {
    padding: 1rem;
}

.audit-card-row[b-ins7gmyaqa] {
    display: flex;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.audit-card-row:last-child[b-ins7gmyaqa] {
    border-bottom: none;
}

.audit-card-label[b-ins7gmyaqa] {
    flex: 0 0 110px;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.audit-card-value[b-ins7gmyaqa] {
    flex: 1;
    text-align: right;
    font-size: 0.9rem;
    color: #2c3e50;
}

.audit-card-value strong[b-ins7gmyaqa] {
    color: #003d7a;
    font-weight: 600;
}

/* Responsive للموبايل */
@media (max-width: 768px) {
    /* إخفاء الجدول وإظهار الكروت */
    .desktop-table[b-ins7gmyaqa] {
        display: none !important;
    }

    .mobile-cards[b-ins7gmyaqa] {
        display: block;
    }

    /* المسافات */
    .admin-page[b-ins7gmyaqa] {
        padding: 1.5rem 0;
    }

    .admin-page .container-fluid[b-ins7gmyaqa] {
        padding: 0 1rem;
    }

    /* العنوان */
    .page-title-section[b-ins7gmyaqa] {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .section-title[b-ins7gmyaqa] {
        font-size: 1.4rem;
    }

    .section-title i[b-ins7gmyaqa] {
        font-size: 1.5rem;
    }

    /* الإحصائيات */
    .stats-grid[b-ins7gmyaqa] {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card[b-ins7gmyaqa] {
        padding: 1.25rem;
    }

    .stat-icon[b-ins7gmyaqa] {
        width: 50px;
        height: 50px;
        font-size: 1.35rem;
    }

    .stat-value[b-ins7gmyaqa] {
        font-size: 1.75rem;
    }

    /* الفلاتر */
    .content-card[b-ins7gmyaqa] {
        padding: 1rem;
    }

    .filters-grid[b-ins7gmyaqa] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .filter-actions[b-ins7gmyaqa] {
        grid-column: 1;
        flex-direction: column;
    }

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

    /* Pagination */
    .pagination-section[b-ins7gmyaqa] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .pagination-info[b-ins7gmyaqa] {
        font-size: 0.85rem;
        justify-content: center;
    }

    .pagination-controls[b-ins7gmyaqa] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .page-size-selector[b-ins7gmyaqa] {
        justify-content: center;
    }

    .pagination[b-ins7gmyaqa] {
        justify-content: center;
    }

    .pagination .page-link[b-ins7gmyaqa] {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
}

/* للشاشات الكبيرة */
@media (min-width: 1400px) {
    .admin-page .container-fluid[b-ins7gmyaqa] {
        max-width: 1600px;
    }

    .stats-grid[b-ins7gmyaqa] {
        gap: 2rem;
    }
}

/* للطباعة */
@media print {
    .filters-section[b-ins7gmyaqa],
    .pagination-section[b-ins7gmyaqa],
    .btn[b-ins7gmyaqa] {
        display: none !important;
    }

    .table[b-ins7gmyaqa] {
        font-size: 0.8rem;
    }

    .page-title-section[b-ins7gmyaqa] {
        margin-bottom: 1rem !important;
    }
}

/* تنسيق أيقونات الحالة بألوان جذابة */
.status-badge[b-ins7gmyaqa] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.status-badge:hover[b-ins7gmyaqa] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.status-badge i[b-ins7gmyaqa] {
    font-size: 1.1rem;
}

/* حالة النجاح - أخضر */
.status-success[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.status-success i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

/* حالة الفشل - أحمر */
.status-danger[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.status-danger i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

/* حالة التحذير - برتقالي */
.status-warning[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #fd7e14 0%, #ff9800 100%);
    color: white;
}

.status-warning i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

/* تنسيق badges العمليات بألوان مميزة */
.badge[b-ins7gmyaqa] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.badge:hover[b-ins7gmyaqa] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.badge i[b-ins7gmyaqa] {
    font-size: 1rem;
}

/* تسجيل دخول - أخضر */
.badge.bg-success[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white;
    border: none;
}

.badge.bg-success i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* فشل - أحمر */
.badge.bg-danger[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white;
    border: none;
}

.badge.bg-danger i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* تسجيل خروج - برتقالي */
.badge.bg-warning[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #fd7e14 0%, #ff9800 100%) !important;
    color: white !important;
    border: none;
}

.badge.bg-warning i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* معلومات - أزرق */
.badge.bg-info[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: white;
    border: none;
}

.badge.bg-info i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ثانوي - رمادي */
.badge.bg-secondary[b-ins7gmyaqa] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: white;
    border: none;
}

.badge.bg-secondary i[b-ins7gmyaqa] {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
/* /Components/Pages/Admin/Home.razor.rz.scp.css */
/* ===============================================
   بنك حضرموت - Home Page Styles
   =============================================== */

.hb-home-page[b-ulqthn9v0r] {
    min-height: 100vh;
}

/* ===== Hero Section ===== */
.hb-hero[b-ulqthn9v0r] {
    background: var(--hb-gradient-primary);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.hb-hero[b-ulqthn9v0r]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/Images/main-pattern-sAiPHf0c.svg');
    background-size: 400px;
    opacity: 0.05;
    z-index: 1;
}

.hero-pattern[b-ulqthn9v0r] {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.hero-pattern[b-ulqthn9v0r]::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-content[b-ulqthn9v0r] {
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-logo[b-ulqthn9v0r] {
    margin-bottom: 2rem;
}

.hero-logo img[b-ulqthn9v0r] {
    height: 80px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: fadeInDown-b-ulqthn9v0r 0.8s ease-out;
}

.hero-title[b-ulqthn9v0r] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--hb-white);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: fadeInUp-b-ulqthn9v0r 0.8s ease-out 0.2s both;
}

.hero-subtitle[b-ulqthn9v0r] {
    font-size: 1.5rem;
    color: var(--hb-gold);
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: fadeInUp-b-ulqthn9v0r 0.8s ease-out 0.4s both;
}

.hero-subtitle i[b-ulqthn9v0r] {
    font-size: 1.8rem;
}

.hero-actions[b-ulqthn9v0r] {
    animation: fadeInUp-b-ulqthn9v0r 0.8s ease-out 0.6s both;
}

.btn-lg[b-ulqthn9v0r] {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
}

/* ===== Services Section ===== */
.hb-services[b-ulqthn9v0r] {
    padding: 80px 0;
    background: var(--hb-light-bg);
}

.services-grid[b-ulqthn9v0r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.service-card[b-ulqthn9v0r] {
    background: var(--hb-white);
    border-radius: var(--hb-border-radius-lg);
    padding: 2.5rem;
    transition: var(--hb-transition);
    box-shadow: var(--hb-shadow);
    position: relative;
    overflow: hidden;
    display: block;
}

.service-card[b-ulqthn9v0r]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--hb-gradient-primary);
    transition: width 0.3s ease;
}

.service-card:hover[b-ulqthn9v0r] {
    transform: translateY(-10px);
    box-shadow: var(--hb-shadow-hover);
    text-decoration: none;
}

.service-card:hover[b-ulqthn9v0r]::before {
    width: 10px;
}

.service-icon[b-ulqthn9v0r] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
    transition: var(--hb-transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.service-icon-primary[b-ulqthn9v0r] {
    background: var(--hb-gradient-primary);
    color: var(--hb-gold);
}

.service-icon-gold[b-ulqthn9v0r] {
    background: var(--hb-gradient-gold);
    color: var(--hb-primary);
}

.service-icon-danger[b-ulqthn9v0r] {
    background: linear-gradient(135deg, #dc3545 0%, #e45565 100%);
    color: var(--hb-white);
}

.service-icon-success[b-ulqthn9v0r] {
    background: linear-gradient(135deg, #28a745 0%, #48c764 100%);
    color: var(--hb-white);
}

.service-icon-info[b-ulqthn9v0r] {
    background: linear-gradient(135deg, #17a2b8 0%, #37c2d8 100%);
    color: var(--hb-white);
}

.service-card:hover .service-icon[b-ulqthn9v0r] {
    transform: scale(1.1) rotate(10deg);
}

.service-title[b-ulqthn9v0r] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hb-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.service-desc[b-ulqthn9v0r] {
    color: var(--hb-gray);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: center;
}

.service-features[b-ulqthn9v0r] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.service-features li[b-ulqthn9v0r] {
    color: var(--hb-text);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.service-features i[b-ulqthn9v0r] {
    color: #26b050;
    font-size: 1.1rem;
}

.service-link[b-ulqthn9v0r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hb-primary);
    font-weight: 600;
    font-size: 1.05rem;
    transition: var(--hb-transition);
}

.service-card:hover .service-link[b-ulqthn9v0r] {
    color: var(--hb-gold);
    gap: 12px;
}

.service-link i[b-ulqthn9v0r] {
    transition: transform 0.3s ease;
}

.service-card:hover .service-link i[b-ulqthn9v0r] {
    transform: translateX(-5px);
}

/* ===== Features Section ===== */
.hb-features[b-ulqthn9v0r] {
    padding: 80px 0;
    background: var(--hb-white);
}

.features-grid[b-ulqthn9v0r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.feature-item[b-ulqthn9v0r] {
    text-align: center;
    padding: 2rem;
    border-radius: var(--hb-border-radius);
    transition: var(--hb-transition);
}

.feature-item:hover[b-ulqthn9v0r] {
    background: var(--hb-light-bg);
    transform: translateY(-5px);
}

.feature-icon[b-ulqthn9v0r] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: var(--hb-transition);
}

.feature-icon i[b-ulqthn9v0r] {
    font-size: 2.5rem;
    color: var(--hb-primary);
}

.feature-item:hover .feature-icon[b-ulqthn9v0r] {
    background: var(--hb-gradient-primary);
    transform: scale(1.1);
}

.feature-item:hover .feature-icon i[b-ulqthn9v0r] {
    color: var(--hb-gold);
}

.feature-item h4[b-ulqthn9v0r] {
    color: var(--hb-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.feature-item p[b-ulqthn9v0r] {
    color: var(--hb-gray);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Animations ===== */
@keyframes fadeInDown-b-ulqthn9v0r {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-b-ulqthn9v0r {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .hb-hero[b-ulqthn9v0r] {
        padding: 60px 0;
    }
    
    .hero-title[b-ulqthn9v0r] {
        font-size: 2.5rem;
    }
    
    .hero-subtitle[b-ulqthn9v0r] {
        font-size: 1.3rem;
    }
    
    .services-grid[b-ulqthn9v0r] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .hb-hero[b-ulqthn9v0r] {
        padding: 50px 0;
        min-height: 400px;
    }
    
    .hero-logo img[b-ulqthn9v0r] {
        height: 60px;
    }
    
    .hero-title[b-ulqthn9v0r] {
        font-size: 2rem;
    }
    
    .hero-subtitle[b-ulqthn9v0r] {
        font-size: 1.1rem;
    }
    
    .btn-lg[b-ulqthn9v0r] {
        padding: 0.85rem 2rem;
        font-size: 1.1rem;
    }
    
    .hb-services[b-ulqthn9v0r],
    .hb-features[b-ulqthn9v0r] {
        padding: 60px 0;
    }
    
    .services-grid[b-ulqthn9v0r] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-card[b-ulqthn9v0r] {
        padding: 2rem;
    }
    
    .features-grid[b-ulqthn9v0r] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-ulqthn9v0r] {
        font-size: 1.6rem;
    }
    
    .hero-subtitle[b-ulqthn9v0r] {
        font-size: 1rem;
        flex-direction: column;
        gap: 5px;
    }
    
    .service-icon[b-ulqthn9v0r] {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
    
    .service-title[b-ulqthn9v0r] {
        font-size: 1.3rem;
    }
    
    .features-grid[b-ulqthn9v0r] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Login.razor.rz.scp.css */
/* ========================================
   🔐 Admin Login Page - Professional Design
   ======================================== */

.admin-login-page[b-by1953yc7l] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 50%, #0071bc 100%);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Background Pattern */
.admin-login-page[b-by1953yc7l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.login-container[b-by1953yc7l] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    animation: fadeInUp-b-by1953yc7l 0.6s ease-out;
}

@keyframes fadeInUp-b-by1953yc7l {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login Card */
.login-card[b-by1953yc7l] {
    background: white;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.login-card[b-by1953yc7l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
}

/* Login Header */
.login-header[b-by1953yc7l] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-logo[b-by1953yc7l] {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-logo img[b-by1953yc7l] {
    width: 120px;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 61, 122, 0.15));
    transition: transform 0.3s ease;
}

.login-logo img:hover[b-by1953yc7l] {
    transform: scale(1.05);
}

.login-title[b-by1953yc7l] {
    font-size: 1.85rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.login-subtitle[b-by1953yc7l] {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}

/* Alert Messages */
.alert[b-by1953yc7l] {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: shake-b-by1953yc7l 0.5s ease;
    font-size: 0.9rem;
}

@keyframes shake-b-by1953yc7l {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.alert-danger[b-by1953yc7l] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.alert-danger i[b-by1953yc7l] {
    font-size: 1.25rem;
    color: #dc2626;
    flex-shrink: 0;
}

/* Form Groups */
.login-form[b-by1953yc7l] {
    margin-bottom: 1.5rem;
}

.form-group[b-by1953yc7l] {
    margin-bottom: 1.5rem;
}

.form-label[b-by1953yc7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label i[b-by1953yc7l] {
    color: #d4af37;
    font-size: 1.1rem;
}

.form-control[b-by1953yc7l] {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.875rem 1.125rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    background-color: #f9fafb;
}

.form-control:focus[b-by1953yc7l] {
    border-color: #d4af37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
    outline: none;
    background-color: white;
}

.form-control[b-by1953yc7l]::placeholder {
    color: #9ca3af;
}

/* Password Input Wrapper */
.password-input-wrapper[b-by1953yc7l] {
    position: relative;
}

.password-input-wrapper .form-control[b-by1953yc7l] {
    padding-left: 3rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* إخفاء أي أيقونات افتراضية من المتصفح بشكل كامل */
.password-input-wrapper .form-control[b-by1953yc7l]::-ms-reveal,
.password-input-wrapper .form-control[b-by1953yc7l]::-ms-clear,
.password-input-wrapper .form-control[b-by1953yc7l]::-webkit-credentials-auto-fill-button,
.password-input-wrapper .form-control[b-by1953yc7l]::-webkit-textfield-decoration-container {
    display: none !important;
}

/* إخفاء أيقونة كشف كلمة المرور في Edge و Chrome */
input[type="password"][b-by1953yc7l]::-ms-reveal,
input[type="password"][b-by1953yc7l]::-ms-clear {
    display: none !important;
}

input[type="text"].form-control[b-by1953yc7l]::-ms-reveal,
input[type="text"].form-control[b-by1953yc7l]::-ms-clear {
    display: none !important;
}

.password-toggle-btn[b-by1953yc7l] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.25rem;
    transition: color 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.password-toggle-btn i[b-by1953yc7l] {
    pointer-events: none;
}

.password-toggle-btn:hover[b-by1953yc7l] {
    color: #003d7a;
}

.password-toggle-btn:focus[b-by1953yc7l] {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Validation Messages */
.validation-message[b-by1953yc7l] {
    display: block;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    animation: slideDown-b-by1953yc7l 0.3s ease;
    font-weight: 500;
}

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

/* Login Button */
.btn-login[b-by1953yc7l] {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
    cursor: pointer;
}

.btn-login:hover:not(:disabled)[b-by1953yc7l] {
    background: linear-gradient(135deg, #002952 0%, #003d7a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 61, 122, 0.4);
}

.btn-login:active:not(:disabled)[b-by1953yc7l] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 61, 122, 0.3);
}

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

.btn-login .spinner-border[b-by1953yc7l] {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
}

/* Login Footer */
.login-footer[b-by1953yc7l] {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.footer-text[b-by1953yc7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.875rem;
    margin: 0;
}

.footer-text i[b-by1953yc7l] {
    color: #10b981;
    font-size: 1.1rem;
}

/* ========================================
   📱 Responsive Design - Tablet
   ======================================== */
@media (max-width: 768px) {
    .admin-login-page[b-by1953yc7l] {
        padding: 1.25rem;
    }

    .login-container[b-by1953yc7l] {
        max-width: 500px;
    }

    .login-card[b-by1953yc7l] {
        padding: 2.5rem 2rem;
        border-radius: 20px;
    }

    .login-logo img[b-by1953yc7l] {
        width: 110px;
    }

    .login-title[b-by1953yc7l] {
        font-size: 1.65rem;
    }
}

/* ========================================
   📱 Responsive Design - Mobile
   ======================================== */
@media (max-width: 576px) {
    .admin-login-page[b-by1953yc7l] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .login-card[b-by1953yc7l] {
        padding: 2rem 1.5rem;
        border-radius: 18px;
    }

    .login-header[b-by1953yc7l] {
        margin-bottom: 2rem;
    }

    .login-logo img[b-by1953yc7l] {
        width: 90px;
    }

    .login-title[b-by1953yc7l] {
        font-size: 1.5rem;
    }

    .login-subtitle[b-by1953yc7l] {
        font-size: 0.875rem;
    }

    .form-group[b-by1953yc7l] {
        margin-bottom: 1.25rem;
    }

    .form-control[b-by1953yc7l] {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }

    .password-input-wrapper .form-control[b-by1953yc7l] {
        padding-left: 2.75rem;
    }

    .password-toggle-btn[b-by1953yc7l] {
        left: 10px;
        font-size: 1.1rem;
        padding: 0.4rem;
    }

    .btn-login[b-by1953yc7l] {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }

    .alert[b-by1953yc7l] {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        gap: 0.6rem;
    }

    .alert-danger i[b-by1953yc7l] {
        font-size: 1.1rem;
    }

    .login-footer[b-by1953yc7l] {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }

    .footer-text[b-by1953yc7l] {
        font-size: 0.8rem;
    }
}

/* ========================================
   📱 Responsive Design - Small Mobile
   ======================================== */
@media (max-width: 400px) {
    .admin-login-page[b-by1953yc7l] {
        padding: 0.75rem;
        padding-top: 1.5rem;
    }

    .login-card[b-by1953yc7l] {
        padding: 1.75rem 1.25rem;
        border-radius: 16px;
    }

    .login-logo img[b-by1953yc7l] {
        width: 80px;
    }

    .login-title[b-by1953yc7l] {
        font-size: 1.35rem;
    }

    .login-subtitle[b-by1953yc7l] {
        font-size: 0.825rem;
    }

    .form-label[b-by1953yc7l] {
        font-size: 0.9rem;
    }

    .form-control[b-by1953yc7l] {
        padding: 0.75rem 0.9rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .btn-login[b-by1953yc7l] {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
        border-radius: 10px;
    }
}

/* ========================================
   🌐 Landscape Mode - Mobile
   ======================================== */
@media (max-height: 600px) and (orientation: landscape) {
    .admin-login-page[b-by1953yc7l] {
        padding: 1rem;
        align-items: center;
    }

    .login-card[b-by1953yc7l] {
        padding: 1.5rem;
    }

    .login-header[b-by1953yc7l] {
        margin-bottom: 1.5rem;
    }

    .login-logo[b-by1953yc7l] {
        margin-bottom: 1rem;
    }

    .login-logo img[b-by1953yc7l] {
        width: 70px;
    }

    .login-title[b-by1953yc7l] {
        font-size: 1.25rem;
    }

    .login-subtitle[b-by1953yc7l] {
        font-size: 0.8rem;
    }

    .form-group[b-by1953yc7l] {
        margin-bottom: 1rem;
    }

    .login-footer[b-by1953yc7l] {
        margin-top: 1rem;
        padding-top: 1rem;
    }
}

/* ========================================
   ⏳ Loading Overlay
   ======================================== */
.loading-overlay[b-by1953yc7l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 61, 122, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-by1953yc7l 0.3s ease;
}

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

.loading-content[b-by1953yc7l] {
    text-align: center;
    animation: zoomIn-b-by1953yc7l 0.4s ease;
}

@keyframes zoomIn-b-by1953yc7l {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-logo[b-by1953yc7l] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-logo[b-by1953yc7l] {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(212, 175, 55, 0.3));
    animation: pulse-b-by1953yc7l 2s ease-in-out infinite;
}

@keyframes pulse-b-by1953yc7l {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.loading-title[b-by1953yc7l] {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.loading-message[b-by1953yc7l] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.loading-dots[b-by1953yc7l] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.loading-dots span[b-by1953yc7l] {
    width: 12px;
    height: 12px;
    background: #d4af37;
    border-radius: 50%;
    animation: bounce-b-by1953yc7l 1.4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.loading-dots span:nth-child(1)[b-by1953yc7l] {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2)[b-by1953yc7l] {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3)[b-by1953yc7l] {
    animation-delay: 0.4s;
}

@keyframes bounce-b-by1953yc7l {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
}

/* Responsive Loading */
@media (max-width: 576px) {
    .pulse-logo[b-by1953yc7l] {
        width: 90px;
    }

    .loading-title[b-by1953yc7l] {
        font-size: 1.25rem;
    }

    .loading-message[b-by1953yc7l] {
        font-size: 0.9rem;
    }
}

/* /Components/Pages/Admin/PDFTemplates/Create.razor.rz.scp.css */
/* ========================================
   🎨 Create PDF Template - Styling
   ======================================== */

/* 📦 Page Container */
.create-template-page[b-r28jluccel] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 2rem 0;
}

.create-template-page .container[b-r28jluccel] {
    max-width: 900px;
}

/* 📌 Page Header */
.page-header[b-r28jluccel] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-content[b-r28jluccel] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-icon[b-r28jluccel] {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.header-text[b-r28jluccel] {
    color: white;
}

.page-title[b-r28jluccel] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.page-subtitle[b-r28jluccel] {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.page-header .btn-outline-light[b-r28jluccel] {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.page-header .btn-outline-light:hover[b-r28jluccel] {
    background: white;
    border-color: white;
    color: #28a745;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* 📋 Form Card */
.form-card[b-r28jluccel] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    animation: fadeInUp-b-r28jluccel 0.4s ease-out;
}

/* إصلاح التداخل بين الأعمدة */
.form-card .row[b-r28jluccel] {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.form-card .row > [class*="col-"][b-r28jluccel] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.form-card .col-12[b-r28jluccel] {
    width: 100%;
    clear: both;
}

/* 📝 Form Groups */
.form-group[b-r28jluccel] {
    margin-bottom: 1.5rem;
    position: relative;
    width: 100%;
}

.form-group[b-r28jluccel]::after {
    content: '';
    display: table;
    clear: both;
}

.row .col-md-6 .form-group[b-r28jluccel] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.form-label[b-r28jluccel] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label i[b-r28jluccel] {
    color: #d4af37;
    font-size: 1.1rem;
}

.required[b-r28jluccel] {
    color: #dc3545;
    margin-right: 0.25rem;
}

.form-control[b-r28jluccel],
.form-select[b-r28jluccel] {
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus[b-r28jluccel],
.form-select:focus[b-r28jluccel] {
    border-color: #003d7a;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.15);
}

.form-text[b-r28jluccel] {
    display: block;
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.text-danger[b-r28jluccel] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

/* 🔘 Custom Switch Toggle */
.status-toggle-container[b-r28jluccel] {
    margin-top: 0.5rem;
}

/* إخفاء تام لأي عناصر bootstrap أو html افتراضية */
.status-toggle-container *:not(.custom-switch-card):not(.switch-content):not(.status-icon):not(.status-text):not(.custom-switch):not(.switch-slider):not(strong):not(small):not(i)[b-r28jluccel] {
    display: none !important;
}

.status-toggle-container input[b-r28jluccel],
.status-toggle-container input[type="checkbox"][b-r28jluccel],
.status-toggle-container .form-check-input[b-r28jluccel],
.status-toggle-container .form-check[b-r28jluccel],
.status-toggle-container .form-switch[b-r28jluccel],
.custom-switch-card input[b-r28jluccel] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* إزالة كل pseudo-elements من bootstrap */
.status-toggle-container *[b-r28jluccel]::before,
.status-toggle-container *[b-r28jluccel]::after {
    display: none !important;
}

/* السماح فقط بالـ custom switch elements */
.custom-switch-card[b-r28jluccel],
.custom-switch-card *[b-r28jluccel],
.custom-switch[b-r28jluccel],
.custom-switch *[b-r28jluccel],
.switch-slider[b-r28jluccel] {
    display: revert !important;
}

.custom-switch-card[b-r28jluccel] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 85px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.custom-switch-card:hover[b-r28jluccel] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
}

.custom-switch-card:active[b-r28jluccel] {
    transform: scale(0.98);
}

.custom-switch-card .switch-content[b-r28jluccel] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-switch-card .status-icon[b-r28jluccel] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.custom-switch-card .status-icon[b-r28jluccel] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.custom-switch-card .status-text[b-r28jluccel] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.custom-switch-card .status-text strong[b-r28jluccel] {
    font-size: 1.05rem;
    color: #dc3545;
    font-weight: 600;
    transition: color 0.3s ease;
}

.custom-switch-card .status-text small[b-r28jluccel] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: normal;
}

/* Custom Switch Styles */
.custom-switch[b-r28jluccel] {
    width: 60px;
    height: 30px;
    background-color: #dc3545;
    border-radius: 30px;
    position: relative;
    transition: all 0.4s ease;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-switch .switch-slider[b-r28jluccel] {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Active State */
.custom-switch.active[b-r28jluccel] {
    background-color: #10b981;
}

.custom-switch.active .switch-slider[b-r28jluccel] {
    right: 33px;
}

/* Active Card Styles */
.custom-switch-card:has(.custom-switch.active) .status-icon[b-r28jluccel] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.custom-switch-card:has(.custom-switch.active) .status-text strong[b-r28jluccel] {
    color: #10b981;
}

/* 📤 File Upload Area */
.file-upload-area[b-r28jluccel] {
    margin-top: 0.5rem;
    position: relative;
}

/* إخفاء input file الافتراضي بالكامل */
.file-upload-area input[type="file"][b-r28jluccel],
.file-upload-area[b-r28jluccel]  input[type="file"],
#fileInput[b-r28jluccel] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
    visibility: hidden !important;
}

.file-input[b-r28jluccel] {
    display: none;
}

.file-upload-label[b-r28jluccel] {
    display: block;
    padding: 2rem;
    border: 3px dashed #d4af37;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.1) 100%);
}

.file-upload-label:hover[b-r28jluccel] {
    border-color: #003d7a;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.05) 0%, rgba(0, 61, 122, 0.1) 100%);
    transform: translateY(-2px);
}

.upload-placeholder i[b-r28jluccel] {
    font-size: 3rem;
    color: #d4af37;
    margin-bottom: 1rem;
}

.upload-placeholder p[b-r28jluccel] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #003d7a;
}

.upload-placeholder small[b-r28jluccel] {
    color: #6c757d;
    font-size: 0.9rem;
}

/* 📄 File Preview */
.file-preview[b-r28jluccel] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
}

.file-preview i[b-r28jluccel] {
    font-size: 2.5rem;
}

.file-preview .file-info[b-r28jluccel] {
    flex: 1;
    min-width: 0;
}

.file-preview .file-name[b-r28jluccel] {
    display: block;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview .file-size[b-r28jluccel] {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
}

.file-preview .btn-remove[b-r28jluccel] {
    background: rgba(220, 53, 69, 0.1);
    border: none;
    color: #dc3545;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.25rem;
}

.file-preview .btn-remove:hover[b-r28jluccel] {
    background: #dc3545;
    color: white;
    transform: rotate(90deg);
}

/* 🎯 Form Actions */
.form-actions[b-r28jluccel] {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

.form-actions .btn[b-r28jluccel] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-actions .btn-success[b-r28jluccel] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
    color: white;
}

.form-actions .btn-success:not(:disabled):hover[b-r28jluccel] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.form-actions .btn-success:disabled[b-r28jluccel] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-actions .btn-secondary[b-r28jluccel] {
    background: #6c757d;
    color: white;
}

.form-actions .btn-secondary:not(:disabled):hover[b-r28jluccel] {
    background: #5a6268;
    transform: translateY(-2px);
}

/* ✨ Animations */
@keyframes fadeInUp-b-r28jluccel {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 📱 Responsive Design */
@media (max-width: 768px) {
    .create-template-page[b-r28jluccel] {
        padding: 1rem 0;
    }

    .page-header[b-r28jluccel] {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-r28jluccel] {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-r28jluccel] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

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

    .page-header .btn-outline-light[b-r28jluccel] {
        width: 100%;
        justify-content: center;
    }

    .form-card[b-r28jluccel] {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .form-actions[b-r28jluccel] {
        flex-direction: column;
    }

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

    .file-upload-label[b-r28jluccel] {
        padding: 1.5rem;
    }

    .upload-placeholder i[b-r28jluccel] {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .page-title[b-r28jluccel] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-r28jluccel] {
        font-size: 0.85rem;
    }

    .form-card[b-r28jluccel] {
        padding: 1rem;
    }

    .form-label[b-r28jluccel] {
        font-size: 0.9rem;
    }

    .form-control[b-r28jluccel],
    .form-select[b-r28jluccel] {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
    }

    .file-upload-label[b-r28jluccel] {
        padding: 1rem;
    }

    .upload-placeholder i[b-r28jluccel] {
        font-size: 2rem;
    }

    .upload-placeholder p[b-r28jluccel] {
        font-size: 1rem;
    }

    .custom-switch-card[b-r28jluccel] {
        padding: 1rem;
        min-height: auto;
        gap: 1rem;
    }

    .custom-switch-card .status-icon[b-r28jluccel] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .custom-switch-card .status-text strong[b-r28jluccel] {
        font-size: 0.95rem;
    }

    .custom-switch-card .status-text small[b-r28jluccel] {
        font-size: 0.8rem;
    }

    .custom-switch[b-r28jluccel] {
        width: 54px;
        height: 28px;
    }

    .custom-switch .switch-slider[b-r28jluccel] {
        width: 22px;
        height: 22px;
    }

    .custom-switch.active .switch-slider[b-r28jluccel] {
        right: 30px;
    }
}
/* /Components/Pages/Admin/PDFTemplates/Edit.razor.rz.scp.css */
/* ========================================
   🎨 Edit PDF Template - Styling
   ======================================== */

/* 📦 Page Container */
.edit-template-page[b-knrs05dncq] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 2rem 0;
}

.edit-template-page .container[b-knrs05dncq] {
    max-width: 900px;
}

/* 🔄 Loading State */
.loading-container[b-knrs05dncq] {
    padding: 6rem 0;
    text-align: center;
    color: #6c757d;
}

.loading-container .spinner-border[b-knrs05dncq] {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 0.35em;
}

/* ❌ Error State */
.error-container[b-knrs05dncq] {
    padding: 6rem 2rem;
    text-align: center;
}

.error-icon[b-knrs05dncq] {
    font-size: 5rem;
    color: #dc3545;
    margin-bottom: 1.5rem;
}

.error-container h3[b-knrs05dncq] {
    color: #003d7a;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.error-container p[b-knrs05dncq] {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* 📌 Page Header */
.page-header[b-knrs05dncq] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-content[b-knrs05dncq] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-icon[b-knrs05dncq] {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #d4af37;
}

.header-text[b-knrs05dncq] {
    color: white;
}

.page-title[b-knrs05dncq] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.page-subtitle[b-knrs05dncq] {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.page-header .btn-outline-light[b-knrs05dncq] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.page-header .btn-outline-light:hover[b-knrs05dncq] {
    background: white;
    border-color: white;
    color: #003d7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* 📋 Form Card */
.form-card[b-knrs05dncq] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    animation: fadeInUp-b-knrs05dncq 0.4s ease-out;
}

/* إصلاح التداخل بين الأعمدة */
.form-card .row[b-knrs05dncq] {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.form-card .row > [class*="col-"][b-knrs05dncq] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.form-card .col-12[b-knrs05dncq] {
    width: 100%;
    clear: both;
}

/* 📝 Form Groups */
.form-group[b-knrs05dncq] {
    margin-bottom: 1.5rem;
    position: relative;
    width: 100%;
}

.form-group[b-knrs05dncq]::after {
    content: '';
    display: table;
    clear: both;
}

.row .col-md-6 .form-group[b-knrs05dncq] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.form-label[b-knrs05dncq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label i[b-knrs05dncq] {
    color: #d4af37;
    font-size: 1.1rem;
}

.required[b-knrs05dncq] {
    color: #dc3545;
    margin-right: 0.25rem;
}

.form-control[b-knrs05dncq],
.form-select[b-knrs05dncq] {
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus[b-knrs05dncq],
.form-select:focus[b-knrs05dncq] {
    border-color: #003d7a;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.15);
}

.form-text[b-knrs05dncq] {
    display: block;
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.text-danger[b-knrs05dncq] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

/* 🔘 Custom Switch Toggle */
.status-toggle-container[b-knrs05dncq] {
    margin-top: 0.5rem;
}

/* إخفاء تام لأي عناصر bootstrap أو html افتراضية */
.status-toggle-container *:not(.custom-switch-card):not(.switch-content):not(.status-icon):not(.status-text):not(.custom-switch):not(.switch-slider):not(strong):not(small):not(i)[b-knrs05dncq] {
    display: none !important;
}

.status-toggle-container input[b-knrs05dncq],
.status-toggle-container input[type="checkbox"][b-knrs05dncq],
.status-toggle-container .form-check-input[b-knrs05dncq],
.status-toggle-container .form-check[b-knrs05dncq],
.status-toggle-container .form-switch[b-knrs05dncq],
.custom-switch-card input[b-knrs05dncq] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* إزالة كل pseudo-elements من bootstrap */
.status-toggle-container *[b-knrs05dncq]::before,
.status-toggle-container *[b-knrs05dncq]::after {
    display: none !important;
}

/* السماح فقط بالـ custom switch elements */
.custom-switch-card[b-knrs05dncq],
.custom-switch-card *[b-knrs05dncq],
.custom-switch[b-knrs05dncq],
.custom-switch *[b-knrs05dncq],
.switch-slider[b-knrs05dncq] {
    display: revert !important;
}

.custom-switch-card[b-knrs05dncq] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 85px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.custom-switch-card:hover[b-knrs05dncq] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
}

.custom-switch-card:active[b-knrs05dncq] {
    transform: scale(0.98);
}

.custom-switch-card .switch-content[b-knrs05dncq] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-switch-card .status-icon[b-knrs05dncq] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.custom-switch-card .status-icon[b-knrs05dncq] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.custom-switch-card .status-text[b-knrs05dncq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.custom-switch-card .status-text strong[b-knrs05dncq] {
    font-size: 1.05rem;
    color: #dc3545;
    font-weight: 600;
    transition: color 0.3s ease;
}

.custom-switch-card .status-text small[b-knrs05dncq] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: normal;
}

/* Custom Switch Styles */
.custom-switch[b-knrs05dncq] {
    width: 60px;
    height: 30px;
    background-color: #dc3545;
    border-radius: 30px;
    position: relative;
    transition: all 0.4s ease;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-switch .switch-slider[b-knrs05dncq] {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Active State */
.custom-switch.active[b-knrs05dncq] {
    background-color: #10b981;
}

.custom-switch.active .switch-slider[b-knrs05dncq] {
    right: 33px;
}

/* Active Card Styles */
.custom-switch-card:has(.custom-switch.active) .status-icon[b-knrs05dncq] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.custom-switch-card:has(.custom-switch.active) .status-text strong[b-knrs05dncq] {
    color: #10b981;
}

/* 📄 Current File Section */
.current-file-section[b-knrs05dncq] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.current-file[b-knrs05dncq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    padding: 1rem;
    border-radius: 10px;
    margin-top: 0.5rem;
}

.current-file .file-icon-link[b-knrs05dncq] {
    text-decoration: none;
    display: flex;
    transition: transform 0.3s ease;
}

.current-file .file-icon-link:hover[b-knrs05dncq] {
    transform: scale(1.15);
}

.current-file i[b-knrs05dncq] {
    font-size: 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.current-file .file-icon-link:hover i[b-knrs05dncq] {
    filter: brightness(0.85);
}

.current-file .file-info[b-knrs05dncq] {
    flex: 1;
    min-width: 0;
}

.current-file .file-name[b-knrs05dncq] {
    display: block;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-file .download-link[b-knrs05dncq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #17a2b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.current-file .download-link:hover[b-knrs05dncq] {
    color: #0d6efd;
    transform: translateX(-2px);
}

/* 📥 File Actions (Download Button Only) */
.current-file .file-actions[b-knrs05dncq] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.current-file .download-btn[b-knrs05dncq] {
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    font-size: 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.current-file .download-btn:hover[b-knrs05dncq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

/* 📤 File Upload Area */
.file-upload-area[b-knrs05dncq] {
    margin-top: 0.5rem;
    position: relative;
}

/* إخفاء input file الافتراضي بالكامل */
.file-upload-area input[type="file"][b-knrs05dncq],
.file-upload-area[b-knrs05dncq]  input[type="file"],
#fileInput[b-knrs05dncq] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
    visibility: hidden !important;
}

.file-input[b-knrs05dncq] {
    display: none;
}

.file-upload-label[b-knrs05dncq] {
    display: block;
    padding: 2rem;
    border: 3px dashed #17a2b8;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.05) 0%, rgba(23, 162, 184, 0.1) 100%);
}

.file-upload-label:hover[b-knrs05dncq] {
    border-color: #003d7a;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.05) 0%, rgba(0, 61, 122, 0.1) 100%);
    transform: translateY(-2px);
}

.upload-placeholder i[b-knrs05dncq] {
    font-size: 3rem;
    color: #17a2b8;
    margin-bottom: 1rem;
}

.upload-placeholder p[b-knrs05dncq] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #003d7a;
}

.upload-placeholder small[b-knrs05dncq] {
    color: #6c757d;
    font-size: 0.9rem;
}

/* 📄 File Preview */
.file-preview[b-knrs05dncq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
}

.file-preview i[b-knrs05dncq] {
    font-size: 2.5rem;
}

.file-preview .file-info[b-knrs05dncq] {
    flex: 1;
    min-width: 0;
}

.file-preview .file-name[b-knrs05dncq] {
    display: block;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview .file-size[b-knrs05dncq] {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
}

.file-preview .btn-remove[b-knrs05dncq] {
    background: rgba(220, 53, 69, 0.1);
    border: none;
    color: #dc3545;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.25rem;
}

.file-preview .btn-remove:hover[b-knrs05dncq] {
    background: #dc3545;
    color: white;
    transform: rotate(90deg);
}

/* 🎯 Form Actions */
.form-actions[b-knrs05dncq] {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

.form-actions .btn[b-knrs05dncq] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-actions .btn-primary[b-knrs05dncq] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    color: white;
}

.form-actions .btn-primary:not(:disabled):hover[b-knrs05dncq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.4);
}

.form-actions .btn-primary:disabled[b-knrs05dncq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-actions .btn-secondary[b-knrs05dncq] {
    background: #6c757d;
    color: white;
}

.form-actions .btn-secondary:not(:disabled):hover[b-knrs05dncq] {
    background: #5a6268;
    transform: translateY(-2px);
}

/* ✨ Animations */
@keyframes fadeInUp-b-knrs05dncq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 📱 Responsive Design */
@media (max-width: 768px) {
    .edit-template-page[b-knrs05dncq] {
        padding: 1rem 0;
    }

    .page-header[b-knrs05dncq] {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-knrs05dncq] {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-knrs05dncq] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

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

    .page-header .btn-outline-light[b-knrs05dncq] {
        width: 100%;
        justify-content: center;
    }

    .form-card[b-knrs05dncq] {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .form-actions[b-knrs05dncq] {
        flex-direction: column;
    }

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

    .file-upload-label[b-knrs05dncq] {
        padding: 1.5rem;
    }

    .upload-placeholder i[b-knrs05dncq] {
        font-size: 2.5rem;
    }

    .current-file-section[b-knrs05dncq] {
        padding: 1rem;
    }

    .current-file .file-actions .download-btn[b-knrs05dncq] {
        min-width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .page-title[b-knrs05dncq] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-knrs05dncq] {
        font-size: 0.85rem;
    }

    .form-card[b-knrs05dncq] {
        padding: 1rem;
    }

    .form-label[b-knrs05dncq] {
        font-size: 0.9rem;
    }

    .form-control[b-knrs05dncq],
    .form-select[b-knrs05dncq] {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
    }

    .file-upload-label[b-knrs05dncq] {
        padding: 1rem;
    }

    .upload-placeholder i[b-knrs05dncq] {
        font-size: 2rem;
    }

    .upload-placeholder p[b-knrs05dncq] {
        font-size: 1rem;
    }

    .custom-switch-card[b-knrs05dncq] {
        padding: 1rem;
        min-height: auto;
        gap: 1rem;
    }

    .custom-switch-card .status-icon[b-knrs05dncq] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .custom-switch-card .status-text strong[b-knrs05dncq] {
        font-size: 0.95rem;
    }

    .custom-switch-card .status-text small[b-knrs05dncq] {
        font-size: 0.8rem;
    }

    .custom-switch[b-knrs05dncq] {
        width: 54px;
        height: 28px;
    }

    .custom-switch .switch-slider[b-knrs05dncq] {
        width: 22px;
        height: 22px;
    }

    .custom-switch.active .switch-slider[b-knrs05dncq] {
        right: 30px;
    }
}
/* /Components/Pages/Admin/PDFTemplates/Index.razor.rz.scp.css */
/* ========================================
   🎨 PDF Templates Index - Styling
   ======================================== */

/* 📦 Page Container */
.templates-page[b-7baxj65equ] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 2rem 0;
}

.templates-page .container-fluid[b-7baxj65equ] {
    max-width: 1400px;
    margin: 0 auto;
}

/* 📌 Page Header */
.page-header[b-7baxj65equ] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-content[b-7baxj65equ] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-7baxj65equ] {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #d4af37;
}

.header-text[b-7baxj65equ] {
    color: white;
}

.page-title[b-7baxj65equ] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.page-subtitle[b-7baxj65equ] {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.header-actions[b-7baxj65equ] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-actions .btn[b-7baxj65equ] {
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
}

.header-actions .btn-outline-light[b-7baxj65equ] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.header-actions .btn-outline-light:hover[b-7baxj65equ] {
    background: white;
    border-color: white;
    color: #003d7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.header-actions .btn-success[b-7baxj65equ] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
    color: white;
}

.header-actions .btn-success:hover[b-7baxj65equ] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

/* 📊 Statistics Cards */
.stats-grid[b-7baxj65equ] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-7baxj65equ] {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-7baxj65equ] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.15);
}

.stat-icon[b-7baxj65equ] {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon.stat-primary[b-7baxj65equ] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.stat-icon.stat-success[b-7baxj65equ] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.stat-icon.stat-warning[b-7baxj65equ] {
    background: linear-gradient(135deg, #ffc107 0%, #ffcd38 100%);
}

.stat-content[b-7baxj65equ] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-7baxj65equ] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.stat-value[b-7baxj65equ] {
    font-size: 2rem;
    font-weight: 700;
    color: #003d7a;
}

/* 📄 Content Card */
.content-card[b-7baxj65equ] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
}

/* 🔄 Loading State */
.loading-container[b-7baxj65equ] {
    padding: 4rem 0;
    text-align: center;
    color: #6c757d;
}

.loading-container .spinner-border[b-7baxj65equ] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* 📭 Empty State */
.empty-state[b-7baxj65equ] {
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-7baxj65equ] {
    font-size: 5rem;
    color: #d4af37;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state h3[b-7baxj65equ] {
    color: #003d7a;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.empty-state p[b-7baxj65equ] {
    color: #6c757d;
    font-size: 1rem;
}

/* 📋 Table Styling */
.table-responsive[b-7baxj65equ] {
    border-radius: 12px;
    overflow: hidden;
}

.table[b-7baxj65equ] {
    margin: 0;
    font-size: 0.95rem;
    table-layout: fixed;
    width: 100%;
}

.table thead[b-7baxj65equ] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.table thead th[b-7baxj65equ] {
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
    text-align: center;
    white-space: nowrap;
}

/* تحديد عرض الأعمدة */
.table thead th:nth-child(1)[b-7baxj65equ] { width: 8%; }   /* الترتيب */
.table thead th:nth-child(2)[b-7baxj65equ] { width: 20%; }  /* العنوان */
.table thead th:nth-child(3)[b-7baxj65equ] { width: 25%; }  /* الوصف */
.table thead th:nth-child(4)[b-7baxj65equ] { width: 17%; }  /* اسم الملف */
.table thead th:nth-child(5)[b-7baxj65equ] { width: 10%; }  /* الحالة */
.table thead th:nth-child(6)[b-7baxj65equ] { width: 20%; }  /* الإجراءات */

.table tbody tr[b-7baxj65equ] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-7baxj65equ] {
    background-color: rgba(0, 61, 122, 0.03);
    transform: scale(1.01);
}

.table tbody td[b-7baxj65equ] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🔢 Display Order */
.display-order[b-7baxj65equ] {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #e6c550 100%);
    color: #003d7a;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* 📝 Template Info */
.template-title[b-7baxj65equ] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    justify-content: center;
}

.template-title .pdf-icon-link[b-7baxj65equ] {
    text-decoration: none;
    display: inline-flex;
    transition: transform 0.3s ease;
}

.template-title .pdf-icon-link:hover[b-7baxj65equ] {
    transform: scale(1.2);
}

.template-title i[b-7baxj65equ] {
    font-size: 1.3rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.template-title .pdf-icon-link:hover i[b-7baxj65equ] {
    filter: brightness(0.8);
}

.template-description[b-7baxj65equ] {
    color: #6c757d;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    max-height: 2.8em;
}

.file-name[b-7baxj65equ] {
    display: inline-block;
    background: #f8f9fa;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #495057;
    font-family: 'Courier New', monospace;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 🎯 Badges */
.badge[b-7baxj65equ] {
    padding: 0.5rem 0.8rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.badge.bg-success[b-7baxj65equ] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%) !important;
}

.badge.bg-secondary[b-7baxj65equ] {
    background: linear-gradient(135deg, #6c757d 0%, #7d8793 100%) !important;
}

/* 🔘 Action Buttons */
.action-buttons[b-7baxj65equ] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-buttons .btn[b-7baxj65equ] {
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    flex-shrink: 0;
}

.action-buttons .btn-info[b-7baxj65equ] {
    background: linear-gradient(135deg, #17a2b8 0%, #20c1d7 100%);
}

.action-buttons .btn-info:hover[b-7baxj65equ] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.action-buttons .btn-warning[b-7baxj65equ] {
    background: linear-gradient(135deg, #ffc107 0%, #ffcd38 100%);
}

.action-buttons .btn-warning:hover[b-7baxj65equ] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.action-buttons .btn-success[b-7baxj65equ] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.action-buttons .btn-success:hover[b-7baxj65equ] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.action-buttons .btn-primary[b-7baxj65equ] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.action-buttons .btn-primary:hover[b-7baxj65equ] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.action-buttons .btn-danger[b-7baxj65equ] {
    background: linear-gradient(135deg, #dc3545 0%, #e45565 100%);
}

.action-buttons .btn-danger:hover[b-7baxj65equ] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ✨ Animations */
@keyframes fadeIn-b-7baxj65equ {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-card[b-7baxj65equ],
.stat-card[b-7baxj65equ] {
    animation: fadeIn-b-7baxj65equ 0.4s ease-out;
}

.stat-card:nth-child(1)[b-7baxj65equ] {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2)[b-7baxj65equ] {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3)[b-7baxj65equ] {
    animation-delay: 0.3s;
}

/* 📱 Responsive Design */
@media (max-width: 1200px) {
    .stats-grid[b-7baxj65equ] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .templates-page[b-7baxj65equ] {
        padding: 1rem 0;
    }

    .page-header[b-7baxj65equ] {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-7baxj65equ] {
        width: 100%;
    }

    .header-icon[b-7baxj65equ] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .page-title[b-7baxj65equ] {
        font-size: 1.5rem;
    }

    .header-actions[b-7baxj65equ] {
        width: 100%;
        flex-direction: column;
    }

    .header-actions .btn[b-7baxj65equ] {
        width: 100%;
        justify-content: center;
    }

    .stats-grid[b-7baxj65equ] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card[b-7baxj65equ] {
        padding: 1.25rem;
    }

    .stat-icon[b-7baxj65equ] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .stat-value[b-7baxj65equ] {
        font-size: 1.5rem;
    }

    .content-card[b-7baxj65equ] {
        padding: 1rem;
        border-radius: 12px;
    }

    /* 📱 تحويل الجدول إلى كاردات في الموبايل */
    .table-responsive[b-7baxj65equ] {
        overflow: visible;
    }

    .table thead[b-7baxj65equ] {
        display: none;
    }

    .table[b-7baxj65equ],
    .table tbody[b-7baxj65equ],
    .table tr[b-7baxj65equ] {
        display: block;
        width: 100%;
    }

    .table tbody tr[b-7baxj65equ] {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 61, 122, 0.08);
    }

    .table tbody tr:hover[b-7baxj65equ] {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 61, 122, 0.12);
    }

    .table tbody td[b-7baxj65equ] {
        display: block;
        text-align: right;
        padding: 0.75rem 0;
        border: none;
        position: relative;
        padding-right: 45%;
    }

    .table tbody td[b-7baxj65equ]::before {
        content: attr(data-label);
        position: absolute;
        right: 0;
        width: 40%;
        font-weight: 700;
        color: #003d7a;
        white-space: nowrap;
    }

    .table tbody td:first-child[b-7baxj65equ] {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding-top: 0;
    }

    .table tbody td:last-child[b-7baxj65equ] {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding-bottom: 0;
    }

    /* تنسيق العناصر داخل الكاردات */
    .display-order[b-7baxj65equ],
    .template-title[b-7baxj65equ],
    .template-description[b-7baxj65equ],
    .file-name[b-7baxj65equ],
    .badge[b-7baxj65equ] {
        display: inline-block;
        text-align: right;
    }

    .template-description[b-7baxj65equ] {
        max-width: 100%;
        text-align: right;
    }

    .action-buttons[b-7baxj65equ] {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    .action-buttons .btn[b-7baxj65equ] {
        flex: 1;
        min-width: auto;
    }
}

@media (max-width: 576px) {
    .page-title[b-7baxj65equ] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-7baxj65equ] {
        font-size: 0.85rem;
    }

    .stat-value[b-7baxj65equ] {
        font-size: 1.25rem;
    }

    .table tbody tr[b-7baxj65equ] {
        padding: 0.85rem;
    }

    .table tbody td[b-7baxj65equ] {
        padding: 0.6rem 0;
        padding-right: 50%;
        font-size: 0.9rem;
    }

    .table tbody td[b-7baxj65equ]::before {
        width: 45%;
        font-size: 0.85rem;
    }

    .action-buttons .btn[b-7baxj65equ] {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Admin/Profile.razor.rz.scp.css */
/* ========================================
   👤 Profile Page - Professional Design
   ======================================== */

.profile-page[b-rsbdwtpeol] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem;
}

/* Page Header */
.page-header[b-rsbdwtpeol] {
    text-align: center;
    margin-bottom: 2.5rem;
    animation: fadeInDown-b-rsbdwtpeol 0.6s ease-out;
}

.page-title[b-rsbdwtpeol] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.page-title i[b-rsbdwtpeol] {
    font-size: 2.5rem;
    color: #d4af37;
}

.page-subtitle[b-rsbdwtpeol] {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* Profile Container */
.profile-container[b-rsbdwtpeol] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: fadeInUp-b-rsbdwtpeol 0.6s ease-out;
}

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

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

/* Profile Section */
.profile-section[b-rsbdwtpeol] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-section:hover[b-rsbdwtpeol] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.section-header[b-rsbdwtpeol] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    padding: 1.5rem;
    border-bottom: 3px solid #d4af37;
}

.section-title[b-rsbdwtpeol] {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i[b-rsbdwtpeol] {
    font-size: 1.75rem;
    color: #d4af37;
}

.section-body[b-rsbdwtpeol] {
    padding: 2rem;
}

/* Info Grid */
.info-grid[b-rsbdwtpeol] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.info-item[b-rsbdwtpeol] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-right: 4px solid #003d7a;
    transition: all 0.3s ease;
}

.info-item:hover[b-rsbdwtpeol] {
    background: #e9ecef;
    border-right-color: #d4af37;
    transform: translateX(-5px);
}

.info-label[b-rsbdwtpeol] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.info-value[b-rsbdwtpeol] {
    font-size: 1.125rem;
    font-weight: 500;
    color: #003d7a;
    word-break: break-word;
}

/* Password Form */
.password-form[b-rsbdwtpeol] {
    max-width: 600px;
}

.form-group[b-rsbdwtpeol] {
    margin-bottom: 1.5rem;
}

.form-label[b-rsbdwtpeol] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label.required[b-rsbdwtpeol]::after {
    content: '*';
    color: #dc3545;
    margin-right: 0.25rem;
}

.form-label i[b-rsbdwtpeol] {
    color: #003d7a;
    font-size: 1.1rem;
}

.form-control[b-rsbdwtpeol] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: white;
}

.form-control:focus[b-rsbdwtpeol] {
    outline: none;
    border-color: #003d7a;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.15);
}

.form-control[b-rsbdwtpeol]::placeholder {
    color: #adb5bd;
}

/* Password Input Wrapper */
.password-input-wrapper[b-rsbdwtpeol] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-control[b-rsbdwtpeol] {
    padding-left: 3rem;
}

.password-toggle-btn[b-rsbdwtpeol] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
}

.password-toggle-btn:hover[b-rsbdwtpeol] {
    color: #003d7a;
}

.password-toggle-btn i[b-rsbdwtpeol] {
    font-size: 1.25rem;
}

/* Form Text (Helper) */
.form-text[b-rsbdwtpeol] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Validation Message */
.validation-message[b-rsbdwtpeol] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

/* Checkbox */
.form-check[b-rsbdwtpeol] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-check:hover[b-rsbdwtpeol] {
    background: #e9ecef;
    border-color: #003d7a;
}

.form-check-input[b-rsbdwtpeol] {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
    cursor: pointer;
    border: 2px solid #003d7a;
}

.form-check-input:checked[b-rsbdwtpeol] {
    background-color: #003d7a;
    border-color: #003d7a;
}

.form-check-input:focus[b-rsbdwtpeol] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.25);
}

/* ============================================
   🔘 Custom Switch Card
   ============================================ */

.status-toggle-container[b-rsbdwtpeol] {
    margin-top: 0.5rem;
}

/* إخفاء تام لأي عناصر bootstrap أو html افتراضية */
.status-toggle-container *:not(.custom-switch-card):not(.switch-content):not(.status-icon):not(.status-text):not(.custom-switch):not(.switch-slider):not(strong):not(small):not(i)[b-rsbdwtpeol] {
    display: none !important;
}

.status-toggle-container input[b-rsbdwtpeol],
.status-toggle-container input[type="checkbox"][b-rsbdwtpeol],
.status-toggle-container .form-check-input[b-rsbdwtpeol],
.status-toggle-container .form-check[b-rsbdwtpeol],
.status-toggle-container .form-switch[b-rsbdwtpeol],
.custom-switch-card input[b-rsbdwtpeol] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* إزالة كل pseudo-elements من bootstrap */
.status-toggle-container *[b-rsbdwtpeol]::before,
.status-toggle-container *[b-rsbdwtpeol]::after {
    display: none !important;
}

/* السماح فقط بالـ custom switch elements */
.custom-switch-card[b-rsbdwtpeol],
.custom-switch-card *[b-rsbdwtpeol],
.custom-switch[b-rsbdwtpeol],
.custom-switch *[b-rsbdwtpeol],
.switch-slider[b-rsbdwtpeol] {
    display: revert !important;
}

.custom-switch-card[b-rsbdwtpeol] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 85px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.custom-switch-card:hover[b-rsbdwtpeol] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
}

.custom-switch-card:active[b-rsbdwtpeol] {
    transform: scale(0.98);
}

.custom-switch-card .switch-content[b-rsbdwtpeol] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-switch-card .status-icon[b-rsbdwtpeol] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.custom-switch-card .status-icon[b-rsbdwtpeol] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.custom-switch-card .status-text[b-rsbdwtpeol] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.custom-switch-card .status-text strong[b-rsbdwtpeol] {
    font-size: 1.05rem;
    color: #dc3545;
    font-weight: 600;
    transition: color 0.3s ease;
}

.custom-switch-card .status-text small[b-rsbdwtpeol] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: normal;
}

/* Custom Switch Styles */
.custom-switch[b-rsbdwtpeol] {
    width: 60px;
    height: 30px;
    background-color: #dc3545;
    border-radius: 30px;
    position: relative;
    transition: all 0.4s ease;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-switch .switch-slider[b-rsbdwtpeol] {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Active State */
.custom-switch.active[b-rsbdwtpeol] {
    background-color: #10b981;
}

.custom-switch.active .switch-slider[b-rsbdwtpeol] {
    right: 33px;
}

/* Active Card Styles */
.custom-switch-card:has(.custom-switch.active) .status-icon[b-rsbdwtpeol] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.custom-switch-card:has(.custom-switch.active) .status-text strong[b-rsbdwtpeol] {
    color: #10b981;
}

/* Legacy form-check styles (backup) */
.form-check-label[b-rsbdwtpeol] {
    cursor: pointer;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.form-check-label i[b-rsbdwtpeol] {
    color: #003d7a;
    margin-top: 0.125rem;
}

.form-check-label small[b-rsbdwtpeol] {
    margin-top: 0.25rem;
    font-weight: 400;
}

/* Form Actions */
.form-actions[b-rsbdwtpeol] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn[b-rsbdwtpeol] {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-lg[b-rsbdwtpeol] {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

.btn-primary[b-rsbdwtpeol] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.btn-primary:hover:not(:disabled)[b-rsbdwtpeol] {
    background: linear-gradient(135deg, #00589e 0%, #0071bc 100%);
    box-shadow: 0 6px 20px rgba(0, 61, 122, 0.4);
    transform: translateY(-2px);
}

.btn-primary:active:not(:disabled)[b-rsbdwtpeol] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 61, 122, 0.3);
}

.btn-secondary[b-rsbdwtpeol] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-rsbdwtpeol] {
    background: #5a6268;
    transform: translateY(-2px);
}

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

.spinner-border[b-rsbdwtpeol] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15rem solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-rsbdwtpeol 0.75s linear infinite;
}

.spinner-border-sm[b-rsbdwtpeol] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@keyframes spinner-border-b-rsbdwtpeol {
    to {
        transform: rotate(360deg);
    }
}

/* Text Utilities */
.text-muted[b-rsbdwtpeol] {
    color: #6c757d !important;
}

/* Responsive Design */
/* ============================================
   📱 Responsive Design - Mobile First
   ============================================ */

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .profile-page[b-rsbdwtpeol] {
        padding: 1.5rem 1rem;
    }

    .info-grid[b-rsbdwtpeol] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .profile-page[b-rsbdwtpeol] {
        padding: 1rem;
    }

    .page-header[b-rsbdwtpeol] {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

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

    .page-title i[b-rsbdwtpeol] {
        font-size: 2rem;
    }

    .page-subtitle[b-rsbdwtpeol] {
        font-size: 1rem;
        margin-top: 0.5rem;
    }

    .section-header[b-rsbdwtpeol] {
        padding: 1.25rem 1.5rem;
    }

    .section-title[b-rsbdwtpeol] {
        font-size: 1.35rem;
    }

    .section-body[b-rsbdwtpeol] {
        padding: 1.5rem;
    }

    .info-grid[b-rsbdwtpeol] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .password-form[b-rsbdwtpeol] {
        max-width: 100%;
    }

    .form-row[b-rsbdwtpeol] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-group[b-rsbdwtpeol] {
        width: 100%;
    }

    .form-actions[b-rsbdwtpeol] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .btn[b-rsbdwtpeol] {
        width: 100%;
    }

    .custom-switch-card[b-rsbdwtpeol] {
        padding: 1.25rem;
        min-height: 75px;
    }

    .custom-switch-card .status-icon[b-rsbdwtpeol] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .custom-switch-card .status-text strong[b-rsbdwtpeol] {
        font-size: 1rem;
    }

    .custom-switch-card .status-text small[b-rsbdwtpeol] {
        font-size: 0.8rem;
    }
}

/* Mobile (480px and down) */
@media (max-width: 480px) {
    .profile-page[b-rsbdwtpeol] {
        padding: 0.75rem;
    }

    .page-header[b-rsbdwtpeol] {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    .page-title[b-rsbdwtpeol] {
        font-size: 1.5rem;
        gap: 0.5rem;
    }

    .page-title i[b-rsbdwtpeol] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-rsbdwtpeol] {
        font-size: 0.9rem;
    }

    .profile-section[b-rsbdwtpeol] {
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .section-header[b-rsbdwtpeol] {
        padding: 1rem;
    }

    .section-title[b-rsbdwtpeol] {
        font-size: 1.15rem;
    }

    .section-title i[b-rsbdwtpeol] {
        font-size: 1.15rem;
    }

    .section-body[b-rsbdwtpeol] {
        padding: 1rem;
    }

    .info-item[b-rsbdwtpeol] {
        padding: 0.875rem;
    }

    .info-label[b-rsbdwtpeol] {
        font-size: 0.8rem;
    }

    .info-value[b-rsbdwtpeol] {
        font-size: 0.95rem;
    }

    .form-label[b-rsbdwtpeol] {
        font-size: 0.9rem;
    }

    .form-control[b-rsbdwtpeol] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .password-toggle[b-rsbdwtpeol] {
        padding: 0.75rem;
    }

    .btn[b-rsbdwtpeol] {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }

    .validation-message[b-rsbdwtpeol] {
        font-size: 0.8rem;
    }

    .password-strength[b-rsbdwtpeol] {
        font-size: 0.8rem;
    }

    .custom-switch-card[b-rsbdwtpeol] {
        padding: 1rem;
        min-height: auto;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .custom-switch-card .switch-content[b-rsbdwtpeol] {
        flex-direction: column;
        text-align: center;
    }

    .custom-switch-card .status-icon[b-rsbdwtpeol] {
        width: 48px;
        height: 48px;
    }

    .custom-switch-card .status-text strong[b-rsbdwtpeol] {
        font-size: 0.95rem;
    }

    .custom-switch-card .status-text small[b-rsbdwtpeol] {
        font-size: 0.8rem;
    }

    .custom-switch[b-rsbdwtpeol] {
        margin: 0 auto;
        width: 56px;
        height: 28px;
    }

    .custom-switch .switch-slider[b-rsbdwtpeol] {
        width: 22px;
        height: 22px;
    }

    .custom-switch.active .switch-slider[b-rsbdwtpeol] {
        right: 31px;
    }   transform: translateX(26px);[b-rsbdwtpeol]
    }
}
/* /Components/Pages/Admin/Requests/Details.razor.rz.scp.css */
/* ========================================
   🎨 Admin Request Details - Styling
   ======================================== */

/* 📦 Page Container */
.details-page[b-fnvhzoimta] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 2rem 0;
}

.details-page .container-fluid[b-fnvhzoimta] {
    max-width: 1200px;
    margin: 0 auto;
}

/* 🔄 Loading State */
.loading-container[b-fnvhzoimta] {
    padding: 6rem 0;
    text-align: center;
    color: #6c757d;
}

.loading-container .spinner-border[b-fnvhzoimta] {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 0.35em;
}

/* ❌ Error State */
.error-container[b-fnvhzoimta] {
    padding: 6rem 2rem;
    text-align: center;
}

.error-icon[b-fnvhzoimta] {
    font-size: 5rem;
    color: #dc3545;
    margin-bottom: 1.5rem;
}

.error-container h3[b-fnvhzoimta] {
    color: #003d7a;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.error-container p[b-fnvhzoimta] {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* 📌 Page Header */
.page-header[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-content[b-fnvhzoimta] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-icon[b-fnvhzoimta] {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #d4af37;
}

.header-text[b-fnvhzoimta] {
    flex: 1;
}

.page-title[b-fnvhzoimta] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: white;
}

.request-badge[b-fnvhzoimta] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.badge-number[b-fnvhzoimta] {
    background: linear-gradient(135deg, #d4af37 0%, #e6c550 100%);
    color: #003d7a;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.badge-date[b-fnvhzoimta] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-actions[b-fnvhzoimta] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-actions .btn[b-fnvhzoimta] {
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
}

.header-actions .btn-outline-light[b-fnvhzoimta] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.header-actions .btn-outline-light:hover[b-fnvhzoimta] {
    background: white;
    border-color: white;
    color: #003d7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.header-actions .btn-danger[b-fnvhzoimta] {
    background: linear-gradient(135deg, #dc3545 0%, #e45565 100%);
}

.header-actions .btn-danger:hover[b-fnvhzoimta] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* 📊 Content Grid */
.content-grid[b-fnvhzoimta] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* 💳 Info Card */
.info-card[b-fnvhzoimta] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    overflow: hidden;
    animation: fadeInUp-b-fnvhzoimta 0.4s ease-out;
}

.info-card .card-header[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-card .card-header i[b-fnvhzoimta] {
    font-size: 1.75rem;
    color: #d4af37;
}

.info-card .card-header h3[b-fnvhzoimta] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.info-card .card-body[b-fnvhzoimta] {
    padding: 2rem;
}

.info-row[b-fnvhzoimta] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

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

.info-label[b-fnvhzoimta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #003d7a;
    font-size: 0.95rem;
}

.info-label i[b-fnvhzoimta] {
    font-size: 1.1rem;
    color: #d4af37;
}

.info-value[b-fnvhzoimta] {
    color: #495057;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

/* تنسيق خاص للقيم القابلة للنسخ */
.info-value.info-value-copyable[b-fnvhzoimta] {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    justify-content: space-between;
    gap: 0.75rem;
}

.info-value.info-value-copyable:hover[b-fnvhzoimta] {
    background: white;
    border-color: #d4af37;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.copyable-text[b-fnvhzoimta] {
    font-weight: 600;
    color: #003d7a;
    flex: 1;
}

.btn-copy[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.btn-copy:not(:disabled):hover[b-fnvhzoimta] {
    background: linear-gradient(135deg, #d4af37 0%, #e6c550 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-copy:not(:disabled):active[b-fnvhzoimta] {
    transform: scale(0.95);
}

.btn-copy:disabled[b-fnvhzoimta] {
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}

.btn-copy.copied[b-fnvhzoimta] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
    animation: successPulse-b-fnvhzoimta 0.4s ease-out;
    cursor: pointer;
}

.btn-copy.copied i[b-fnvhzoimta] {
    animation: checkBounce-b-fnvhzoimta 0.5s ease-out;
}

.btn-copy i[b-fnvhzoimta] {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

.direction-ltr[b-fnvhzoimta] {
    direction: ltr;
    text-align: right;
}

/* تأثيرات النسخ الناجح */
@keyframes successPulse-b-fnvhzoimta {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.6);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes checkBounce-b-fnvhzoimta {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.8) rotate(-5deg);
    }
    50% {
        transform: scale(1.3) rotate(5deg);
    }
    75% {
        transform: scale(0.9) rotate(-3deg);
    }
}

/* 📁 Files Card */
.files-card[b-fnvhzoimta] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    overflow: hidden;
    animation: fadeInUp-b-fnvhzoimta 0.4s ease-out 0.1s;
    animation-fill-mode: both;
}

.files-card .card-header[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.files-card .card-header i[b-fnvhzoimta] {
    font-size: 1.75rem;
    color: #d4af37;
}

.files-card .card-header h3[b-fnvhzoimta] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1;
}

.files-count[b-fnvhzoimta] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.files-card .card-body[b-fnvhzoimta] {
    padding: 2rem;
}

/* 📂 Files Grid */
.files-grid[b-fnvhzoimta] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.file-item[b-fnvhzoimta] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.file-item:hover[b-fnvhzoimta] {
    background: white;
    border-color: #003d7a;
    transform: translateX(-4px);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
}

.file-icon[b-fnvhzoimta] {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.file-info[b-fnvhzoimta] {
    flex: 1;
    min-width: 0;
}

.file-name[b-fnvhzoimta] {
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-meta[b-fnvhzoimta] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.file-size[b-fnvhzoimta],
.file-type[b-fnvhzoimta] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.file-actions[b-fnvhzoimta] {
    display: flex;
    gap: 0.5rem;
}

.file-actions .btn[b-fnvhzoimta] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
}

.file-actions .btn-primary[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.file-actions .btn-primary:hover[b-fnvhzoimta] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.file-actions .btn-info[b-fnvhzoimta] {
    background: linear-gradient(135deg, #17a2b8 0%, #20c1d7 100%);
}

.file-actions .btn-info:hover[b-fnvhzoimta] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

/* 📭 Empty Files State */
.empty-files[b-fnvhzoimta] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-files i[b-fnvhzoimta] {
    font-size: 3rem;
    color: #d4af37;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-files p[b-fnvhzoimta] {
    margin: 0;
    font-size: 1rem;
}

/* 📊 Summary Card */
.summary-card[b-fnvhzoimta] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    animation: fadeInUp-b-fnvhzoimta 0.4s ease-out 0.2s;
    animation-fill-mode: both;
}

.summary-item[b-fnvhzoimta] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.summary-item:hover[b-fnvhzoimta] {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
}

.summary-icon[b-fnvhzoimta] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.summary-icon.summary-primary[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.summary-icon.summary-success[b-fnvhzoimta] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.summary-icon.summary-info[b-fnvhzoimta] {
    background: linear-gradient(135deg, #17a2b8 0%, #20c1d7 100%);
}

.summary-icon.summary-warning[b-fnvhzoimta] {
    background: linear-gradient(135deg, #d4af37 0%, #e6c550 100%);
}

.summary-content[b-fnvhzoimta] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-fnvhzoimta] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.summary-value[b-fnvhzoimta] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #003d7a;
}

/* 🖼️ Image Preview Modal */
.image-preview-modal[b-fnvhzoimta] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn-b-fnvhzoimta 0.3s ease-out;
}

.image-preview-modal .modal-content[b-fnvhzoimta] {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: zoomIn-b-fnvhzoimta 0.3s ease-out;
}

.image-preview-modal .modal-header[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-preview-modal .modal-header h5[b-fnvhzoimta] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.image-preview-modal .btn-close[b-fnvhzoimta] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-preview-modal .btn-close:hover[b-fnvhzoimta] {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.image-preview-modal .modal-body[b-fnvhzoimta] {
    padding: 2rem;
    overflow: auto;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-modal .modal-body img[b-fnvhzoimta] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.image-preview-modal .modal-footer[b-fnvhzoimta] {
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.image-preview-modal .modal-footer .btn[b-fnvhzoimta] {
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.image-preview-modal .modal-footer .btn-primary[b-fnvhzoimta] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.image-preview-modal .modal-footer .btn-primary:hover[b-fnvhzoimta] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.image-preview-modal .modal-footer .btn-secondary[b-fnvhzoimta] {
    background: #6c757d;
}

.image-preview-modal .modal-footer .btn-secondary:hover[b-fnvhzoimta] {
    background: #5a6268;
    transform: translateY(-2px);
}

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

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

@keyframes zoomIn-b-fnvhzoimta {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 📱 Responsive Design */
@media (max-width: 992px) {
    .content-grid[b-fnvhzoimta] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .details-page[b-fnvhzoimta] {
        padding: 1rem 0;
    }

    .page-header[b-fnvhzoimta] {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-fnvhzoimta] {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-fnvhzoimta] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

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

    .header-actions[b-fnvhzoimta] {
        width: 100%;
        flex-direction: column;
    }

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

    .info-row[b-fnvhzoimta] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .info-label[b-fnvhzoimta] {
        font-size: 0.9rem;
    }

    .info-value[b-fnvhzoimta] {
        padding-right: 0;
    }

    .info-value.info-value-copyable[b-fnvhzoimta] {
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
    }

    .copyable-text[b-fnvhzoimta] {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-copy[b-fnvhzoimta] {
        width: 32px;
        height: 32px;
    }

    .btn-copy i[b-fnvhzoimta] {
        font-size: 0.85rem;
    }

    .file-item[b-fnvhzoimta] {
        flex-direction: column;
        align-items: flex-start;
    }

    .file-actions[b-fnvhzoimta] {
        width: 100%;
        justify-content: flex-end;
    }

    .summary-card[b-fnvhzoimta] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
    }

    .image-preview-modal .modal-content[b-fnvhzoimta] {
        max-height: 95vh;
    }

    .image-preview-modal .modal-body[b-fnvhzoimta] {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .page-title[b-fnvhzoimta] {
        font-size: 1.25rem;
    }

    .badge-number[b-fnvhzoimta] {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }

    .badge-date[b-fnvhzoimta] {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .info-card .card-body[b-fnvhzoimta],
    .files-card .card-body[b-fnvhzoimta] {
        padding: 1.5rem;
    }

    .file-item[b-fnvhzoimta] {
        padding: 1rem;
    }

    .summary-value[b-fnvhzoimta] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Admin/Requests/Index.razor.rz.scp.css */
/* ========================================
   🎨 Admin Requests Index - Styling
   ======================================== */

/* 📦 Page Container */
.admin-page[b-t6p2o6jrxg] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 2rem 0;
}

.admin-page .container-fluid[b-t6p2o6jrxg] {
    max-width: 1400px;
    margin: 0 auto;
}

/* 📌 Page Header */
.page-header[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-content[b-t6p2o6jrxg] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-t6p2o6jrxg] {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #d4af37;
}

.header-text[b-t6p2o6jrxg] {
    color: white;
}

.page-title[b-t6p2o6jrxg] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.page-subtitle[b-t6p2o6jrxg] {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.header-actions .btn-outline-primary[b-t6p2o6jrxg] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.header-actions .btn-outline-primary:hover[b-t6p2o6jrxg] {
    background: white;
    border-color: white;
    color: #003d7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* 📊 Statistics Cards */
.stats-grid[b-t6p2o6jrxg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-t6p2o6jrxg] {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-t6p2o6jrxg] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.15);
}

.stat-icon[b-t6p2o6jrxg] {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon.stat-primary[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.stat-icon.stat-success[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.stat-icon.stat-warning[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #d4af37 0%, #e6c550 100%);
}

.stat-content[b-t6p2o6jrxg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-t6p2o6jrxg] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.stat-value[b-t6p2o6jrxg] {
    font-size: 2rem;
    font-weight: 700;
    color: #003d7a;
}

/* 📄 Content Card */
.content-card[b-t6p2o6jrxg] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
}

/* 📱 Mobile Sort Section */
.mobile-sort-section[b-t6p2o6jrxg] {
    display: none;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.mobile-sort-label[b-t6p2o6jrxg] {
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.mobile-sort-label i[b-t6p2o6jrxg] {
    color: #d4af37;
    font-size: 1.1rem;
}

.mobile-sort-buttons[b-t6p2o6jrxg] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mobile-sort-buttons .btn[b-t6p2o6jrxg] {
    flex: 1;
    min-width: calc(33.333% - 0.35rem);
    border-radius: 8px;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.3s ease;
}

.mobile-sort-buttons .btn-primary[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border: none;
}

.mobile-sort-buttons .btn-outline-primary[b-t6p2o6jrxg] {
    border: 2px solid #003d7a;
    color: #003d7a;
}

.mobile-sort-buttons .btn-outline-primary:hover[b-t6p2o6jrxg] {
    background: #003d7a;
    color: white;
}

/* 📄 Content Card */
.filter-card[b-t6p2o6jrxg] {
    background: white;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filter-header[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-title[b-t6p2o6jrxg] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #003d7a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-title i[b-t6p2o6jrxg] {
    font-size: 1.2rem;
    color: #d4af37;
}

/* ===== زر التصدير إلى Excel ===== */
.btn-export[b-t6p2o6jrxg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
}

.btn-export:hover:not(:disabled)[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #218838 0%, #1ea87a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
    color: white;
}

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

.btn-export i[b-t6p2o6jrxg] {
    font-size: 1.1rem;
}

.btn-export .spinner-border[b-t6p2o6jrxg] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.filter-body[b-t6p2o6jrxg] {
    padding: 1.5rem;
}

.filter-grid[b-t6p2o6jrxg] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.filter-item[b-t6p2o6jrxg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label[b-t6p2o6jrxg] {
    font-weight: 600;
    color: #003d7a;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label i[b-t6p2o6jrxg] {
    color: #d4af37;
}

.filter-item .form-control[b-t6p2o6jrxg],
.filter-item .form-select[b-t6p2o6jrxg] {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.filter-item .form-control:focus[b-t6p2o6jrxg],
.filter-item .form-select:focus[b-t6p2o6jrxg] {
    border-color: #003d7a;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.15);
}

.search-info[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #e7f3ff 0%, #f0f7ff 100%);
    border: 2px solid #b3d9ff;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #003d7a;
    margin-top: 1rem;
}

.search-info i[b-t6p2o6jrxg] {
    color: #0052a3;
    font-size: 1.1rem;
}

.search-info span[b-t6p2o6jrxg] {
    flex: 1;
    font-weight: 600;
}

.search-info .btn[b-t6p2o6jrxg] {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

/* 📄 Content Card */
.loading-container[b-t6p2o6jrxg] {
    padding: 4rem 0;
    text-align: center;
    color: #6c757d;
}

.loading-container .spinner-border[b-t6p2o6jrxg] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* 📭 Empty State */
.empty-state[b-t6p2o6jrxg] {
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-t6p2o6jrxg] {
    font-size: 5rem;
    color: #d4af37;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state h3[b-t6p2o6jrxg] {
    color: #003d7a;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.empty-state p[b-t6p2o6jrxg] {
    color: #6c757d;
    font-size: 1rem;
}

/* 📋 Table Styling */
.table-responsive[b-t6p2o6jrxg] {
    border-radius: 12px;
    overflow: hidden;
}

.table[b-t6p2o6jrxg] {
    margin: 0;
    font-size: 0.95rem;
}

.table thead[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.table thead th[b-t6p2o6jrxg] {
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
    text-align: right;
    white-space: nowrap;
}

/* 🔽 Sortable Headers */
.sortable-header[b-t6p2o6jrxg] {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    position: relative;
}

.sortable-header:hover[b-t6p2o6jrxg] {
    background: rgba(255, 255, 255, 0.1);
}

.sortable-header .header-content[b-t6p2o6jrxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sortable-header .header-content i[b-t6p2o6jrxg] {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.sortable-header .header-content i.text-muted[b-t6p2o6jrxg] {
    opacity: 0.5;
}

.sortable-header .header-content i.text-primary[b-t6p2o6jrxg] {
    color: #d4af37 !important;
    font-weight: bold;
}

.sortable-header:hover .header-content i.text-muted[b-t6p2o6jrxg] {
    opacity: 1;
}

.table tbody tr[b-t6p2o6jrxg] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-t6p2o6jrxg] {
    background-color: rgba(0, 61, 122, 0.03);
    transform: scale(1.01);
}

.table tbody td[b-t6p2o6jrxg] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* 🔖 Request ID Badge */
.request-id[b-t6p2o6jrxg] {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #e6c550 100%);
    color: #003d7a;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* 👤 User Info */
.user-info[b-t6p2o6jrxg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.user-info i[b-t6p2o6jrxg] {
    font-size: 1.3rem;
}

/* 📅 Date Info */
.date-info[b-t6p2o6jrxg] {
    line-height: 1.4;
}

.date-info small[b-t6p2o6jrxg] {
    font-size: 0.8rem;
}

/* 🎯 Badges */
.badge[b-t6p2o6jrxg] {
    padding: 0.5rem 0.8rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.badge.bg-info[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #17a2b8 0%, #20c1d7 100%) !important;
}

/* 🔘 Action Buttons */
.action-buttons[b-t6p2o6jrxg] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-buttons .btn[b-t6p2o6jrxg] {
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-buttons .btn-primary[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
}

.action-buttons .btn-primary:hover[b-t6p2o6jrxg] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.action-buttons .btn-danger[b-t6p2o6jrxg] {
    background: linear-gradient(135deg, #dc3545 0%, #e45565 100%);
}

.action-buttons .btn-danger:hover[b-t6p2o6jrxg] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* 📱 Responsive Design */
@media (max-width: 1200px) {
    .stats-grid[b-t6p2o6jrxg] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-page[b-t6p2o6jrxg] {
        padding: 1rem 0;
    }

    .page-header[b-t6p2o6jrxg] {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-t6p2o6jrxg] {
        width: 100%;
    }

    .header-icon[b-t6p2o6jrxg] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

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

    .header-actions[b-t6p2o6jrxg] {
        width: 100%;
    }

    .header-actions .btn[b-t6p2o6jrxg] {
        width: 100%;
    }

    .stats-grid[b-t6p2o6jrxg] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card[b-t6p2o6jrxg] {
        padding: 1.25rem;
    }

    .stat-icon[b-t6p2o6jrxg] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .stat-value[b-t6p2o6jrxg] {
        font-size: 1.5rem;
    }

    /* 🔍 Filter Responsive */
    .filter-card[b-t6p2o6jrxg] {
        border-radius: 12px;
    }

    .filter-header[b-t6p2o6jrxg] {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-title[b-t6p2o6jrxg] {
        font-size: 1rem;
    }

    .btn-export[b-t6p2o6jrxg] {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
    }

    .filter-body[b-t6p2o6jrxg] {
        padding: 1rem;
    }

    .filter-grid[b-t6p2o6jrxg] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .search-info[b-t6p2o6jrxg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .search-info .btn[b-t6p2o6jrxg] {
        width: 100%;
    }

    .content-card[b-t6p2o6jrxg] {
        padding: 1rem;
        border-radius: 12px;
    }

    /* 📱 إظهار أزرار الترتيب في الموبايل */
    .mobile-sort-section[b-t6p2o6jrxg] {
        display: block;
    }

    /* 📱 تحويل الجدول إلى كاردات في الموبايل */
    .table-responsive[b-t6p2o6jrxg] {
        overflow: visible;
    }

    .table thead[b-t6p2o6jrxg] {
        display: none;
    }

    .sortable-header[b-t6p2o6jrxg] {
        cursor: default;
    }

    .table[b-t6p2o6jrxg],
    .table tbody[b-t6p2o6jrxg],
    .table tr[b-t6p2o6jrxg] {
        display: block;
        width: 100%;
    }

    .table tbody tr[b-t6p2o6jrxg] {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 61, 122, 0.08);
    }

    .table tbody tr:hover[b-t6p2o6jrxg] {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 61, 122, 0.12);
    }

    .table tbody td[b-t6p2o6jrxg] {
        display: block;
        text-align: right;
        padding: 0.75rem 0;
        border: none;
        position: relative;
        padding-right: 45%;
        word-wrap: break-word; /* لكسر النصوص الطويلة */
        word-break: break-word; /* لكسر الكلمات الطويلة */
        overflow-wrap: break-word; /* لضمان لف النص */
    }

    .table tbody td[b-t6p2o6jrxg]::before {
        content: attr(data-label);
        position: absolute;
        right: 0;
        width: 40%;
        font-weight: 700;
        color: #003d7a;
        white-space: nowrap;
    }

    .table tbody td:first-child[b-t6p2o6jrxg] {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding-top: 0;
    }

    .table tbody td:last-child[b-t6p2o6jrxg] {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding-bottom: 0;
    }

    /* تنسيق العناصر داخل الكاردات */
    .request-id[b-t6p2o6jrxg],
    .user-info[b-t6p2o6jrxg],
    .date-info[b-t6p2o6jrxg],
    .badge[b-t6p2o6jrxg] {
        display: inline-block;
        text-align: right;
    }

    .user-info[b-t6p2o6jrxg] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .date-info[b-t6p2o6jrxg] {
        display: inline-block;
    }

    /* تنسيق البريد الإلكتروني في الموبايل */
    .table tbody td[data-label="البريد الإلكتروني"][b-t6p2o6jrxg] {
        word-break: break-all; /* كسر البريد الإلكتروني على مستوى الأحرف إذا لزم الأمر */
        overflow-wrap: anywhere; /* السماح بالكسر في أي مكان */
        font-size: 0.85rem; /* تصغير حجم الخط قليلاً */
        line-height: 1.4;
    }
    
    .table tbody td[data-label="البريد الإلكتروني"] span[b-t6p2o6jrxg] {
        display: inline-block;
        max-width: 100%;
        word-break: break-all;
    }

    /* تعديل أزرار الإجراءات في الموبايل */
    .action-buttons[b-t6p2o6jrxg] {
        justify-content: center; /* توسيط الأيقونات */
        margin-top: 0.5rem;
        flex-direction: row;
    }

    .action-buttons .btn[b-t6p2o6jrxg] {
        flex: 1;
        min-width: auto;
        display: flex;
        align-items: center;
        justify-content: center; /* توسيط المحتوى داخل الزر */
    }
}

@media (max-width: 576px) {
    .page-title[b-t6p2o6jrxg] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-t6p2o6jrxg] {
        font-size: 0.85rem;
    }

    .stat-value[b-t6p2o6jrxg] {
        font-size: 1.25rem;
    }

    .mobile-sort-buttons .btn[b-t6p2o6jrxg] {
        min-width: 100%;
        font-size: 0.9rem;
    }

    .table tbody tr[b-t6p2o6jrxg] {
        padding: 0.85rem;
    }

    .table tbody td[b-t6p2o6jrxg] {
        padding: 0.6rem 0;
        padding-right: 50%;
        font-size: 0.9rem;
    }

    .table tbody td[b-t6p2o6jrxg]::before {
        width: 45%;
        font-size: 0.85rem;
    }

    /* تنسيق أزرار الإجراءات في الموبايل الصغير */
    .action-buttons[b-t6p2o6jrxg] {
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .action-buttons .btn[b-t6p2o6jrxg] {
        padding: 0.6rem 0.5rem;
        font-size: 1rem;
        min-width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .action-buttons .btn i[b-t6p2o6jrxg] {
        font-size: 1.1rem;
    }

    /* تصغير حجم البريد الإلكتروني أكثر */
    .table tbody td[data-label="البريد الإلكتروني"][b-t6p2o6jrxg] {
        font-size: 0.8rem;
    }
}

/* ✨ Animations */
@keyframes fadeIn-b-t6p2o6jrxg {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-card[b-t6p2o6jrxg],
.stat-card[b-t6p2o6jrxg] {
    animation: fadeIn-b-t6p2o6jrxg 0.4s ease-out;
}

.stat-card:nth-child(1)[b-t6p2o6jrxg] {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2)[b-t6p2o6jrxg] {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3)[b-t6p2o6jrxg] {
    animation-delay: 0.3s;
}
/* /Components/Pages/Admin/Sessions/Index.razor.rz.scp.css */
/* ====================================
   إدارة الجلسات النشطة
   ==================================== */

/* إضافة مسافات للصفحة */
.admin-page[b-7s3c5ixde9] {
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
}

.admin-page .container-fluid[b-7s3c5ixde9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* عنوان الصفحة */
.page-title-section[b-7s3c5ixde9] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.section-title[b-7s3c5ixde9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i[b-7s3c5ixde9] {
    font-size: 2rem;
    color: #d4af37;
}

.section-subtitle[b-7s3c5ixde9] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
}

/* بطاقات الإحصائيات */
.stats-grid[b-7s3c5ixde9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-7s3c5ixde9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-7s3c5ixde9] {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon[b-7s3c5ixde9] {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.stat-success[b-7s3c5ixde9] {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.stat-icon.stat-primary[b-7s3c5ixde9] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.stat-icon.stat-warning[b-7s3c5ixde9] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.stat-content[b-7s3c5ixde9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-7s3c5ixde9] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.stat-value[b-7s3c5ixde9] {
    font-size: 2rem;
    font-weight: 700;
    color: #003d7a;
    line-height: 1;
}

/* الكروت الرئيسية */
.content-card[b-7s3c5ixde9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

/* شريط الإجراءات */
.actions-bar[b-7s3c5ixde9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    flex-wrap: wrap;
}

.actions-left[b-7s3c5ixde9],
.actions-right[b-7s3c5ixde9] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.text-monospace[b-7s3c5ixde9] {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.table-active[b-7s3c5ixde9] {
    background-color: rgba(0, 61, 122, 0.05) !important;
    border-left: 3px solid #003d7a;
}

/* تحسين عرض معلومات المستخدم */
.user-info[b-7s3c5ixde9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    text-align: right;
}

.date-info[b-7s3c5ixde9] {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

/* تحسين عرض الجدول */
.table-responsive[b-7s3c5ixde9] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table[b-7s3c5ixde9] {
    min-width: 1000px;
    table-layout: fixed;
    width: 100%;
}

.table thead th[b-7s3c5ixde9] {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    padding: 1rem 0.75rem;
    vertical-align: middle;
    text-align: center;
}

.table tbody td[b-7s3c5ixde9] {
    vertical-align: middle;
    padding: 1rem 0.75rem;
    text-align: center;
}

/* تحديد عرض الأعمدة */
.table thead th:nth-child(1)[b-7s3c5ixde9], /* Checkbox */
.table tbody td:nth-child(1)[b-7s3c5ixde9] {
    width: 50px;
    text-align: center;
}

.table thead th:nth-child(2)[b-7s3c5ixde9], /* اسم المستخدم */
.table tbody td:nth-child(2)[b-7s3c5ixde9] {
    width: 180px;
    text-align: right;
}

.table thead th:nth-child(3)[b-7s3c5ixde9], /* البريد الإلكتروني */
.table tbody td:nth-child(3)[b-7s3c5ixde9] {
    width: 220px;
    text-align: right;
}

.table thead th:nth-child(4)[b-7s3c5ixde9], /* وقت الدخول */
.table tbody td:nth-child(4)[b-7s3c5ixde9] {
    width: 150px;
    text-align: center;
}

.table thead th:nth-child(5)[b-7s3c5ixde9], /* آخر نشاط */
.table tbody td:nth-child(5)[b-7s3c5ixde9] {
    width: 120px;
    text-align: center;
}

.table thead th:nth-child(6)[b-7s3c5ixde9], /* تنتهي في */
.table tbody td:nth-child(6)[b-7s3c5ixde9] {
    width: 120px;
    text-align: center;
}

.table thead th:nth-child(7)[b-7s3c5ixde9], /* الإجراءات */
.table tbody td:nth-child(7)[b-7s3c5ixde9] {
    width: 100px;
    text-align: center;
}

.table tbody tr:hover[b-7s3c5ixde9] {
    background-color: rgba(0, 61, 122, 0.02);
}

/* تحسين الأزرار */
.btn[b-7s3c5ixde9] {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn:hover:not(:disabled)[b-7s3c5ixde9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* حالة التحميل والفراغ */
.loading-container[b-7s3c5ixde9] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state[b-7s3c5ixde9] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon[b-7s3c5ixde9] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-7s3c5ixde9] {
    font-size: 3rem;
    color: #6c757d;
}

.empty-state h3[b-7s3c5ixde9] {
    font-size: 1.5rem;
    color: #003d7a;
    margin-bottom: 0.5rem;
}

.empty-state p[b-7s3c5ixde9] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
}

/* Responsive للموبايل */
@media (max-width: 768px) {
    /* المسافات العامة */
    .admin-page[b-7s3c5ixde9] {
        padding: 1.5rem 0;
    }

    .admin-page .container-fluid[b-7s3c5ixde9] {
        padding: 0 1rem;
    }

    /* العنوان */
    .page-title-section[b-7s3c5ixde9] {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .section-title[b-7s3c5ixde9] {
        font-size: 1.4rem;
    }

    .section-title i[b-7s3c5ixde9] {
        font-size: 1.5rem;
    }

    .section-subtitle[b-7s3c5ixde9] {
        font-size: 0.9rem;
    }
    /* تحسين شريط الإجراءات */
    .actions-bar[b-7s3c5ixde9] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .actions-left[b-7s3c5ixde9],
    .actions-right[b-7s3c5ixde9] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .actions-left .btn[b-7s3c5ixde9],
    .actions-right .btn[b-7s3c5ixde9] {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }

    /* بطاقات الإحصائيات */
    .stats-grid[b-7s3c5ixde9] {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card[b-7s3c5ixde9] {
        padding: 1.25rem;
    }

    .stat-icon[b-7s3c5ixde9] {
        width: 50px;
        height: 50px;
        font-size: 1.35rem;
    }

    .stat-label[b-7s3c5ixde9] {
        font-size: 0.875rem;
    }

    .stat-value[b-7s3c5ixde9] {
        font-size: 1.75rem;
    }

    /* الكروت */
    .content-card[b-7s3c5ixde9] {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* تحسين الجدول للموبايل */
    .table-responsive[b-7s3c5ixde9] {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table[b-7s3c5ixde9] {
        font-size: 0.85rem;
    }

    .table thead th[b-7s3c5ixde9] {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .table tbody td[b-7s3c5ixde9] {
        padding: 0.75rem 0.5rem;
    }

    /* تصغير الأيقونات والأزرار في الجدول */
    .user-info i[b-7s3c5ixde9],
    .date-info i[b-7s3c5ixde9] {
        font-size: 1rem;
    }

    .btn-sm[b-7s3c5ixde9] {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }

    .badge[b-7s3c5ixde9] {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }

    /* تحسين عرض التاريخ */
    .date-info small[b-7s3c5ixde9] {
        font-size: 0.75rem;
    }

    /* حالات الفراغ والتحميل */
    .loading-container[b-7s3c5ixde9] {
        padding: 2rem 1rem;
    }

    .empty-state[b-7s3c5ixde9] {
        padding: 2rem 1rem;
    }

    .empty-icon[b-7s3c5ixde9] {
        width: 80px;
        height: 80px;
    }

    .empty-icon i[b-7s3c5ixde9] {
        font-size: 2.5rem;
    }

    .empty-state h3[b-7s3c5ixde9] {
        font-size: 1.3rem;
    }

    .empty-state p[b-7s3c5ixde9] {
        font-size: 0.9rem;
    }
}

/* Responsive للتابلت */
@media (min-width: 769px) and (max-width: 1024px) {
    .admin-page[b-7s3c5ixde9] {
        padding: 1.75rem 0;
    }

    .admin-page .container-fluid[b-7s3c5ixde9] {
        padding: 0 1.25rem;
    }

    .stats-grid[b-7s3c5ixde9] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .stat-card[b-7s3c5ixde9] {
        padding: 1.25rem;
    }

    .content-card[b-7s3c5ixde9] {
        padding: 1.25rem;
    }

    .table[b-7s3c5ixde9] {
        font-size: 0.9rem;
    }

    .actions-bar[b-7s3c5ixde9] {
        gap: 0.875rem;
    }

    .actions-left[b-7s3c5ixde9],
    .actions-right[b-7s3c5ixde9] {
        gap: 0.625rem;
    }

    .btn[b-7s3c5ixde9] {
        font-size: 0.9rem;
        padding: 0.55rem 0.9rem;
    }
}

/* تحسين للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .admin-page[b-7s3c5ixde9] {
        padding: 1rem 0;
    }

    .admin-page .container-fluid[b-7s3c5ixde9] {
        padding: 0 0.75rem;
    }

    .page-title-section[b-7s3c5ixde9] {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .section-title[b-7s3c5ixde9] {
        font-size: 1.2rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .section-title i[b-7s3c5ixde9] {
        font-size: 1.75rem;
    }

    .section-subtitle[b-7s3c5ixde9] {
        font-size: 0.85rem;
        text-align: center;
    }

    .stats-grid[b-7s3c5ixde9] {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .stat-card[b-7s3c5ixde9] {
        padding: 1rem;
    }

    .stat-icon[b-7s3c5ixde9] {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .stat-label[b-7s3c5ixde9] {
        font-size: 0.8rem;
    }

    .stat-value[b-7s3c5ixde9] {
        font-size: 1.5rem;
    }

    .content-card[b-7s3c5ixde9] {
        padding: 0.875rem;
        border-radius: 10px;
    }

    .actions-bar[b-7s3c5ixde9] {
        padding: 0.625rem;
    }

    .empty-state[b-7s3c5ixde9] {
        padding: 1.5rem 0.75rem;
    }

    .empty-icon[b-7s3c5ixde9] {
        width: 70px;
        height: 70px;
    }

    .empty-icon i[b-7s3c5ixde9] {
        font-size: 2rem;
    }

    .empty-state h3[b-7s3c5ixde9] {
        font-size: 1.15rem;
    }

    .empty-state p[b-7s3c5ixde9] {
        font-size: 0.85rem;
    }

    .actions-left .btn[b-7s3c5ixde9],
    .actions-right .btn[b-7s3c5ixde9] {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .table[b-7s3c5ixde9] {
        font-size: 0.8rem;
    }

    .badge[b-7s3c5ixde9] {
        font-size: 0.7rem;
        padding: 0.3rem 0.45rem;
    }
}

/* للشاشات الكبيرة جداً */
@media (min-width: 1400px) {
    .admin-page .container-fluid[b-7s3c5ixde9] {
        max-width: 1600px;
    }

    .stats-grid[b-7s3c5ixde9] {
        gap: 2rem;
    }
}

/* تحسين للطباعة */
@media print {
    .actions-bar[b-7s3c5ixde9],
    .btn[b-7s3c5ixde9],
    input[type="checkbox"][b-7s3c5ixde9] {
        display: none !important;
    }

    .table[b-7s3c5ixde9] {
        font-size: 0.8rem;
    }

    .page-title-section[b-7s3c5ixde9] {
        margin-bottom: 1rem !important;
    }
}
/* /Components/Pages/Admin/Users/Create.razor.rz.scp.css */
/* ========================================
   👤 Create User Page - Styling
   ======================================== */

.create-user-page[b-gru3d0isrd] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 0;
}

/* 📌 Page Header */
.page-header[b-gru3d0isrd] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border-radius: 0;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-content[b-gru3d0isrd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.header-icon[b-gru3d0isrd] {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #d4af37;
}

.header-text[b-gru3d0isrd] {
    color: white;
}

.page-title[b-gru3d0isrd] {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-subtitle[b-gru3d0isrd] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

/* 📝 Create User Card */
.create-user-card[b-gru3d0isrd] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

/* 📋 Form Sections */
.form-section[b-gru3d0isrd] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f2f5;
}

.form-section:last-of-type[b-gru3d0isrd] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title[b-gru3d0isrd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i[b-gru3d0isrd] {
    font-size: 1.5rem;
    color: #d4af37;
}

/* 🎯 Form Groups */
.form-group[b-gru3d0isrd] {
    margin-bottom: 1.5rem;
}

.form-label[b-gru3d0isrd] {
    display: block;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label.required[b-gru3d0isrd]::after {
    content: " *";
    color: #dc3545;
}

.form-label i[b-gru3d0isrd] {
    margin-left: 0.5rem;
    color: #d4af37;
}

.form-control[b-gru3d0isrd] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-control:focus[b-gru3d0isrd] {
    outline: none;
    border-color: #003d7a;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.1);
}

.form-control[b-gru3d0isrd]::placeholder {
    color: #adb5bd;
}

/* 🔐 Password Input */
.password-input-wrapper[b-gru3d0isrd] {
    position: relative;
}

.password-toggle-btn[b-gru3d0isrd] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.password-toggle-btn:hover[b-gru3d0isrd] {
    color: #003d7a;
}

.form-text[b-gru3d0isrd] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.form-text i[b-gru3d0isrd] {
    margin-left: 0.25rem;
}

/* 🎨 Roles Grid */
.roles-grid[b-gru3d0isrd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.role-card[b-gru3d0isrd] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.role-card[b-gru3d0isrd]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #6c757d 0%, #adb5bd 100%);
    transition: width 0.3s ease;
}

.role-card:hover[b-gru3d0isrd] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
    transform: translateY(-2px);
}

.role-card:hover[b-gru3d0isrd]::before {
    width: 6px;
}

.role-card.selected[b-gru3d0isrd] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #e7f3ff 0%, #cfe7ff 100%);
    box-shadow: 0 6px 20px rgba(0, 61, 122, 0.15);
}

.role-card.selected[b-gru3d0isrd]::before {
    background: linear-gradient(180deg, #003d7a 0%, #d4af37 100%);
    width: 6px;
}

.role-icon[b-gru3d0isrd] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
}

.role-icon.super-admin[b-gru3d0isrd] {
    background: linear-gradient(135deg, #d4af37 0%, #f4c430 100%);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.role-icon.admin[b-gru3d0isrd] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.role-icon.customer-services[b-gru3d0isrd] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.role-icon.user[b-gru3d0isrd] {
    background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.role-content[b-gru3d0isrd] {
    flex: 1;
}

.role-title[b-gru3d0isrd] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 0.5rem;
}

.role-description[b-gru3d0isrd] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.role-features[b-gru3d0isrd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-features .feature[b-gru3d0isrd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #495057;
}

.role-features .feature i[b-gru3d0isrd] {
    color: #10b981;
    font-size: 1rem;
}

.role-features .feature i.text-muted[b-gru3d0isrd] {
    color: #adb5bd !important;
}

.role-checkmark[b-gru3d0isrd] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    animation: checkmarkAppear-b-gru3d0isrd 0.3s ease;
}

@keyframes checkmarkAppear-b-gru3d0isrd {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ✅ Form Actions */
.form-actions[b-gru3d0isrd] {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #f0f2f5;
}

.btn[b-gru3d0isrd] {
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-lg[b-gru3d0isrd] {
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
}

.btn-primary[b-gru3d0isrd] {
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.2);
}

.btn-primary:hover:not(:disabled)[b-gru3d0isrd] {
    background: linear-gradient(135deg, #002952 0%, #003d7a 100%);
    box-shadow: 0 6px 16px rgba(0, 61, 122, 0.3);
    transform: translateY(-2px);
}

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

.btn-secondary[b-gru3d0isrd] {
    background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.btn-secondary:hover:not(:disabled)[b-gru3d0isrd] {
    background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%);
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.3);
    transform: translateY(-2px);
}

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

/* 🔴 Validation */
.validation-message[b-gru3d0isrd] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
}

/* 📱 Responsive Design */
@media (max-width: 768px) {
    .create-user-page[b-gru3d0isrd] {
        padding: 1rem 0;
    }

    .page-header[b-gru3d0isrd] {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-gru3d0isrd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-gru3d0isrd] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

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

    .create-user-card[b-gru3d0isrd] {
        padding: 1.5rem;
    }

    .roles-grid[b-gru3d0isrd] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-gru3d0isrd] {
        flex-direction: column;
    }

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

@media (max-width: 480px) {
    .page-header[b-gru3d0isrd] {
        padding: 1rem;
        border-radius: 12px;
    }

    .page-title[b-gru3d0isrd] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-gru3d0isrd] {
        font-size: 0.85rem;
    }

    .create-user-card[b-gru3d0isrd] {
        padding: 1rem;
        border-radius: 12px;
    }

    .section-title[b-gru3d0isrd] {
        font-size: 1.1rem;
    }

    .form-control[b-gru3d0isrd] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .role-icon[b-gru3d0isrd] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .role-title[b-gru3d0isrd] {
        font-size: 1rem;
    }

    .role-description[b-gru3d0isrd] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Admin/Users/Index.razor.rz.scp.css */
/* ========================================
   👥 Users Management Page
   ======================================== */

.users-page[b-s4hz63o2om] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem;
}

/* Page Header */
.page-header[b-s4hz63o2om] {
    margin-bottom: 2rem;
    animation: fadeInDown-b-s4hz63o2om 0.6s ease-out;
}

.header-content[b-s4hz63o2om] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.title-section[b-s4hz63o2om] {
    flex: 1;
}

.page-title[b-s4hz63o2om] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #003d7a;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-title i[b-s4hz63o2om] {
    font-size: 2.5rem;
    color: #d4af37;
}

.page-subtitle[b-s4hz63o2om] {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

.header-actions[b-s4hz63o2om] {
    display: flex;
    gap: 1rem;
}

/* Stats Grid */
.stats-grid[b-s4hz63o2om] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    animation: fadeInUp-b-s4hz63o2om 0.6s ease-out 0.1s both;
}

.stat-card[b-s4hz63o2om] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.stat-card:hover[b-s4hz63o2om] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-icon[b-s4hz63o2om] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    font-size: 1.75rem;
}

.stat-icon.active[b-s4hz63o2om] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.stat-icon.inactive[b-s4hz63o2om] {
    background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
}

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

.stat-value[b-s4hz63o2om] {
    font-size: 2rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 0.25rem;
}

.stat-label[b-s4hz63o2om] {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

/* Loading & Empty States */
.loading-container[b-s4hz63o2om],
.empty-state[b-s4hz63o2om] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    animation: fadeInUp-b-s4hz63o2om 0.6s ease-out;
}

.loading-text[b-s4hz63o2om] {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: #666;
}

.empty-state i[b-s4hz63o2om] {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.empty-state h3[b-s4hz63o2om] {
    color: #003d7a;
    margin-bottom: 0.5rem;
}

.empty-state p[b-s4hz63o2om] {
    color: #666;
    margin: 0;
}

/* Table Container */
.table-container[b-s4hz63o2om] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: fadeInUp-b-s4hz63o2om 0.6s ease-out 0.2s both;
}

.users-table[b-s4hz63o2om] {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead[b-s4hz63o2om] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
}

.users-table th[b-s4hz63o2om] {
    padding: 1.25rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
    border-bottom: 3px solid #d4af37;
}

.users-table tbody tr[b-s4hz63o2om] {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.users-table tbody tr:hover[b-s4hz63o2om] {
    background: #f8f9fa;
}

.users-table tbody tr.disabled-row[b-s4hz63o2om] {
    opacity: 0.6;
}

.users-table td[b-s4hz63o2om] {
    padding: 1.25rem 1rem;
    vertical-align: middle;
}

/* User Info */
.user-info[b-s4hz63o2om] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar[b-s4hz63o2om] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.user-details[b-s4hz63o2om] {
    flex: 1;
}

.user-name[b-s4hz63o2om] {
    font-weight: 600;
    color: #003d7a;
}

.user-email[b-s4hz63o2om] {
    color: #495057;
    font-size: 0.95rem;
}

/* Roles List */
.roles-list[b-s4hz63o2om] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge[b-s4hz63o2om] {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.badge-superadmin[b-s4hz63o2om] {
    background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
    color: white;
}

.badge-admin[b-s4hz63o2om] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
}

.badge-manager[b-s4hz63o2om] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-default[b-s4hz63o2om] {
    background: #6c757d;
    color: white;
}

/* Status Badge */
.status-badge[b-s4hz63o2om] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-active[b-s4hz63o2om] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.status-inactive[b-s4hz63o2om] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* DateTime Text */
.datetime-text[b-s4hz63o2om] {
    color: #495057;
    font-size: 0.95rem;
    font-family: 'Courier New', monospace;
}

/* Action Buttons */
.action-buttons[b-s4hz63o2om] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-s4hz63o2om] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.btn-action:hover[b-s4hz63o2om] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-reset[b-s4hz63o2om] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
}

.btn-reset:hover[b-s4hz63o2om] {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.btn-disable[b-s4hz63o2om] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-disable:hover[b-s4hz63o2om] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

.btn-enable[b-s4hz63o2om] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
}

.btn-enable:hover[b-s4hz63o2om] {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

/* Modal */
.modal-overlay[b-s4hz63o2om] {
    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: 1000;
    padding: 1rem;
    animation: fadeIn-b-s4hz63o2om 0.3s ease-out;
}

.modal-dialog[b-s4hz63o2om] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn-b-s4hz63o2om 0.3s ease-out;
}

.modal-header[b-s4hz63o2om] {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    border-bottom: 3px solid #d4af37;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-s4hz63o2om] {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-title i[b-s4hz63o2om] {
    color: #d4af37;
}

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

.btn-close:hover[b-s4hz63o2om] {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-body[b-s4hz63o2om] {
    padding: 2rem;
}

.user-info-box[b-s4hz63o2om] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-right: 4px solid #003d7a;
}

.info-row[b-s4hz63o2om] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.info-row:last-child[b-s4hz63o2om] {
    margin-bottom: 0;
}

.info-row strong[b-s4hz63o2om] {
    color: #003d7a;
    min-width: 120px;
}

.info-row span[b-s4hz63o2om] {
    color: #495057;
}

/* Reset Form */
.reset-form .form-group[b-s4hz63o2om] {
    margin-bottom: 1.5rem;
}

.reset-form .form-label[b-s4hz63o2om] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reset-form .form-label.required[b-s4hz63o2om]::after {
    content: '*';
    color: #dc3545;
    margin-right: 0.25rem;
}

.reset-form .form-label i[b-s4hz63o2om] {
    color: #003d7a;
}

.reset-form .form-control[b-s4hz63o2om] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.reset-form .form-control:focus[b-s4hz63o2om] {
    outline: none;
    border-color: #003d7a;
    box-shadow: 0 0 0 0.2rem rgba(0, 61, 122, 0.15);
}

.password-input-wrapper[b-s4hz63o2om] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-control[b-s4hz63o2om] {
    padding-left: 3rem;
}

.password-toggle-btn[b-s4hz63o2om] {
    position: absolute;
    left: 0;
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.password-toggle-btn:hover[b-s4hz63o2om] {
    color: #003d7a;
}

.password-toggle-btn i[b-s4hz63o2om] {
    font-size: 1.25rem;
}

.form-text[b-s4hz63o2om] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.validation-message[b-s4hz63o2om] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

/* Alert Messages */
.alert[b-s4hz63o2om] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.alert i[b-s4hz63o2om] {
    font-size: 1.25rem;
}

.alert-success[b-s4hz63o2om] {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

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

.alert-danger[b-s4hz63o2om] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-info[b-s4hz63o2om] {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.form-check[b-s4hz63o2om] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.form-check-input[b-s4hz63o2om] {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
    cursor: pointer;
}

.form-check-label[b-s4hz63o2om] {
    cursor: pointer;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.modal-footer[b-s4hz63o2om] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Buttons */
.btn[b-s4hz63o2om] {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-success[b-s4hz63o2om] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-success:hover:not(:disabled)[b-s4hz63o2om] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-primary[b-s4hz63o2om] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.btn-primary:hover:not(:disabled)[b-s4hz63o2om] {
    background: linear-gradient(135deg, #00589e 0%, #0071bc 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 61, 122, 0.4);
}

.btn-secondary[b-s4hz63o2om] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-s4hz63o2om] {
    background: #5a6268;
}

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

.spinner-border[b-s4hz63o2om] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15rem solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-s4hz63o2om 0.75s linear infinite;
}

.spinner-border-sm[b-s4hz63o2om] {
    width: 0.875rem;
    height: 0.875rem;
}

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

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

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

@keyframes slideIn-b-s4hz63o2om {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spinner-border-b-s4hz63o2om {
    to { transform: rotate(360deg); }
}

/* ============================================
   🔘 Custom Switch Card  
   ============================================ */

.status-toggle-container[b-s4hz63o2om] {
    margin-top: 0.5rem;
}

/* إخفاء تام لأي عناصر bootstrap أو html افتراضية */
.status-toggle-container *:not(.custom-switch-card):not(.switch-content):not(.status-icon):not(.status-text):not(.custom-switch):not(.switch-slider):not(strong):not(small):not(i)[b-s4hz63o2om] {
    display: none !important;
}

.status-toggle-container input[b-s4hz63o2om],
.status-toggle-container input[type="checkbox"][b-s4hz63o2om],
.status-toggle-container .form-check-input[b-s4hz63o2om],
.status-toggle-container .form-check[b-s4hz63o2om],
.status-toggle-container .form-switch[b-s4hz63o2om],
.custom-switch-card input[b-s4hz63o2om] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* إزالة كل pseudo-elements من bootstrap */
.status-toggle-container *[b-s4hz63o2om]::before,
.status-toggle-container *[b-s4hz63o2om]::after {
    display: none !important;
}

/* السماح فقط بالـ custom switch elements */
.custom-switch-card[b-s4hz63o2om],
.custom-switch-card *[b-s4hz63o2om],
.custom-switch[b-s4hz63o2om],
.custom-switch *[b-s4hz63o2om],
.switch-slider[b-s4hz63o2om] {
    display: revert !important;
}

.custom-switch-card[b-s4hz63o2om] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 85px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.custom-switch-card:hover[b-s4hz63o2om] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.1);
}

.custom-switch-card:active[b-s4hz63o2om] {
    transform: scale(0.98);
}

.custom-switch-card .switch-content[b-s4hz63o2om] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-switch-card .status-icon[b-s4hz63o2om] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.custom-switch-card .status-icon[b-s4hz63o2om] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.custom-switch-card .status-text[b-s4hz63o2om] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.custom-switch-card .status-text strong[b-s4hz63o2om] {
    font-size: 1.05rem;
    color: #dc3545;
    font-weight: 600;
    transition: color 0.3s ease;
}

.custom-switch-card .status-text small[b-s4hz63o2om] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: normal;
}

/* Custom Switch Styles */
.custom-switch[b-s4hz63o2om] {
    width: 60px;
    height: 30px;
    background-color: #dc3545;
    border-radius: 30px;
    position: relative;
    transition: all 0.4s ease;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-switch .switch-slider[b-s4hz63o2om] {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Active State */
.custom-switch.active[b-s4hz63o2om] {
    background-color: #10b981;
}

.custom-switch.active .switch-slider[b-s4hz63o2om] {
    right: 33px;
}

/* Active Card Styles */
.custom-switch-card:has(.custom-switch.active) .status-icon[b-s4hz63o2om] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.custom-switch-card:has(.custom-switch.active) .status-text strong[b-s4hz63o2om] {
    color: #10b981;
}

/* Utilities */
.text-muted[b-s4hz63o2om] {
    color: #6c757d !important;
}

.visually-hidden[b-s4hz63o2om] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.d-block[b-s4hz63o2om] {
    display: block !important;
}

/* ============================================
   📱 Responsive Design - Mobile First
   ============================================ */

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .users-table[b-s4hz63o2om] {
        font-size: 1rem;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .users-page[b-s4hz63o2om] {
        padding: 1.5rem 1rem;
    }

    .stats-grid[b-s4hz63o2om] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .users-table[b-s4hz63o2om] {
        font-size: 0.95rem;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .users-page[b-s4hz63o2om] {
        padding: 1rem;
    }

    .page-header[b-s4hz63o2om] {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

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

    .page-subtitle[b-s4hz63o2om] {
        font-size: 1rem;
    }

    .header-content[b-s4hz63o2om] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stats-card[b-s4hz63o2om] {
        margin-bottom: 1.5rem;
    }

    .stats-grid[b-s4hz63o2om] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-item[b-s4hz63o2om] {
        padding: 1.25rem;
    }

    /* Custom Switch Card - Tablet */
    .custom-switch-card[b-s4hz63o2om] {
        padding: 1.25rem;
        min-height: 75px;
    }

    .custom-switch-card .status-icon[b-s4hz63o2om] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .custom-switch-card .status-text strong[b-s4hz63o2om] {
        font-size: 1rem;
    }

    .custom-switch-card .status-text small[b-s4hz63o2om] {
        font-size: 0.8rem;
    }

    /* Table Scrolling */
    .table-container[b-s4hz63o2om] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    .users-table[b-s4hz63o2om] {
        min-width: 900px;
        font-size: 0.9rem;
    }

    .users-table th[b-s4hz63o2om],
    .users-table td[b-s4hz63o2om] {
        padding: 0.875rem;
    }

    .user-avatar[b-s4hz63o2om] {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .user-name[b-s4hz63o2om] {
        font-size: 0.95rem;
    }

    .badge[b-s4hz63o2om] {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
    }

    .status-badge[b-s4hz63o2om] {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
    }

    /* Modal Adjustments */
    .modal-dialog[b-s4hz63o2om] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .modal-content[b-s4hz63o2om] {
        border-radius: 16px;
    }

    .modal-header[b-s4hz63o2om],
    .modal-body[b-s4hz63o2om],
    .modal-footer[b-s4hz63o2om] {
        padding: 1.25rem;
    }

    .modal-footer[b-s4hz63o2om] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-footer .btn[b-s4hz63o2om] {
        width: 100%;
    }
}

/* Mobile (480px and down) */
@media (max-width: 480px) {
    .users-page[b-s4hz63o2om] {
        padding: 0.75rem;
    }

    .page-header[b-s4hz63o2om] {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
    }

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

    .page-title i[b-s4hz63o2om] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-s4hz63o2om] {
        font-size: 0.9rem;
    }

    .stats-card[b-s4hz63o2om] {
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .stat-item[b-s4hz63o2om] {
        padding: 1rem;
    }

    .stat-value[b-s4hz63o2om] {
        font-size: 2rem;
    }

    .stat-label[b-s4hz63o2om] {
        font-size: 0.8rem;
    }

    /* Security option responsive - Mobile */
    /* Custom Switch Card - Mobile */
    .custom-switch-card[b-s4hz63o2om] {
        padding: 1rem;
        min-height: auto;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .custom-switch-card .switch-content[b-s4hz63o2om] {
        flex-direction: column;
        text-align: center;
    }

    .custom-switch-card .status-icon[b-s4hz63o2om] {
        width: 48px;
        height: 48px;
    }

    .custom-switch-card .status-text strong[b-s4hz63o2om] {
        font-size: 0.95rem;
    }

    .custom-switch-card .status-text small[b-s4hz63o2om] {
        font-size: 0.8rem;
    }

    .custom-switch[b-s4hz63o2om] {
        margin: 0 auto;
        width: 56px;
        height: 28px;
    }

    .custom-switch .switch-slider[b-s4hz63o2om] {
        width: 22px;
        height: 22px;
    }

    .custom-switch.active .switch-slider[b-s4hz63o2om] {
        right: 31px;
    }


    .table-container[b-s4hz63o2om] {
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .users-table[b-s4hz63o2om] {
        min-width: 700px;
        font-size: 0.85rem;
    }

    .users-table th[b-s4hz63o2om],
    .users-table td[b-s4hz63o2om] {
        padding: 0.75rem 0.5rem;
    }

    .user-info[b-s4hz63o2om] {
        gap: 0.5rem;
    }

    .user-avatar[b-s4hz63o2om] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .user-name[b-s4hz63o2om] {
        font-size: 0.9rem;
    }

    .user-email[b-s4hz63o2om] {
        font-size: 0.85rem;
    }

    .badge[b-s4hz63o2om] {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .status-badge[b-s4hz63o2om] {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .btn-sm[b-s4hz63o2om] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Modal Full Screen on Mobile */
    .modal-dialog[b-s4hz63o2om] {
        margin: 0;
        max-width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    .modal-content[b-s4hz63o2om] {
        height: 100%;
        border-radius: 0;
    }

    .modal-header[b-s4hz63o2om] {
        padding: 1rem;
    }

    .modal-title[b-s4hz63o2om] {
        font-size: 1.15rem;
    }

    .modal-body[b-s4hz63o2om] {
        padding: 1rem;
        overflow-y: auto;
    }

    .modal-footer[b-s4hz63o2om] {
        padding: 1rem;
    }

    .form-label[b-s4hz63o2om] {
        font-size: 0.9rem;
    }

    .form-control[b-s4hz63o2om] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .password-toggle[b-s4hz63o2om] {
        padding: 0.75rem;
    }

    .btn[b-s4hz63o2om] {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }

    .action-buttons[b-s4hz63o2om] {
        gap: 0.35rem;
    }

    .btn-action[b-s4hz63o2om] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* Extra Small Mobile (360px and down) */
@media (max-width: 360px) {
    .page-title[b-s4hz63o2om] {
        font-size: 1.35rem;
    }

    .stat-value[b-s4hz63o2om] {
        font-size: 1.75rem;
    }

    .users-table[b-s4hz63o2om] {
        min-width: 600px;
        font-size: 0.8rem;
    }

    .user-avatar[b-s4hz63o2om] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* ========================================
   Contact Page - Styling
   ======================================== */

/* Page Container */
.contact-page[b-4jk7rp2gwc] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 3rem 0;
}

.contact-page .container[b-4jk7rp2gwc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Page Header */
.page-header[b-4jk7rp2gwc] {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInDown-b-4jk7rp2gwc 0.6s ease-out;
}

.header-icon[b-4jk7rp2gwc] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #003d7a 0%, #0052a3 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 61, 122, 0.3);
}

.header-icon i[b-4jk7rp2gwc] {
    font-size: 3rem;
    color: #d4af37;
}

.page-title[b-4jk7rp2gwc] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-4jk7rp2gwc] {
    font-size: 1.2rem;
    color: #6c757d;
}

/* Contact Section */
.contact-section[b-4jk7rp2gwc] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    animation: fadeIn-b-4jk7rp2gwc 0.6s ease-out 0.2s both;
}

.section-header[b-4jk7rp2gwc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header i[b-4jk7rp2gwc] {
    font-size: 2rem;
    color: #d4af37;
}

.section-header h2[b-4jk7rp2gwc] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003d7a;
    margin: 0;
}

.section-description[b-4jk7rp2gwc] {
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.8;
    margin: 0;
}

/* Contact Cards */
.contact-cards[b-4jk7rp2gwc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.contact-card[b-4jk7rp2gwc] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 61, 122, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    animation: fadeInUp-b-4jk7rp2gwc 0.6s ease-out;
    position: relative;
    overflow: hidden;
}

.contact-card[b-4jk7rp2gwc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #003d7a 0%, #d4af37 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.contact-card:hover[b-4jk7rp2gwc] {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 61, 122, 0.15);
}

.contact-card:hover[b-4jk7rp2gwc]::before {
    transform: scaleX(1);
}

.contact-card:nth-child(2)[b-4jk7rp2gwc] {
    animation-delay: 0.2s;
}

.contact-card:nth-child(3)[b-4jk7rp2gwc] {
    animation-delay: 0.4s;
}

.contact-card:nth-child(4)[b-4jk7rp2gwc] {
    animation-delay: 0.6s;
}

.contact-card:nth-child(5)[b-4jk7rp2gwc] {
    animation-delay: 0.8s;
}

/* Card Icon */
.card-icon[b-4jk7rp2gwc] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-icon.email[b-4jk7rp2gwc] {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
}

.card-icon.phone[b-4jk7rp2gwc] {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.card-icon.location[b-4jk7rp2gwc] {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
}

.card-icon.clock[b-4jk7rp2gwc] {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
}

.card-icon.security[b-4jk7rp2gwc] {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
}

/* Card Content */
.card-title[b-4jk7rp2gwc] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 1rem;
}

.card-value[b-4jk7rp2gwc] {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0052a3;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    word-break: break-word;
}

.card-value:hover[b-4jk7rp2gwc] {
    color: #d4af37;
    transform: scale(1.05);
}

.card-value.phone-number[b-4jk7rp2gwc] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    direction: ltr;
}

.card-value.address[b-4jk7rp2gwc] {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #495057;
}

.card-description[b-4jk7rp2gwc] {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0.5rem 0;
}

/* Working Hours */
.working-hours-list[b-4jk7rp2gwc] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    text-align: right;
}

.day-schedule[b-4jk7rp2gwc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.day-schedule:hover[b-4jk7rp2gwc] {
    background: #e9ecef;
    transform: translateX(-3px);
}

.day-name[b-4jk7rp2gwc] {
    font-weight: 600;
    color: #003d7a;
    min-width: 70px;
    font-size: 0.9rem;
}

.time-range[b-4jk7rp2gwc] {
    color: #495057;
    font-size: 0.85rem;
    text-align: left;
}

.day-schedule.thursday[b-4jk7rp2gwc] {
    background: #fff3cd;
    border-right: 3px solid #ffc107;
}

.day-schedule.thursday:hover[b-4jk7rp2gwc] {
    background: #ffe69c;
}

.day-schedule.closed[b-4jk7rp2gwc] {
    background: #f8d7da;
    border-right: 3px solid #dc3545;
}

.day-schedule.closed:hover[b-4jk7rp2gwc] {
    background: #f1aeb5;
}

.day-schedule.closed .time-range[b-4jk7rp2gwc] {
    color: #dc3545;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-page[b-4jk7rp2gwc] {
        padding: 2rem 0;
    }

    .header-icon[b-4jk7rp2gwc] {
        width: 80px;
        height: 80px;
    }

    .header-icon i[b-4jk7rp2gwc] {
        font-size: 2.5rem;
    }

    .page-title[b-4jk7rp2gwc] {
        font-size: 2rem;
    }

    .page-subtitle[b-4jk7rp2gwc] {
        font-size: 1rem;
    }

    .section-header h2[b-4jk7rp2gwc] {
        font-size: 1.5rem;
    }

    .section-description[b-4jk7rp2gwc] {
        font-size: 1rem;
    }

    .contact-cards[b-4jk7rp2gwc] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-card[b-4jk7rp2gwc] {
        padding: 2rem 1.5rem;
    }

    .card-icon[b-4jk7rp2gwc] {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .card-title[b-4jk7rp2gwc] {
        font-size: 1.2rem;
    }

    .card-value[b-4jk7rp2gwc] {
        font-size: 1.1rem;
    }

    .card-value.phone-number[b-4jk7rp2gwc] {
        font-size: 1.75rem;
    }

    .working-hours-list[b-4jk7rp2gwc] {
        gap: 0.5rem;
    }

    .day-schedule[b-4jk7rp2gwc] {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .day-name[b-4jk7rp2gwc] {
        min-width: auto;
        font-size: 0.85rem;
    }

    .time-range[b-4jk7rp2gwc] {
        font-size: 0.8rem;
        text-align: right;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .page-title[b-4jk7rp2gwc] {
        font-size: 1.75rem;
    }

    .section-header[b-4jk7rp2gwc] {
        flex-direction: column;
        text-align: center;
    }

    .contact-card[b-4jk7rp2gwc] {
        padding: 1.5rem 1rem;
    }

    .card-value.phone-number[b-4jk7rp2gwc] {
        font-size: 1.5rem;
    }

    .card-icon[b-4jk7rp2gwc] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .working-hours-list[b-4jk7rp2gwc] {
        gap: 0.4rem;
    }

    .day-schedule[b-4jk7rp2gwc] {
        padding: 0.45rem 0.6rem;
        border-radius: 6px;
    }

    .day-name[b-4jk7rp2gwc] {
        font-size: 0.8rem;
        font-weight: 700;
    }

    .time-range[b-4jk7rp2gwc] {
        font-size: 0.75rem;
        margin-top: 0.1rem;
    }
}

@media (max-width: 380px) {
    .contact-cards[b-4jk7rp2gwc] {
        gap: 1rem;
    }

    .contact-card[b-4jk7rp2gwc] {
        padding: 1.25rem 0.875rem;
    }

    .card-icon[b-4jk7rp2gwc] {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .card-title[b-4jk7rp2gwc] {
        font-size: 1.1rem;
    }

    .card-description[b-4jk7rp2gwc] {
        font-size: 0.85rem;
    }

    .day-schedule[b-4jk7rp2gwc] {
        padding: 0.4rem 0.5rem;
    }

    .day-name[b-4jk7rp2gwc] {
        font-size: 0.75rem;
    }

    .time-range[b-4jk7rp2gwc] {
        font-size: 0.7rem;
    }
}

/* Animations */
@keyframes fadeIn-b-4jk7rp2gwc {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-4jk7rp2gwc {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-b-4jk7rp2gwc {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===============================================
   بنك حضرموت - Home Page Styles
   =============================================== */

.hb-home-page[b-flzqlljf54] {
    min-height: 100vh;
}

/* ===== Hero Section ===== */
.hb-hero[b-flzqlljf54] {
    background: var(--hb-gradient-primary);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.hb-hero[b-flzqlljf54]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/Images/main-pattern-sAiPHf0c.svg');
    background-size: 400px;
    opacity: 0.05;
    z-index: 1;
}

.hero-pattern[b-flzqlljf54] {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.hero-pattern[b-flzqlljf54]::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-content[b-flzqlljf54] {
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-logo[b-flzqlljf54] {
    margin-bottom: 2rem;
}

.hero-logo img[b-flzqlljf54] {
    height: 80px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: fadeInDown-b-flzqlljf54 0.8s ease-out;
}

.hero-title[b-flzqlljf54] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--hb-white);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: fadeInUp-b-flzqlljf54 0.8s ease-out 0.2s both;
}

.hero-subtitle[b-flzqlljf54] {
    font-size: 1.5rem;
    color: var(--hb-gold);
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: fadeInUp-b-flzqlljf54 0.8s ease-out 0.4s both;
}

.hero-subtitle i[b-flzqlljf54] {
    font-size: 1.8rem;
}

.hero-actions[b-flzqlljf54] {
    animation: fadeInUp-b-flzqlljf54 0.8s ease-out 0.6s both;
}

.btn-lg[b-flzqlljf54] {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
}

/* ===== Services Section ===== */
.hb-services[b-flzqlljf54] {
    padding: 80px 0;
    background: var(--hb-light-bg);
}

.services-grid[b-flzqlljf54] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.service-card[b-flzqlljf54] {
    background: var(--hb-white);
    border-radius: var(--hb-border-radius-lg);
    padding: 2.5rem;
    transition: var(--hb-transition);
    box-shadow: var(--hb-shadow);
    position: relative;
    overflow: hidden;
    display: block;
}

.service-card[b-flzqlljf54]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--hb-gradient-primary);
    transition: width 0.3s ease;
}

.service-card:hover[b-flzqlljf54] {
    transform: translateY(-10px);
    box-shadow: var(--hb-shadow-hover);
    text-decoration: none;
}

.service-card:hover[b-flzqlljf54]::before {
    width: 10px;
}

.service-icon[b-flzqlljf54] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
    transition: var(--hb-transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.service-icon-primary[b-flzqlljf54] {
    background: var(--hb-gradient-primary);
    color: var(--hb-gold);
}

.service-icon-gold[b-flzqlljf54] {
    background: var(--hb-gradient-gold);
    color: var(--hb-primary);
}

.service-icon-danger[b-flzqlljf54] {
    background: linear-gradient(135deg, #dc3545 0%, #e45565 100%);
    color: var(--hb-white);
}

.service-card:hover .service-icon[b-flzqlljf54] {
    transform: scale(1.1) rotate(10deg);
}

.service-title[b-flzqlljf54] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hb-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.service-desc[b-flzqlljf54] {
    color: var(--hb-gray);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: center;
}

.service-features[b-flzqlljf54] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.service-features li[b-flzqlljf54] {
    color: var(--hb-text);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.service-features i[b-flzqlljf54] {
    color: #26b050;
    font-size: 1.1rem;
}

.service-link[b-flzqlljf54] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hb-primary);
    font-weight: 600;
    font-size: 1.05rem;
    transition: var(--hb-transition);
}

.service-card:hover .service-link[b-flzqlljf54] {
    color: var(--hb-gold);
    gap: 12px;
}

.service-link i[b-flzqlljf54] {
    transition: transform 0.3s ease;
}

.service-card:hover .service-link i[b-flzqlljf54] {
    transform: translateX(-5px);
}

/* ===== Features Section ===== */
.hb-features[b-flzqlljf54] {
    padding: 80px 0;
    background: var(--hb-white);
}

.features-grid[b-flzqlljf54] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.feature-item[b-flzqlljf54] {
    text-align: center;
    padding: 2rem;
    border-radius: var(--hb-border-radius);
    transition: var(--hb-transition);
}

.feature-item:hover[b-flzqlljf54] {
    background: var(--hb-light-bg);
    transform: translateY(-5px);
}

.feature-icon[b-flzqlljf54] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: var(--hb-transition);
}

.feature-icon i[b-flzqlljf54] {
    font-size: 2.5rem;
    color: var(--hb-primary);
}

.feature-item:hover .feature-icon[b-flzqlljf54] {
    background: var(--hb-gradient-primary);
    transform: scale(1.1);
}

.feature-item:hover .feature-icon i[b-flzqlljf54] {
    color: var(--hb-gold);
}

.feature-item h4[b-flzqlljf54] {
    color: var(--hb-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.feature-item p[b-flzqlljf54] {
    color: var(--hb-gray);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Animations ===== */
@keyframes fadeInDown-b-flzqlljf54 {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-b-flzqlljf54 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .hb-hero[b-flzqlljf54] {
        padding: 60px 0;
    }
    
    .hero-title[b-flzqlljf54] {
        font-size: 2.5rem;
    }
    
    .hero-subtitle[b-flzqlljf54] {
        font-size: 1.3rem;
    }
    
    .services-grid[b-flzqlljf54] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .hb-hero[b-flzqlljf54] {
        padding: 50px 0;
        min-height: 400px;
    }
    
    .hero-logo img[b-flzqlljf54] {
        height: 60px;
    }
    
    .hero-title[b-flzqlljf54] {
        font-size: 2rem;
    }
    
    .hero-subtitle[b-flzqlljf54] {
        font-size: 1.1rem;
    }
    
    .btn-lg[b-flzqlljf54] {
        padding: 0.85rem 2rem;
        font-size: 1.1rem;
    }
    
    .hb-services[b-flzqlljf54],
    .hb-features[b-flzqlljf54] {
        padding: 60px 0;
    }
    
    .services-grid[b-flzqlljf54] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-card[b-flzqlljf54] {
        padding: 2rem;
    }
    
    .features-grid[b-flzqlljf54] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-flzqlljf54] {
        font-size: 1.6rem;
    }
    
    .hero-subtitle[b-flzqlljf54] {
        font-size: 1rem;
        flex-direction: column;
        gap: 5px;
    }
    
    .service-icon[b-flzqlljf54] {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
    
    .service-title[b-flzqlljf54] {
        font-size: 1.3rem;
    }
    
    .features-grid[b-flzqlljf54] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OpenAccount.razor.rz.scp.css */
/* ====================================
   صفحة فتح حساب بنكي - تصميم بنك حضرموت
   الألوان: #003d7a (أزرق), #d4af37 (ذهبي)
   ==================================== */

/* إخفاء كامل لجميع input file في الصفحة */
input[type="file"][b-8dxnqvwkca] {
    position: absolute !important;
    width: 0.1px !important;
    height: 0.1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
}

.open-account-page[b-8dxnqvwkca] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
}

/* ==== Header ==== */
.page-header[b-8dxnqvwkca] {
    text-align: center;
    margin-bottom: 50px;
    animation: fadeInDown-b-8dxnqvwkca 0.6s ease;
}

.header-icon[b-8dxnqvwkca] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: #d4af37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 45px;
    box-shadow: 0 10px 30px rgba(0, 61, 122, 0.3);
}

.page-title[b-8dxnqvwkca] {
    font-size: 2.8rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 15px;
}

.page-subtitle[b-8dxnqvwkca] {
    font-size: 1.25rem;
    color: #666;
}

/* ==== Loading Screen ==== */
.loading-container[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    margin: 20px 0;
}

.loading-content[b-8dxnqvwkca] {
    text-align: center;
    max-width: 400px;
}

/* Bank Logo Pulse Animation */
.bank-logo-loader[b-8dxnqvwkca] {
    margin-bottom: 30px;
}

.pulse-logo[b-8dxnqvwkca] {
    width: 120px;
    height: auto;
    animation: logoPulse-b-8dxnqvwkca 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0, 61, 122, 0.2));
}

@keyframes logoPulse-b-8dxnqvwkca {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Triple Ring Spinner */
.loader-spinner[b-8dxnqvwkca] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
}

.spinner-ring[b-8dxnqvwkca] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin-b-8dxnqvwkca 2s linear infinite;
}

.spinner-ring:nth-child(1)[b-8dxnqvwkca] {
    border-top-color: #003d7a;
    animation-delay: 0s;
}

.spinner-ring:nth-child(2)[b-8dxnqvwkca] {
    border-top-color: #d4af37;
    animation-delay: 0.3s;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}

.spinner-ring:nth-child(3)[b-8dxnqvwkca] {
    border-top-color: #00589e;
    animation-delay: 0.6s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

@keyframes spin-b-8dxnqvwkca {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading Text */
.loading-title[b-8dxnqvwkca] {
    color: #003d7a;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    animation: fadeInOut-b-8dxnqvwkca 2s ease-in-out infinite;
}

.loading-text[b-8dxnqvwkca] {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 20px;
}

@keyframes fadeInOut-b-8dxnqvwkca {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Animated Dots */
.loading-dots[b-8dxnqvwkca] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.loading-dots span[b-8dxnqvwkca] {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    border-radius: 50%;
    display: inline-block;
    animation: dotBounce-b-8dxnqvwkca 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1)[b-8dxnqvwkca] {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2)[b-8dxnqvwkca] {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3)[b-8dxnqvwkca] {
    animation-delay: 0.4s;
}

@keyframes dotBounce-b-8dxnqvwkca {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* ==== Success Message ==== */
.success-message[b-8dxnqvwkca] {
    background: white;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    animation: zoomIn-b-8dxnqvwkca 0.5s ease;
}

.success-icon[b-8dxnqvwkca] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 60px;
    animation: pulse-b-8dxnqvwkca 1.5s infinite;
}

.success-message h2[b-8dxnqvwkca] {
    color: #003d7a;
    font-size: 2rem;
    margin-bottom: 20px;
}

.success-details[b-8dxnqvwkca] {
    font-size: 1.15rem;
    color: #666;
    line-height: 1.8;
}

.success-details strong[b-8dxnqvwkca] {
    color: #003d7a;
    font-size: 1.4rem;
}

/* ==== Form Sections ==== */
.form-section[b-8dxnqvwkca], .requirements-section[b-8dxnqvwkca] {
    background: white;
    border-radius: 20px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    animation: fadeInUp-b-8dxnqvwkca 0.6s ease;
}

.section-title[b-8dxnqvwkca] {
    font-size: 1.6rem;
    font-weight: 600;
    color: #003d7a;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid #d4af37;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title i[b-8dxnqvwkca] {
    font-size: 1.8rem;
    color: #d4af37;
}

/* ==== Requirements Grid ==== */
.requirements-grid[b-8dxnqvwkca] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.requirement-item[b-8dxnqvwkca] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    border-right: 4px solid #d4af37;
    transition: all 0.3s ease;
}

.requirement-item:hover[b-8dxnqvwkca] {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 61, 122, 0.15);
}

.requirement-icon[b-8dxnqvwkca] {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: #d4af37;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.requirement-content h4[b-8dxnqvwkca] {
    color: #003d7a;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.requirement-content p[b-8dxnqvwkca] {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ==== Form Controls ==== */
.form-label[b-8dxnqvwkca] {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 1rem;
}

.form-label .required[b-8dxnqvwkca] {
    color: #dc3545;
    margin-right: 4px;
}

.form-label .optional[b-8dxnqvwkca] {
    color: #6c757d;
    font-weight: 400;
    font-size: 0.9rem;
}

.form-control[b-8dxnqvwkca], .form-control-lg[b-8dxnqvwkca] {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus[b-8dxnqvwkca], .form-control-lg:focus[b-8dxnqvwkca] {
    border-color: #d4af37;
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.15);
}

/* RTL Input for Mobile Number */
.rtl-input[b-8dxnqvwkca],
input.rtl-input[b-8dxnqvwkca],
input[type="tel"].rtl-input[b-8dxnqvwkca] {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext;
}

.rtl-input[b-8dxnqvwkca]::placeholder,
input.rtl-input[b-8dxnqvwkca]::placeholder {
    direction: rtl;
    text-align: right;
}

/* ==== Templates Grid ==== */
.templates-grid[b-8dxnqvwkca] {
    display: grid;
    gap: 20px;
}

.template-card[b-8dxnqvwkca] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.template-card:hover[b-8dxnqvwkca] {
    border-color: #d4af37;
    transform: translateX(-5px);
    box-shadow: 0 8px 20px rgba(0, 61, 122, 0.15);
}

.template-icon-link[b-8dxnqvwkca] {
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease;
}

.template-icon-link:hover[b-8dxnqvwkca] {
    transform: scale(1.1);
}

.template-icon[b-8dxnqvwkca] {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.template-icon-link:hover .template-icon[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.template-info[b-8dxnqvwkca] {
    flex: 1;
    min-width: 0;
}

.template-info h4[b-8dxnqvwkca] {
    color: #003d7a;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.template-info p[b-8dxnqvwkca] {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.template-size[b-8dxnqvwkca] {
    display: inline-block;
    padding: 4px 12px;
    background: #e9ecef;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

/* ==== Download Template Button ==== */
.btn-download-template[b-8dxnqvwkca] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
    flex-shrink: 0;
}

.btn-download-template:hover[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
    color: white;
}

.btn-download-template:active[b-8dxnqvwkca] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-download-template i[b-8dxnqvwkca] {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-download-template:hover i[b-8dxnqvwkca] {
    transform: translateY(2px);
    animation: downloadBounce-b-8dxnqvwkca 0.6s ease-in-out;
}

@keyframes downloadBounce-b-8dxnqvwkca {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* ==== Upload Area ==== */
.upload-area[b-8dxnqvwkca] {
    margin-bottom: 25px;
    position: relative;
}

/* إخفاء input file الافتراضي بالكامل */
.upload-area input[type="file"][b-8dxnqvwkca],
.upload-area[b-8dxnqvwkca]  input[type="file"],
#fileInput[b-8dxnqvwkca],
.file-input-hidden[b-8dxnqvwkca],
input[type="file"].file-input-hidden[b-8dxnqvwkca] {
    position: absolute !important;
    width: 0.1px !important;
    height: 0.1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* التأكد من إخفاء جميع input file في الصفحة */
[b-8dxnqvwkca] input[type="file"],
[b-8dxnqvwkca] .file-input-hidden {
    position: absolute !important;
    width: 0.1px !important;
    height: 0.1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* ====================================
   🚀 نظام الرفع التدريجي الجديد
   ==================================== */

/* شريط التقدم العام */
.upload-progress-container[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 61, 122, 0.08);
}

.progress-header[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.progress-info[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
}

.progress-info i[b-8dxnqvwkca] {
    font-size: 1.5rem;
    color: #d4af37;
}

.progress-text[b-8dxnqvwkca] {
    color: #333;
}

.progress-text strong[b-8dxnqvwkca] {
    color: #003d7a;
    font-weight: 700;
}

.progress-percentage[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

/* Progress Bar */
.progress-bar-wrapper[b-8dxnqvwkca] {
    background: #e9ecef;
    border-radius: 50px;
    height: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill[b-8dxnqvwkca] {
    background: linear-gradient(90deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    height: 100%;
    border-radius: 50px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
    position: relative;
    overflow: hidden;
}

.progress-bar-fill[b-8dxnqvwkca]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer-b-8dxnqvwkca 2s infinite;
}

@keyframes shimmer-b-8dxnqvwkca {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Progress Steps */
.progress-steps[b-8dxnqvwkca] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.progress-step[b-8dxnqvwkca] {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.progress-step.completed[b-8dxnqvwkca] {
    color: #28a745;
    animation: checkBounce-b-8dxnqvwkca 0.5s ease;
}

.progress-step.active[b-8dxnqvwkca] {
    color: #003d7a;
}

.progress-step.active .pulse[b-8dxnqvwkca] {
    animation: pulse-b-8dxnqvwkca 1.5s infinite;
}

.progress-step.pending[b-8dxnqvwkca] {
    color: #ccc;
}

@keyframes checkBounce-b-8dxnqvwkca {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* بطاقة الخطوة */
.upload-step-card[b-8dxnqvwkca] {
    background: white;
    border: 3px solid #e9ecef;
    border-radius: 20px;
    padding: 35px;
    margin-top: 25px;
    box-shadow: 0 8px 25px rgba(0, 61, 122, 0.12);
    transition: all 0.4s ease;
    animation: slideInUp-b-8dxnqvwkca 0.5s ease;
}

.upload-step-card.uploading[b-8dxnqvwkca] {
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);
}

@keyframes slideInUp-b-8dxnqvwkca {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* رأس الخطوة */
.step-header[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.step-number[b-8dxnqvwkca] {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0, 61, 122, 0.3);
    position: relative;
}

.step-number[b-8dxnqvwkca]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #d4af37;
    animation: ripple-b-8dxnqvwkca 2s infinite;
}

@keyframes ripple-b-8dxnqvwkca {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.step-title-section[b-8dxnqvwkca] {
    flex: 1;
}

.step-title[b-8dxnqvwkca] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 8px;
}

.step-description[b-8dxnqvwkca] {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* منطقة السحب والإفلات */
.upload-zone[b-8dxnqvwkca],
.drop-zone[b-8dxnqvwkca] {
    border: 3px dashed #d4af37;
    border-radius: 20px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    padding: 60px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.upload-zone[b-8dxnqvwkca]::before,
.drop-zone[b-8dxnqvwkca]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-zone:hover[b-8dxnqvwkca],
.drop-zone:hover[b-8dxnqvwkca] {
    border-color: #003d7a;
    background: linear-gradient(135deg, #e6f2ff 0%, #cfe2ff 100%);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 61, 122, 0.15);
}

.upload-zone:hover[b-8dxnqvwkca]::before,
.drop-zone:hover[b-8dxnqvwkca]::before {
    opacity: 1;
}

.upload-zone.dragging[b-8dxnqvwkca],
.drop-zone.dragging[b-8dxnqvwkca] {
    border-color: #28a745;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(40, 167, 69, 0.25);
}

/* حالة المعالجة */
.drop-zone.processing[b-8dxnqvwkca] {
    border-color: #003d7a;
    cursor: not-allowed;
}

.drop-zone.processing .drop-zone-label[b-8dxnqvwkca] {
    opacity: 0.3;
    pointer-events: none;
}

/* طبقة معالجة الملف */
.file-processing-overlay[b-8dxnqvwkca] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeIn-b-8dxnqvwkca 0.3s ease;
}

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

/* Spinner المعالجة */
.processing-spinner[b-8dxnqvwkca] {
    width: 60px;
    height: 60px;
    border: 4px solid #e6f2ff;
    border-top: 4px solid #003d7a;
    border-radius: 50%;
    animation: spin-b-8dxnqvwkca 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin-b-8dxnqvwkca {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* نص المعالجة */
.processing-text[b-8dxnqvwkca] {
    text-align: center;
    color: #003d7a;
}

.processing-text p[b-8dxnqvwkca] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.processing-text small[b-8dxnqvwkca] {
    font-size: 0.9rem;
    color: #666;
    display: block;
    margin-bottom: 15px;
}

/* شريط التقدم */
.progress-bar-container[b-8dxnqvwkca] {
    width: 250px;
    height: 8px;
    background: #e6f2ff;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0 10px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar[b-8dxnqvwkca] {
    height: 100%;
    background: linear-gradient(90deg, #003d7a 0%, #00589e 50%, #d4af37 100%);
    transition: width 0.3s ease;
    border-radius: 10px;
    animation: shimmer-b-8dxnqvwkca 2s infinite;
}

@keyframes shimmer-b-8dxnqvwkca {
    0% {
        background-position: -250px 0;
    }
    100% {
        background-position: 250px 0;
    }
}

.progress-text[b-8dxnqvwkca] {
    font-size: 1rem;
    font-weight: 700;
    color: #003d7a;
}


.upload-zone.dragging[b-8dxnqvwkca]::before,
.drop-zone.dragging[b-8dxnqvwkca]::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(40, 167, 69, 0.15) 0%, transparent 70%);
}

.upload-label[b-8dxnqvwkca],
.drop-zone-label[b-8dxnqvwkca] {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    pointer-events: none; /* السماح بالنقر من خلال اللايبل */
}

.upload-label i[b-8dxnqvwkca],
.drop-zone-icon[b-8dxnqvwkca] {
    font-size: 80px;
    color: #003d7a;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.upload-zone:hover .upload-label i[b-8dxnqvwkca],
.drop-zone:hover .drop-zone-icon[b-8dxnqvwkca] {
    transform: scale(1.1);
    color: #d4af37;
}

.upload-zone.dragging .upload-label i[b-8dxnqvwkca],
.drop-zone.dragging .drop-zone-icon[b-8dxnqvwkca] {
    transform: scale(1.2) rotate(5deg);
    color: #28a745;
}

.upload-label p[b-8dxnqvwkca],
.drop-zone-text[b-8dxnqvwkca] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-text[b-8dxnqvwkca] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #003d7a;
}

.or-divider[b-8dxnqvwkca] {
    font-size: 1rem;
    color: #999;
    position: relative;
    padding: 0 20px;
}

.or-divider[b-8dxnqvwkca]::before,
.or-divider[b-8dxnqvwkca]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background: #ccc;
}

.or-divider[b-8dxnqvwkca]::before { left: -50px; }
.or-divider[b-8dxnqvwkca]::after { right: -50px; }

.browse-text[b-8dxnqvwkca] {
    font-size: 1.1rem;
    color: #d4af37;
    font-weight: 600;
    text-decoration: underline;
}

.drop-zone-hint[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 25px;
    font-size: 0.95rem;
    color: #666;
    margin-top: 10px;
}

.drop-zone-hint i[b-8dxnqvwkca] {
    color: #17a2b8;
    font-size: 1.1rem;
}

/* معاينة الملف */
.file-preview-card[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    animation: fadeInScale-b-8dxnqvwkca 0.4s ease;
}

@keyframes fadeInScale-b-8dxnqvwkca {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.file-preview-icon[b-8dxnqvwkca] {
    font-size: 60px;
    flex-shrink: 0;
}

.file-preview-info[b-8dxnqvwkca] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.file-preview-name[b-8dxnqvwkca] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    word-break: break-word;
}

.file-preview-size[b-8dxnqvwkca] {
    font-size: 0.9rem;
    color: #666;
}

.file-preview-actions[b-8dxnqvwkca] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-action[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-remove-file[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-remove-file:hover[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

.btn-confirm-file[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
}

.btn-confirm-file:hover[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

/* مؤشر الرفع */
.uploading-indicator[b-8dxnqvwkca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 50px 30px;
}

.uploading-spinner[b-8dxnqvwkca] {
    position: relative;
    width: 100px;
    height: 100px;
}

.spinner[b-8dxnqvwkca] {
    width: 100%;
    height: 100%;
    border: 8px solid #e9ecef;
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: rotate-b-8dxnqvwkca 1s linear infinite;
}

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

.uploading-text[b-8dxnqvwkca] {
    text-align: center;
}

.uploading-text h5[b-8dxnqvwkca] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 8px;
}

.uploading-text p[b-8dxnqvwkca] {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

/* رسالة خطأ الخطوة */
.step-error[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 2px solid #f5c6cb;
    border-radius: 12px;
    color: #721c24;
    font-weight: 600;
    margin-top: 20px;
    animation: shake-b-8dxnqvwkca 0.5s ease;
}

@keyframes shake-b-8dxnqvwkca {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.step-error i[b-8dxnqvwkca] {
    font-size: 1.5rem;
    color: #dc3545;
}

/* أزرار الخطوة */
.step-actions[b-8dxnqvwkca] {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    animation: fadeInUp-b-8dxnqvwkca 0.5s ease;
}

.btn-next-step[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 61, 122, 0.3);
}

.btn-next-step:hover[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #00589e 0%, #003d7a 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 61, 122, 0.4);
}

.btn-next-step:active[b-8dxnqvwkca] {
    transform: translateY(-1px);
}

.btn-next-step i[b-8dxnqvwkca] {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-next-step:hover i[b-8dxnqvwkca] {
    transform: translateX(-5px);
}

@keyframes fadeInUp-b-8dxnqvwkca {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* بطاقة الاكتمال */
.upload-complete-card[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 3px solid #28a745;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    margin-top: 25px;
    animation: zoomInBounce-b-8dxnqvwkca 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes zoomInBounce-b-8dxnqvwkca {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.complete-icon[b-8dxnqvwkca] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 70px;
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
    animation: pulse-b-8dxnqvwkca 2s infinite;
}

.complete-title[b-8dxnqvwkca] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #155724;
    margin-bottom: 15px;
}

.complete-description[b-8dxnqvwkca] {
    font-size: 1.1rem;
    color: #155724;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* ملخص الملفات المرفوعة */
.uploaded-files-summary[b-8dxnqvwkca] {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.summary-title[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #003d7a;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.summary-title i[b-8dxnqvwkca] {
    color: #d4af37;
    font-size: 1.5rem;
}

.summary-list[b-8dxnqvwkca] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.summary-item[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.summary-item:hover[b-8dxnqvwkca] {
    border-color: #d4af37;
    transform: translateX(-5px);
    box-shadow: 0 4px 15px rgba(0, 61, 122, 0.1);
}

.summary-icon[b-8dxnqvwkca] {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.summary-info[b-8dxnqvwkca] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0; /* للسماح بتقليص العنصر */
}

.summary-label[b-8dxnqvwkca] {
    font-weight: 700;
    color: #003d7a;
    font-size: 1.05rem;
}

.summary-filename[b-8dxnqvwkca] {
    font-size: 0.9rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-filesize[b-8dxnqvwkca] {
    font-size: 0.85rem;
    color: #999;
    font-weight: 500;
}

.summary-actions[b-8dxnqvwkca] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-view-file[b-8dxnqvwkca],
.btn-edit-file[b-8dxnqvwkca] {
    background: transparent;
    border: 2px solid #e9ecef;
    color: #6c757d;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-view-file:hover[b-8dxnqvwkca] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.btn-edit-file:hover[b-8dxnqvwkca] {
    background: #d4af37;
    border-color: #d4af37;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn-reset-upload[b-8dxnqvwkca] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.btn-reset-upload:hover[b-8dxnqvwkca] {
    background: #dc3545;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.3);
}

.btn-reset-upload i[b-8dxnqvwkca] {
    font-size: 1.2rem;
}

/* ==== Files Preview ==== */
.files-preview[b-8dxnqvwkca] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.preview-header[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-title[b-8dxnqvwkca] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003d7a;
    margin: 0;
}

.preview-header .badge[b-8dxnqvwkca] {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.files-list[b-8dxnqvwkca] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-item[b-8dxnqvwkca] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.file-item:hover[b-8dxnqvwkca] {
    border-color: #d4af37;
}

.file-icon[b-8dxnqvwkca] {
    font-size: 35px;
    flex-shrink: 0;
}

.file-info[b-8dxnqvwkca] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-name[b-8dxnqvwkca] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.file-size[b-8dxnqvwkca] {
    font-size: 0.85rem;
    color: #666;
}

.btn-remove[b-8dxnqvwkca] {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.btn-remove:hover[b-8dxnqvwkca] {
    color: #bd2130;
    transform: scale(1.1);
}

/* ==== Form Actions ==== */
.form-actions[b-8dxnqvwkca] {
    text-align: center;
    margin-top: 40px;
}

.btn-primary[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    border: none;
    padding: 15px 50px;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 61, 122, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled)[b-8dxnqvwkca] {
    background: linear-gradient(135deg, #00589e 0%, #003d7a 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 61, 122, 0.4);
}

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

.btn-outline-primary[b-8dxnqvwkca] {
    color: #003d7a;
    border: 2px solid #003d7a;
    background: transparent;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover[b-8dxnqvwkca] {
    background: #003d7a;
    color: white;
    transform: translateY(-2px);
}

/* ==== Animations ==== */
@keyframes fadeInDown-b-8dxnqvwkca {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-b-8dxnqvwkca {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn-b-8dxnqvwkca {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-b-8dxnqvwkca {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ==== Responsive ==== */
@media (max-width: 768px) {
    .page-title[b-8dxnqvwkca] {
        font-size: 2rem;
    }

    .page-subtitle[b-8dxnqvwkca] {
        font-size: 1rem;
    }

    .form-section[b-8dxnqvwkca], .requirements-section[b-8dxnqvwkca] {
        padding: 25px 20px;
    }

    .section-title[b-8dxnqvwkca] {
        font-size: 1.3rem;
    }

    .requirements-grid[b-8dxnqvwkca] {
        grid-template-columns: 1fr;
    }

    .template-card[b-8dxnqvwkca] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        gap: 15px;
    }

    .template-icon-link[b-8dxnqvwkca] {
        grid-row: 1;
        margin: 0 auto;
    }

    .template-info[b-8dxnqvwkca] {
        grid-row: 2;
    }

    .btn-download-template[b-8dxnqvwkca] {
        grid-row: 3;
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 1rem;
    }

    .upload-label[b-8dxnqvwkca] {
        padding: 40px 20px;
    }

    .btn-primary[b-8dxnqvwkca] {
        width: 100%;
        padding: 15px 30px;
    }

    /* التصميم التدريجي - موبايل */
    .upload-progress-container[b-8dxnqvwkca] {
        padding: 20px 15px;
    }

    .progress-header[b-8dxnqvwkca] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .progress-info[b-8dxnqvwkca] {
        font-size: 1rem;
        justify-content: center;
    }

    .progress-percentage[b-8dxnqvwkca] {
        text-align: center;
        font-size: 1rem;
    }

    .upload-step-card[b-8dxnqvwkca] {
        padding: 25px 20px;
    }

    .step-header[b-8dxnqvwkca] {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .step-number[b-8dxnqvwkca] {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
        margin: 0 auto;
    }

    .step-title[b-8dxnqvwkca] {
        font-size: 1.3rem;
    }

    .step-description[b-8dxnqvwkca] {
        font-size: 0.95rem;
    }

    .drop-zone[b-8dxnqvwkca] {
        padding: 40px 20px;
    }

    .drop-zone-icon[b-8dxnqvwkca] {
        font-size: 60px;
    }

    .main-text[b-8dxnqvwkca] {
        font-size: 1.2rem;
    }

    .browse-text[b-8dxnqvwkca] {
        font-size: 1rem;
    }

    .file-preview-card[b-8dxnqvwkca] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .file-preview-actions[b-8dxnqvwkca] {
        flex-direction: column;
        width: 100%;
    }

    .btn-action[b-8dxnqvwkca] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .upload-complete-card[b-8dxnqvwkca] {
        padding: 35px 25px;
    }

    .complete-icon[b-8dxnqvwkca] {
        width: 100px;
        height: 100px;
        font-size: 60px;
    }

    .complete-title[b-8dxnqvwkca] {
        font-size: 1.5rem;
    }

    .complete-description[b-8dxnqvwkca] {
        font-size: 1rem;
    }

    .uploaded-files-summary[b-8dxnqvwkca] {
        padding: 20px 15px;
    }

    .summary-title[b-8dxnqvwkca] {
        font-size: 1.2rem;
    }

    .summary-item[b-8dxnqvwkca] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .btn-edit-file[b-8dxnqvwkca] {
        margin: 0 auto;
    }

    .btn-reset-upload[b-8dxnqvwkca] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Routes.razor.rz.scp.css */
/* ============================================
   Unauthorized Page Styles - Enhanced Design
   ============================================ */

.unauthorized-page[b-v2q3fb8o8x] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 50%, #bcccdc 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* خلفية زخرفية إضافية */
.unauthorized-page[b-v2q3fb8o8x]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    z-index: 0;
}

.unauthorized-content[b-v2q3fb8o8x] {
    text-align: center;
    background: white;
    padding: 80px 60px;
    border-radius: 24px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.04);
    max-width: 650px;
    width: 100%;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(220, 53, 69, 0.1);
}

/* حدود زخرفية */
.unauthorized-content[b-v2q3fb8o8x]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
    border-radius: 0 0 4px 4px;
}

.unauthorized-icon[b-v2q3fb8o8x] {
    font-size: 6rem;
    color: #dc3545;
    margin-bottom: 30px;
    display: inline-block;
    animation: shake-b-v2q3fb8o8x 0.5s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(220, 53, 69, 0.2));
}

.unauthorized-title[b-v2q3fb8o8x] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.unauthorized-message[b-v2q3fb8o8x] {
    font-size: 1.25rem;
    color: #64748b;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.unauthorized-content .btn[b-v2q3fb8o8x] {
    padding: 14px 40px;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.unauthorized-content .btn:hover[b-v2q3fb8o8x] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.35);
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
}

.unauthorized-content .btn:active[b-v2q3fb8o8x] {
    transform: translateY(-1px);
}

@keyframes shake-b-v2q3fb8o8x {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-12px) rotate(-5deg); }
    50% { transform: translateX(0) rotate(0deg); }
    75% { transform: translateX(12px) rotate(5deg); }
}

/* Not Found Page Styles */
.not-found-page[b-v2q3fb8o8x] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.not-found-content[b-v2q3fb8o8x] {
    text-align: center;
    color: white;
    padding: 60px 40px;
    max-width: 600px;
    width: 100%;
}

.not-found-content h1[b-v2q3fb8o8x] {
    font-size: 10rem;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.not-found-content h2[b-v2q3fb8o8x] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 20px 0;
}

.not-found-content p[b-v2q3fb8o8x] {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.not-found-content .btn[b-v2q3fb8o8x] {
    background: white;
    color: #667eea;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 10px;
    border: none;
    transition: all 0.3s ease;
}

.not-found-content .btn:hover[b-v2q3fb8o8x] {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.3);
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .unauthorized-content[b-v2q3fb8o8x] {
        padding: 60px 50px;
        max-width: 580px;
    }

    .unauthorized-icon[b-v2q3fb8o8x] {
        font-size: 5.5rem;
    }

    .unauthorized-title[b-v2q3fb8o8x] {
        font-size: 2.2rem;
    }

    .unauthorized-message[b-v2q3fb8o8x] {
        font-size: 1.15rem;
    }
}

/* Mobile & Small Tablets (max-width: 768px) */
@media (max-width: 768px) {
    .unauthorized-page[b-v2q3fb8o8x] {
        padding: 15px;
        background: linear-gradient(135deg, #f0f4f8 0%, #e1e8ed 100%);
    }

    .unauthorized-content[b-v2q3fb8o8x] {
        padding: 50px 30px;
        border-radius: 20px;
        box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.1),
            0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .unauthorized-icon[b-v2q3fb8o8x] {
        font-size: 4.5rem;
        margin-bottom: 25px;
    }

    .unauthorized-title[b-v2q3fb8o8x] {
        font-size: 1.85rem;
        margin-bottom: 15px;
    }

    .unauthorized-message[b-v2q3fb8o8x] {
        font-size: 1.1rem;
        margin-bottom: 35px;
        padding: 0 10px;
    }

    .unauthorized-content .btn[b-v2q3fb8o8x] {
        padding: 12px 35px;
        font-size: 1.05rem;
        width: 100%;
        max-width: 280px;
    }

    /* Not Found - Mobile */
    .not-found-content[b-v2q3fb8o8x] {
        padding: 40px 25px;
    }

    .not-found-content h1[b-v2q3fb8o8x] {
        font-size: 6rem;
    }

    .not-found-content h2[b-v2q3fb8o8x] {
        font-size: 1.8rem;
    }

    .not-found-content p[b-v2q3fb8o8x] {
        font-size: 1.05rem;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .unauthorized-content[b-v2q3fb8o8x] {
        padding: 40px 20px;
        border-radius: 16px;
    }

    .unauthorized-icon[b-v2q3fb8o8x] {
        font-size: 3.5rem;
        margin-bottom: 20px;
    }

    .unauthorized-title[b-v2q3fb8o8x] {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .unauthorized-message[b-v2q3fb8o8x] {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .unauthorized-content .btn[b-v2q3fb8o8x] {
        padding: 11px 28px;
        font-size: 1rem;
    }

    /* Not Found - Small Mobile */
    .not-found-content h1[b-v2q3fb8o8x] {
        font-size: 4.5rem;
    }

    .not-found-content h2[b-v2q3fb8o8x] {
        font-size: 1.5rem;
    }

    .not-found-content p[b-v2q3fb8o8x] {
        font-size: 0.95rem;
    }
}

/* Large Screens (min-width: 1400px) */
@media (min-width: 1400px) {
    .unauthorized-content[b-v2q3fb8o8x] {
        padding: 100px 80px;
        max-width: 750px;
    }

    .unauthorized-icon[b-v2q3fb8o8x] {
        font-size: 7rem;
    }

    .unauthorized-title[b-v2q3fb8o8x] {
        font-size: 3rem;
    }

    .unauthorized-message[b-v2q3fb8o8x] {
        font-size: 1.35rem;
        max-width: 550px;
    }

    .unauthorized-content .btn[b-v2q3fb8o8x] {
        padding: 16px 50px;
        font-size: 1.2rem;
    }
}
/* /Components/Shared/HBFooter.razor.rz.scp.css */
/* ========================================
   🎨 Footer Component - Modern Style
   ======================================== */

.footer[b-xc488aea53] {
    background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
    color: white;
    padding: 3rem 0 1rem;
    position: relative;
    overflow: hidden;
    border-top: 3px solid #d4af37;
}

.footer[b-xc488aea53]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/Images/main-pattern-sAiPHf0c.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.02;
    z-index: 0;
}

.footer-content[b-xc488aea53] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* 📌 Footer Top Section */
.footer-top[b-xc488aea53] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* 🏢 Footer Section */
.footer-section h4[b-xc488aea53] {
    color: #d4af37;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
}

/* 🎨 Footer Logo */
.footer-logo[b-xc488aea53] {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    border: 2px solid rgba(212, 175, 55, 0.2);
}

.footer-logo img[b-xc488aea53] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 🔗 Social Links */
.social-links[b-xc488aea53] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-link[b-xc488aea53] {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-link:hover[b-xc488aea53] {
    background: rgba(212, 175, 55, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    border-color: #d4af37;
}

.social-link img[b-xc488aea53] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 📧 Contact List */
.no-bullets li[b-xc488aea53] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-right: 0;
}

.no-bullets li:last-child[b-xc488aea53] {
    margin-bottom: 0;
}

.no-bullets a[b-xc488aea53] {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color 0.3s ease;
    margin-right: 0;
}

.no-bullets a:hover[b-xc488aea53] {
    color: #d4af37;
}

/* 📜 Footer Bottom */
.footer-bottom[b-xc488aea53] {
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

.footer-bottom p[b-xc488aea53] {
    margin: 0.3rem 0;
}

.footer-bottom strong[b-xc488aea53] {
    color: #d4af37;
    font-weight: 600;
}

/* 📱 Responsive Design - Tablets */
@media (max-width: 992px) {
    .footer-top[b-xc488aea53] {
        gap: 2rem;
    }

    .footer-section h4[b-xc488aea53] {
        font-size: 1.2rem;
    }
}

/* 📱 Responsive Design - Mobile */
@media (max-width: 768px) {
    .footer[b-xc488aea53] {
        padding: 2rem 0 1rem;
    }

    .footer-content[b-xc488aea53] {
        padding: 0 1rem;
    }

    .footer-top[b-xc488aea53] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-bottom: 1.5rem;
    }

    .footer-section[b-xc488aea53] {
        text-align: center !important;
        margin-right: 0 !important;
        justify-self: center !important;
    }

    .footer-section h4[b-xc488aea53] {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .footer-logo[b-xc488aea53] {
        margin: 0 auto 1rem;
        width: 70px;
        height: 70px;
    }

    .social-links[b-xc488aea53] {
        justify-content: center;
        gap: 0.75rem;
    }

    .social-link[b-xc488aea53] {
        width: 38px;
        height: 38px;
    }

    .no-bullets[b-xc488aea53] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .no-bullets li[b-xc488aea53] {
        justify-content: center;
        text-align: center;
        width: 100%;
        max-width: 320px;
    }

    .no-bullets a[b-xc488aea53],
    .no-bullets span[b-xc488aea53] {
        font-size: 0.9rem;
    }

    .footer-bottom[b-xc488aea53] {
        font-size: 0.8rem;
        padding-top: 1.2rem;
        margin-top: 1.5rem;
    }

    .footer-bottom p[b-xc488aea53] {
        line-height: 1.6;
    }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
    .footer[b-xc488aea53] {
        padding: 1.5rem 0 0.75rem;
    }

    .footer-content[b-xc488aea53] {
        padding: 0 0.75rem;
    }

    .footer-top[b-xc488aea53] {
        gap: 2rem;
    }

    .footer-logo[b-xc488aea53] {
        width: 60px;
        height: 60px;
    }

    .footer-section h4[b-xc488aea53] {
        font-size: 1.1rem;
    }

    .social-link[b-xc488aea53] {
        width: 35px;
        height: 35px;
    }

    .no-bullets li[b-xc488aea53] {
        margin-bottom: 0.85rem;
        font-size: 0.85rem;
    }

    .no-bullets a[b-xc488aea53],
    .no-bullets span[b-xc488aea53] {
        font-size: 0.85rem;
    }

    .footer-bottom[b-xc488aea53] {
        font-size: 0.75rem;
        padding-top: 1rem;
    }
}

/* 📱 Extra Small Mobile */
@media (max-width: 360px) {
    .footer-content[b-xc488aea53] {
        padding: 0 0.5rem;
    }

    .footer-logo[b-xc488aea53] {
        width: 55px;
        height: 55px;
    }

    .footer-section h4[b-xc488aea53] {
        font-size: 1rem;
    }

    .social-link[b-xc488aea53] {
        width: 32px;
        height: 32px;
    }

    .no-bullets a[b-xc488aea53],
    .no-bullets span[b-xc488aea53] {
        font-size: 0.8rem;
    }

    .footer-bottom[b-xc488aea53] {
        font-size: 0.7rem;
    }
}
/* /Components/Shared/HBHeader.razor.rz.scp.css */
/* ========================================
   🎨 Header Component - Fixed Sizes
   ======================================== */

/* 📌 Main Header */
.hb-header[b-cip9rcaf7e] {
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    color: white;
    padding: 0.75rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: hidden;
}

.hb-header[b-cip9rcaf7e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/Images/main-pattern-sAiPHf0c.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

.header-content[b-cip9rcaf7e] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    min-height: 70px;
}

/* 🏢 Logo Section */
.logo-section[b-cip9rcaf7e] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo[b-cip9rcaf7e] {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
}

.logo:hover[b-cip9rcaf7e] {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.logo img[b-cip9rcaf7e] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bank-name[b-cip9rcaf7e] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bank-name h1[b-cip9rcaf7e] {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.bank-name-en[b-cip9rcaf7e] {
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: white;
    line-height: 1;
}

/* 🧭 Navigation Links */
.nav-links[b-cip9rcaf7e] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nav-link[b-cip9rcaf7e] {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover[b-cip9rcaf7e] {
    background: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

.nav-link.active[b-cip9rcaf7e] {
    background: rgba(212, 175, 55, 0.25);
    border-bottom: 2px solid #d4af37;
}

/* 👤 User Section & Logout Button */
.user-section[b-cip9rcaf7e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-left: 0.5rem;
}

.user-name[b-cip9rcaf7e] {
    color: #d4af37;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.logout-btn[b-cip9rcaf7e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(220,53,69,0.9), rgba(200,35,51,0.95));
    color: white;
    border: none;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.logout-btn:hover:not(:disabled)[b-cip9rcaf7e] {
    background: linear-gradient(135deg, rgba(200,35,51,1), rgba(180,25,41,1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220,53,69,0.4);
}

.logout-btn:active:not(:disabled)[b-cip9rcaf7e] {
    transform: translateY(0);
}

.logout-btn:disabled[b-cip9rcaf7e] {
    opacity: 0.7;
    cursor: default;
    background: linear-gradient(135deg, rgba(220,53,69,0.6), rgba(200,35,51,0.65));
}

.logout-icon[b-cip9rcaf7e] {
    font-size: 1.1rem;
    font-weight: bold;
}

/* 📱 Mobile Menu Toggle */
.menu-toggle[b-cip9rcaf7e] {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.4rem;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    border: none;
    transition: all 0.3s ease;
    gap: 3px;
}

.menu-toggle:hover[b-cip9rcaf7e] {
    background: rgba(255,255,255,0.2);
}

.menu-toggle span[b-cip9rcaf7e] {
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1)[b-cip9rcaf7e] {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2)[b-cip9rcaf7e] {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3)[b-cip9rcaf7e] {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* 📱 Responsive Design - Tablets */
@media (max-width: 1200px) {
    .header-content[b-cip9rcaf7e] {
        padding: 0 1.5rem;
    }

    .nav-links[b-cip9rcaf7e] {
        gap: 0.25rem;
    }

    .nav-link[b-cip9rcaf7e] {
        font-size: 0.9rem;
        padding: 0.45rem 0.85rem;
    }
}

@media (max-width: 992px) {
    .logo[b-cip9rcaf7e] {
        width: 55px;
        height: 55px;
    }

    .bank-name h1[b-cip9rcaf7e] {
        font-size: 1.1rem;
    }

    .bank-name-en[b-cip9rcaf7e] {
        font-size: 0.7rem;
    }
}

/* 📱 Responsive Design - Mobile */
@media (max-width: 768px) {
    .hb-header[b-cip9rcaf7e] {
        padding: 0.5rem 0;
    }

    .header-content[b-cip9rcaf7e] {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0 1rem;
        min-height: 60px;
    }

    .logo-section[b-cip9rcaf7e] {
        width: 100%;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .menu-toggle[b-cip9rcaf7e] {
        display: flex;
        margin-left: auto;
    }

    .logo[b-cip9rcaf7e] {
        width: 50px;
        height: 50px;
    }

    .bank-name[b-cip9rcaf7e] {
        flex: 1;
    }

    .bank-name h1[b-cip9rcaf7e] {
        font-size: 1rem;
    }

    .bank-name-en[b-cip9rcaf7e] {
        font-size: 0.65rem;
    }

    .nav-links[b-cip9rcaf7e] {
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        gap: 0.3rem;
        order: 3;
    }

    .nav-links.active[b-cip9rcaf7e] {
        max-height: 450px;
        padding: 0.5rem 0;
    }

    .nav-link[b-cip9rcaf7e] {
        width: 100%;
        text-align: center;
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .nav-links.active .nav-link[b-cip9rcaf7e] {
        opacity: 1;
        transform: translateY(0);
    }

    /* User Section Mobile */
    .user-section[b-cip9rcaf7e] {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
        padding: 0.6rem;
        margin: 0.5rem 0 0 0;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .nav-links.active .user-section[b-cip9rcaf7e] {
        opacity: 1;
        transform: translateY(0);
    }

    .user-name[b-cip9rcaf7e] {
        font-size: 0.85rem;
    }

    .logout-btn[b-cip9rcaf7e] {
        width: 100%;
        justify-content: center;
        padding: 0.6rem;
    }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
    .header-content[b-cip9rcaf7e] {
        padding: 0 0.75rem;
    }

    .logo[b-cip9rcaf7e] {
        width: 45px;
        height: 45px;
        padding: 6px;
    }

    .bank-name h1[b-cip9rcaf7e] {
        font-size: 0.95rem;
    }

    .bank-name-en[b-cip9rcaf7e] {
        font-size: 0.6rem;
    }

    .nav-link[b-cip9rcaf7e] {
        font-size: 0.85rem;
        padding: 0.55rem 0.85rem;
    }
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
/* ========================================
   🔄 Loading Spinner - Professional Design
   ======================================== */

.hb-loading-container[b-cl1axgtv9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    margin: 20px 0;
}

.hb-loading-content[b-cl1axgtv9l] {
    text-align: center;
    max-width: 400px;
}

/* Bank Logo Pulse Animation */
.hb-bank-logo-loader[b-cl1axgtv9l] {
    margin-bottom: 30px;
}

.hb-pulse-logo[b-cl1axgtv9l] {
    width: 100px;
    height: auto;
    animation: hbLogoPulse-b-cl1axgtv9l 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0, 61, 122, 0.2));
}

@keyframes hbLogoPulse-b-cl1axgtv9l {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* Triple Ring Spinner */
.hb-loader-spinner[b-cl1axgtv9l] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
}

.hb-spinner-ring[b-cl1axgtv9l] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: hbSpin-b-cl1axgtv9l 2s linear infinite;
}

.hb-spinner-ring:nth-child(1)[b-cl1axgtv9l] {
    border-top-color: #003d7a;
    border-right-color: #003d7a;
    animation-delay: 0s;
}

.hb-spinner-ring:nth-child(2)[b-cl1axgtv9l] {
    border-top-color: #d4af37;
    border-right-color: #d4af37;
    animation-delay: 0.3s;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}

.hb-spinner-ring:nth-child(3)[b-cl1axgtv9l] {
    border-top-color: #00589e;
    border-right-color: #00589e;
    animation-delay: 0.6s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

@keyframes hbSpin-b-cl1axgtv9l {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading Text */
.hb-loading-title[b-cl1axgtv9l] {
    color: #003d7a;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    animation: hbFadeInOut-b-cl1axgtv9l 2s ease-in-out infinite;
}

.hb-loading-text[b-cl1axgtv9l] {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

@keyframes hbFadeInOut-b-cl1axgtv9l {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Animated Dots */
.hb-loading-dots[b-cl1axgtv9l] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.hb-loading-dots span[b-cl1axgtv9l] {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #003d7a 0%, #00589e 100%);
    border-radius: 50%;
    display: inline-block;
    animation: hbDotBounce-b-cl1axgtv9l 1.4s ease-in-out infinite;
    box-shadow: 0 2px 4px rgba(0, 61, 122, 0.3);
}

.hb-loading-dots span:nth-child(1)[b-cl1axgtv9l] {
    animation-delay: 0s;
}

.hb-loading-dots span:nth-child(2)[b-cl1axgtv9l] {
    animation-delay: 0.2s;
}

.hb-loading-dots span:nth-child(3)[b-cl1axgtv9l] {
    animation-delay: 0.4s;
}

@keyframes hbDotBounce-b-cl1axgtv9l {
    0%, 80%, 100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.3) translateY(-8px);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hb-loading-container[b-cl1axgtv9l] {
        min-height: 350px;
        padding: 40px 20px;
    }

    .hb-pulse-logo[b-cl1axgtv9l] {
        width: 80px;
    }

    .hb-loader-spinner[b-cl1axgtv9l] {
        width: 60px;
        height: 60px;
    }

    .hb-loading-title[b-cl1axgtv9l] {
        font-size: 1.2rem;
    }

    .hb-loading-text[b-cl1axgtv9l] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hb-loading-container[b-cl1axgtv9l] {
        min-height: 300px;
        padding: 30px 15px;
    }

    .hb-pulse-logo[b-cl1axgtv9l] {
        width: 70px;
    }

    .hb-loader-spinner[b-cl1axgtv9l] {
        width: 50px;
        height: 50px;
    }

    .hb-loading-title[b-cl1axgtv9l] {
        font-size: 1.1rem;
    }
}