/* =========================================================================
   Veloura Aura — Design System  (veloura.css)
   يعمل فوق Bootstrap 5.3 (RTL). يوفّر: التوكنز، الوضع الليلي، المكوّنات،
   الأنيميشن، إمكانية الوصول، والـ Responsive helpers.
   يعتمد على متغيّرات CSS (Design Tokens) لسهولة التوسّع والصيانة.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1) Design Tokens — الوضع الفاتح (الافتراضي)                          */
/* ------------------------------------------------------------------ */
:root {
  /* الألوان — العلامة (بنفسجي Veloura) */
  --va-brand:        #6D3F91;
  --va-brand-600:    #5C3379;
  --va-brand-700:    #4A2A66;
  --va-brand-300:    #A879C9;
  --va-brand-050:    #F3ECF9;
  --va-brand-grad:   linear-gradient(135deg, #6D3F91 0%, #8A54B0 100%);

  /* لون ثانوي — ذهبي (مستوحى من تطبيق التوصيل) */
  --va-gold:         #A9822F;
  --va-gold-050:     #F7EFDD;

  /* المحايدات */
  --va-bg:           #F5F2F8;   /* خلفية التطبيق */
  --va-surface:      #FFFFFF;   /* البطاقات */
  --va-surface-2:    #FAF8FC;   /* سطح ثانوي */
  --va-ink:          #241B2E;   /* عناوين */
  --va-body:         #4C4359;   /* نص أساسي */
  --va-muted:        #877C95;   /* نص خافت */
  --va-border:       #E7DFEF;
  --va-border-2:     #D9CEE6;

  /* دلالات الحالة */
  --va-success:      #2F8F6B;  --va-success-bg:  #E4F3EC;
  --va-warning:      #B9822C;  --va-warning-bg:  #F8EFDD;
  --va-danger:       #C0504D;  --va-danger-bg:   #F8E7E6;
  --va-info:         #3E6DA6;  --va-info-bg:     #E6EEF7;

  /* الشكل والظل والحركة */
  --va-radius:       14px;
  --va-radius-sm:    10px;
  --va-radius-lg:    20px;
  --va-shadow:       0 1px 2px rgba(36,27,46,.04), 0 6px 18px rgba(36,27,46,.06);
  --va-shadow-lg:    0 10px 40px rgba(36,27,46,.12);
  --va-ring:         0 0 0 3px rgba(109,63,145,.28);
  --va-t:            .3s cubic-bezier(.4,0,.2,1);

  /* المقاسات */
  --va-sidebar-w:    272px;
  --va-topbar-h:     66px;

  /* ربط توكنز Bootstrap باللون */
  --bs-primary:      #6D3F91;
  --bs-primary-rgb:  109,63,145;
  --bs-body-font-family: "Cairo", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --bs-body-color:   #4C4359;
  --bs-body-bg:      #F5F2F8;
  --bs-border-color: #E7DFEF;
  --bs-link-color:   #6D3F91;
  --bs-link-hover-color: #4A2A66;
}

/* ------------------------------------------------------------------ */
/* 2) الوضع الليلي (Dark Mode) — يُفعّل عبر [data-bs-theme="dark"]       */
/* ------------------------------------------------------------------ */
[data-bs-theme="dark"] {
  --va-brand:        #BB93E2;
  --va-brand-600:    #A87BD6;
  --va-brand-700:    #C9A6EC;
  --va-brand-300:    #7C4FA6;
  --va-brand-050:    #2A1F38;
  --va-brand-grad:   linear-gradient(135deg, #7A4CA6 0%, #9B63C4 100%);

  --va-gold:         #D3A857;
  --va-gold-050:     #2E2616;

  --va-bg:           #14101A;
  --va-surface:      #1E1826;
  --va-surface-2:    #251D31;
  --va-ink:          #F1EBF7;
  --va-body:         #C7BBD4;
  --va-muted:        #91849F;
  --va-border:       #322840;
  --va-border-2:     #40354F;

  --va-success:      #4FBF93;  --va-success-bg:  #163229;
  --va-warning:      #DBA84C;  --va-warning-bg:  #33280F;
  --va-danger:       #E0817E;  --va-danger-bg:   #331D1D;
  --va-info:         #86A6D6;  --va-info-bg:     #1A2636;

  --va-shadow:       0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.4);
  --va-shadow-lg:    0 14px 44px rgba(0,0,0,.5);
  --va-ring:         0 0 0 3px rgba(187,147,226,.35);

  --bs-primary:      #BB93E2;
  --bs-primary-rgb:  187,147,226;
  --bs-body-color:   #C7BBD4;
  --bs-body-bg:      #14101A;
  --bs-border-color: #322840;
  --bs-link-color:   #BB93E2;
  --bs-link-hover-color: #C9A6EC;
}

/* ------------------------------------------------------------------ */
/* 3) الأساسيات + Typography                                           */
/* ------------------------------------------------------------------ */
* { scroll-behavior: smooth; }
body {
  background: var(--va-bg);
  color: var(--va-body);
  font-family: var(--bs-body-font-family);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--va-t), color var(--va-t);
}
h1,h2,h3,h4,h5,h6 { color: var(--va-ink); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h3 { font-size: 1.25rem; }
.text-muted, .va-muted { color: var(--va-muted) !important; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--va-brand); }

