/* ============================================================
 * sidebar-theme.css
 * ------------------------------------------------------------
 * ثيم الشريط الجانبي الموحّد: كحلي عميق + صف نشط أزرق.
 *
 * يحل محل الملفات التالية التي كانت تتنازع على نفس العناصر:
 *   sidebar-colors.css, sidebar-colors-force.css,
 *   sidebar-colors-inline.css, sidebar-colors-direct.css,
 *   sidebar-colors-catalog-fix.css, catalog-pink-force.css,
 *   sidebar-li-lines.css
 *
 * قرارات بنيوية مهمة:
 *
 * 1) لا نستخدم display:flex على `li > a`.
 *    AdminLTE يضع سهم القائمة (.pull-right-container) بـ position:absolute
 *    داخل الرابط، والـ flex يُخرجه من التموضع المطلق فيهبط تحت النص.
 *    نُبقي display:block ونضبط الحشو ليتسع للسهم المطلق.
 *
 * 2) لا نُظهر `.main-sidebar .logo`.
 *    اسم المنشأة معروض أصلاً في الترويسة (header.blade.php سطر 74)،
 *    و sidebar.blade.php يحمل نسخة ثانية يُخفيها AdminLTE عمداً.
 *    إظهارها يُنتج عنوانين مكرّرين.
 *
 * 3) عرض الشريط 280px، لكن vendor.css يحوي قاعدة مضمّنة
 *    `.pull-right-container{left:180px!important;top:-22px!important}`
 *    مُثبّتة على العرض القديم 230px. نُبطلها صراحة أدناه وإلا طار السهم.
 * ============================================================ */

:root {
    --sb-bg:            #0d2b52;  /* خلفية الشريط - كحلي عميق */
    --sb-bg-alt:        #14375f;  /* خلفية الصف عند المرور */
    --sb-submenu-bg:    #08203f;  /* خلفية القوائم الفرعية - أغمق للعمق */
    --sb-active:        #1d5bd6;  /* الصف النشط - أزرق حيوي */
    --sb-text:          #dce6f5;  /* نص عادي */
    --sb-text-dim:      #93a9c8;  /* نص خافت / أيقونة غير نشطة */
    --sb-text-active:   #ffffff;  /* نص الصف النشط */
    --sb-divider:       rgba(255, 255, 255, 0.07);
    --sb-width:         280px;
    --sb-width-mini:    72px;     /* رصيف الأيقونات المطوي */
    --sb-gutter:        10px;     /* هامش البطاقة عن حافة الشريط */
    --sb-arrow-space:   26px;     /* مساحة محجوزة للسهم المطلق */
}

/* ============================================================
 * 1. العرض
 * الشريط والمحتوى والترويسة تُحدَّث معاً وإلا ظهرت فجوة أو تداخل.
 * ============================================================ */

@media (min-width: 768px) {
    .main-sidebar,
    .left-side {
        width: var(--sb-width) !important;
    }

    .content-wrapper,
    .main-footer {
        margin-left: var(--sb-width) !important;
    }

    /* الـ navbar لم يعد يحتاج إزاحة بعرض الشريط: الترويسة صارت flex
       والشعار شقيق يشغل ذلك العرض فعلياً (انظر header-theme.css).
       إبقاء الهامش هنا كان احتساباً مزدوجاً يدفع الشريط جانباً. */

    .main-header .logo {
        width: var(--sb-width) !important;
    }

    .sidebar-collapse .main-sidebar,
    .sidebar-collapse .left-side {
        width: var(--sb-width-mini) !important;
    }

    .sidebar-collapse .content-wrapper,
    .sidebar-collapse .main-footer {
        margin-left: var(--sb-width-mini) !important;
    }

    /* vendor: `.sidebar-mini.sidebar-collapse .main-header .logo{width:50px}`
       أعلى تحديداً، فلولا تأهيلها بـ .sidebar-mini لبقي الشعار 50px بينما
       الشريط 72px، فتظهر كتلة بيضاء في الركن العلوي. */
    .sidebar-collapse .main-header .logo,
    .sidebar-mini.sidebar-collapse .main-header .logo,
    body.sidebar-mini.sidebar-collapse .main-header .logo {
        width: var(--sb-width-mini) !important;
        background-color: var(--sb-bg) !important;
        background: var(--sb-bg) !important;
        padding: 0 !important;
    }
}

