/* ============================================================================
   إصلاحات تخطيط عامة (2026-09-10)
   ملف مستقل عن overrides.css حتى تبقى كل مجموعة إصلاحات قابلة للتتبع وحدها.
   ============================================================================ */

/* ——— عنوان الصفحة ووصفها ———
   .side-right حاوية مرنة (display:flex) لتصفّ العنوان مع أدواته في سطر واحد، لكن
   الصفحات التي تضع وصفاً <p> بعد العنوان كانت تجد الوصف ملتصقاً بجانب العنوان
   في نفس السطر. الحل: الوصف يأخذ عرض السطر كله فينزل تحت العنوان مع مسافة صغيرة. */
.side-right > .title-section-page + p,
.side-right > .title-section-page + .text-muted,
.side-right > .title-section-page + small,
.side-right > .title-section-page + .page-description {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.25rem;
  line-height: 1.6;
}
.side-right:has(> .title-section-page + p),
.side-right:has(> .title-section-page + .text-muted) {
  align-items: flex-start;
  row-gap: 0;
}

/* ——— حقول التاريخ ———
   مظهر موحّد لحقل التاريخ الأصلي وللمنتقي الجديد (AppDateInput) بنفس ارتفاع
   بقية حقول النموذج، والأرقام دائماً من اليسار لليمين حتى في الواجهة العربية. */
input[type="date"].form-control,
.app-date-input .mx-input {
  direction: ltr;
  text-align: start;
  height: 40px;
  min-height: 40px;
  font-variant-numeric: tabular-nums;
}
.app-date-input.mx-datepicker {
  width: 100%;
  display: block;
}
.app-date-input .mx-input {
  border: 1px solid #e2e6ea;
  border-radius: 0.5rem;
  box-shadow: none;
  padding-inline-start: 2.2rem;
  padding-inline-end: 0.75rem;
  font-size: 0.85rem;
  color: #1f2937;
  background: #fff;
}
.app-date-input .mx-input:focus {
  border-color: #EE7222;
  box-shadow: 0 0 0 3px rgba(238, 114, 34, 0.12);
}
.app-date-input .mx-icon-calendar,
.app-date-input .mx-icon-clear {
  left: 10px;
  right: auto;
  color: #6b7280;
}
[dir="rtl"] .app-date-input .mx-icon-calendar,
[dir="rtl"] .app-date-input .mx-icon-clear {
  left: auto;
  right: 10px;
}
[dir="rtl"] .app-date-input .mx-input {
  padding-inline-start: 0.75rem;
  padding-inline-end: 2.2rem;
  text-align: right;
}
.input_group_underline .app-date-input .mx-input {
  border-radius: 0.5rem;
}
.mx-datepicker-main {
  font-family: inherit;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
  border-color: #e6eaf0;
}
.mx-calendar-content .cell.active {
  background-color: #EE7222;
}
.mx-calendar-content .cell.today {
  color: #EE7222;
}
.mx-table-date .cell:hover {
  background-color: rgba(238, 114, 34, 0.10);
}

/* ——— الشريط العلوي: تباعد المجموعة اليمنى ———
   (طلب المستخدم 2026-09-10): «الفرع الرئيسي» بعيدة عن مربع البحث.
   السبب: ‎.navbar-header > div:first-child‎ يأخذ ‎flex:1‎ فيملأ عرض الشريط، و
   ‎.app-search‎ عليه ‎margin:auto‎ — والهوامش التلقائية في flex تبتلع كل الفراغ
   الحر وتوزّعه على جانبي البحث، فينزاح البحث نحو المنتصف وتتباعد عنه قائمة
   الفرع. الحل: مصدر واحد للتباعد (gap على المجموعة) وتصفير الهوامش التلقائية
   وهوامش ‎.header-item‎ داخلها، فتتساوى المسافة بين كل عنصرين متجاورين. */
#page-topbar .navbar-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
#page-topbar .navbar-header > div:first-child > * {
  flex-shrink: 0;
}
#page-topbar .app-search {
  margin: 0;
  max-width: 100%;
  /* (2026-09-10): القالب يثبّت عرض النموذج على 17.78rem بينما المدخل أضيق، فيبقى
     فراغ فارغ داخل النموذج يبعد قائمة «الكل» عن مربع البحث. العرض تلقائي بحجم
     المحتوى، والتباعد من gap المجموعة وحده. */
  width: auto;
}
#page-topbar .app-search .form-control {
  width: 17.7777777778rem;
  max-width: 100%;
}
@media (max-width: 1199.98px) {
  #page-topbar .app-search .form-control { width: 13rem; }
}
#page-topbar .navbar-header > div:first-child .header-item,
#page-topbar .navbar-header > div:first-child .btn-group > .header-item {
  margin-inline: 0;
}

/* ——— بطاقة الشعار واسم الموقع ———
   (طلب المستخدم 2026-09-10): البطاقة تخرج من مكانها حين يكبر الشعار.
   السبب: قاعدة القالب ‎.logo img{width:100%;height:100%}‎ داخل span سطري —
   والنسبة المئوية للارتفاع داخل عنصر بارتفاع تلقائي تتحول إلى auto، فتُرسم
   الصورة بمقاسها الأصلي؛ فأي شعار كبير يتجاوز ارتفاع البطاقة الثابت (70px)
   ويدفع الاسم خارجها. الحل: سقف صريح لأبعاد الصورة داخل البطاقة، والاسم
   يُقصّ بثلاث نقاط بدل أن يمدّد البطاقة. */