a { text-decoration: none; }
::selection { background: var(--va-brand-050); color: var(--va-brand-700); }

/* شريط تمرير رفيع أنيق */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--va-border-2); border-radius: 20px;
  border: 2px solid var(--va-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--va-brand-300); }

/* ------------------------------------------------------------------ */
/* 4) إمكانية الوصول (Accessibility)                                   */
/* ------------------------------------------------------------------ */
:focus-visible { outline: none; box-shadow: var(--va-ring); border-radius: 6px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
a:focus-visible, .va-nav-link:focus-visible { box-shadow: var(--va-ring); }

/* رابط "تخطّي إلى المحتوى" لقارئات الشاشة */
.skip-link {
  position: fixed; inset-inline-start: 12px; top: -60px; z-index: 2000;
  background: var(--va-brand); color: #fff; padding: 10px 18px;
  border-radius: 8px; transition: top var(--va-t); font-weight: 600;
}
.skip-link:focus { top: 12px; color:#fff; }
.visually-hidden-focusable:focus { color: var(--va-brand); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* 5) الهيكل (App Shell): Sidebar + Topbar                             */
/* ------------------------------------------------------------------ */
.va-app { min-height: 100vh; }

/* الشريط الجانبي */
.va-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--va-sidebar-w); background: var(--va-surface);
  border-inline-end: 1px solid var(--va-border);
  display: flex; flex-direction: column; z-index: 1045;
  transition: transform var(--va-t); overflow-y: auto;
}
.va-brand {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  border-bottom: 1px solid var(--va-border); position: sticky; top: 0;
  background: var(--va-surface); z-index: 2;
}
.va-brand .logo {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: var(--va-brand-grad); display: grid; place-items: center;
  color: #fff; box-shadow: 0 4px 14px rgba(109,63,145,.35);
}
.va-brand b { color: var(--va-ink); font-size: 1.05rem; line-height: 1.1; }
.va-brand small { color: var(--va-muted); font-size: .72rem; letter-spacing: .1em; }

/* شعار العلامة كصورة (بديل أيقونة النجمة) */
.va-brand.brand-has-img { flex-direction: column; align-items: stretch; gap: 8px; }
.brand-logo-full {
  width: 100%; max-width: 112px; height: auto; display: block; margin: 2px auto 0;
  border-radius: 14px; box-shadow: 0 4px 12px rgba(109,63,145,.22);
}
.brand-sub {
  text-align: center; color: var(--va-muted);
  font-size: .72rem; letter-spacing: .12em; font-weight: 600;
}