/* RTL: الهوامش تنتقل لليمين، وإلا ظهر المحتوى تحت الشريط. */
@media (min-width: 768px) {
    /* المحتوى والتذييل فقط. أُخرج .main-header .navbar من هذه المجموعة:
       الترويسة تُدار بـ flex في header-theme.css، وهامش 280px هنا كان
       يزيح شريط الأزرار ويُبقي الشعار في الجهة الخطأ. */
    body.rtl .content-wrapper,
    body.rtl .main-footer,
    html[dir="rtl"] .content-wrapper,
    html[dir="rtl"] .main-footer {
        margin-left: 0 !important;
        margin-right: var(--sb-width) !important;
        /* vendor.css يضيف margin-left:230px على نفس العنصر. مع هامش
           يميني 280px يصبح مجموع الهوامش ~510px على عنصر عرضه 100%،
           فيتمدّد المستند أعرض من الشاشة ويظهر تمرير أفقي يبدو معه
           التخطيط كأنه منزاح. width:auto مع box-sizing يمنع ذلك. */
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* الوضع المطوي: الرصيف ما يزال يشغل 72px على اليمين، فتصفير الهامش
       يدفع المحتوى تحته وتُقتطع البطاقات عند الحافة. الهامش يساوي
       عرض الرصيف لا صفراً. */
    body.rtl.sidebar-collapse .content-wrapper,
    body.rtl.sidebar-collapse .main-footer,
    html[dir="rtl"] .sidebar-collapse .content-wrapper,
    html[dir="rtl"] .sidebar-collapse .main-footer {
        margin-left: 0 !important;
        margin-right: var(--sb-width-mini) !important;
    }
}

/* ============================================================
 * 2. الخلفية
 * تشمل كل الـ skins لأن theme_color يختلف بين المنشآت
 * والافتراضي skin-black-light يرسم الشريط أبيض.
 * ============================================================ */

.main-sidebar,
.left-side,
.main-sidebar .sidebar,
body .main-sidebar,
.skin-black-light .main-sidebar,
.skin-blue-light .main-sidebar,
.skin-green-light .main-sidebar,
.skin-purple-light .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow-light .main-sidebar,
.skin-black .main-sidebar,
.skin-blue .main-sidebar,
.skin-green .main-sidebar,
.skin-purple .main-sidebar,
.skin-red .main-sidebar,
.skin-yellow .main-sidebar {
    background-color: var(--sb-bg) !important;
    border-right: 0 !important;
}

.sidebar-menu,
.main-sidebar .sidebar-menu {
    background-color: var(--sb-bg) !important;
    padding-top: 8px !important;
    padding-bottom: 20px !important;
}

/* شعار الشريط يبقى مخفياً: الترويسة تعرض اسم المنشأة أصلاً.
   إظهاره يُنتج عنواناً مكرّراً (انظر ملاحظة 2 أعلاه). */
.main-sidebar > .sidebar > .logo,
.main-sidebar .sidebar > a.logo {
    display: none !important;
}

/* ترويسة الشعار (header.blade.php) تعلو الشريط مباشرة، فتُلوَّن بنفس
   الكحلي ليقرأ الركن العلوي ككتلة واحدة بدل شريط أزرق فاقع منفصل. */
.main-header .logo,
.main-header .logo:hover,
.skin-black-light .main-header .logo,
.skin-blue-light .main-header .logo,
.skin-green-light .main-header .logo,
.skin-purple-light .main-header .logo,
.skin-red-light .main-header .logo,
.skin-yellow-light .main-header .logo,
.skin-black .main-header .logo,
.skin-blue .main-header .logo,
.skin-green .main-header .logo,
.skin-purple .main-header .logo,
.skin-red .main-header .logo,
.skin-yellow .main-header .logo {
    background-color: var(--sb-bg) !important;
    background: var(--sb-bg) !important;
    color: var(--sb-text-active) !important;
    /* بلا حدّ سفلي: الشعار والشريط سطح واحد، وأي خط بينهما يظهر كفاصل دخيل. */
    border-bottom: 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
    color: var(--sb-text-active) !important;
}

/* تنسيق شريط الترويسة انتقل إلى header-theme.css ليبقى الملفان
   منفصلي المسؤولية: هذا للشريط الجانبي، وذاك للترويسة. */

/* الوضع الموسّع: الاسم الكامل فقط. */
.main-header .logo .logo-mini {
    display: none !important;
}

.sidebar-collapse .main-header .logo .logo-lg,
.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg {
    display: none !important;
}

/* الوضع المطوي: شعار المنشأة أو حرفها الأول داخل قرص، بدل ركن فارغ. */
.sidebar-collapse .main-header .logo .logo-mini,
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 6px auto 0 auto !important;
    border-radius: 9px;
    background: var(--sb-active);
    color: var(--sb-text-active) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase;
    overflow: hidden;
}