body .vertical-menu .navbar-brand-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 70px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body #page-topbar .navbar-brand-box {
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  overflow: hidden;
  min-width: 0;
  padding: 0 0.85rem;
}

#page-topbar .navbar-header,
body .custom-theme-active #page-topbar .navbar-header {
  height: 70px !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
/* (2026-09-10): القاعدتان السابقتان كانتا تفرضان display:inline-flex على كل
   نسخ الشعار الأربع (‎.logo-dark/.logo-light × ‎.logo-sm/.logo-lg‎) بأولوية أعلى من
   قواعد القالب التي تُخفي البدائل، فظهر الشعار 3–4 مرات متجاورة في الشريط
   العلوي والقائمة الجانبية. هنا: الحجم فقط بلا فرض الظهور، ثم نسخة واحدة ظاهرة
   صراحةً — النسختان الفاتحة والداكنة صورة واحدة (شعار الشركة) فلا حاجة للتبديل
   بحسب الوضع؛ والصغيرة تظهر فقط على الشاشات الضيقة أو عند طي القائمة. */
body .vertical-menu .navbar-brand-box { display: flex !important; }
/* (2026-09-10): شعار الشريط العلوي يظهر فقط على الشاشات الضيقة حين تختفي القائمة
   الجانبية — على الشاشات العريضة القائمة الجانبية تعرضه بجانب اسم الشركة، وكان
   فرض display:flex هنا يُظهره ثانيةً بين «الفرع الرئيسي» ومربع البحث. */
@media (max-width: 991.98px) {
  body #page-topbar .navbar-brand-box { display: flex; }
}
@media (min-width: 992px) {
  body #page-topbar .navbar-brand-box { display: none; }
}
body .navbar-brand-box .logo {
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  line-height: 0;
}
body .navbar-brand-box .logo > span {
  align-items: center;
  height: auto;
  max-width: 100%;
}
body .navbar-brand-box .logo.logo-dark { display: inline-flex; }
body .navbar-brand-box .logo.logo-light { display: none; }
body .navbar-brand-box .logo > span.logo-lg { display: inline-flex; }
body .navbar-brand-box .logo > span.logo-sm { display: none; }
@media (max-width: 991.98px) {
  body .navbar-brand-box .logo > span.logo-lg { display: none; }
  body .navbar-brand-box .logo > span.logo-sm { display: inline-flex; }
}
body.vertical-collpsed .vertical-menu .navbar-brand-box .logo > span.logo-lg { display: none; }
body.vertical-collpsed .vertical-menu .navbar-brand-box .logo > span.logo-sm { display: inline-flex; }
body .navbar-brand-box .logo img {
  width: auto;
  height: auto;
  max-height: 38px;
  max-width: 100%;
  object-fit: contain;
}
body .vertical-menu .navbar-brand-box .vertical-menu-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding-inline-end: 8px !important;
  line-height: 1.25 !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  text-align: start !important;
}
body .vertical-menu .navbar-brand-box .vertical-menu-btn {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #EE7222 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ============================================================================
   (طلب المستخدم 2026-09-10): الشريط العلوي على الموبايل
   كانت أيقونات الشريط كلها مصفوفة في سطر واحد على شاشة الهاتف فتتزاحم وتتقطّع.
   الآن: يمين الشريط الشعار وزر القائمة فقط، ويسارُه زر واحد يفتح لوحة منزلقة
   من جهة اليسار تضم بقية الأدوات. لا تغيير على شاشة الحاسوب إطلاقاً.
   ============================================================================ */
#page-topbar .tb-tools-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
#page-topbar .tb-tools-toggle:active { transform: scale(0.95); }
#page-topbar .tb-tools-toggle.open { background: rgba(255, 255, 255, 0.2); }
#page-topbar .tb-tools-badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 991.98px) {
  /* (بلاغ المستخدم 2026-09-10): «الشكل على الموبايل لسة مش مظبوط إطلاقاً».
     السبب: بطاقة الشريط ‎.navbar-header‎ تحمل ‎backdrop-filter‎، وأي عنصر يحمل
     مرشّح خلفية يصير هو المرجع الذي تُحسب عليه العناصر ذات ‎position:fixed‎ بداخله
     بدل نافذة المتصفح. فاللوحة كانت تُحبس داخل شريط ارتفاعه 70px بدل أن تملأ
     الشاشة، فتظهر الأيقونات مصفوفة كما كانت. تعطيل مرشّح الخلفية على الهاتف
     يعيد المرجع إلى النافذة — والمظهر الزجاجي يبقى كما هو على الحاسوب. */
  #page-topbar .navbar-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* اللوحة: مثبّتة على يسار الشاشة فيزيائياً (لا منطقياً) لتفتح من اليسار
     في الواجهة العربية والإنجليزية معاً، كما طلب المستخدم. */
  #page-topbar .tb-tools {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: min(86vw, 320px);
    z-index: 1055;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 70px 14px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--topbar-bg, #071120) 0%, color-mix(in srgb, var(--topbar-bg, #071120) 94%, #EE7222) 100%);
    color: var(--topbar-text, #dfeff2);
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.45);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
  }
  #page-topbar .tb-tools.open { transform: translateX(0); }

  /* المجموعات داخل اللوحة تفقد إطارها وتتحوّل إلى صفوف من الأزرار المستديرة
     نفسها المستعملة في الشريط، فلا يتغيّر شكل أي زر ولا لون أي أيقونة. */
  #page-topbar .tb-tools .btns_group,
  #page-topbar .tb-tools .action_header,
  #page-topbar .tb-tools > .btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #page-topbar .tb-tools .btns_group + .btns_group,
  #page-topbar .tb-tools .action_header {
    margin-top: 4px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  /* الأزرار تبقى بمقاسها المستدير المعتاد ولا تُشدّ إلى عرض اللوحة */
  #page-topbar .tb-tools .header-item,
  #page-topbar .tb-tools .custom_btn {
    margin: 0 !important;
    flex: 0 0 auto;
  }
  /* القوائم المنسدلة تُفتح داخل اللوحة بعرضها كاملاً بدل أن تُقصّ خارجها */
  #page-topbar .tb-tools .dropdown-menu {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 44vh;
    overflow-y: auto;
    margin: 6px 0 0 !important;
    order: 99;
  }
  #page-topbar .tb-tools .dropdown_container,
  #page-topbar .tb-tools .btn-group {
    position: static !important;
  }
  /* الزر نفسه يعلو اللوحة والحجاب فيتحوّل إلى زر إغلاق ظاهر في أعلى اللوحة */
  #page-topbar .tb-tools-toggle {
    position: relative;
    z-index: 1060;
  }
  #page-topbar .tb-tools-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(3, 12, 20, 0.55);
  }
  /* الشعار وزر القائمة وحدهما في يمين الشريط */
  #page-topbar .navbar-header > div:first-child { gap: 0.5rem; }
  #page-topbar .navbar-header { justify-content: space-between; }
}