.va-nav { padding: 14px 12px; flex: 1; }
.va-nav .nav-group { color: var(--va-muted); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 16px 12px 6px; }
.va-nav-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  border-radius: 10px; color: var(--va-body); font-weight: 600; font-size: .92rem;
  margin-bottom: 2px; transition: var(--va-t); position: relative;
}
.va-nav-link i { font-size: 1.15rem; color: var(--va-muted); transition: var(--va-t); width:22px; text-align:center; }
.va-nav-link:hover { background: var(--va-brand-050); color: var(--va-brand-700); }
.va-nav-link:hover i { color: var(--va-brand); }
.va-nav-link.active { background: var(--va-brand-grad); color: #fff; box-shadow: 0 6px 18px rgba(109,63,145,.32); }
.va-nav-link.active i { color: #fff; }
.va-nav-link .badge { margin-inline-start: auto; }

/* المنطقة الرئيسية */
.va-main { margin-inline-start: var(--va-sidebar-w); min-height: 100vh;
  display: flex; flex-direction: column; min-width: 0; }
.va-topbar {
  height: var(--va-topbar-h); background: color-mix(in srgb, var(--va-surface) 85%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--va-border);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.va-content { padding: 26px 22px 60px; flex: 1; }
.va-content-narrow { max-width: 1180px; margin-inline: auto; width: 100%; }

/* أيقونة زر القائمة (موبايل) */
.va-burger { display: none; background: none; border: 1px solid var(--va-border);
  border-radius: 10px; width: 42px; height: 42px; color: var(--va-ink); font-size: 1.2rem; }

/* حقل بحث الشريط العلوي */
.va-search { position: relative; max-width: 360px; flex: 1; }
.va-search i { position: absolute; inset-inline-start: 14px; top: 50%;
  transform: translateY(-50%); color: var(--va-muted); }
.va-search .form-control { padding-inline-start: 40px; background: var(--va-surface-2);
  border-color: var(--va-border); border-radius: 999px; height: 42px; }

/* زر أيقونة (الوضع/الإشعارات/اللغة) */
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--va-border);
  background: var(--va-surface); color: var(--va-ink); display: grid; place-items: center;
  font-size: 1.15rem; transition: var(--va-t); position: relative; }
.icon-btn:hover { background: var(--va-brand-050); color: var(--va-brand); border-color: var(--va-brand-300); }
.icon-btn .dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 8px; height: 8px;
  background: var(--va-danger); border-radius: 50%; border: 2px solid var(--va-surface); }

/* أفتار المستخدم */
.va-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--va-brand-grad);
  color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* 6) البطاقات (Cards)                                                 */
/* ------------------------------------------------------------------ */
.va-card {
  background: var(--va-surface); border: 1px solid var(--va-border);
  border-radius: var(--va-radius); box-shadow: var(--va-shadow);
  transition: box-shadow var(--va-t), transform var(--va-t), border-color var(--va-t);
}
.va-card:hover { box-shadow: var(--va-shadow-lg); }
.va-card-hover:hover { transform: translateY(-3px); border-color: var(--va-brand-300); }
.va-card .va-card-head { padding: 18px 20px; border-bottom: 1px solid var(--va-border);
  display: flex; align-items: center; gap: 12px; }
.va-card .va-card-head h3, .va-card .va-card-head h5 { margin: 0; font-size: 1.05rem; }
.va-card .va-card-body { padding: 20px; }

/* بطاقة إحصائية (KPI) */
.stat-card { padding: 20px; border-radius: var(--va-radius); background: var(--va-surface);
  border: 1px solid var(--va-border); box-shadow: var(--va-shadow); position: relative; overflow: hidden; }
.stat-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.4rem; margin-bottom: 14px; }
.stat-card .val { font-size: 1.9rem; font-weight: 800; color: var(--va-ink); line-height: 1;
  font-variant-numeric: tabular-nums; }
.stat-card .lbl { color: var(--va-muted); font-size: .86rem; font-weight: 600; margin-top: 6px; }
.stat-card .trend { font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; }
.stat-card .trend.up { color: var(--va-success); }
.stat-card .trend.down { color: var(--va-danger); }
.ic-brand { background: var(--va-brand-050); color: var(--va-brand); }
.ic-gold  { background: var(--va-gold-050);  color: var(--va-gold); }
.ic-ok    { background: var(--va-success-bg); color: var(--va-success); }
.ic-warn  { background: var(--va-warning-bg); color: var(--va-warning); }
.ic-danger{ background: var(--va-danger-bg);  color: var(--va-danger); }
.ic-info  { background: var(--va-info-bg);    color: var(--va-info); }