.sidebar-collapse .main-header .logo .logo-mini img,
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: none !important;
}

/* ============================================================
 * 3. صفوف القائمة
 * display:block مقصود - انظر ملاحظة 1 أعلاه.
 * ============================================================ */

.sidebar-menu > li {
    position: relative;
    border-left: 0 !important;
    border-bottom: 0 !important;
    margin: 0 var(--sb-gutter) 3px var(--sb-gutter) !important;
}

.sidebar-menu > li > a,
.skin-black-light .sidebar-menu > li > a,
.skin-blue-light .sidebar-menu > li > a {
    display: block !important;
    position: relative;
    color: var(--sb-text) !important;
    background: transparent !important;
    background-color: transparent !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    /* الحشو الأيمن يحجز مكان السهم المطلق فلا يركب على النص */
    padding: 11px var(--sb-arrow-space) 11px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .18s ease, color .18s ease;
}

/* المرور.
   vendor.css يعرّف لكل skin قاعدة تجمع hover والنشط معاً، مثل:
     .skin-blue-light .sidebar-menu>li.active>a,
     .skin-blue-light .sidebar-menu>li:hover>a { color:#000; background:#f4f4f5 }
   وهي أعلى تحديداً من `.sidebar-menu > li:hover > a` المجرّدة، فتُنتج
   صفاً أبيض بنص أسود عند المرور وتلغي حالة النشاط الزرقاء معاً.
   لذلك نكرّر التحديد لكل skin بدل الاعتماد على القاعدة المجرّدة. */
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.skin-black-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li:hover > a,
.skin-purple-light .sidebar-menu > li:hover > a,
.skin-red-light .sidebar-menu > li:hover > a,
.skin-yellow-light .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li:hover > a,
.skin-green .sidebar-menu > li:hover > a,
.skin-purple .sidebar-menu > li:hover > a,
.skin-red .sidebar-menu > li:hover > a,
.skin-yellow .sidebar-menu > li:hover > a {
    background-color: var(--sb-bg-alt) !important;
    background: var(--sb-bg-alt) !important;
    color: var(--sb-text-active) !important;
}

/* دفاع ضد الأنماط المضمّنة:
   كانت وحدات (Assets, Partners, Repair, Superadmin, ...) تحقن
   style="background-color:#fff !important" على الرابط مباشرة، فتظهر
   صفوف بيضاء بنص فاتح غير مقروء. أُزيلت من مصادر الوحدات، وهذه القاعدة
   تمنع تكرار المشكلة إن أعادت وحدة أخرى حقن اللون لاحقاً.
   الخلفية المضمّنة لا يمكن تجاوزها بالـ CSS، لكن يمكن تحييد أثرها
   بجعل النص داكناً عند وجود خلفية فاتحة - لذا نُجبر اللون على الوراثة. */
.sidebar-menu > li > a[style*="background"],
.sidebar-menu > li > a[style*="#fff"],
.sidebar-menu > li > a[style*="#FFF"],
.sidebar-menu > li > a[style*="fdfdfd"] {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
}

