/* =========================================================================
   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-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; }
.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; }
.page-head h1 { margin: 0 0 4px; }
.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); }

.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; }

/* 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 { background: var(--va-brand-grad); color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.auth-visual::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: rgba(255,255,255,.08); top: -120px; inset-inline-start: -120px; }
.auth-visual::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,.06); bottom: -100px; inset-inline-end: -80px; }
.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; }