/* ------------------------------------------------------------------ */
/* 7) الأزرار (Buttons)                                                */
/* ------------------------------------------------------------------ */
.btn { border-radius: 11px; font-weight: 600; padding: .55rem 1.15rem; transition: var(--va-t); }
.btn-lg { padding: .75rem 1.5rem; border-radius: 13px; }
.btn-sm { border-radius: 9px; }
.btn-brand { background: var(--va-brand-grad); color: #fff; border: none; box-shadow: 0 6px 16px rgba(109,63,145,.28); }
.btn-brand:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(109,63,145,.36); }
.btn-brand:active { transform: translateY(0); }
.btn-outline-brand { border: 1.5px solid var(--va-brand); color: var(--va-brand); background: transparent; }
.btn-outline-brand:hover { background: var(--va-brand); color: #fff; }
.btn-soft { background: var(--va-brand-050); color: var(--va-brand-700); border: none; }
.btn-soft:hover { background: var(--va-brand-300); color: #fff; }
.btn-ghost { background: transparent; color: var(--va-body); border: 1px solid var(--va-border); }
.btn-ghost:hover { background: var(--va-surface-2); color: var(--va-ink); border-color: var(--va-border-2); }

/* ------------------------------------------------------------------ */
/* 8) الشارات (Badges / Pills)                                         */
/* ------------------------------------------------------------------ */
.va-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem;
  font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.va-badge i { font-size: .85rem; }
.vb-ok    { background: var(--va-success-bg); color: var(--va-success); }
.vb-warn  { background: var(--va-warning-bg); color: var(--va-warning); }
.vb-danger{ background: var(--va-danger-bg);  color: var(--va-danger); }
.vb-info  { background: var(--va-info-bg);    color: var(--va-info); }
.vb-brand { background: var(--va-brand-050);  color: var(--va-brand); }
.vb-mut   { background: var(--va-surface-2);  color: var(--va-muted); border: 1px solid var(--va-border); }
.va-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ------------------------------------------------------------------ */
/* 9) النماذج (Forms)                                                  */
/* ------------------------------------------------------------------ */
.form-label { font-weight: 600; color: var(--va-ink); font-size: .88rem; margin-bottom: 6px; }
.form-label .req { color: var(--va-danger); }
.form-control, .form-select { background: var(--va-surface); border: 1.5px solid var(--va-border);
  border-radius: 11px; padding: .62rem .9rem; color: var(--va-ink); transition: var(--va-t); font-size: .92rem; }
.form-control::placeholder { color: var(--va-muted); }
.form-control:focus, .form-select:focus { border-color: var(--va-brand); box-shadow: var(--va-ring);
  background: var(--va-surface); }
.form-control:disabled, .form-select:disabled { background: var(--va-surface-2); color: var(--va-muted); }
.input-group-text { background: var(--va-surface-2); border: 1.5px solid var(--va-border); color: var(--va-muted); border-radius: 11px; }
.form-check-input:checked { background-color: var(--va-brand); border-color: var(--va-brand); }
.form-hint { font-size: .78rem; color: var(--va-muted); margin-top: 5px; }
.form-section-title { font-size: .95rem; font-weight: 700; color: var(--va-brand);
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }

/* شارة قسم النموذج */
.form-step { display: flex; align-items: center; gap: 10px; }
.form-step .n { width: 30px; height: 30px; border-radius: 9px; background: var(--va-brand-050);
  color: var(--va-brand); font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; font-size:.9rem;}

/* ------------------------------------------------------------------ */
/* 10) الجداول (Tables)                                                */
/* ------------------------------------------------------------------ */
.va-table-wrap { background: var(--va-surface); border: 1px solid var(--va-border);
  border-radius: var(--va-radius); box-shadow: var(--va-shadow); overflow: hidden; }
.va-table-scroll { overflow-x: auto; }
.va-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; min-width: 720px; }
.va-table thead th { background: var(--va-surface-2); color: var(--va-ink); font-weight: 700;
  font-size: .82rem; padding: 13px 16px; text-align: start; white-space: nowrap;
  border-bottom: 1px solid var(--va-border); position: sticky; top: 0; }
.va-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--va-border);
  color: var(--va-body); font-size: .9rem; vertical-align: middle; }
.va-table tbody tr { transition: background var(--va-t); }
.va-table tbody tr:hover td { background: var(--va-brand-050); }
.va-table tbody tr:last-child td { border-bottom: none; }
.va-table .cell-strong { color: var(--va-ink); font-weight: 700; }
.va-table-actions { display: flex; gap: 6px; }
.tbl-icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--va-border);
  background: var(--va-surface); color: var(--va-muted); display: grid; place-items: center; transition: var(--va-t); }
.tbl-icon:hover { color: var(--va-brand); border-color: var(--va-brand-300); background: var(--va-brand-050); }
.tbl-icon.danger:hover { color: var(--va-danger); border-color: var(--va-danger); background: var(--va-danger-bg); }

/* أفتار داخل الجدول */
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-avatar { width: 34px; height: 34px; border-radius: 9px; background: var(--va-brand-050);
  color: var(--va-brand); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* 11) عناصر متنوعة                                                    */
/* ------------------------------------------------------------------ */
.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
/* حارس التجاوب (2026-08-17): صفّ الأزرار داخل الترويسة كان `d-flex` بلا التفاف،
   فيفيض عرض الشاشة على الموبايل ويجرّ الصفحة كلها للتمرير الأفقي (شوهد في تفاصيل الطلب).
   `min-width:0` يمنع عنصر الفليكس من فرض عرض محتواه، و`flex-wrap` يُنزل الأزرار سطراً جديداً. */