/* الصف النشط - بطاقة زرقاء مستديرة */
.sidebar-menu > li.active > a,
.sidebar-menu > li.active:hover > a,
.sidebar-menu > li.menu-open > a,
.skin-black-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li.active > a,
.skin-purple .sidebar-menu > li.active > a,
.skin-red .sidebar-menu > li.active > a,
.skin-yellow .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.menu-open > a,
.skin-blue-light .sidebar-menu > li.menu-open > a,
.skin-blue .sidebar-menu > li.menu-open > a,
.skin-black .sidebar-menu > li.menu-open > a,
/* الصف النشط أثناء المرور: قاعدة الـ skin للمرور (`.skin-X .sidebar-menu>li:hover>a`)
   تحمل نفس تحديد قاعدة النشاط، فلولا تأهيل النشاط بالـ skin أيضاً لعاد
   الصف أبيض بمجرد مرور المؤشر فوقه - وهو ما كان يُخفي حالة النشاط. */
.skin-black-light .sidebar-menu > li.active:hover > a,
.skin-blue-light .sidebar-menu > li.active:hover > a,
.skin-green-light .sidebar-menu > li.active:hover > a,
.skin-purple-light .sidebar-menu > li.active:hover > a,
.skin-red-light .sidebar-menu > li.active:hover > a,
.skin-yellow-light .sidebar-menu > li.active:hover > a,
.skin-black .sidebar-menu > li.active:hover > a,
.skin-blue .sidebar-menu > li.active:hover > a,
.skin-green .sidebar-menu > li.active:hover > a,
.skin-purple .sidebar-menu > li.active:hover > a,
.skin-red .sidebar-menu > li.active:hover > a,
.skin-yellow .sidebar-menu > li.active:hover > a,
.skin-blue-light .sidebar-menu > li.menu-open:hover > a,
.skin-black-light .sidebar-menu > li.menu-open:hover > a {
    background-color: var(--sb-active) !important;
    background: var(--sb-active) !important;
    color: var(--sb-text-active) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(29, 91, 214, .32);
}

.sidebar-menu > li.active {
    border-left-color: transparent !important;
}

/* النص داخل الرابط */
.sidebar-menu > li > a > span:not(.pull-right-container) {
    display: inline !important;
    vertical-align: middle;
    color: inherit !important;
}

/* ============================================================
 * 4. الأيقونات
 * inline-block + عرض ثابت = عمود محاذاة واحد لكل الصفوف.
 * التحديد يكرّر :first-child لتجاوز sidebar-cairo-fix.css
 * الذي يثبّت العرض على 20px بمحدّد أعلى.
 * ============================================================ */

.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .fab,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > i:first-child,
.sidebar-menu > li > a > .fa:first-child,
.sidebar-menu > li > a > .fas:first-child {
    display: inline-block !important;
    width: 24px !important;
    min-width: 24px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 0 10px 0 0 !important;
    color: var(--sb-text-dim) !important;
    transition: color .18s ease;
}

.sidebar-menu > li:hover > a > i,
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li:hover > a > .fas {
    color: var(--sb-text-active) !important;
}

.sidebar-menu > li.active > a > i,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas,
.sidebar-menu > li.active > a > .far,
.sidebar-menu > li.active > a > .glyphicon,
.sidebar-menu > li.menu-open > a > i,
.sidebar-menu > li.menu-open > a > .fa {
    color: var(--sb-text-active) !important;
}

/* ============================================================
 * 5. سهم القائمة المنسدلة
 * vendor.css يحوي قاعدة مضمّنة تُزيح السهم بـ left:180px/top:-22px
 * مثبّتة على العرض القديم. نُعيده إلى تموضع مطلق صحيح.
 * ============================================================ */

.sidebar-menu li > a > .pull-right-container,
.sidebar-menu > li > a > .pull-right-container {
    position: absolute !important;
    right: 9px !important;
    left: auto !important;
    top: 50% !important;
    margin-top: -7px !important;
    width: auto !important;
    float: none !important;
    display: block !important;
    line-height: 14px;
    z-index: 1;
}

/* السهم يحمل class="pull-right" من الـ presenter، و vendor.css يعرّف
   .pull-right بـ float:right + padding-right:15px + border-right:5px solid #eee.
   داخل حاوية مطلقة يدفع الـ float السهم لسطر جديد فيهبط أسفل يسار الصف،
   والحدّ الرمادي يظهر كخط دخيل. نُبطل الثلاثة داخل الشريط فقط. */