/* على الحاسوب: الزر واللوحة لا وجود لهما، والصف يبقى كما كان */
@media (min-width: 992px) {
  .tb-tools-toggle,
  .tb-tools-backdrop { display: none !important; }
}

/* ============================================================================
   (بلاغ المستخدم 2026-09-10): زر مسح الحقل داخل نوافذ التصفية
   كان الزر ‎.clear-icon‎ عنصراً عادياً في ‎.input-group‎، وبما أن الحقل — سواء كان
   قائمة vue-multiselect أو قائمة أصلية — يأخذ عرض السطر كاملاً، كان الزر ينزل
   إلى سطر تحته ويظهر بلون أحمر صارخ. المطلوب: يكون داخل الحقل بجانب السهم،
   وبلون هادئ. الحل هنا بالأنماط وحدها فيسري على 242 موضعاً في 49 شاشة بلا
   تعديل أي صفحة.
   ============================================================================ */
.input-group:has(> .clear-icon) {
  position: relative;
}

.input-group > .clear-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 0.5rem;
  z-index: 4;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  /* لون هادئ بدل الأحمر، ويغمق عند المرور فقط */
  color: var(--grey-A3, #9aa4b2) !important;
  font-size: 0.75rem;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.input-group > .clear-icon:hover,
.input-group > .clear-icon:focus-visible {
  color: var(--black-08, #2b3445) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="dark"] .input-group > .clear-icon:hover {
  color: #e5e7eb !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* حين يكون الحقل قائمة (سهم على الطرف)، يجاور الزرُّ السهمَ ولا يركبه.
   المقاسات نفسها المتغيّرات التي تضبط السهم، فيبقى الاثنان متلازمين. */
.input-group:has(> .multiselect) > .clear-icon,
.input-group:has(> .v-select) > .clear-icon,
.input-group:has(> select) > .clear-icon,
.input-group:has(> .custom-select) > .clear-icon {
  inset-inline-end: calc(var(--select-arrow-inset, 0.8889rem) + var(--select-arrow-size, 1rem) + 0.3rem);
}

/* مساحة إضافية للنص داخل الحقل حتى لا يمرّ تحت الزر */
[dir="rtl"] .input-group:has(> .clear-icon) > .multiselect .multiselect__tags {
  padding-left: calc(var(--select-arrow-space, 2.4444rem) + 1.1rem) !important;
}
[dir="ltr"] .input-group:has(> .clear-icon) > .multiselect .multiselect__tags {
  padding-right: calc(var(--select-arrow-space, 2.4444rem) + 1.1rem) !important;
}
[dir="rtl"] .input-group:has(> .clear-icon) > select,
[dir="rtl"] .input-group:has(> .clear-icon) > .custom-select {
  padding-left: calc(var(--select-arrow-space, 2.4444rem) + 1.1rem) !important;
}
[dir="ltr"] .input-group:has(> .clear-icon) > select,
[dir="ltr"] .input-group:has(> .clear-icon) > .custom-select {
  padding-right: calc(var(--select-arrow-space, 2.4444rem) + 1.1rem) !important;
}
[dir="rtl"] .input-group:has(> .clear-icon) > input.form-control {
  padding-left: 1.9rem !important;
}
[dir="ltr"] .input-group:has(> .clear-icon) > input.form-control {
  padding-right: 1.9rem !important;
}

/* ============================================================================
   (بلاغ المستخدم 2026-09-10): «تصفية» و«حفظ البحث» ملتصقتان في ترويسة النافذة.
   ترويسة النوافذ في هذا القالب ‎display:flex‎ بلا ‎justify-content‎ ولا فاصل،
   بخلاف ما تفعله بوتستراب أصلاً، فيلتصق العنوان بأي إجراء بجانبه.
   ============================================================================ */
.modal-header {
  justify-content: space-between;
  gap: 0.75rem;
}

/* ============================================================================
   (طلب المستخدم 2026-09-10): تلميح أسفل الحقل
   كان تلميح «مفتاح المسافة يضيف ثلاثة أصفار» موضوعاً داخل عنصر العنوان وبلون
   أخضر، فيسبق العينَ إلى نفسه قبل العنوان ويزاحم الحقل. صار سطراً تحت الحقل
   بلون رمادي وحجم أصغر — صنف واحد تستعمله الشاشات الخمس التي فيها التلميح.
   ============================================================================ */
.field-hint {
  display: block;
  margin-top: 0.28rem;
  /* جسم الصفحة كله بخط عريض (font-weight:700) في هذا القالب، فيلزم تخفيفه صراحةً
     وإلا بدا التلميح بثقل العنوان نفسه. */
  font-size: 0.6111rem;
  line-height: 1.5;
  color: #9ba2ad;
  font-weight: 400;
}
[data-theme="dark"] .field-hint {
  color: #7d8590;
}

/* ============================================================================
   (بلاغ المستخدم 2026-09-10): سهم اختيار مفتاح الدولة «متآكل منه حتة ومش في
   المنتصف». سهم حقل الهاتف مرسوم في القالب بحيلة حدّين على مربّع مُدار 225
   درجة، وموضعه أعلى ثابت (top: 15px) لا يتوسّط الحقل، وانحناء زواياه يقصّ
   طرفَي الشكل. الآن هو نفس السهم المستعمل في كل قوائم المشروع، بنفس المقاس
   والمتغيّرات، ومتوسّطاً رأسياً مهما كان ارتفاع الحقل — في الصفحات الست عشرة
   التي فيها حقل هاتف دولي بلا استثناء.
   قواعد القالب تُحقن بعد هذا الملف ولها الأولوية عند تساوي التخصيص، فيلزم
   ‎!important‎ لكل خاصية.
   ============================================================================ */
.iti .iti__selected-country .iti__selected-country-primary .iti__arrow,
.custom_form_group .iti .iti__country-container .iti__selected-country .iti__selected-country-primary .iti__arrow {
  position: absolute !important;
  right: 0.6667rem !important;
  left: auto !important;
  top: 50% !important;
  width: var(--select-arrow-size, 1rem) !important;
  height: var(--select-arrow-size, 1rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: var(--select-arrow-img) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: translateY(-50%) !important;
  transition: transform 0.2s linear !important;
}
/* مساحة محجوزة للسهم حتى لا يمرّ تحته مفتاح دولة طويل */
.custom_form_group .iti .iti__country-container .iti__selected-country {
  padding-right: calc(0.6667rem + var(--select-arrow-size, 1rem) + 0.3rem) !important;
}
.iti .iti__selected-country .iti__selected-country-primary .iti__arrow.iti__arrow--up,
.custom_form_group .iti .iti__country-container .iti__selected-country .iti__selected-country-primary .iti__arrow.iti__arrow--up {
  transform: translateY(-50%) rotate(180deg) !important;
  top: 50% !important;
}

/* ============================================================================
   (طلب المستخدم 2026-09-10): شكل واحد لكل مناطق السحب والإفلات
   كانت في المشروع ثلاث هيئات مختلفة: صندوق رمادي بحدّ متصل في شاشات الإكسل،
   و‎.drop-zone‎ بتنسيقها الخاص في استيراد المبيعات، و‎.modern-dropzone‎ في رافع
   صور المنتجات. صارت كلها بالهيئة نفسها: إطار منقّط وزوايا دائرية وخلفية هادئة
   تتلوّن عند السحب فوقها، مع سطر وصف صغير تحت العنوان.
   أنماط المكوّنات مُنطَّقة (scoped) وتُحقن بعد هذا الملف فتتغلّب عند التساوي،
   فيلزم ‎!important‎.
   ============================================================================ */
.uploader_container:has(> .uploader_input),
.drop-zone,
.modern-dropzone {
  border: 1.5px dashed var(--grey-ED, #cbd5e1) !important;
  border-radius: 12px !important;
  background: var(--grey-F7, #f8fafc) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
.uploader_container:has(> .uploader_input):hover,
.drop-zone:hover,
.modern-dropzone:hover,
.drop-zone--active,
.modern-dropzone.is-dragover,
.card_content.drag-over .uploader_container:has(> .uploader_input) {
  border-color: #ff6600 !important;
  background: rgba(255, 102, 0, 0.04) !important;
}
[data-theme="dark"] .uploader_container:has(> .uploader_input),
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .modern-dropzone {
  border-color: #30363d !important;
  background: #161b22 !important;
}

/* سطر الوصف تحت عنوان منطقة الرفع */
.uploader_input .uploader_hint,
.drop-zone__hint,
.dropzone-text-secondary {
  display: block;
  margin-top: -0.6rem;
  margin-bottom: 0.9rem;
  font-size: 0.6111rem;
  line-height: 1.5;
  font-weight: 400;
  color: #9ba2ad;
}
[data-theme="dark"] .uploader_input .uploader_hint,
[data-theme="dark"] .drop-zone__hint,
[data-theme="dark"] .dropzone-text-secondary {
  color: #7d8590;
}

/* ============================================================================
   (طلب المستخدم 2026-09-10): منطقة الرفع أصغر وأنظف
   كانت تأخذ ارتفاعاً كبيراً: أيقونة ضخمة وهوامش واسعة وشريط تقدّم عريض ظاهر
   دائماً عند 0%. الآن: حشو أقل، أيقونة أصغر، والتقدّم دائرة صغيرة لا تظهر إلا
   أثناء الرفع ثم تتحوّل إلى علامة صح واسم الملف.
   ============================================================================ */
.uploader_container:has(> .uploader_input) {
  padding: 1rem 1.1rem !important;
}
.uploader_input {
  margin: 0 !important;
  gap: 0.25rem;
}
.uploader_input .uploader_icon {
  margin-bottom: 0.35rem !important;
}
.uploader_input .uploader_icon img {
  width: 2rem !important;
  height: 1.7rem !important;
}
.uploader_input .uploader_title {
  margin-bottom: 0 !important;
}
.uploader_input .uploader_hint {
  margin-top: 0.15rem;
  margin-bottom: 0.7rem;
}
/* (طلب المستخدم 2026-09-10): المنطقة كلها زر — بلا زر منفصل بداخلها.
   العنوان والوصف يتلوّنان مع الإطار عند المرور، وتظهر حلقة تركيز واضحة عند
   الوصول إليها بلوحة المفاتيح. */
.uploader_dropzone {
  cursor: pointer;
  user-select: none;
}
.uploader_dropzone:hover .uploader_title,
.uploader_dropzone:focus-visible .uploader_title {
  color: #ff6600 !important;
}
.uploader_dropzone:focus-visible {
  outline: 2px solid #ff6600;
  outline-offset: 2px;
}
.uploader_dropzone:hover .uploader_icon img,
.uploader_dropzone:focus-visible .uploader_icon img {
  transform: translateY(-1px);
}
.uploader_input .uploader_icon img {
  transition: transform 0.15s ease;
}

/* حالة الرفع: دائرة تقدّم صغيرة، ثم علامة صح واسم الملف */
.uploader_progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--grey-ED, #e5e7eb);
}
.uploader_progress .up-ring {
  --p: 0;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: conic-gradient(#ff6600 calc(var(--p) * 1%), var(--grey-ED, #e5e7eb) 0);
  display: grid;
  place-items: center;
}
.uploader_progress .up-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--grey-F7, #f8fafc);
}
.uploader_progress .up-ring span {
  position: relative;
  font-size: 0.55rem;
  font-weight: 700;
  color: #ff6600;
  line-height: 1;
}
.uploader_progress .up-done {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #16a34a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
}
.uploader_progress .up-name {
  font-size: 0.6667rem;
  font-weight: 400;
  color: #64748b;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
/* (بلاغ المستخدم 2026-09-12): عدد الشحنات داخل الملف يظهر بجانب اسمه فور
   اختياره، قبل الإرسال. شارة صغيرة لا تزاحم الاسم. */
.uploader_progress .up-rows {
  font-size: 0.6667rem;
  font-weight: 600;
  color: #EE7222;
  background: rgba(238, 114, 34, 0.14);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
[data-theme="dark"] .uploader_progress .up-rows { color: #EE7222; background: rgba(238, 114, 34, 0.16); }

[data-theme="dark"] .uploader_progress { border-top-color: #30363d; }
[data-theme="dark"] .uploader_progress .up-ring::before { background: #161b22; }
[data-theme="dark"] .uploader_progress .up-name { color: #8b949e; }

/* ============================================================================
   (بلاغ المستخدم 2026-09-11): حقل الخزينة يظهر أبيض في الوضع الليلي
   حقول العرض غير القابلة للتعديل — الخزينة والحساب في سندَي القبض والصرف
   وشاشة المصروفات — مرسومة بلون خلفية وحدّ مكتوبين بالأرقام في أنماط كل صفحة،
   بلا مقابل في الوضع الليلي، فتبقى بيضاء بين حقول داكنة. هنا تأخذ ألوان الحقول
   نفسها من متغيّرات الوضع الليلي فتتطابق مع جيرانها.
   الأنماط داخل الصفحات مُنطَّقة (scoped) وتُحقن بعد هذا الملف فتتغلّب عند
   تساوي التخصيص، فيلزم ‎!important‎.
   ============================================================================ */
/* (بلاغ المستخدم 2026-09-11): «ليه شكل إنبوت الخزينة مختلف». هذه الحقول غير
   القابلة للتعديل مرسومة بمقاسات وألوان مكتوبة بالأرقام تخالف حقول الفورم في كل
   شيء: انحناء 4px بدل 8، وخلفية وحدّ بلونين آخرين، وحشو وارتفاع وخطّ مختلفة —
   فتبدو حقلاً من نظام آخر بجانب جارها. هنا تأخذ هيئة حقل الفورم نفسها حرفياً،
   من المتغيّرات ذاتها، فتتبع الوضعين الفاتح والداكن بلا قاعدتين. */
.single-treasury-display,
.single-account-display,
.single-display {
  font-weight: 700 !important;
  font-size: 0.7778rem !important;
  line-height: 1.1667rem !important;
  color: var(--black-08) !important;
  border: 1px solid var(--grey-ED) !important;
  border-radius: 0.4444rem !important;
  padding: 0.75rem 0.6667rem !important;
  background-color: var(--grey-F7) !important;
  min-height: calc(1.1667rem + 1.5rem + 2px) !important;
  display: flex !important;
  align-items: center;
}
/* الوضع الليلي يعالَج في هذا المشروع بمتغيّرات مستقلة عن متغيّرات القالب،
   فحقول الفورم نفسها تُعاد هناك — وهذه تتبعها. */
[data-theme="dark"] .single-treasury-display,
[data-theme="dark"] .single-account-display,
[data-theme="dark"] .single-display {
  background-color: var(--dk-input, #2a2e36) !important;
  border-color: var(--dk-border, #30363d) !important;
  color: var(--dk-text, #e1e4e8) !important;
}

/* ============================================================================
   (بلاغ المستخدم 2026-09-11): زر «تعريف مصروف في الشجرة» لا يكاد يُرى في الوضع
   الليلي. الصنف ‎btn_outline_primary‎ حدُّه ونصّه بلون ‎#072a42‎ — كحليّ داكن على
   خلفية شفّافة — فيذوب في خلفية الوضع الليلي الداكنة. وهو مستعمل في 97 شاشة،
   فالعلاج هنا مرة واحدة بدل تسعة وتسعين.
   الأصناف المحدَّدة الأخرى (الأحمر والأزرق والأصفر) ألوانها متوسّطة تُقرأ على
   الداكن، فلم تُمسّ.
   ============================================================================ */
[data-theme="dark"] .btn_outline_primary,
[data-theme="dark"] .custom_btn.btn_outline_primary {
  border-color: var(--dk-border, #30363d) !important;
  color: var(--dk-text, #e1e4e8) !important;
  background-color: transparent !important;
}
[data-theme="dark"] .btn_outline_primary:hover,
[data-theme="dark"] .custom_btn.btn_outline_primary:hover {
  background-color: var(--dk-hover, #2d323a) !important;
  color: #ffffff !important;
  border-color: var(--dk-muted, #8b949e) !important;
}

/* ============================================================================
   (بلاغ المستخدم 2026-09-11): «زر مسح الفلاتر مش على نفس المستوى بتاع الفلتر —
   وفيه كتير زي كدة».
   أعمدة الحقول تحمل ‎custom_form_group‎ وله هامش سفلي، فحين يكون بجانبها عمودُ
   زرٍّ بلا هذا الصنف يستوي أسفلُ العمودين بينما يقف الحقل أعلى من الزر بمقدار
   ذلك الهامش. نهج المشروع أن يحمل عمود الزر الصنفَ نفسه، وأكثر الصفوف تفعل.
   هذه القاعدة شبكة أمان لما نُسي: عمود زرٍّ داخل صفٍّ فيه حقول يأخذ الهامش
   السفلي نفسه. مشروطة بوجود حقل في الصف فلا تمسّ تذييلات النوافذ — وهي 369
   موضعاً أزرارها في صفوف بلا حقول.
   ============================================================================ */
.row:has(> [class*="col-"] .custom_form_group) > [class*="col-"]:not(:has(.custom_form_group)):not(.custom_form_group):has(> .custom_btn) {
  margin-bottom: 0.8889rem;
}

/* ============================================================================
   (طلب المستخدم 2026-09-11): ملاحظة تحت الحقل تحمل قيمة
   رصيد الخزينة كان داخل عنصر العنوان فوق الحقل، فيبدو معلّقاً بين العنوان والحقل.
   صنف الملاحظة يضعه تحت الحقل بخطٍّ أصغر قليلاً من العنوان (عنوان الحقل
   0.8889rem) ولا يمسّ لونه، لأن اللون هنا خبرٌ لا زينة: أحمر للرصيد السالب.
   يختلف عن ‎.field-hint‎ الذي نصّه ثابت لا قيمة فيه فجاء أصغر وأهدأ لوناً.
   ============================================================================ */
.field-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7778rem;
  line-height: 1.45;
  font-weight: 700;
}

/* ============================================================================
   (طلب المستخدم 2026-09-11): حقل «البيان» أنزل من جارَيه
   عمود الحقل ‎custom_form_group‎ عمودُ فلكس بـ ‎justify-content: space-between‎
   وارتفاعه ارتفاع أطول أعمدة الصف. فحين يحمل جارُه ملاحظةً تحته — تلميح المسافة
   أو رصيد الخزينة — يطول الصف، ويُدفع حقلُ العمود الخالي من ملاحظة إلى أسفله
   فيقف تحت مستوى جارَيه.
   في الصفوف التي فيها ملاحظة، يُحاذي العمودُ الخالي منها محتواه إلى الأعلى،
   فتستوي العناوين ثم الحقول، وتبقى الملاحظات معلّقة تحت حقولها وحدها.
   القاعدة مشروطة بوجود ملاحظة في الصف، فلا تمسّ الصفوف التي يعتمد فيها التباعد
   على ‎space-between‎ لمحاذاة حقولٍ عناوينُها بأطوال مختلفة.
   ============================================================================ */
.row:has(.field-hint, .field-note) > [class*="col-"].custom_form_group:not(:has(.field-hint)):not(:has(.field-note)) {
  justify-content: flex-start;
}

/* ============================================================================
   (نقد تجربة المستخدم 2026-09-19، الهاتف): أهداف اللمس أصغر من 44px
   قياس على 390px: 20 من 20 عنصراً قابلاً للنقر في قائمة الشحنات أصغر من 44×44
   (أزرار الإجراءات 32px، زر مسح الحقل 20px، إغلاق النافذة 28px، زر القائمة 42px).
   التكبير هنا مقصور على الأجهزة اللمسية (pointer: coarse) فلا يتغيّر شيء على
   الحاسوب حيث الفأرة دقيقة والكثافة مطلوبة في الجداول.
   ============================================================================ */
@media (pointer: coarse) {
  .btn_actions .btn,
  .btn_actions .custom_btn,
  .btn_actions button,
  .btn_actions a.btn,
  .custom-theme-active .btn_actions .btn,
  .custom-theme-active .btn_actions .btn-primary,
  .custom-theme-active .btn_actions .btn_primary {
    width: 44px !important;
    height: 44px !important;
  }
  .btn_actions { gap: 4px; }
  .input-group > .clear-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9rem;
  }
  .modal .modal-dialog .modal-content .modal-header .close,
  .modal .modal-header button.close {
    width: 40px !important;
    height: 40px !important;
  }
  #page-topbar #vertical-menu-btn,
  #page-topbar .tb-tools-toggle,
  #page-topbar .header-item.btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .navbar-brand-box .logo { min-height: 44px; display: inline-flex; align-items: center; }
  .form-check-input { width: 1.4em; height: 1.4em; }
}

/* ============================================================================
   (نقد تجربة المستخدم 2026-09-19، الألوان والتركيز)
   1) حلقة تركيز عامة: طبقة الثيم تضع box-shadow:none على الحقول وأزرار Swal
      و outline:0 عارية في 7 قواعد، فلم يبقَ في المشروع مؤشر تركيز مرئي
      (قياس: 8 من 8 محطات Tab بلا أثر). :focus-visible وحدها فلا تظهر عند النقر.
   2) شبكة «ورق الرسم» خلف بطاقات الإحصاء في الوضع الداكن: صورة pattern.png
      من الثيم لا يلغيها التجاوز الداكن الذي يغيّر اللون فقط.
   3) تباين أقل من 4.5:1 مقاس: «فلتر الحقول» أبيض على #007bff = 3.98،
      فتات الخبز 3.86 و 2.60.
   ============================================================================ */
:focus-visible {
  outline: 2px solid #EE7222 !important;
  outline-offset: 2px !important;
}
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.underline-input:focus,
.underline-input:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
.multiselect:focus,
.multiselect:focus-visible,
.multiselect__input:focus,
.multiselect__input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: #EE7222 !important;
  box-shadow: 0 0 0 3px rgba(238, 114, 34, 0.18) !important;
}
.multiselect--active .multiselect__tags,
.multiselect:focus-within .multiselect__tags {
  border-color: #EE7222 !important;
  box-shadow: 0 0 0 3px rgba(238, 114, 34, 0.18) !important;
}
.custom_btn:focus-visible,
.btn:focus-visible,
.swal2-styled:focus-visible,
.page-link:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid #EE7222 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
[data-theme="dark"] :focus-visible { outline-color: #EE7222 !important; }
/* الشريط العلوي الثابت: لا يغطي العنصر المركّز عند التمرير إليه */
html { scroll-padding-top: 90px; }

[data-theme="dark"] .card_statistics .card_body,
[data-theme="dark"] .card_statistics_summary .card_body {
  background-image: none !important;
}

.custom_breadcrumb .breadcrumb-item a,
.custom_breadcrumb .breadcrumb-item a:visited { color: #4b5563 !important; }
.custom_breadcrumb .breadcrumb-item.active { color: #5f6b7a !important; }

/* (جولة الأدمن 2026-09-19): صف أدوات الصفحة كان z-index 1050 فيعلو الشريط العلوي
   (1040) ويغطي قوائمه المنسدلة (اسم المستخدم/الإشعارات) — كان «تسجيل الخروج»
   مخفياً خلف أزرار Excel/طباعة في قائمة الشحنات. يكفيه 1030: فوق رأس الجدول
   الثابت (1020) وتحت الشريط العلوي. */
.section-toolbar { z-index: 1030 !important; }

/* الأزرار العائمة الثلاثة تشغل ~185px في الزاوية السفلية؛ حتى لا تغطي آخر
   عناصر الصفحة عند نهاية التمرير (زر استعادة الألوان في الإعدادات، بطاقة
   «صافي» في إنشاء الشحنة). */
.page-content { padding-bottom: 190px !important; }

/* ============================================================================
   (طلب المالك 2026-09-19): «الألوان التي تتغير من الإعدادات اتركها، والألوان
   التي لا تتغير عدّلها مع النسق». الأزرار الملوّنة بألوان Bootstrap 4 الخام
   (أصفر تصفية، أخضر طباعة، رمادي Excel، أزرق فلتر الحقول) والأزرار العائمة كانت
   ألواناً ثابتة لا تتبع لون الأساس. صارت تُشتق من --primary-color.
   ============================================================================ */
.custom_btn.btn_yellow_ffc,
.custom_btn.btn_green_28,
.custom_btn.btn_grey,
.custom_btn.btn_blue_007 {
  background-color: color-mix(in srgb, var(--primary-color, #EE7222) 72%, #0a2331) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.custom_btn.btn_yellow_ffc:hover,
.custom_btn.btn_green_28:hover,
.custom_btn.btn_grey:hover,
.custom_btn.btn_blue_007:hover {
  background-color: color-mix(in srgb, var(--primary-color, #EE7222) 88%, #0a2331) !important;
}
.custom_btn.btn_outline_yellow,
.custom_btn.btn_outline_blue {
  color: var(--primary-color, #EE7222) !important;
  border-color: var(--primary-color, #EE7222) !important;
  background-color: transparent !important;
}
.support-fab,
.acceptance-fab {
  background: var(--primary-color, #EE7222) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color, #EE7222) 45%, transparent) !important;
}
.font-size-container .icon-only,
.font-size-container button {
  background-color: color-mix(in srgb, var(--primary-color, #EE7222) 72%, #0a2331) !important;
}

/* ============================================================================
   (بلاغ المالك 2026-09-19): بطاقة التنبيه الموحّدة (useToast) — تحل محل الصندوق
   الأحمر المصمت ونافذة الخطأ الكبيرة وصوت الخطأ. الألوان دلالية (نجاح/خطأ/تنبيه)
   لا ألوان هوية، ولها نسخة للوضع الداكن.
   ============================================================================ */
.app-toast {
  --at-accent: #64748b;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  padding: 12px 12px 12px 14px;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16) !important;
  overflow: hidden;
  position: relative;
}
.app-toast--error   { --at-accent: #dc2626; }
.app-toast--success { --at-accent: #16a34a; }
.app-toast--warning { --at-accent: #d97706; }
.app-toast--info    { --at-accent: var(--primary-color, #EE7222); }
.app-toast__bar { position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--at-accent); }
.app-toast__icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--at-accent); background: color-mix(in srgb, var(--at-accent) 12%, white); font-size: 20px;
}
.app-toast__body { flex: 1 1 auto; min-width: 0; }
.app-toast__title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; color: var(--at-accent); }
.app-toast__text { font-size: 0.9rem; line-height: 1.65; white-space: pre-line; word-break: break-word; }
.app-toast__code { font-family: monospace; font-size: 10.5px; color: #94a3b8; margin-top: 4px; text-align: start; }
.app-toast__close { flex: 0 0 auto; margin: 2px 0 0 !important; opacity: 0.55; }
.app-toast__close:hover { opacity: 1; }
[data-theme="dark"] .app-toast { background: #22262d !important; color: #e1e4e8 !important; border-color: #3a3f48 !important; }
[data-theme="dark"] .app-toast__icon { background: color-mix(in srgb, var(--at-accent) 22%, #22262d); }
[data-theme="dark"] .app-toast__close { filter: invert(1); }
@media (prefers-reduced-motion: no-preference) {
  .app-toast { animation: app-toast-in 0.18s ease-out; }
  @keyframes app-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: no-preference) {
  .app-toast--bump { animation: app-toast-bump 0.25s ease-out; }
  @keyframes app-toast-bump { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
}

/* (بلاغ المالك 2026-09-24 على accounting/shipments-reconciliation): قائمة المرشّح
   المنسدلة كانت تُرسم **خلف رأس الجدول الثابت** فتظهر مقطوعة: نصوص الخيارات ظاهرة
   وخلفيتها مغطاة بصف الرأس. القياس: thead.sticky-top يحمل z-index 1020 (من sticky-top)
   بينما .multiselect--active يحمل 50 من مكتبة vue-multiselect، فأي قائمة تفتح فوق جدول
   تُغطّى. إصلاح سابق في overrides.css حصر الحل بصف أدوات الجدول نفسه، وهذه الصفحة
   مرشّحاتها في بطاقة مستقلة فوق الجدول فلم يشملها.
   1025: أعلى من رأس الجدول (1020) وأدنى من صف أدوات الصفحة (1030) والشريط العلوي. */
.multiselect--active {
  z-index: 1025 !important;
}

.multiselect--active .multiselect__content-wrapper {
  z-index: 1026;
}