.page-head > * { min-width: 0; max-width: 100%; }
.page-head .d-flex { flex-wrap: wrap; }
.page-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.page-head .sub { color: var(--va-muted); margin: 0; font-size: .95rem; }
.va-breadcrumb { font-size: .82rem; color: var(--va-muted); display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.va-breadcrumb a { color: var(--va-muted); }
.va-breadcrumb a:hover { color: var(--va-brand); }

/* شريط إجراءات الصفحة — بديل حشر الأزرار في الترويسة (2026-08-17).
   الترويسة تبقى للهوية (رقم الطلب + حالته)، والأفعال تنزل هنا في شريط يلتفّ بأمان:
   على الحاسوب صفّ واحد، وعلى الموبايل الفعل الرئيسي بعرض كامل والباقي زرّان في السطر. */
.va-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--va-surface); border: 1px solid var(--va-border);
  border-radius: var(--va-radius); box-shadow: var(--va-shadow);
  padding: 12px; margin-bottom: 18px; }
/* display:flex يمنع فراغ السطر الأساسي داخل الـ form فيستوي الزرّ مع جيرانه تماماً */
.va-actions form { margin: 0; display: flex; }
.va-actions .btn { white-space: nowrap; }
.va-actions .va-actions-gap { flex: 1 1 auto; }
/* ★ سهم زرّ الطيّ (تفاصيل محتوى البكج — 2026-08-31): يدور 180° عند الفتح فتُقرأ الحالة من
   شكل الزرّ لا من تذكّر ما نُقر. Bootstrap يُسقط `.collapsed` عن الزرّ حين يكون مفتوحاً. */
.va-caret { transition: transform var(--va-t); display: inline-block; }
[data-bs-toggle="collapse"][aria-expanded="true"] .va-caret { transform: rotate(180deg); }

/* ★ عدّاد الكمية: [−] [الرقم] [+] — الرقم في الوسط والزرّان على طرفيه (2026-08-30).
   `direction: ltr` مقصود: الترتيب البصري (ناقص · رقم · زائد) واحدٌ في كل اللغات، وتركُه RTL
   يقلب الزرَّين فيصير «+» يساراً و«−» يميناً — عكس ما تتوقّعه اليد. */
.va-stepper {
  display: inline-flex; align-items: stretch; direction: ltr;
  border: 1.5px solid var(--va-border); border-radius: 11px; overflow: hidden;
  background: var(--va-surface);
}
.va-stepper .va-step {
  border: 0; background: var(--va-surface-2); color: var(--va-ink);
  width: 38px; display: grid; place-items: center; cursor: pointer;
  font-size: .95rem; transition: background var(--va-t), color var(--va-t);
}
.va-stepper .va-step:hover { background: var(--va-brand-050); color: var(--va-brand); }
.va-stepper .va-step:active { transform: scale(.94); }
.va-stepper input {
  width: 56px; text-align: center; border: 0; border-radius: 0;
  border-inline: 1.5px solid var(--va-border); background: transparent; box-shadow: none !important;
}
/* الأسهم الأصلية للحقل الرقمي تُخفى: الزرّان بديلهما، ووجودهما معاً يضيّق الرقم ويربك */
.va-stepper input::-webkit-outer-spin-button,
.va-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.va-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ★★★ نافذة قابلة للتمرير محتواها داخل <form> (2026-08-30 — بلاغ المالك: «ما بيبين كامل
   وبلا أي سكرول»).
   العلّة: `modal-dialog-scrollable` في Bootstrap يبني عموداً مرناً **ابنُه المباشر هو
   `.modal-body`**، فيقيّد ارتفاعه ويجعله يتمرّر. لكن نوافذ هذا المشروع تضع `<form>` بين
   `.modal-content` والأقسام الثلاثة (ليشمل الإرسالُ الترويسةَ والذيل)، فيصير **الفورم** هو
   الابن المرن — وهو بلا خصائص فليكس فينمو ليملأ محتواه.
   النتيجة المقيسة على 375×600: الجسم نما إلى 893px داخل إطار 584px ⇒ **450px مقطوعة لا تُمرَّر**
   و**زرّ الحفظ عند 934px خارج الشاشة** فيستحيل حفظ البكج من الهاتف.
   الحلّ: اجعل الفورم نفسه عمود الفليكس، و`min-height:0` على الجسم (فليكس افتراضه `auto`
   فيمنع الانكماش تحت حجم المحتوى — نفس العلّة الجذرية الموثّقة في §١).
   قاعدة عامّة: تسري على **كل** نوافذ النظام (الأقسام · كودات الخصم · المستخدمون · البكجات…). */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* ★★ جداول مصغّرة داخل البطاقات والنوافذ (2026-08-30) — `va-table-mini`
   العلّة: `.va-table { min-width: 720px }` قاعدةٌ صحيحة لجداول البيانات العريضة، لكنها على
   جدولٍ صغير داخل بطاقة تدفع الأعمدة الأخيرة **خارج الشاشة** على الموبايل. في مكوّنات البكج
   قِيس أن «الكمية» عند ‑223px و«مخزونه» عند ‑380px على عرض 375px ⇒ المستخدم يرى الاسم والقسم
   فقط ويظنّ أن المكوّنات لا تظهر (بلّغ عنه المالك).
   الحلّ نفس نهج `.va-actions`: **إعادة تخطيط للموبايل** لا حشرٌ في تمرير أفقي — كل صفّ يصير
   سطراً مكدّساً بعناوين مضمّنة، فتظهر كل القيم بلا تمرير إطلاقاً. */