.sidebar-menu .pull-right-container > .pull-right,
.sidebar-menu > li > a > .pull-right-container > .fa-angle-left,
.sidebar-menu .treeview > a > .pull-right-container > .fa-angle-left,
.sidebar-menu > li > a > .fa-angle-left {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    font-size: 13px !important;
    line-height: 14px !important;
    text-align: center !important;
    color: var(--sb-text-dim) !important;
    transition: transform .2s ease, color .18s ease;
}

/* app.css يلوّن سهم الصف النشط أحمر (#f7223c) - يتنافر مع البطاقة الزرقاء. */
.sidebar-menu > li:hover > a > .pull-right-container > .fa-angle-left,
.sidebar-menu > li.active > a > .pull-right-container > .fa-angle-left,
.sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left,
.sidebar-menu > li.active > a > .pull-right-container > .fa-angle-left:hover {
    color: var(--sb-text-active) !important;
}

/* دوران السهم عند الفتح فقط - لا عند مجرد كونه نشطاً */
.sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left {
    transform: rotate(-90deg);
}

/* ============================================================
 * 6. القوائم الفرعية
 * ============================================================ */

/* vendor.css يعرّف لكل skin: `.skin-X-light .sidebar-menu>li>.treeview-menu
   {background:#f4f4f5}` وهو أعلى تحديداً من `.treeview-menu` المجرّدة،
   فتظهر القائمة الفرعية بيضاء بنص باهت غير مقروء. نكرّر التحديد لكل skin. */
.treeview-menu,
.sidebar-menu .treeview-menu,
.sidebar-menu > li > .treeview-menu,
.skin-black-light .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-red-light .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu,
.skin-black .sidebar-menu > li > .treeview-menu,
.skin-blue .sidebar-menu > li > .treeview-menu,
.skin-green .sidebar-menu > li > .treeview-menu,
.skin-purple .sidebar-menu > li > .treeview-menu,
.skin-red .sidebar-menu > li > .treeview-menu,
.skin-yellow .sidebar-menu > li > .treeview-menu {
    background-color: var(--sb-submenu-bg) !important;
    background: var(--sb-submenu-bg) !important;
    border-radius: 8px !important;
    margin: 3px 0 5px 0 !important;
    padding: 5px 0 !important;
    overflow: hidden;
}

.treeview-menu > li,
.sidebar-menu .treeview-menu > li,
.sidebar-menu > li > .treeview-menu > li {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    list-style: none !important;
}

/* عناصر القائمة الفرعية قد ترث خلفية فاتحة من قواعد الـ skin أو من
   أنماط مضمّنة، فتظهر ككتلة بيضاء فارغة أعلى القائمة. */
.sidebar-menu .treeview-menu > li > a[style*="background"],
.sidebar-menu .treeview-menu > li[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* vendor.css يضبط `.treeview-menu>li>a{color:#777}` وهو رمادي داكن
   مصمَّم لخلفية فاتحة، فيصبح باهتاً على الكحلي. نكرّر لكل skin. */
.treeview-menu > li > a,
.sidebar-menu .treeview-menu > li > a,
.sidebar-menu > li > .treeview-menu > li > a,
.skin-black-light .sidebar-menu > li > .treeview-menu > li > a,
.skin-blue-light .sidebar-menu > li > .treeview-menu > li > a,
.skin-green-light .sidebar-menu > li > .treeview-menu > li > a,
.skin-purple-light .sidebar-menu > li > .treeview-menu > li > a,
.skin-red-light .sidebar-menu > li > .treeview-menu > li > a,
.skin-yellow-light .sidebar-menu > li > .treeview-menu > li > a {
    display: block !important;
    color: var(--sb-text-dim) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    padding: 8px 14px 8px 16px !important;
    margin: 0 6px !important;
    border-radius: 6px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease, color .15s ease;
}

/* app.css يحقن سهماً نصياً `content:"\2192 "` قبل كل رابط فرعي ويُخفي
   الأيقونة الحقيقية بـ `.treeview-menu i{display:none!important}`.
   النتيجة سهم مكرّر بلا معنى ومحاذاة مكسورة في RTL. نُلغي السهم
   ونُعيد الأيقونات الأصلية. */
.sidebar-menu .treeview-menu > li > a::before,
.treeview-menu a::before {
    content: none !important;
    display: none !important;
}

.sidebar-menu .treeview-menu > li > a > i,
.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .fas,
.sidebar-menu .treeview-menu > li > a > .far,
.sidebar-menu .treeview-menu i {
    display: inline-block !important;
}

.treeview-menu > li > a:hover,
.treeview-menu > li:hover > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover,
.skin-black-light .sidebar-menu .treeview-menu > li > a:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: var(--sb-text-active) !important;
}

