@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ww6hw72p5i] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f6f9fd;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

:dir(ltr) .page[b-ww6hw72p5i],
[dir="ltr"] .page[b-ww6hw72p5i] {
    background: #f6f9fd;
}

.content[b-ww6hw72p5i] {
    background-color: transparent;
    z-index: 1;
}

main[b-ww6hw72p5i] {
    flex: 1;
}

.sidebar[b-ww6hw72p5i]::-webkit-scrollbar,
.main-content[b-ww6hw72p5i]::-webkit-scrollbar {
    display: none;
}

/* =========================================
brand-container: ارتفاع مطابق تماماً لـ h-12 (48px)
========================================= */
.brand-container[b-ww6hw72p5i] {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-start;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 1rem;
    gap: 8px;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(224, 227, 231, 0.5);
}

.brand-title[b-ww6hw72p5i] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #004ccd;
    margin: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.25s ease;
}

.toggle-sidebar-btn[b-ww6hw72p5i] {
    background: transparent;
    border: none;
    padding: 0.35rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #424656;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

    .toggle-sidebar-btn:hover[b-ww6hw72p5i] {
        background-color: #e0e3e7;
        color: #004ccd;
    }

/* =========================================
عناصر القائمة
========================================= */
.nav-item[b-ww6hw72p5i] {
    font-size: 0.9rem;
    padding: 0.25rem 0.75rem;
    margin: 2px 0;
    list-style: none;
}

    .nav-item[b-ww6hw72p5i]  a {
        color: #424656;
        border-radius: 0.5rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        gap: 0.75rem;
        font-weight: 500;
        text-decoration: none;
        overflow: hidden;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

        .nav-item[b-ww6hw72p5i]  a svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            color: #424656;
        }

        .nav-item[b-ww6hw72p5i]  a:hover,
        .nav-item[b-ww6hw72p5i]  a.active {
            background-color: #004ccd !important;
            color: #ffffff !important;
        }

            .nav-item[b-ww6hw72p5i]  a:hover svg,
            .nav-item[b-ww6hw72p5i]  a.active svg {
                color: #ffffff !important;
            }

.nav-scrollable[b-ww6hw72p5i] {
    background-color: transparent;
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

[dir="rtl"] .nav-scrollable[b-ww6hw72p5i] {
    border-left: 1px solid #e0e3e7;
}

[dir="ltr"] .nav-scrollable[b-ww6hw72p5i] {
    border-right: 1px solid #e0e3e7;
}

.user-info[b-ww6hw72p5i] {
    padding: 0 0.75rem;
    margin-bottom: 1rem;
}

/* =========================================
حالة الطي (Sidebar Collapsed)
========================================= */
.sidebar-collapsed[b-ww6hw72p5i] {
    width: 70px !important;
}

    .sidebar-collapsed .brand-container[b-ww6hw72p5i] {
        justify-content: center;
        padding: 0;
    }

    /* إخفاء تام للنصوص والعناصر */
    .sidebar-collapsed .brand-title[b-ww6hw72p5i],
    .sidebar-collapsed .user-info[b-ww6hw72p5i],
    .sidebar-collapsed .nav-text[b-ww6hw72p5i],
    .sidebar-collapsed .user-text-content[b-ww6hw72p5i] {
        display: none !important;
    }

    .sidebar-collapsed .nav-item[b-ww6hw72p5i] {
        padding: 0.25rem 0.4rem !important;
    }

        .sidebar-collapsed .nav-item[b-ww6hw72p5i]  a {
            justify-content: center !important;
            padding: 0 !important;
            gap: 0 !important;
        }

            .sidebar-collapsed .nav-item[b-ww6hw72p5i]  a svg {
                margin: 0 !important;
            }

@media (min-width: 641px) {
    .navbar-toggler[b-ww6hw72p5i] {
        display: none;
    }

    .collapse[b-ww6hw72p5i] {
        display: block;
    }
}



/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: white;
    background: #f6fafe;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}*/

/* 🔹 عند تغيير الاتجاه إلى LTR: نعكس الزاوية إلى 270deg */
/*:dir(ltr) .page,
[dir="ltr"] .page {
    background: #f6fafe;
}

.content {
    background-color: transparent;
    z-index: 1;
}

main {
    flex: 1;
}

.main-content::-webkit-scrollbar {
    display: none;
}

.sidebar::-webkit-scrollbar {
    display: none;*/ /* Chrome, Edge, Safari */
/*}

.top-row {
    background-color: #8ab4f5d6;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
            text-decoration: underline;
        }

        .top-row ::deep a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }*/

/* =========================================
✅ 2. العنوان وزر الطي (توحيد الارتفاع مع البار العلوي h-12 = 3rem = 48px)
========================================= */
/*.brand-container {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;*/ /* عكس الترتيب ليظهر الزر أولاً ثم النص */
    /*justify-content: flex-start;*/ /* محاذاة طبيعية للعناصر */
    /* ✅ الارتفاع الدقيق للبار العلوي */
    /*height: 3rem !important;
    min-height: 3rem !important;
    max-height: 3rem !important;*/
    /* ✅ إزالة أي padding عمودي */
    /*padding: 0 1rem;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;*/
    /* خط فاصل بسيط أسفل القسم للفصل البصري */
    /*border-bottom: 1px solid rgba(224, 227, 231, 0.5);
}*/

/* تعديل زر الطي ليتناسب مع الارتفاع الجديد */
/*.toggle-sidebar-btn {
    background: transparent;
    border: none;
    padding: 0.35rem;*/ /* تقليل الحشو قليلاً ليتناسب مع 48px */
    /*border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #424656;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

    .toggle-sidebar-btn:hover {
        background-color: #e0e3e7;
        color: #004ccd;
    }

.brand-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #004ccd;
    margin: 0;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;*/ /* إزالة أي ارتفاع إضافي من سطر النص */
/*}*/

/* =========================================
حالة الطي (Sidebar Collapsed)
========================================= */
/*.sidebar-collapsed {
    width: 70px !important;
}

    .sidebar-collapsed .brand-title {
        display: none !important;
    }

    .sidebar-collapsed .brand-container {
        justify-content: center;
        padding: 1rem 0.5rem;
    }

    .sidebar-collapsed .nav-item {
        padding: 0.25rem 0.4rem;
    }

        .sidebar-collapsed .nav-item ::deep a {
            justify-content: center;
            padding: 0;
            gap: 0;
        }

            .sidebar-collapsed .nav-item ::deep a svg {
                margin: 0;
            }*/

/* =========================================
3. إزالة الخط الفاصل وتقليل المسافة
========================================= */
/*.brand-container {
    display: flex;
    align-items: center;*/
    /* عكس الاتجاه لضمان ظهور الزر أولاً ثم النص بشكل صحيح */
    /*flex-direction: row-reverse;
    justify-content: center;
    padding: 0.5rem 1rem;*/ /* تقليل المسافة */
    /*gap: 0.75rem;*/
    /* تم إزالة border-bottom تماماً */
/*}

.brand-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #004ccd;
    margin: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease, width 0.2s ease;
    overflow: hidden;
}*/

/* =========================================
إصلاح تشوه النص عند التصغير (إخفاء سلس)
========================================= */
/* إخفاء النصوص والعناصر غير المطلوبة عند الطي */
/*.sidebar-collapsed .brand-title,
.sidebar-collapsed .user-text-content,
.sidebar-collapsed .nav-text {
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    overflow: hidden;
}*/

/* إخفاء قسم المستخدم بالكامل عند الطي */
/*.sidebar-collapsed .user-info {
    display: none !important;
}

.sidebar-collapsed .brand-container {
    justify-content: center;
    padding: 0.5rem;
}*/

/* =========================================
2. تغيير لون الخلفية والأيقونة عند المرور والنشط
========================================= */
/*.nav-item ::deep a {
    color: #424656;*/ /* لون النص الافتراضي */
    /*border-radius: 0.5rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    text-decoration: none;
}

    .nav-item ::deep a svg {
        width: 20px;
        height: 20px;
        color: #424656;
        flex-shrink: 0;
        transition: color 0.2s ease;
    }

    .nav-item ::deep a:hover,
    .nav-item ::deep a.active {
        background-color: #004ccd !important;
        color: #ffffff !important;
    }

        .nav-item ::deep a:hover svg,
        .nav-item ::deep a.active svg {
            color: #ffffff !important;
        }*/

/* =========================================
الحاوية الرئيسية للقائمة
========================================= */
/*.nav-scrollable {
    background-color: transparent;*/ /* الخلفية تتحكم بها الـ aside الأب */
    /*height: 100%;
    overflow-y: auto;
    width: 100%;
    font-family: 'Tajawal', sans-serif;
}

[dir="rtl"] .nav-scrollable {
    border-right: none;
    border-left: 1px solid #e0e3e7;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.04);
}

[dir="ltr"] .nav-scrollable {
    border-left: none;
    border-right: 1px solid #e0e3e7;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04);
}*/

/* =========================================
5. دعم قسم معلومات المستخدم
========================================= */
/*.user-info {
    padding: 0 0.75rem;
    margin-bottom: 1rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-text-content {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}*/

/* =========================================
إخفاء زر القائمة للهواتف
========================================= */
/*@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        display: block;
    }
}*/
/* /Layout/NavMenu.razor.rz.scp.css */
/* =========================================
الحاوية الرئيسية للقائمة
========================================= */
.nav-scrollable[b-cunf2cgx4k] {
    background-color: transparent;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    font-family: 'Tajawal', sans-serif;
}

[dir="rtl"] .nav-scrollable[b-cunf2cgx4k] {
    border-right: none;
    border-left: 1px solid #e0e3e7;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.04);
}

[dir="ltr"] .nav-scrollable[b-cunf2cgx4k] {
    border-left: none;
    border-right: 1px solid #e0e3e7;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04);
}

/* تحسين شريط التمرير */
.nav-scrollable[b-cunf2cgx4k]::-webkit-scrollbar {
    width: 4px;
}

.nav-scrollable[b-cunf2cgx4k]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scrollable[b-cunf2cgx4k]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* =========================================
عناصر القائمة والألوان (أزرق وأبيض)
========================================= */
.nav-item[b-cunf2cgx4k] {
    font-size: 0.9rem;
    padding: 0.25rem 0.75rem;
    margin: 2px 0;
    list-style: none;
}

    .nav-item[b-cunf2cgx4k]  a,
    .nav-item .nav-link[b-cunf2cgx4k] {
        color: #424656;
        background-color: transparent;
        border-radius: 0.5rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        gap: 0.75rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
        text-decoration: none;
        overflow: hidden;
        white-space: nowrap;
    }

        .nav-item[b-cunf2cgx4k]  a svg,
        .nav-item .nav-link svg[b-cunf2cgx4k] {
            width: 20px;
            height: 20px;
            color: #424656;
            flex-shrink: 0;
            transition: color 0.2s ease;
        }

        .nav-item[b-cunf2cgx4k]  a:hover,
        .nav-item[b-cunf2cgx4k]  a.active,
        .nav-item .nav-link:hover[b-cunf2cgx4k],
        .nav-item .nav-link.active[b-cunf2cgx4k] {
            background-color: #004ccd !important;
            color: #ffffff !important;
        }

            .nav-item[b-cunf2cgx4k]  a:hover svg,
            .nav-item[b-cunf2cgx4k]  a.active svg,
            .nav-item .nav-link:hover svg[b-cunf2cgx4k],
            .nav-item .nav-link.active svg[b-cunf2cgx4k] {
                color: #ffffff !important;
            }

/* =========================================
✅ 1. حالة الطي (Sidebar Collapsed) - توسيط الأيقونات تماماً
========================================= */
.sidebar-collapsed .nav-item[b-cunf2cgx4k] {
    /* ✅ إلغاء الـ padding الأفقي (px-3) من Tailwind لمنع إزاحة الأيقونة */
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    margin: 2px 0;
}

    .sidebar-collapsed .nav-item[b-cunf2cgx4k]  a,
    .sidebar-collapsed .nav-item .nav-link[b-cunf2cgx4k] {
        /* ✅ توسيط الأيقونة في المنتصف وإلغاء أي نص أو فراغ */
        padding: 0.5rem !important; /* مسافة داخلية حول الأيقونة */
        margin: 0.25rem auto !important; /* مسافة خارجية عمودية أفقية */
        width: 36px !important; /* عرض ثابت لجعل الأيقونة متسقة */
        height: 36px !important; /* ارتفاع ثابت */
        border-radius: 8px !important; /* زوايا دائرية لمسة جمالية */
        justify-content: center !important;
        align-items: center !important;
    }

        .sidebar-collapsed .nav-item[b-cunf2cgx4k]  a svg,
        .sidebar-collapsed .nav-item .nav-link svg[b-cunf2cgx4k] {
            /* ✅ إزالة أي هوامش حول الأيقونة */
            width: 20px; /* حجم مناسب للأيقونة */
            height: 20px;
            margin: 0 !important; /* إلغاء أي هوامش داخلية */
        }

/* ✅ إخفاء النصوص والعناصر الأخرى بسلاسة */
.sidebar-collapsed .brand-title[b-cunf2cgx4k],
.sidebar-collapsed .user-text-content[b-cunf2cgx4k],
.sidebar-collapsed .nav-text[b-cunf2cgx4k] {
    opacity: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: none !important; /* إخفاء تام لمنع أخذ مساحة */
}

.sidebar-collapsed .user-info[b-cunf2cgx4k] {
    display: none !important;
}

.sidebar-collapsed .brand-container[b-cunf2cgx4k] {
    justify-content: center;
    padding: 0 0.5rem;
}

/* =========================================
إخفاء زر القائمة للهواتف
========================================= */
@media (min-width: 641px) {
    .navbar-toggler[b-cunf2cgx4k] {
        display: none;
    }

    .collapse[b-cunf2cgx4k] {
        display: block;
    }
}