/* ============================================================
 * header-theme.css
 * ------------------------------------------------------------
 * إعادة تصميم شريط الترويسة ليطابق الشريط الجانبي.
 *
 * المشكلة السابقة:
 * - الشريط أزرق فاقع (#2b80ec) من كتلة <style> مضمّنة في header.blade.php.
 * - كل الأزرار btn-success أخضر مشبع بلا تمييز بين إجراء وآخر.
 * - التباعد يُدار بـ `pull-left m-8 mt-10` على كل زر، وهي حيل تموضع
 *   قديمة تُنتج محاذاة رأسية غير متّسقة عند اختلاف ارتفاعات الأزرار.
 *
 * المنهج هنا: flex على الحاوية بدل الـ floats، ولون واحد هادئ للأزرار
 * مع إبراز إجراء واحد أساسي (نقطة البيع). لا تعديل على الـ blade، فتلتقط
 * أزرار الوحدات (Repair, Essentials) نفس التنسيق تلقائياً.
 * ============================================================ */

:root {
    --hd-bg:          #0d2b52;  /* نفس كحلي الشريط الجانبي */
    --hd-btn:         rgba(255, 255, 255, .10);
    --hd-btn-hover:   rgba(255, 255, 255, .18);
    --hd-btn-border:  rgba(255, 255, 255, .14);
    --hd-primary:     #1d5bd6;  /* الإجراء الأساسي */
    --hd-primary-hi:  #2a6ae8;
    --hd-danger:      #d64545;
    --hd-text:        #dce6f5;
    --hd-text-active: #ffffff;
}

/* ============================================================
 * 1. الشريط نفسه
 * ============================================================ */

.main-header .navbar,
.skin-black-light .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-green-light .main-header .navbar,
.skin-purple-light .main-header .navbar,
.skin-red-light .main-header .navbar,
.skin-yellow-light .main-header .navbar,
.skin-black .main-header .navbar,
.skin-blue .main-header .navbar,
.skin-green .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-red .main-header .navbar,
.skin-yellow .main-header .navbar {
    background-color: var(--hd-bg) !important;
    background: var(--hd-bg) !important;
    border: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    min-height: 50px;
}

/* الترويسة والشعار والشريط بارتفاع واحد (50px) وبلا هوامش، فلا يبقى
   شريط أبيض في أعلى الشاشة من فرق ارتفاع أو هامش موروث. */
.main-header {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    max-height: none !important;
}

.main-header .navbar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.main-header .logo {
    height: 50px !important;
    line-height: 50px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}

/* الغلاف نفسه يُطلى بالكحلي: أي فرق بكسل بين الشعار والشريط كان
   يكشف خلفية الصفحة البيضاء تحتهما. */
.wrapper > .main-header,
body > .wrapper > .main-header {
    background-color: var(--hd-bg) !important;
}

/* الحاوية العليا قد ترث هامشاً من قواعد عامة (.content{margin:.5em}) */
body.skin-blue-light .wrapper,
body.skin-black-light .wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* زر طيّ الشريط الجانبي.
   vendor.css يفرض عليه `height:62px` بينما الشريط 50px، فيتدلّى الزر
   خارج الترويسة وتقع منطقة الضغط جزئياً خارجها. نُوحّد الارتفاع،
   و position:relative + z-index يضمنان بقاءه فوق أي صندوق مجاور. */
.main-header .navbar .sidebar-toggle,
.skin-blue-light .main-header .navbar .sidebar-toggle,
.skin-black-light .main-header .navbar .sidebar-toggle {
    position: relative !important;
    z-index: 3 !important;
    /* زر مضغوط بارتفاعه الخاص ومتوسّط رأسياً، بدل كتلة بارتفاع الشريط
       كامل كانت تبدو كمربّع رمادي منفصل ملتصق بالشعار. */
    height: 34px !important;
    min-width: 38px;
    margin: 8px 6px !important;
    border-radius: 8px !important;
    align-self: center !important;
    float: none !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--hd-text) !important;
    padding: 0 11px !important;
    font-size: 16px;
    line-height: 1 !important;
    transition: background-color .15s ease, color .15s ease;
}

.main-header .navbar .sidebar-toggle:hover,
.skin-blue-light .main-header .navbar .sidebar-toggle:hover,
.skin-black-light .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--hd-btn-hover) !important;
    color: var(--hd-text-active) !important;
}