@media (max-width: 575.98px) {
  .va-table-mini { min-width: 0; }
  .va-table-mini thead { display: none; }
  .va-table-mini tbody tr { display: block; padding: 10px 12px; }
  .va-table-mini tbody tr:hover td { background: transparent; }
  .va-table-mini tbody td { display: block; border-bottom: none; padding: 2px 0; }
  /* العنوان يُضمَّن مع القيمة لأن رأس الجدول مخفيّ — بدونه تصير الأرقام بلا معنى */
  .va-table-mini tbody td[data-label]::before {
    content: attr(data-label) ": "; color: var(--va-muted); font-weight: 600; font-size: .85em;
  }
  /* القيم القصيرة (كمية/مخزون) تصطفّ في سطر واحد بدل سطر لكلٍّ */
  .va-table-mini tbody td[data-inline] { display: inline-flex; align-items: baseline; gap: 4px;
    width: auto; margin-inline-end: 16px; }
  /* في المحرّر: القائمة المنسدلة تأخذ السطر كاملاً وتحتها الكمية وزرّ الحذف */
  .va-table-editor tbody td:first-child { width: 100%; margin-bottom: 6px; }
  /* العدّاد على الهاتف: أزرار أعرض قليلاً لتُلمَس بالإبهام بلا خطأ */
  .va-table-editor .va-stepper .va-step { width: 44px; }
  .va-table-editor .va-stepper input { width: 52px; }

  /* stretch حتى يتساوى ارتفاع الزرّ المباشر والزرّ داخل form فيستقيم السطر */
  .va-actions { padding: 10px; gap: 8px; align-items: stretch; }
  .va-actions > *, .va-actions form { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .va-actions > .va-act-primary, .va-actions form.va-act-primary { flex: 1 1 100%; }
  .va-actions .btn { width: 100%; display: inline-flex; align-items: center;
    justify-content: center; padding-inline: .6rem; }
  .va-actions .va-actions-gap { display: none; }
}

/* TomSelect يستبدل كل <select> بواجهة خاصة ويُبقي العنصر الأصلي في الصفحة (لقارئ الشاشة
   ولحمل القيمة عند الإرسال) مكتفياً بقصّه بصرياً عبر clip — دون إخراجه من حساب التخطيط.
   فيبقى صندوقاً بعرض 100% (335px على الموبايل) `position:absolute` موضعه الساكن داخل عمود
   ضيّق، فيمتدّ خارج حافة الحاوية ويوسّع مساحة تمرير المستند. في واجهة RTL يخرج من الحافة
   اليسرى ⇒ تمرير أفقي يكسر تجاوب الشاشة (شوهد في «المرتجعات» +151px و«طلب جديد» +11px).
   ملاحظة مهمة: تصغير عرضه لا ينفع — المتصفّح يتجاهل `width` على هذا العنصر حتى مع !important
   (بقي 335px)، بينما يحترم `position`. لذا نثبّته على الشاشة: العنصر ذو الموضع الثابت لا
   يشارك في مساحة تمرير المستند إطلاقاً، ويبقى في شجرة الوصولية وتُرسَل قيمته كما هي.
   pointer-events:none إلزامي وإلا اعترض صندوق شفاف 335px نقرات الزاوية العليا. */
select.ts-hidden-accessible {
  position: fixed !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.va-divider { height: 1px; background: var(--va-border); margin: 8px 0; }
.va-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--va-border); background:var(--va-surface); color:var(--va-body); font-size:.83rem; font-weight:600; cursor:pointer; transition:var(--va-t); }
.va-chip:hover, .va-chip.active { background:var(--va-brand-050); color:var(--va-brand); border-color:var(--va-brand-300); }

