/*
 |-------------------------------------------------------------
 |  إصلاح عام لهوامش لوحة التحكم
 |  هذه القواعد تُطبق على جميع صفحات لوحة التحكم فقط (class="sidebar-mini")
 |  هدفها توحيد عرض السايدبار وإزاحة المحتوى والنافبار بشكل متجاوب.
 |  جميع القيم تعتمد على متغير --sidebar-width لتسهيل التغيير المستقبلي.
 |-------------------------------------------------------------
*/

:root {
    --sidebar-width: 300px; /* يمكن تغييرها بسهولة مستقبلاً */
}

/* عرض السايدبار نفسه */
.sidebar-mini .app-sidebar {
    width: var(--sidebar-width) !important; /* إجبارياً حتى يتخطى أية قيم موروثة */
}

/* إزاحة المحتوى والنافبار بمقدار السايدبار على الشاشات ≥ 992px */
@media (min-width: 992px) {
    /* معالجة الهامش المزدوج الناتج عن وجود عناصر داخلية مكررة (مثل .main-content أو .content-wrapper) في صفحات خاصة */
    .sidebar-mini .main-content .main-content,
    .sidebar-mini .app-content .main-content,
    .sidebar-mini .content-wrapper .content-wrapper{
        margin-right: 0 !important; /* يُلغى الهامش الداخلي الإضافي */
        width: 100% !important;
    }

/* إضافة مسافة علوية للمحتوى لتجنب التداخل مع النافبار المثبّت */
@media (min-width: 992px){
  .sidebar-mini .main-content,
  .sidebar-mini .app-content,
  .sidebar-mini .content-wrapper{
      padding-top: 60px; /* ارتفاع تقريبي للنافبار */
  }
}
   
    .sidebar-mini .main-content,
    .sidebar-mini .app-content,
    .sidebar-mini .content-wrapper {
        margin-right: var(--sidebar-width) !important;
    }

    /* تمديد النافبار لليسار ليغطي مساحة السايدبار */
    /* محاذاة النافبار مع السايدبار على الشاشات الكبيرة */
    .sidebar-mini .main-header {
        /* تثبيت شريط النافبار أعلى الصفحة وإلغاء أي فجوة */
        position: fixed;
        top: 0;
        right: var(--sidebar-width); /* يبدأ مباشرة من حافة السايدبار */
        left: 0;
        width: auto; /* العرض يتحدد تلقائياً من left إلى right */
        z-index: 1030; /* أعلى من السايدبار */
    }
}

/* على الشاشات الصغيرة تُلغى الإزاحة كلياً ويختفي السايدبار افتراضياً */
@media (max-width: 991.98px) {
    .sidebar-mini .main-content,
    .sidebar-mini .app-content,
    .sidebar-mini .content-wrapper,
    .sidebar-mini .main-header {
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* إذا كان السايدبار مخفياً يُدفع خارج الشاشة بنفس عرضه */
    .sidebar-mini .app-sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%); /* إخفاء كامل باتجاه اليمين */
    }

    /* وعند إضافة class="sidebar-open" من الجافاسكربت يعود للظهور */
    .sidebar-open .app-sidebar {
        transform: translateX(0) !important;
    }

    .sidebar-open .main-content,
    .sidebar-open .app-content,
    .sidebar-open .main-header {
        margin-right: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important; /* منع الإنزلاق الأفقي وتجاور المحتوى مع السايدبار */
    }

    /* منع أي تمرير أفقي غير مقصود على الجوال */
    html, body, .page { overflow-x: hidden; }
}