/* ============================================================
 * 2. مجموعة الإجراءات - flex بدل الـ floats
 * الـ blade يضع على كل زر `pull-left m-8 mt-10`. نُبطل الطفو
 * والهوامش اليدوية ونترك flex+gap يتولّى المحاذاة والتباعد،
 * فتستوي الأزرار رأسياً مهما اختلفت ارتفاعاتها.
 * ============================================================ */

@media (min-width: 768px) {

/* ══════════════════════════════════════════════════════════════
   تخطيط الترويسة — كتلتان مستقلّتان تماماً

   المشكلة سابقاً: قاعدة أساسية للإنجليزية ثم استثناءات RTL تُعدّلها،
   فكل تعديل في جهة يكسر الأخرى (انعكاس مزدوج، ترتيب معكوس، عناصر
   تهرب إلى طرف الشاشة).

   الحل: لا قواعد مشتركة للاتجاه. كل لغة تُعرّف تخطيطها كاملاً من
   الصفر بمحدّد جذر خاص بها، فلا تتسرّب قاعدة من جهة إلى أخرى.

   الترتيب المنطقي واحد في اللغتين (يُقرأ من جهة البداية):
       الشعار ← البرغر ← المؤشّر ← الأزرار ← التاريخ ← الجرس/المستخدم
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   LTR (الإنجليزية): الشعار يسار فوق الشريط الجانبي الأيسر
   ───────────────────────────────────────────── */
html:not([dir="rtl"]) .main-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

html:not([dir="rtl"]) .main-header > .logo {
    order: 0;
    flex: 0 0 auto !important;
    float: none !important;
}

html:not([dir="rtl"]) .main-header > .navbar {
    order: 1;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
}

html:not([dir="rtl"]) .main-header > .navbar > .sidebar-toggle {
    order: 0;
    flex: 0 0 auto !important;
    float: none !important;
}

html:not([dir="rtl"]) .main-header > .navbar > i.fa-info-circle {
    order: 1;
    flex: 0 0 auto !important;
    float: none !important;
    align-self: center !important;
    margin: 0 8px !important;
    margin-top: 0 !important;
}

html:not([dir="rtl"]) .main-header > .navbar > .navbar-custom-menu {
    order: 2;
    position: static !important;
    float: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px;
    padding: 0 12px 0 8px;
    top: auto !important; right: auto !important; left: auto !important;
}

/* الجرس والمستخدم في الطرف البعيد (يمين) */
html:not([dir="rtl"]) .main-header .navbar-custom-menu > .nav.navbar-nav {
    order: 9;
    flex-direction: row !important;
    margin: 0 0 0 4px !important;
}

/* ─────────────────────────────────────────────
   RTL (العربية): مرآة كاملة — الشعار يمين فوق الشريط الجانبي الأيمن
   ───────────────────────────────────────────── */
/* مهم: مع dir="rtl" يقلب المتصفح المحور الأفقي أصلاً، فـ `row` تسير
   من اليمين إلى اليسار و`row-reverse` تسير من اليسار إلى اليمين.
   لذلك `row` هي الصحيحة هنا: العنصر الأول في الـ DOM (الشعار) يقع
   يميناً فوق الشريط الجانبي. استخدام row-reverse كان قلباً مزدوجاً
   يُرجع التخطيط إلى شكله الإنجليزي. */
html[dir="rtl"] .main-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

html[dir="rtl"] .main-header > .logo {
    order: 0;
    flex: 0 0 auto !important;
    float: none !important;
}

html[dir="rtl"] .main-header > .navbar {
    order: 1;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
}

html[dir="rtl"] .main-header > .navbar > .sidebar-toggle {
    order: 0;
    flex: 0 0 auto !important;
    float: none !important;
}

html[dir="rtl"] .main-header > .navbar > i.fa-info-circle {
    order: 1;
    flex: 0 0 auto !important;
    float: none !important;
    align-self: center !important;
    margin: 0 8px !important;
    margin-top: 0 !important;
}

html[dir="rtl"] .main-header > .navbar > .navbar-custom-menu {
    order: 2;
    position: static !important;
    float: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* flex-END: مع dir=rtl يقلب المتصفح المحور، فـ row تسير يمين←يسار
       و flex-end هي الحافة اليسرى. لكن المجموعة تبدأ ملاصقة لزر الطيّ
       على اليمين وتمتدّ يساراً، وهذا ما يحققه flex-end هنا تماماً كما
       يفعل في الإنجليزية بالاتجاه المعاكس.

       (تعليق سابق عن flex-start لم يعد ينطبق بعد إزالة القلب المزدوج)

       في حاوية row-reverse يسير المحور من اليمين إلى اليسار، فتكون
       البداية (start) هي الحافة اليمنى والنهاية (end) هي اليسرى.
       استخدام flex-end هنا كان يدفع الأزرار إلى أقصى اليسار بعيداً عن
       زر الطيّ ويترك فراغاً يمينه.

       مرآة `row + flex-end` في الإنجليزية هي `row-reverse + flex-start`
       وليست نفس القيمة. */
    justify-content: flex-end !important;
    gap: 7px;
    padding: 0 8px 0 12px;
    top: auto !important; right: auto !important; left: auto !important;
}

/* الجرس والمستخدم في الطرف البعيد (يسار) */
html[dir="rtl"] .main-header .navbar-custom-menu > .nav.navbar-nav {
    order: 9;
    flex-direction: row !important;
    margin: 0 4px 0 0 !important;
}

/* ── قواعد مشتركة لا علاقة لها بالاتجاه ── */

    .main-header .navbar-custom-menu > .btn,
    .main-header .navbar-custom-menu > a.btn,
    .main-header .navbar-custom-menu > button.btn,
    .main-header .navbar-custom-menu > .btn-group,
    .main-header .navbar-custom-menu > div.m-8 {
        float: none !important;
        margin: 0 !important;
    }

    .main-header .navbar-custom-menu > .nav.navbar-nav {
        float: none !important;
        display: flex !important;
        align-items: center;
        margin: 0 0 0 4px !important;
    }
}