.mono { font-family: "Cascadia Code", Consolas, monospace; font-size: .82em; direction: ltr;
  display: inline-block; background: var(--va-brand-050); color: var(--va-brand); padding: 1px 7px; border-radius: 6px; }

/* ‏.mono مصمَّم لعنصر سطري (span) داخل الخلية. تطبيقه مباشرةً على <td> — وهو الشائع في
   جداول النظام — كان يُلغي display:table-cell فتخرج الخلية من صفّ العمود وتصطفّ بحسب
   عرض محتواها لا بحسب العمود (أرقام الطلبات تتراقص يميناً ويساراً)، ويحيط لون الحبّة
   بكامل محتوى الخلية بما فيه الأوسمة. على الخلية نُبقي الخط الأحادي فقط. */
td.mono { display: table-cell; background: transparent; border-radius: 0;
  text-align: right; white-space: nowrap; }
/* الخلايا التي أعلنت اتجاهها صراحةً (باركود/SKU) تبقى LTR؛ والبقية تتبع اتجاه الجدول
   حتى لا ينقلب نصّ عربي داخلها. */
td.mono:not([dir]) { direction: rtl; }

/* وسم داخل خلية رقم (مثل «من مندوب» أو اسم موظف الإدخال) ينزل سطراً مستقلاً تحت الرقم،
   فتصطفّ كل الأرقام على حافة واحدة مهما اختلف طول الوسم. */
td.mono > .va-badge { display: flex; width: fit-content; margin-top: 5px; }

/* progress ملوّن */
.va-progress { height: 8px; background: var(--va-surface-2); border-radius: 999px; overflow: hidden; }
.va-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--va-brand-grad); }

/* حالة فارغة */
.empty-state { text-align: center; padding: 48px 20px; color: var(--va-muted); }
.empty-state .ic { width: 72px; height: 72px; border-radius: 50%; background: var(--va-brand-050);
  color: var(--va-brand); display: grid; place-items: center; font-size: 2rem; margin: 0 auto 16px; }

/* ------------------------------------------------------------------ */
/* 12) الأنيميشن (Animation)                                           */
/* ------------------------------------------------------------------ */
@keyframes vaFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vaPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vaShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.anim-fade-up { animation: vaFadeUp .5s both; }
.anim-pop { animation: vaPop .4s both; }
.stagger > * { animation: vaFadeUp .5s both; }
.stagger > *:nth-child(1){animation-delay:.03s}.stagger > *:nth-child(2){animation-delay:.09s}
.stagger > *:nth-child(3){animation-delay:.15s}.stagger > *:nth-child(4){animation-delay:.21s}
.stagger > *:nth-child(5){animation-delay:.27s}.stagger > *:nth-child(6){animation-delay:.33s}

/* هيكل تحميل (skeleton) */
.skeleton { background: linear-gradient(90deg, var(--va-surface-2) 25%, var(--va-border) 37%, var(--va-surface-2) 63%);
  background-size: 800px 100%; animation: vaShimmer 1.4s infinite linear; border-radius: 8px; }

/* ------------------------------------------------------------------ */
/* 13) صفحة تسجيل الدخول                                               */
/* ------------------------------------------------------------------ */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-visual { color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 60px;
  background:
    radial-gradient(120% 90% at 78% 88%, rgba(169,130,47,.20), transparent 55%),
    radial-gradient(100% 80% at 22% 12%, rgba(255,255,255,.14), transparent 50%),
    url("../images/auth-bg.svg") center / cover no-repeat,
    var(--va-brand-grad);
}
.auth-visual::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  top: -160px; inset-inline-start: -160px; pointer-events: none; }
.auth-visual::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(45,25,66,.35));
  pointer-events: none; }
.auth-visual > * { position: relative; z-index: 2; }

/* مزايا اللوحة اليمنى */
.auth-visual .feat { display: flex; align-items: center; gap: 12px; margin-top: 16px;
  color: #EADFF6; font-size: .95rem; }
.auth-visual .feat i { width: 40px; height: 40px; border-radius: 12px; color: #fff;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
  font-size: 1.15rem; flex: 0 0 auto; backdrop-filter: blur(2px); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--va-bg); }
.auth-card { width: 100%; max-width: 420px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-visual { display: none; } }

