/* wwwroot/css/site.css */

/* تنسيقات عامة والخط */
body {
    font-family: 'Cairo', sans-serif;
    background-color: #f3f4f6;
    overflow-x: hidden; /* لمنع السكرول العرضي أثناء حركة القائمة */
}

/* هيكل الصفحة */
#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* تنسيق القائمة الجانبية (الوضع الافتراضي: مخفية للموبايل) */
#sidebar-wrapper {
    min-height: 100vh;
    margin-right: -15rem; /* مخفية بإزاحتها لليمين */
    transition: margin .25s ease-out;
    background-color: #1e293b;
    color: #fff;
    width: 15rem;
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 0;
}

    #sidebar-wrapper .sidebar-heading {
        padding: 1.5rem 1rem;
        font-size: 1.2rem;
        font-weight: bold;
        background: rgba(0,0,0,0.2);
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    #sidebar-wrapper .list-group-item {
        background-color: transparent;
        color: #cbd5e1;
        border: none;
        padding: 1rem 1.5rem;
    }

        #sidebar-wrapper .list-group-item:hover {
            background-color: rgba(255,255,255,0.1);
            color: #fff;
        }

        #sidebar-wrapper .list-group-item.active {
            background-color: #0d6efd;
            color: #fff;
            font-weight: bold;
            border-right: 4px solid white;
        }

/* محتوى الصفحة */
#page-content-wrapper {
    width: 100%;
    transition: padding-right .25s ease-out;
    padding-right: 0; /* في الموبايل المحتوى يأخذ كامل العرض */
}

/* ==========================================
   Media Queries (الشاشات الكبيرة)
   ========================================== */
@media (min-width: 768px) {
    /* إظهار القائمة بشكل دائم */
    #sidebar-wrapper {
        margin-right: 0;
    }

    /* إزاحة المحتوى لليسار لترك مكان للقائمة */
    #page-content-wrapper {
        padding-right: 15rem;
    }

    /* حالة التوغل (إخفاء القائمة في الشاشات الكبيرة عند الضغط) */
    body.sb-sidenav-toggled #sidebar-wrapper {
        margin-right: -15rem;
    }

    body.sb-sidenav-toggled #page-content-wrapper {
        padding-right: 0;
    }
}

/* حالة التوغل في الموبايل (إظهار القائمة عند الضغط) */
@media (max-width: 767.98px) {
    body.sb-sidenav-toggled #sidebar-wrapper {
        margin-right: 0; /* إرجاعها للظهور */
    }
    /* المحتوى يظل كما هو مغطى بالقائمة أو ينزاح حسب الرغبة */
}

/* الشريط العلوي */
.navbar-top {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    background: white;
}


/* تحسينات القائمة الجانبية - توحيد التنسيق */
.sidebar-menu .list-group-item {
    border-radius: .85rem;
    margin: .18rem .75rem;
    transition: background .2s ease,transform .12s ease,color .2s ease;
}

    .sidebar-menu .list-group-item:hover {
        transform: translateX(-2px);
    }
    /* RTL */
    .sidebar-menu .list-group-item i {
        font-size: 1.15rem;
        opacity: .95;
    }
/* ===== Sidebar Overlay (Mobile) ===== */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1029; /* أقل من sidebar (1030) */
}

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* تحسين حركة الشريط */
#sidebar-wrapper {
    transition: margin-right .25s ease, transform .25s ease;
}

/* في وضع الإخفاء */
.sb-sidenav-toggled #sidebar-wrapper {
    margin-right: -270px; /* RTL hide */
}

/* على الموبايل الأفضل نستخدم transform */
@media (max-width: 992px) {
    #sidebar-wrapper {
        margin-right: 0 !important;
        transform: translateX(0);
        z-index: 1030;
    }

    .sb-sidenav-toggled #sidebar-wrapper {
        transform: translateX(100%); /* RTL: يطلع خارج الشاشة يمين */
    }
}