/* ============================================================
 * 3. الأزرار
 * لون محايد شفّاف للجميع، فيبرز الإجراء الأساسي وحده بالأزرق
 * والإجراء الخطر بالأحمر. الأخضر المشبع على كل زر كان يُلغي
 * أي تدرّج بصري بين الإجراءات.
 * ============================================================ */

.main-header .navbar-custom-menu .btn,
.main-header .navbar .btn-success,
.main-header .navbar .btn-flat {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 12px !important;
    background-color: var(--hd-btn) !important;
    background-image: none !important;
    border: 1px solid var(--hd-btn-border) !important;
    border-radius: 8px !important;
    color: var(--hd-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .12s ease;
}

.main-header .navbar-custom-menu .btn:hover,
.main-header .navbar-custom-menu .btn:focus,
.main-header .navbar .btn-success:hover,
.main-header .navbar .btn-success:focus {
    background-color: var(--hd-btn-hover) !important;
    border-color: rgba(255, 255, 255, .26) !important;
    color: var(--hd-text-active) !important;
}

.main-header .navbar-custom-menu .btn:active {
    transform: translateY(1px);
}

.main-header .navbar-custom-menu .btn > strong {
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-header .navbar-custom-menu .btn i,
.main-header .navbar-custom-menu .btn .fa,
.main-header .navbar-custom-menu .btn .fas {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* fa-lg داخل شريط مضغوط يكبر أكثر من اللازم */
.main-header .navbar-custom-menu .btn .fa-lg {
    font-size: 15px !important;
    line-height: 1 !important;
    vertical-align: middle;
}

/* الإجراء الأساسي: نقطة البيع - الأبرز في الشريط */
.main-header .navbar-custom-menu a.btn[href*="pos"],
.main-header .navbar-custom-menu a.btn[title*="POS"],
.main-header .navbar-custom-menu a.btn[title*="نقطة"] {
    background-color: var(--hd-primary) !important;
    border-color: var(--hd-primary) !important;
    color: var(--hd-text-active) !important;
}

.main-header .navbar-custom-menu a.btn[href*="pos"]:hover,
.main-header .navbar-custom-menu a.btn[title*="POS"]:hover,
.main-header .navbar-custom-menu a.btn[title*="نقطة"]:hover {
    background-color: var(--hd-primary-hi) !important;
    border-color: var(--hd-primary-hi) !important;
}

/* الإجراء الخطر: إغلاق الصندوق */
.main-header .navbar-custom-menu .btn-danger,
.main-header .navbar .btn-danger {
    background-color: rgba(214, 69, 69, .18) !important;
    border-color: rgba(214, 69, 69, .45) !important;
    color: #ffb3b3 !important;
}

.main-header .navbar-custom-menu .btn-danger:hover {
    background-color: var(--hd-danger) !important;
    border-color: var(--hd-danger) !important;
    color: #fff !important;
}

/* ============================================================
 * 4. التاريخ
 * ============================================================ */

.main-header .navbar-custom-menu > div.m-8,
.main-header .navbar-custom-menu > div.pull-left {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--hd-text) !important;
    font-size: 13px;
    white-space: nowrap;
}

.main-header .navbar-custom-menu > div.m-8 strong {
    font-weight: 600 !important;
    color: var(--hd-text) !important;
}

/* ============================================================
 * 5. الإشعارات وقائمة المستخدم
 * ============================================================ */

.main-header .navbar .nav > li > a,
.skin-blue-light .main-header .navbar .nav > li > a,
.skin-black-light .main-header .navbar .nav > li > a {
    color: var(--hd-text) !important;
    padding: 15px 12px !important;
    background: transparent !important;
    transition: background-color .15s ease, color .15s ease;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > .open > a,
.main-header .navbar .nav > .open > a:hover,
.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .nav > .open > a {
    background-color: var(--hd-btn-hover) !important;
    color: var(--hd-text-active) !important;
}

/* شارة عدد الإشعارات */
.main-header .navbar .nav > li > a > .label {
    top: 8px !important;
    right: 4px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    font-weight: 700;
    border-radius: 9px !important;
    background-color: var(--hd-danger) !important;
    border: 2px solid var(--hd-bg);
}

/* ---------- زر المستخدم في الشريط ----------
   يُعامَل كعنصر واحد متماسك: قرص + اسم، بمحاذاة flex فلا يعتمد على
   هوامش يدوية تنكسر عند انعكاس الاتجاه. */
.main-header .navbar .nav > .user-menu > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    margin: 8px 4px !important;
    border-radius: 8px !important;
    background-color: var(--hd-btn) !important;
    border: 1px solid var(--hd-btn-border) !important;
    line-height: 1.2 !important;
}

.main-header .navbar .nav > .user-menu > a:hover,
.main-header .navbar .nav > .user-menu.open > a {
    background-color: var(--hd-btn-hover) !important;
    border-color: rgba(255, 255, 255, .26) !important;
}

.main-header .navbar .user-menu .user-image {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .25);
    flex-shrink: 0;
}

/* بديل الصورة: أحرف الاسم داخل قرص */
.main-header .navbar .user-menu .user-initials {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--hd-primary);
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    border: 0 !important;
}