/* ------------------------------------------------------------------ */
/* 14) الطباعة — البوليصة                                              */
/* ------------------------------------------------------------------ */
@media print {
  .va-sidebar, .va-topbar, .no-print { display: none !important; }
  .va-main { margin: 0 !important; }
  .va-content { padding: 0 !important; }
  body { background: #fff !important; }
  .waybill-sheet { box-shadow: none !important; border: 1px solid #000 !important; }
}

/* ------------------------------------------------------------------ */
/* 15) الاستجابة (Responsive)                                          */
/* Breakpoints: ≤480 موبايل · ≤768 تابلت · ≤1024 لابتوب · >1024 ديسكتوب */
/* ------------------------------------------------------------------ */
.va-overlay { position: fixed; inset: 0; background: rgba(20,16,26,.5); z-index: 1040;
  opacity: 0; visibility: hidden; transition: var(--va-t); backdrop-filter: blur(2px); }
.va-overlay.show { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
  :root { --va-sidebar-w: 250px; }
  .va-sidebar { transform: translateX(100%); box-shadow: var(--va-shadow-lg); }
  [dir="ltr"] .va-sidebar { transform: translateX(-100%); }
  .va-sidebar.open { transform: translateX(0); }
  .va-main { margin-inline-start: 0; }
  .va-burger { display: grid; place-items: center; }
}
@media (max-width: 768px) {
  .va-content { padding: 18px 14px 48px; }
  .va-search { display: none; }
  .page-head { flex-direction: column; }
  .stat-card .val { font-size: 1.6rem; }
  .va-topbar { padding: 0 14px; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .va-brand small { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .btn { padding: .5rem .9rem; }
  .hide-xs { display: none !important; }
}

/* أدوات مساعدة */
.gap-14 { gap: 14px; } .gap-18 { gap: 18px; }
.fw-800 { font-weight: 800; }
.text-brand { color: var(--va-brand) !important; }
.bg-surface { background: var(--va-surface) !important; }
.rounded-va { border-radius: var(--va-radius) !important; }
.cursor-pointer { cursor: pointer; }

/* ------------------------------------------------------------------ */
/* 16) قوائم منسدلة قابلة للبحث (Tom Select) — منسّقة على السمة        */
/* ------------------------------------------------------------------ */
.ts-wrapper { width: 100%; }
.ts-wrapper.single .ts-control { cursor: pointer; }
.ts-control {
  background: var(--va-surface) !important;
  border: 1.5px solid var(--va-border) !important;
  border-radius: 11px !important;
  color: var(--va-ink) !important;
  min-height: 42px; padding: .5rem .9rem !important;
  box-shadow: none !important; transition: var(--va-t);
}
.ts-control > .item { color: var(--va-ink); }
.ts-control input, .ts-control input::placeholder { color: var(--va-muted) !important; }
.ts-wrapper.focus .ts-control {
  border-color: var(--va-brand) !important; box-shadow: var(--va-ring) !important;
}
.ts-wrapper.disabled .ts-control { background: var(--va-surface-2) !important; color: var(--va-muted) !important; }
/* حجم صغير (صفوف المنتجات) */
.ts-wrapper.form-select-sm .ts-control { min-height: 34px; padding: .28rem .6rem !important; font-size: .85rem; border-radius: 9px !important; }

.ts-dropdown {
  background: var(--va-surface) !important;
  border: 1.5px solid var(--va-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--va-shadow-lg) !important;
  color: var(--va-body); margin-top: 6px; overflow: hidden; z-index: 1060;
}
.ts-dropdown .ts-dropdown-content { padding: 6px; }
.ts-dropdown .option {
  border-radius: 8px; padding: 9px 12px; font-size: .9rem; color: var(--va-body); transition: var(--va-t);
}
.ts-dropdown .option:hover, .ts-dropdown .option.active {
  background: var(--va-brand-050) !important; color: var(--va-brand-700) !important;
}
.ts-dropdown .option[aria-selected="true"], .ts-dropdown .option.selected {
  color: var(--va-brand); font-weight: 600;
}
.ts-dropdown .no-results { padding: 10px 12px; color: var(--va-muted); font-size: .88rem; }
/* حقل البحث داخل القائمة */
.ts-dropdown .dropdown-input-wrap { padding: 8px; }
.ts-dropdown .dropdown-input {
  background: var(--va-surface-2); border: 1.5px solid var(--va-border) !important;
  border-radius: 9px; color: var(--va-ink); padding: .45rem .7rem;
}
.ts-dropdown .dropdown-input:focus { border-color: var(--va-brand) !important; box-shadow: var(--va-ring); }