/* العنصر الفرعي النشط: شريط جانبي رفيع بدل تعبئة كاملة، فيبقى
   التمييز واضحاً دون منافسة بطاقة الأب الزرقاء. */
.treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-black-light .sidebar-menu .treeview-menu > li.active > a,
.skin-green-light .sidebar-menu .treeview-menu > li.active > a,
.skin-red-light .sidebar-menu .treeview-menu > li.active > a,
.skin-purple-light .sidebar-menu .treeview-menu > li.active > a,
.skin-yellow-light .sidebar-menu .treeview-menu > li.active > a {
    background-color: rgba(29, 91, 214, .32) !important;
    color: var(--sb-text-active) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--sb-active);
}

body.rtl .treeview-menu > li.active > a,
html[dir="rtl"] .treeview-menu > li.active > a {
    box-shadow: inset -3px 0 0 var(--sb-active);
}

.treeview-menu > li > a > i,
.treeview-menu > li > a > .fa,
.treeview-menu > li > a > .fas,
.treeview-menu > li > a > .far {
    display: inline-block !important;
    width: 18px !important;
    min-width: 18px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 0 8px 0 0 !important;
    color: inherit !important;
}

/* ============================================================
 * 7. الترويسات والفواصل وشريط التمرير
 * ============================================================ */

.sidebar-menu > li.header,
.skin-black-light .sidebar-menu > li.header {
    background: transparent !important;
    color: var(--sb-text-dim) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 16px 14px 7px 14px !important;
    margin: 0 var(--sb-gutter) !important;
    opacity: .7;
}

.sidebar-menu > li.divider {
    height: 1px !important;
    background: var(--sb-divider) !important;
    margin: 7px var(--sb-gutter) !important;
}

.main-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.main-sidebar .sidebar::-webkit-scrollbar {
    width: 6px;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
    border-radius: 3px;
}

.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
 * 8. RTL
 * الاتجاه معكوس: الأيقونة والسهم ينتقلان للجهة المقابلة.
 * ============================================================ */

body.rtl .sidebar-menu > li > a,
html[dir="rtl"] .sidebar-menu > li > a {
    padding: 11px 14px 11px var(--sb-arrow-space) !important;
    text-align: right;
}

body.rtl .sidebar-menu > li > a > i,
body.rtl .sidebar-menu > li > a > .fa,
body.rtl .sidebar-menu > li > a > .fas,
body.rtl .sidebar-menu > li > a > i:first-child,
html[dir="rtl"] .sidebar-menu > li > a > i,
html[dir="rtl"] .sidebar-menu > li > a > .fa,
html[dir="rtl"] .sidebar-menu > li > a > .fas,
html[dir="rtl"] .sidebar-menu > li > a > i:first-child {
    margin: 0 0 0 10px !important;
}

body.rtl .sidebar-menu li > a > .pull-right-container,
html[dir="rtl"] .sidebar-menu li > a > .pull-right-container {
    right: auto !important;
    left: 9px !important;
}

body.rtl .sidebar-menu > li > a > .pull-right-container > .fa-angle-left,
html[dir="rtl"] .sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
    transform: rotate(180deg);
}

body.rtl .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left,
html[dir="rtl"] .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left {
    transform: rotate(90deg);
}

/* app.css يفرض `.treeview-menu a{padding-left:25px!important}` وهو
   حشو LTR يترك فراغاً على الجهة الخطأ في الواجهة العربية. */
body.rtl .treeview-menu > li > a,
body.rtl .sidebar-menu .treeview-menu > li > a,
html[dir="rtl"] .treeview-menu > li > a,
html[dir="rtl"] .sidebar-menu .treeview-menu > li > a {
    padding: 8px 16px 8px 14px !important;
    padding-left: 14px !important;
    padding-right: 16px !important;
    text-align: right;
}

