/* ALIGN — الهوية البصرية الموحّدة (17.3) — المصدر الوحيد للألوان والخطوط والمقاسات.
   المسار في المنتج: static/common/tokens.css — يُحمَّل قبل أي CSS آخر في كل صفحة (الموقع، والكاشير، ولوحات ALIGN، والمشتريات، والتحويل).
   لا قيمة لون أو خط مكتوبة يدويًا في أي ملف آخر: استعمل المتغيرات فقط. */

:root {
  /* الأساس — من الشعار */
  --al-ink: #0B0D12;            /* الأسود: النص الأساسي، القائمة الجانبية، الأزرار الداكنة */
  --al-brand: #004BFC;          /* أزرق الشعار: الإجراء الأساسي، الروابط، العنصر النشط */
  --al-brand-600: #0037BD;      /* حالة hover/pressed للأزرق */
  --al-brand-50: #EAF0FF;       /* خلفية أيقونات وشارات معلوماتية */

  /* الأسطح والخطوط */
  --al-bg: #F4F6FA;             /* خلفية الصفحات الداخلية */
  --al-surface: #FFFFFF;        /* البطاقات والجداول والشريط العلوي */
  --al-surface-2: #F9FAFC;      /* رأس الجداول */
  --al-line: #E3E7EF;           /* حدود البطاقات والفواصل */
  --al-line-soft: #EEF1F6;      /* فواصل صفوف الجداول */
  --al-line-strong: #C9D0DC;    /* حدود الحقول والأزرار الثانوية */

  /* النص */
  --al-text: #0B0D12;
  --al-text-2: #3A4352;         /* نص ثانوي (تباين ≥ 7:1 على الأبيض) */
  --al-muted: #4A5363;          /* تسميات وتلميحات (تباين ≥ 4.5:1 على الأبيض و#F4F6FA) */

  /* الأسطح الداكنة (القائمة الجانبية، لوحة الدفع في الكاشير، التذييل) */
  --al-dark: #0B0D12;
  --al-dark-2: #1B2030;         /* العنصر النشط داخل الداكن */
  --al-dark-line: #262B36;
  --al-dark-text: #C9D0DC;
  --al-dark-muted: #A9B2C2;

  /* الحالات — خلفية/نص (كلها ≥ 4.5:1) */
  --al-success-bg: #E6F4EE; --al-success: #0B5C3F;
  --al-warn-bg: #FFF1DE;    --al-warn: #7A4200;
  --al-danger-bg: #FDE8E7;  --al-danger: #8F1D15;   --al-danger-line: #F3C4C0;
  --al-info-bg: #EAF0FF;    --al-info: #0037BD;

  /* سلاسل الرسوم البيانية بالترتيب */
  --al-chart-1: #004BFC;
  --al-chart-2: #0B0D12;
  --al-chart-3: #A9B2C2;
  --al-chart-4: #A55A00;
  --al-chart-5: #127A55;
  --al-chart-soft: #C9D6F5;     /* أعمدة الخلفية أو غير المحددة */

  /* الخط */
  --al-font: "SaudiRiyal", "Thmanyah Sans", sans-serif;
  --al-fs-xs: 12px;
  --al-fs-sm: 13px;
  --al-fs-base: 14px;
  --al-fs-md: 15px;
  --al-fs-lg: 16px;
  --al-fs-title: 26px;          /* عنوان الصفحة */
  --al-fs-kpi: 26px;            /* قيمة بطاقة المؤشر */
  --al-fw-regular: 400; --al-fw-medium: 500; --al-fw-semibold: 600; --al-fw-bold: 700;

  /* الأشكال والمقاسات */
  --al-radius-sm: 6px;          /* الشارات */
  --al-radius: 10px;            /* الأزرار والحقول */
  --al-radius-lg: 14px;         /* البطاقات والجداول */
  --al-radius-pill: 999px;
  --al-control-h: 44px;         /* أقل ارتفاع لزر أو حقل (لمس) */
  --al-topbar-h: 64px;
  --al-sidebar-w: 248px;
  --al-sidebar-w-collapsed: 64px;
  --al-gap: 16px;
  --al-pad-card: 20px;
  --al-shadow-pop: 0 24px 60px rgba(11, 13, 18, 0.10);  /* النوافذ المنبثقة فقط */
  --al-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #004BFC;
}

/* 11.11.26 (المالك): الوضع الليلي — نفس المتغيرات بقيم داكنة. يُفعَّل بـ <html data-theme="dark"> من common/theme.js.
   --al-ink يصبح فاتحًا (الأزرار «الداكنة» تنقلب)، و--al-dark يبقى أدكن من الخلفية (الأشرطة والتذييل). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --al-ink: #E7EAF0;
  --al-brand: #3B76FF;
  --al-brand-600: #6A96FF;
  --al-brand-50: #14224A;
  --al-bg: #0B0E14;
  --al-surface: #141922;
  --al-surface-2: #1A202B;
  --al-line: #262D3A;
  --al-line-soft: #1F2530;
  --al-line-strong: #364052;
  --al-text: #E7EAF0;
  --al-text-2: #C3C9D4;
  --al-muted: #9AA3B2;
  --al-dark: #07090D;
  --al-dark-2: #161B25;
  --al-dark-line: #232A36;
  --al-dark-text: #C9D0DC;
  --al-dark-muted: #A9B2C2;
  --al-success-bg: #0F2E22; --al-success: #5FD3A0;
  --al-warn-bg: #33240C;    --al-warn: #F2B45C;
  --al-danger-bg: #3A1513;  --al-danger: #FF8A80;   --al-danger-line: #5A2420;
  --al-info-bg: #14224A;    --al-info: #8FB0FF;
  --al-chart-1: #3B76FF;
  --al-chart-2: #E7EAF0;
  --al-chart-3: #5B6577;
  --al-chart-4: #E39A3B;
  --al-chart-5: #3FBF8A;
  --al-chart-soft: #2A3550;
  --al-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55);
  --al-focus: 0 0 0 2px #141922, 0 0 0 4px #3B76FF;
}
:root[data-theme="dark"] img.al-invert-dark { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background-color: var(--al-surface); color: var(--al-text); border-color: var(--al-line-strong); }

/* زر التبديل (الشمس/القمر) — مشترك بين المنصة ولوحة الإدارة والموقع */
.al-theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--al-radius);
  border: 1px solid var(--al-line); background: var(--al-surface); color: var(--al-text); cursor: pointer; padding: 0; }
.al-theme-btn:hover { border-color: var(--al-brand); color: var(--al-brand); }
.al-theme-btn svg { width: 18px; height: 18px; }

/* أساسيات مشتركة — لا تكررها في ملفات أخرى */
html { font-family: var(--al-font); }
body { font-family: var(--al-font); color: var(--al-text); font-size: var(--al-fs-base); }
:root[data-theme="dark"] body { background-color: var(--al-bg); }
:focus-visible { outline: none; box-shadow: var(--al-focus); border-radius: var(--al-radius); }
.num, td.num, th.num { font-variant-numeric: tabular-nums; }