.main-header .navbar .user-menu > a > span:not(.user-image) {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
 * 6. القوائم المنسدلة
 * ============================================================ */

.main-header .navbar-custom-menu .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}

.main-header .navbar-custom-menu .dropdown-menu > li > a {
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.main-header .navbar-custom-menu .dropdown-menu > li > a:hover {
    background-color: #f0f4fa !important;
    color: var(--hd-primary) !important;
}

/* ---------- بطاقة المستخدم ----------
   كانت الترويسة كتلة كحلية صمّاء بارتفاع كبير بلا معلومة تُذكر،
   والأزرار بيضاء على خلفية بيضاء (modern-header-buttons.css يفرض
   `.btn-default{color:white!important}`) فتكاد تختفي. */

.main-header .navbar .user-menu .dropdown-menu {
    width: 250px !important;
    padding: 0 !important;
    overflow: hidden;
}

.main-header .navbar .user-menu .dropdown-menu > .user-header {
    background-color: #fff !important;
    background-image: none !important;
    height: auto !important;
    padding: 16px 16px 12px 16px !important;
    text-align: center;
    border-bottom: 1px solid #eceff4;
}

.main-header .navbar .user-menu .dropdown-menu > .user-header > p {
    color: #1f2d3d !important;
    margin: 10px 0 0 0 !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

.main-header .navbar .user-menu .dropdown-menu > .user-header > img,
.main-header .navbar .user-menu .dropdown-menu > .user-header > .user-header-initials {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e4e9f0;
    box-shadow: none !important;
}

.main-header .navbar .user-menu .dropdown-menu > .user-header > .user-header-initials {
    background: var(--hd-primary);
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-color: #dbe4f3;
}

/* الدور والبريد: سطران ثانويان يعطيان القائمة معنى بدل اسم مجرّد */
.main-header .navbar .user-menu .dropdown-menu > .user-header > p > small {
    display: block;
    font-weight: 500;
    line-height: 1.4;
}

.main-header .navbar .user-menu .dropdown-menu > .user-header .user-role {
    margin-top: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--hd-primary) !important;
    background: #eaf1fd;
    border-radius: 20px;
    padding: 2px 10px;
    display: inline-block !important;
}

.main-header .navbar .user-menu .dropdown-menu > .user-header .user-email {
    margin-top: 5px !important;
    font-size: 11.5px !important;
    color: #7a8899 !important;
    word-break: break-all;
}

.main-header .navbar .user-menu .dropdown-menu > .user-footer {
    background-color: #fff !important;
    padding: 10px !important;
    display: flex;
    gap: 8px;
}

/* .pull-left/.pull-right داخل الفوتر تُنتج عمودين متباعدين بلا محاذاة.
   flex يجعلهما نصفين متساويين. */
.main-header .navbar .user-menu .dropdown-menu > .user-footer > .pull-left,
.main-header .navbar .user-menu .dropdown-menu > .user-footer > .pull-right {
    float: none !important;
    flex: 1 1 0;
    margin: 0 !important;
}

.main-header .navbar .user-menu .dropdown-menu > .user-footer .btn-default {
    display: block;
    width: 100%;
    background: #f2f5fa !important;
    background-image: none !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 8px !important;
    color: #3d4d63 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 10px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease !important;
}

.main-header .navbar .user-menu .dropdown-menu > .user-footer .btn-default:hover,
.main-header .navbar .user-menu .dropdown-menu > .user-footer .btn-default:focus {
    background: #e7edf7 !important;
    background-image: none !important;
    border-color: #cbd6e5 !important;
    color: var(--hd-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* تسجيل الخروج إجراء مُغادِر - يُميَّز بالأحمر عند المرور فقط
   ليبقى الوزن البصري على "الملف الشخصي". */
.main-header .navbar .user-menu .dropdown-menu > .user-footer > .pull-right .btn-default:hover,
.main-header .navbar .user-menu .dropdown-menu > .user-footer > .pull-right .btn-default:focus {
    background: #fdeaea !important;
    border-color: #f3c9c9 !important;
    color: #c0392b !important;
}

/* ============================================================
 * 7. RTL
 * الواجهة العربية: زر الطيّ يمين، ومجموعة الإجراءات يسار، والقوائم
 * المنسدلة تُحاذى من اليسار وإلا فاضت خارج حافة الشاشة.
 * ============================================================ */


/* القائمة المنسدلة تُفتح لليمين افتراضياً فتخرج عن الشاشة في RTL. */
body.rtl .main-header .navbar-custom-menu .dropdown-menu,
html[dir="rtl"] .main-header .navbar-custom-menu .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    text-align: right;
}

body.rtl .main-header .navbar .user-menu .dropdown-menu,
html[dir="rtl"] .main-header .navbar .user-menu .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

body.rtl .main-header .navbar-custom-menu .dropdown-menu > li > a,
html[dir="rtl"] .main-header .navbar-custom-menu .dropdown-menu > li > a {
    flex-direction: row-reverse;
    text-align: right;
}

/* الفوتر: الملف الشخصي أولاً بصرياً (يميناً) والخروج بعده. */
body.rtl .main-header .navbar .user-menu .dropdown-menu > .user-footer,
html[dir="rtl"] .main-header .navbar .user-menu .dropdown-menu > .user-footer {
    flex-direction: row-reverse;
}

/* شارة الإشعارات تنتقل للجهة المقابلة */
body.rtl .main-header .navbar .nav > li > a > .label,
html[dir="rtl"] .main-header .navbar .nav > li > a > .label {
    right: auto !important;
    left: 4px !important;
}

/* ============================================================
 * 8. الموبايل
 * الأزرار تلتفّ بدل أن تفيض خارج الشاشة.
 * ============================================================ */

@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        padding: 5px 8px;
    }

    .main-header .navbar-custom-menu > .btn,
    .main-header .navbar-custom-menu > a.btn,
    .main-header .navbar-custom-menu > button.btn,
    .main-header .navbar-custom-menu > .btn-group {
        float: none !important;
        margin: 0 !important;
    }

    .main-header .navbar-custom-menu .btn {
        min-height: 32px;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .main-header .navbar-custom-menu > .nav.navbar-nav {
        float: none !important;
        display: flex !important;
        align-items: center;
        margin: 0 !important;
    }

    .main-header .navbar .nav > li > a {
        padding: 10px !important;
    }
}