body.rtl .treeview-menu > li > a > i,
html[dir="rtl"] .treeview-menu > li > a > i {
    margin: 0 0 0 8px !important;
}

/* ============================================================
 * 9. الوضع المطوي (أيقونات فقط)
 * ============================================================ */

@media (min-width: 768px) {
    .sidebar-collapse .sidebar-menu > li {
        margin: 0 8px 6px 8px !important;
    }

    /* الحشو الأفقي صفر مع عرض 100% للأيقونة = توسيط حقيقي داخل الرصيف.
       الحشو الرأسي هو ما يمنح الصف ارتفاعه ومساحة تنفّسه. */
    .sidebar-collapse .sidebar-menu > li > a,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
        padding: 15px 0 !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    .sidebar-collapse .sidebar-menu > li > a > i,
    .sidebar-collapse .sidebar-menu > li > a > .fa,
    .sidebar-collapse .sidebar-menu > li > a > .fas,
    .sidebar-collapse .sidebar-menu > li > a > .far,
    .sidebar-collapse .sidebar-menu > li > a > .fab,
    .sidebar-collapse .sidebar-menu > li > a > i:first-child,
    .sidebar-collapse .sidebar-menu > li > a > .fa:first-child,
    .sidebar-collapse .sidebar-menu > li > a > .fas:first-child,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i {
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 21px !important;
        line-height: 24px !important;
    }

    /* السهم لا معنى له بلا نص */
    .sidebar-collapse .sidebar-menu > li > a > .pull-right-container {
        display: none !important;
    }

    /* القائمة المنبثقة عند المرور مثبّتة في vendor على left:50px
       (عرض الرصيف القديم). مع 72px كانت ستركب فوق الأيقونات. */
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
        left: var(--sb-width-mini) !important;
        width: 210px !important;
    }

    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span {
        background-color: var(--sb-active) !important;
        color: var(--sb-text-active) !important;
        margin-left: 0 !important;
        padding: 15px 14px !important;
        border-radius: 0 8px 8px 0 !important;
    }

    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        border-radius: 0 8px 8px 0 !important;
        margin: 0 !important;
        padding: 5px 0 !important;
    }

    /* RTL: الرصيف على اليمين فتنبثق القائمة يساراً. */
    body.rtl .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
    body.rtl .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
    html[dir="rtl"] .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
    html[dir="rtl"] .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
        left: auto !important;
        right: var(--sb-width-mini) !important;
    }

    body.rtl .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span,
    html[dir="rtl"] .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span {
        border-radius: 8px 0 0 8px !important;
        margin-right: 0 !important;
        text-align: right;
    }

    body.rtl .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
    html[dir="rtl"] .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        border-radius: 8px 0 0 8px !important;
    }
}

/* ============================================================
 * 10. الموبايل
 * الشريط ينزلق فوق المحتوى فلا هوامش على المحتوى.
 * ============================================================ */

@media (max-width: 767px) {
    .main-sidebar,
    .left-side {
        width: var(--sb-width) !important;
    }

    .content-wrapper,
    .main-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sidebar-open .content-wrapper,
    .sidebar-open .main-footer {
        transform: translate(var(--sb-width), 0) !important;
    }

    body.rtl .sidebar-open .content-wrapper,
    html[dir="rtl"] .sidebar-open .content-wrapper {
        transform: translate(calc(-1 * var(--sb-width)), 0) !important;
    }

    .sidebar-menu > li > a {
        padding: 13px var(--sb-arrow-space) 13px 14px !important;
        font-size: 15px !important;
    }

    body.rtl .sidebar-menu > li > a,
    html[dir="rtl"] .sidebar-menu > li > a {
        padding: 13px 14px 13px var(--sb-arrow-space) !important;
    }
}


/* ============================================================
 * 11. منع التمرير الأفقي
 * الشريط الجانبي position:fixed خارج التدفّق، لكن هوامش المحتوى
 * (يمين من هذا الملف + يسار موروث من vendor.css) كانت تُمدّد المستند
 * أعرض من نافذة العرض، فيظهر شريط تمرير أفقي ويبدو التخطيط منزاحاً
 * رغم صحّة مواضع العناصر.
 * ============================================================ */
html,
body,
body > .wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.content-wrapper {
    overflow-x: hidden;
}