/* خط وازن العربي للطباعة والمعاينة (Phase 9) — نفس الخط المتثبّت في صورة
   الخادم عشان الشكل يبقى واحد على الشاشة وفي الـ PDF */
/* ❗ الخطوط بصيغة woff2 مش ttf: الـttf بيتبعت للمتصفح من غير ضغط
   (236 كيلوبايت للخط الواحد × 3 = 707 كيلوبايت)، وwoff2 مضغوط جواه
   فبقى 216 كيلوبايت للتلاتة — توفير نص ميجا على أول فتحة، وده فرق
   محسوس على بيانات الجوال. كل المتصفحات من 2016 بتدعم woff2. */
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("IBM Plex Sans Arabic"), url("/assets/wazen/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("IBM Plex Sans Arabic Medium"), url("/assets/wazen/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("IBM Plex Sans Arabic Bold"), url("/assets/wazen/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

/* =============================================================================
   Phase 0 — نظام ألوان «وازن» الرسمي المعتمد
   ❗ كل لون في الملف ده لازم يرجع للمتغيرات دي. ممنوع أي قيمة لون مباشرة
      خارج الكتلة دي — الدرجات الوسيطة بتتبني بـ color-mix من نفس اللوحة.
============================================================================= */
:root {
  --wazen-emerald-900: #03382D; --wazen-emerald-700: #075B48; --wazen-emerald-500: #13866F;
  --wazen-emerald-300: #55B8A2; --wazen-emerald-100: #DDF3ED;
  --wazen-navy-900: #061C38; --wazen-navy-700: #082B56; --wazen-navy-500: #1D548A;
  --wazen-navy-300: #77A6CC; --wazen-navy-100: #E7F0F8;
  --wazen-gold-700: #A77A18; --wazen-gold-500: #D5A63A; --wazen-gold-300: #EACB78; --wazen-gold-100: #FFF4D6;
  --wazen-ink: #17211F; --wazen-slate: #52615D; --wazen-muted: #87938F;
  --wazen-border: #D8E2DE; --wazen-surface: #F5F8F6; --wazen-white: #FFFFFF;

  /* ألوان الحالات — وظيفية فقط، مش بديل عن ألوان العلامة */
  --wazen-success: #16835B; --wazen-success-bg: #E5F6EE;
  --wazen-warning: #B7791F; --wazen-warning-bg: #FFF5D9;
  --wazen-danger:  #C2413A; --wazen-danger-bg:  #FDECEA;
  --wazen-info:    #2563A6; --wazen-info-bg:    #EAF3FC;
}

/* =============================================================================
   وازن — الهوية البصرية
   كحلي عميق + ذهبي، يمين لليسار، على كل صفحات النظام

   الطريقة: بنعيد تعريف متغيرات CSS اللي Frappe نفسه بيستخدمها، مش بنكتب
   قواعد فوق كل عنصر. كده التيمة بتمشي على كل الصفحات — اللي موجودة دلوقتي
   واللي هتتضاف مع أي ترقية — من غير ما نلاحق التصميم كل مرة.
============================================================================= */

/* =============================================================================
   Task 1.0 — طبقة التيمات
   ❗ القاعدة: تخطيط الصفحات (ومنها الرئيسية) ثابت في كل التيمات، والألوان
      بس هي اللي بتتغيّر. عشان كده كل قواعد الملف تحت بتستخدم المتغيرات
      الدلالية (--wz-*) دي بس — ومفيش قاعدة بتستخدم لون من اللوحة مباشرة
      (ماعدا ألوان الحالات الوظيفية).
      أي تيمة جديدة = كتلة واحدة بتعيد تعريف المتغيرات دي، من غير لمس القواعد.

   القيم هنا هي قيم الوضع الداكن الحالي بالظبط (Task 1.1 — بدون تغيير).
   الوضع الفاتح [data-theme="light"] (Task 1.2) وتيمة اليوم الوطني
   [data-theme="national"] (Task 1.3) هيعيدوا تعريفها في كتل خاصة بيهم.
============================================================================= */
/* ---- Task 1.2 — الوضع الأبيض (الافتراضي عند فتح البرنامج) ----
   توزيع اللوحة زي Phase 0: أبيض ومحايد للمساحات، كحلي للإطار (الشريط
   الجانبي والعناوين)، زمردي للأفعال الرئيسية، وذهبي لإبراز صغير بس
   (أيقونات الشريط الجانبي وخط العنصر النشط).
   ❗ الشريط الجانبي كحلي حتى هنا — شرط Task 1.2 إنه ما يبقاش أبيض. */
:root,
[data-theme="light"] {
  --wz-scheme: light;

  --wz-bg:      var(--wazen-surface);
  --wz-bg-2:    var(--wazen-surface);
  --wz-raised:  var(--wazen-white);
  --wz-card:    var(--wazen-white);
  --wz-field:   var(--wazen-white);
  --wz-edge:    color-mix(in srgb, var(--wazen-border) 65%, var(--wazen-muted));
  --wz-glow:    var(--wazen-emerald-100);
  --wz-overlay: var(--wazen-navy-900);
  --wz-shadow:  color-mix(in srgb, var(--wazen-navy-900) 28%, transparent);
  --wz-glass:       var(--wazen-white);
  --wz-glass-2:     var(--wazen-white);
  --wz-glass-hover: var(--wazen-emerald-100);
  --wz-line:        var(--wazen-border);
  --wz-line-strong: color-mix(in srgb, var(--wazen-border) 65%, var(--wazen-muted));
  --wz-page-a:      var(--wazen-surface);
  --wz-page-b:      var(--wazen-surface);
  --wz-navbar-bg:   var(--wazen-white);
  --wz-navbar-line: var(--wazen-border);
  --wz-thead-bg:    var(--wazen-navy-100);
  --wz-navbar-text:  var(--wz-text-dim);
  --wz-navbar-hover: var(--wz-accent-3);
  --wz-navbar-icon:  var(--wz-text-dim);

  --wz-heading:   var(--wazen-navy-900);
  --wz-text:      var(--wazen-ink);
  --wz-text-dim:  var(--wazen-slate);
  /* ❗ Muted لوحده تباينه 3.2 بس على الأبيض — أقل من الحد (4.5). بنغمّقه
     بخلطة مع Slate عشان النصوص المساعدة تفضل مقروءة (فحص التباين: 2.85 → 4.6+) */
  --wz-text-mute: color-mix(in srgb, var(--wazen-slate) 60%, var(--wazen-muted));
  --wz-info-text: var(--wazen-info);


  --wz-accent:      var(--wazen-emerald-700);
  --wz-accent-2:    var(--wazen-emerald-500);
  --wz-accent-3:    var(--wazen-emerald-700);
  --wz-accent-soft: var(--wazen-emerald-100);
  --wz-on-accent:   var(--wazen-white);

  --wz-side-bg:          linear-gradient(180deg, var(--wazen-navy-700) 0%, var(--wazen-navy-900) 100%);
  --wz-side-line:        transparent;
  --wz-side-divider:     color-mix(in srgb, var(--wazen-gold-500) 32%, transparent);
  --wz-side-text:        var(--wazen-white);
  --wz-side-text-dim:    color-mix(in srgb, var(--wazen-navy-100) 88%, var(--wazen-navy-300));
  --wz-side-text-mute:   var(--wazen-navy-300);
  --wz-side-icon:        var(--wazen-gold-500);
  --wz-side-hover:       color-mix(in srgb, var(--wazen-white) 8%, transparent);
  --wz-side-active-bg:   color-mix(in srgb, var(--wazen-white) 12%, transparent);
  --wz-side-active-line: var(--wazen-gold-500);
  --wz-side-active-text: var(--wazen-white);
  --wz-panel-bg:         transparent;

  --wz-brand-1: var(--wazen-gold-500);
  --wz-brand-2: var(--wazen-gold-700);
  --wz-brand-3: var(--wazen-gold-700);
  --wz-watermark-opacity: 0.07;
}

/* ---- الوضع الأبيض: ربط درجات الرمادي بتاعة فرابي باللوحة ----
   ❗ في كتلة منفصلة بـ :not عن قصد: كتلة الوضع الأبيض فوق بتنطبق كمان على
      :root في الوضع الداكن (نفس العنصر)، وأي متغير مش متعرّف تاني في كتلة
      الداكن كان هيتسرّب ليه ويغيّر شكله (Task 1.1).
   درجات فرابي (#c7c7c7 و #999 و #7c7c7c) مش من اللوحة، وكانت بتطلع نصوص
   باهتة: حقول معطّلة (تباين 4.17) ونصوص مساعدة (2.85). */
:root:not([data-theme="dark"]),
[data-theme="light"],
[data-theme="national"] {
  --gray-400: var(--wz-edge);
  --gray-500: var(--wz-text-mute);
  --gray-600: var(--wz-text-dim);
  --gray-700: var(--wz-text-dim);
  --gray-800: var(--wz-text);
  --gray-900: var(--wz-heading);
  --text-extra-muted: var(--wz-text-mute);
  --disabled-text-color: var(--wz-text-dim);

  /* شارات الحالة (مدفوعة، للتسليم، متأخرة...) بألوان الحالات في اللوحة.
     النص بيتغمّق بخلطة مع Ink عشان يعدّي تباين 4.5 على الخلفية الفاتحة
     (لون الحالة لوحده على خلفيته تباينه 3.1 لـ 4.3). */
  --bg-green:      var(--wazen-success-bg);
  --text-on-green: color-mix(in srgb, var(--wazen-success) 75%, var(--wazen-ink));
  --bg-yellow:      var(--wazen-warning-bg);
  --text-on-yellow: color-mix(in srgb, var(--wazen-warning) 55%, var(--wazen-ink));
  --bg-orange:      var(--wazen-warning-bg);
  --text-on-orange: color-mix(in srgb, var(--wazen-warning) 55%, var(--wazen-ink));
  --bg-red:      var(--wazen-danger-bg);
  --text-on-red: color-mix(in srgb, var(--wazen-danger) 80%, var(--wazen-ink));
  --bg-blue:      var(--wazen-info-bg);
  --text-on-blue: color-mix(in srgb, var(--wazen-info) 85%, var(--wazen-ink));
  --bg-gray:      var(--wazen-navy-100);
  --text-on-gray: var(--wazen-slate);
}

/* ---- Task 1.1 — الوضع الداكن (نفس القيم السابقة بدون تغيير) ----
   ❗ لازم تيجي بعد كتلة الوضع الفاتح: :root و [data-theme] ليهم نفس الأولوية،
      فالكتلة الأخيرة هي اللي بتكسب لما data-theme="dark". */
[data-theme="dark"] {
  --wz-scheme: dark;                      /* لون عناصر النظام الأصلية (القوايم، التقويم، التمرير) */

  /* ---- الأسطح ---- */
  --wz-bg:      var(--wazen-navy-900);                                                /* خلفية الصفحة */
  --wz-bg-2:    color-mix(in srgb, var(--wazen-navy-900) 82%, var(--wazen-navy-700));  /* منتصف التدرّج والشريط العلوي */
  --wz-raised:  color-mix(in srgb, var(--wazen-navy-900) 62%, var(--wazen-navy-700));  /* القوايم المنبثقة والحوارات */
  --wz-card:    color-mix(in srgb, var(--wazen-navy-900) 35%, var(--wazen-navy-700));  /* التنبيهات والتلميحات */
  --wz-field:   var(--wazen-navy-700);                                                /* الحقول */
  --wz-edge:    color-mix(in srgb, var(--wazen-navy-700) 55%, var(--wazen-navy-500));  /* الحدود القوية وشريط التمرير */
  --wz-glow:    var(--wazen-navy-700);      /* الإضاءة الخفيفة في خلفية الصفحة */
  --wz-overlay: var(--wazen-white);         /* طبقة الأسطح الشفافة والحدود الخفيفة */
  --wz-shadow:  var(--wazen-navy-900);      /* لون الظلال */
  --wz-glass:       color-mix(in srgb, var(--wazen-white) 4%, transparent);   /* سطح البطاقات والحقول */
  --wz-glass-2:     color-mix(in srgb, var(--wazen-white) 6%, transparent);   /* الأزرار الثانوية */
  --wz-glass-hover: color-mix(in srgb, var(--wazen-white) 10%, transparent);  /* تحويم الأزرار الثانوية */
  --wz-line:        color-mix(in srgb, var(--wazen-white) 8%, transparent);   /* الحدود والفواصل */
  --wz-line-strong: color-mix(in srgb, var(--wazen-white) 13%, transparent);
  --wz-page-a:      var(--wz-bg);          /* تدرّج خلفية الصفحة */
  --wz-page-b:      var(--wz-bg-2);
  --wz-navbar-bg:   var(--wz-bg-2);   /* معتم: التمويه اتشال عشان سرعة الجوال */
  --wz-navbar-line: color-mix(in srgb, var(--wazen-gold-500) 18%, transparent);
  --wz-thead-bg:    color-mix(in srgb, var(--wz-bg-2) 90%, transparent);
  --wz-navbar-text:  var(--wz-text-dim);
  --wz-navbar-hover: var(--wz-accent-3);
  --wz-navbar-icon:  var(--wz-text-dim);

  /* ---- النصوص ---- */
  --wz-heading:   var(--wazen-white);
  --wz-text:      var(--wazen-navy-100);
  --wz-text-dim:  color-mix(in srgb, var(--wazen-navy-300) 55%, var(--wazen-navy-100));
  --wz-text-mute: var(--wazen-navy-300);
  --wz-info-text: var(--wazen-info-bg);

  /* ---- لون الإبراز ---- */
  --wz-accent:      var(--wazen-gold-500);
  --wz-accent-2:    color-mix(in srgb, var(--wazen-gold-500) 70%, var(--wazen-gold-300));
  --wz-accent-3:    var(--wazen-gold-300);
  --wz-accent-soft: color-mix(in srgb, var(--wazen-gold-500) 14%, transparent);
  --wz-on-accent:   var(--wazen-navy-900);

  /* ---- الشريط الجانبي (عائلة مستقلة: في التيمات الفاتحة بيفضل ملوّن) ---- */
  --wz-side-bg:          color-mix(in srgb, var(--wazen-navy-900) 72%, transparent);
  --wz-side-line:        color-mix(in srgb, var(--wazen-white) 6%, transparent);
  --wz-side-divider:     color-mix(in srgb, var(--wazen-gold-500) 18%, transparent);
  --wz-side-text:        var(--wz-text);
  --wz-side-text-dim:    var(--wz-text-dim);
  --wz-side-text-mute:   var(--wz-text-mute);
  --wz-side-icon:        var(--wz-accent-2);
  --wz-side-hover:       color-mix(in srgb, var(--wazen-white) 5%, transparent);
  --wz-side-active-bg:   color-mix(in srgb, var(--wazen-gold-500) 12%, transparent);
  --wz-side-active-line: color-mix(in srgb, var(--wazen-gold-500) 50%, transparent);
  --wz-side-active-text: var(--wz-accent-3);

  /* لوحة الفلاتر الجانبية في شاشات القوائم (مش الشريط اللي فيه الشعار) */
  --wz-panel-bg: color-mix(in srgb, var(--wazen-navy-900) 72%, transparent);

  /* ---- الصفحة الرئيسية ---- */
  --wz-brand-1: var(--wazen-gold-100);
  --wz-brand-2: var(--wazen-gold-500);
  --wz-brand-3: var(--wazen-gold-700);
  --wz-watermark-opacity: 0.10;
}

/* ---- Task 1.3 — مظهر اليوم الوطني السعودي ----
   مستوحى من العلم (أخضر وأبيض) من غير نسخه حرفيًا: الشريط العلوي أخضر زمردي
   متدرّج، والشريط الجانبي أخضر يذوب في الكحلي، والصفحات بيضا بلمسة خضرا
   خفيفة. الذهبي للإبراز الصغير بس. كل القيم من لوحة وازن (Phase 0) — الأخضر
   الزمردي هو أقرب درجة في اللوحة لأخضر العلم. */
[data-theme="national"] {
  --wz-scheme: light;

  --wz-bg:      color-mix(in srgb, var(--wazen-emerald-100) 35%, var(--wazen-white));
  --wz-bg-2:    color-mix(in srgb, var(--wazen-emerald-100) 35%, var(--wazen-white));
  --wz-raised:  var(--wazen-white);
  --wz-card:    var(--wazen-white);
  --wz-field:   var(--wazen-white);
  --wz-edge:    color-mix(in srgb, var(--wazen-emerald-300) 45%, var(--wazen-border));
  --wz-glow:    var(--wazen-emerald-100);
  --wz-overlay: var(--wazen-emerald-900);
  --wz-shadow:  color-mix(in srgb, var(--wazen-emerald-900) 26%, transparent);
  --wz-glass:       var(--wazen-white);
  --wz-glass-2:     var(--wazen-white);
  --wz-glass-hover: var(--wazen-emerald-100);
  --wz-line:        color-mix(in srgb, var(--wazen-emerald-300) 30%, var(--wazen-border));
  --wz-line-strong: color-mix(in srgb, var(--wazen-emerald-300) 55%, var(--wazen-border));
  --wz-page-a:      var(--wazen-white);
  --wz-page-b:      color-mix(in srgb, var(--wazen-emerald-100) 70%, var(--wazen-white));
  --wz-navbar-bg:   linear-gradient(90deg, var(--wazen-emerald-900) 0%, var(--wazen-emerald-700) 100%);
  --wz-navbar-line: color-mix(in srgb, var(--wazen-white) 30%, transparent);
  --wz-thead-bg:    var(--wazen-emerald-100);
  --wz-navbar-text:  color-mix(in srgb, var(--wazen-white) 92%, var(--wazen-emerald-100));
  --wz-navbar-hover: var(--wazen-gold-300);
  --wz-navbar-icon:  var(--wazen-white);

  --wz-heading:   var(--wazen-emerald-900);
  --wz-text:      var(--wazen-ink);
  --wz-text-dim:  var(--wazen-slate);
  --wz-text-mute: color-mix(in srgb, var(--wazen-slate) 60%, var(--wazen-muted));
  --wz-info-text: var(--wazen-info);

  --wz-accent:      var(--wazen-emerald-700);
  --wz-accent-2:    var(--wazen-emerald-500);
  --wz-accent-3:    var(--wazen-emerald-700);
  --wz-accent-soft: var(--wazen-emerald-100);
  --wz-on-accent:   var(--wazen-white);

  /* قماش العلم: الحافة اللي ناحية المحتوى (الشمال) أفتح، والعمق أغمق */
  --wz-side-bg:          linear-gradient(90deg, var(--wazen-emerald-700) 0%, color-mix(in srgb, var(--wazen-emerald-700) 45%, var(--wazen-emerald-900)) 55%, var(--wazen-emerald-900) 100%);
  --wz-side-extra:       150px;   /* مسافة إضافية للمحتوى عشان الحافة المتموجة ولفة الشريط */
  --wz-side-line:        transparent;
  --wz-side-divider:     color-mix(in srgb, var(--wazen-gold-500) 32%, transparent);
  --wz-side-text:        var(--wazen-white);
  --wz-side-text-dim:    color-mix(in srgb, var(--wazen-emerald-100) 85%, var(--wazen-white));
  --wz-side-text-mute:   var(--wazen-emerald-300);
  --wz-side-icon:        var(--wazen-gold-500);
  --wz-side-hover:       color-mix(in srgb, var(--wazen-white) 9%, transparent);
  --wz-side-active-bg:   color-mix(in srgb, var(--wazen-white) 13%, transparent);
  --wz-side-active-line: var(--wazen-gold-500);
  --wz-side-active-text: var(--wazen-white);
  --wz-panel-bg:         transparent;

  --wz-brand-1: var(--wazen-emerald-500);
  --wz-brand-2: var(--wazen-emerald-700);
  --wz-brand-3: var(--wazen-emerald-900);
  --wz-watermark-opacity: 0.06;
}

/* ---- ربط متغيرات Frappe بالطبقة الدلالية (واحد لكل التيمات) ---- */
:root,
[data-theme="light"],
[data-theme="dark"],
[data-theme="national"] {
  --bg-color:              var(--wz-bg);
  --fg-color:              var(--wz-raised);
  --fg-hover-color:        var(--wz-card);
  --card-bg:               var(--wz-raised);
  --subtle-fg:             var(--wz-card);
  --subtle-accent:         var(--wz-card);

  --control-bg:            var(--wz-field);
  --control-bg-on-gray:    var(--wz-field);
  --disabled-control-bg:   var(--wz-card);
  --input-disabled-bg:     var(--wz-card);
  --awesomplete-hover-bg:  var(--wz-field);

  --text-color:            var(--wz-text);
  --text-light:            var(--wz-text-dim);
  --text-muted:            var(--wz-text-dim);
  --heading-color:         var(--wz-heading);
  /* ❗ فرابي بيستخدمه كلون «النص القوي» (مثلًا الرابط وقت التحويم) — مش خلفية.
     كان مربوط بخلفية الصفحة، فالرابط كان بيختفي لما الماوس يقف عليه. */
  --invert-neutral:        var(--wz-heading);

  --border-color:          var(--wz-line);
  --dark-border-color:     var(--wz-line-strong);
  --gray-100: var(--wz-card);
  --gray-200: var(--wz-field);
  --gray-300: var(--wz-edge);

  --navbar-bg:             var(--wz-bg-2);
  --sidebar-select-color:  var(--wz-accent-soft);

  --primary:               var(--wz-accent);
  --primary-color:         var(--wz-accent);
  --brand-color:           var(--wz-accent);
  --btn-primary:           var(--wz-accent);
  --text-on-primary:       var(--wz-on-accent);

  --shadow-base:  0 1px 3px color-mix(in srgb, var(--wz-shadow) 45%, transparent);
  --shadow-md:    0 4px 14px color-mix(in srgb, var(--wz-shadow) 50%, transparent);
  --card-shadow:  0 4px 20px color-mix(in srgb, var(--wz-shadow) 35%, transparent);

  --scrollbar-thumb-color: var(--wz-edge);
  --scrollbar-track-color: var(--wz-bg-2);
}

/* -----------------------------------------------------------------------------
   الخلفية العامة — نفس خلفية الصفحة الرئيسية على كل الصفحات الداخلية
   التدرّج القُطري بيدي نفس إحساس العمق اللي في التصميم

   ❗ الشكل زي ما هو، بس طريقة الرسم اتغيّرت بالكامل عشان الجوال:
      كانت الخلفية متحطّة على 5 عناصر متداخلة بـ‎background-attachment: fixed‎.
      ‎fixed‎ معناها إن المتصفح لازم يعيد رسم الخلفية كلها مع كل إطار أثناء
      التمرير — ومضروبة في 5 طبقات. ده أشهر سبب للّاج على الهواتف، والصفحة
      كانت بتتهنّج فعلًا عند التمرير.

      الحل: طبقة واحدة ثابتة (body::before) المتصفح بيرفعها لكرت الشاشة
      ويرسمها مرة واحدة، والتمرير بعدها بيبقى تحريك طبقة جاهزة — صفر إعادة
      رسم. والعناصر الداخلية بقت شفافة فمفيش تكرار.
----------------------------------------------------------------------------- */
body {
  background: var(--wz-page-a);
  color: var(--wz-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      1200px 700px at 78% 18%,
      color-mix(in srgb, var(--wz-glow) 55%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(160deg, var(--wz-page-a) 0%, var(--wz-page-b) 55%, var(--wz-page-a) 100%);
}

.page-container,
.main-section,
.layout-main,
.desk-page {
  background: transparent;
  color: var(--wz-text);
}

/* -----------------------------------------------------------------------------
   الشريط العلوي
----------------------------------------------------------------------------- */
.navbar,
header.navbar {
  background: var(--wz-navbar-bg) !important;
  border-bottom: 1px solid var(--wz-navbar-line) !important;
  box-shadow: 0 2px 18px color-mix(in srgb, var(--wz-shadow) 35%, transparent);
}
/* ❗ كان هنا ‎backdrop-filter: blur(14px)‎ للشكل الزجاجي، واتشال:
      المظهر الفاتح والوطني خلفية الشريط فيهم معتمة تمامًا — يعني التمويه
      ما كانش بيبان أصلًا، وكان بيكلّف إعادة رسم لكل إطار وراه على الجوال.
      المظهر الداكن بقى معتم كمان (شوف متغير ‎--wz-navbar-bg‎).
      ملحوظة: التكديس مش هيتأثر — الشريط عنده ‎position: relative‎ و
      ‎z-index: 1030‎ تحت، وده بيعمل سياق تكديس لوحده. */

.navbar .navbar-brand img,
.navbar .app-logo {
  height: 40px !important;
  width: auto;
  max-width: none;
}

/* شعار شاشة الدخول أكبر وأوضح */
.page-card .page-card-head img,
.for-login .app-logo,
img.app-logo {
  height: 64px !important;
  width: auto;
  margin-bottom: 6px;
}

/* ❗ :not(.dropdown-menu a) و :not(.awesomplete a): روابط القوايم المنسدلة (الحساب،
   الإشعارات) ونتايج البحث على سطح أبيض منفصل. لو اتلوّنت بلون نص الشريط العلوي
   بتختفي في اليوم الوطني — وده اللي حصل فعلًا لنتايج البحث. */
.navbar a:not(.dropdown-menu a):not(.awesomplete a),
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: var(--wz-navbar-text) !important;
}
.navbar a:not(.dropdown-menu a):not(.awesomplete a):hover,
.navbar .nav-link:hover {
  color: var(--wz-navbar-hover) !important;
}
.navbar > .container .icon:not(.dropdown-menu .icon):not(.awesomplete .icon) {
  --icon-stroke: var(--wz-navbar-icon);
}
/* نتايج البحث نفسها: لون نص الصفحة العادي في كل المظاهر */
.navbar .awesomplete > ul > li,
.navbar .awesomplete > ul > li a,
.navbar .awesomplete > ul > li span {
  color: var(--wz-text) !important;
}
.navbar .awesomplete > ul > li[aria-selected="true"],
.navbar .awesomplete > ul > li[aria-selected="true"] a,
.navbar .awesomplete > ul > li:hover a {
  color: var(--wz-accent-3) !important;
}

/* شريط البحث */
#navbar-search,
.search-bar input,
.awesomplete input {
  background: var(--wz-glass) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 999px !important;
  color: var(--wz-text) !important;
}
#navbar-search:focus,
.search-bar input:focus {
  border-color: var(--wz-accent) !important;
  box-shadow: 0 0 0 3px var(--wz-accent-soft) !important;
}

/* -----------------------------------------------------------------------------
   الشريط الجانبي
----------------------------------------------------------------------------- */
/* الشريط الجانبي اللي فيه قايمة الأقسام (مساحات العمل) */
.layout-side-section:has(.desk-sidebar),
.desk-sidebar {
  background: var(--wz-side-bg);
  border-inline-end: 1px solid var(--wz-side-line);
}
/* لوحة الفلاتر الجانبية في شاشات القوائم والنماذج */
.layout-side-section:not(:has(.desk-sidebar)),
.sidebar-menu,
.list-sidebar {
  background: var(--wz-panel-bg);
  border-inline-end: 1px solid var(--wz-side-line);
}

.desk-sidebar .desk-sidebar-item,
.desk-sidebar .desk-sidebar-item a,
.desk-sidebar .sidebar-item-label {
  color: var(--wz-side-text-dim) !important;
}

.desk-sidebar .desk-sidebar-item,
.sidebar-item-container .desk-sidebar-item {
  border-radius: 12px;
  margin-block: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

.desk-sidebar .desk-sidebar-item:hover {
  background: var(--wz-side-hover);
}
.desk-sidebar .desk-sidebar-item:hover a,
.desk-sidebar .desk-sidebar-item:hover .sidebar-item-label {
  color: var(--wz-side-text) !important;
}

/* العنصر النشط — إطار ذهبي زي التصميم */
.desk-sidebar .desk-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.selected {
  background: var(--wz-side-active-bg) !important;
  border: 1px solid var(--wz-side-active-line);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--wz-side-active-line) 16%, transparent);
}
.desk-sidebar .desk-sidebar-item.selected a,
.desk-sidebar .desk-sidebar-item.selected span,
.desk-sidebar .standard-sidebar-item.selected a {
  color: var(--wz-side-active-text) !important;
  font-weight: 600;
}

/* ❗ لون الشريط الكحلي للشريط الكحلي بس — عناوين لوحة الفلاتر في شاشات
   القوائم على خلفية فاتحة، وكانت بتاخد اللون الفاتح ده (تباين 3.8). */
.sidebar-label,
.standard-sidebar-label {
  color: var(--wz-text-mute);
}
.desk-sidebar .sidebar-label,
.desk-sidebar .standard-sidebar-label {
  color: var(--wz-side-text-mute);
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
   البطاقات والاختصارات — الشكل الزجاجي اللي في التصميم
----------------------------------------------------------------------------- */
.widget,
.card,
.frappe-card,
.form-section,
.section-body,
.dashboard-widget-box,
.number-card,
.shortcut-widget-box,
.links-widget-box,
.onboarding-widget-box {
  background: var(--wz-glass) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--card-shadow);
}

/* ❗ backdrop-filter اتشال من القاعدة اللي فوق عن قصد.
   الخاصية دي بتعمل "سياق تكديس" جديد، يعني أي عنصر منسدل جوه القسم
   بيتحبس داخله مهما كان z-index بتاعه — فالقسم اللي بعده بيترسم فوقه
   والقايمة تختفي وراه. وده كان بيحصل فعلًا في حقول الربط.
   بنسيبها على الشريط العلوي وكروت الصفحة الرئيسية بس — أماكن مفيهاش
   قوايم منسدلة. */

.widget:hover,
.shortcut-widget-box:hover,
.links-widget-box:hover {
  border-color: color-mix(in srgb, var(--wz-accent) 40%, transparent) !important;
  transform: translateY(-2px);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.widget-head .widget-title,
.card-title,
.section-head {
  color: var(--wz-text) !important;
  font-weight: 600;
}

/* أيقونات الاختصارات ذهبية زي التصميم */
.widget .widget-head .widget-label .icon,
.shortcut-widget-box .indicator-pill,
.widget-head svg {
  color: var(--wz-accent-2) !important;
  stroke: var(--wz-accent-2) !important;
}
.sidebar-item-icon svg {
  color: var(--wz-side-icon) !important;
  stroke: var(--wz-side-icon) !important;
}
/* ❗ أيقونات فرابي مرسومة من ملف رموز مشترك، والخط جواه مكتوب
   stroke="var(--icon-stroke)" — فتلوين الـ svg نفسه مش بيوصل للرسمة.
   على خلفية الشريط الكحلي كانت بتطلع بلون فرابي الغامق (#383838) ومختفية. */
.desk-sidebar .icon,
.wz-side .icon {
  --icon-stroke: var(--wz-side-icon);
}

/* -----------------------------------------------------------------------------
   الأزرار
----------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: linear-gradient(135deg, var(--wz-accent), var(--wz-accent-2)) !important;
  border: none !important;
  color: var(--wz-on-accent) !important;
  font-weight: 600;
  border-radius: 10px;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--wz-accent-2), var(--wz-accent-3)) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--wz-accent) 32%, transparent);
}

.btn-default,
.btn-secondary {
  background: var(--wz-glass-2) !important;
  border: 1px solid var(--wz-line-strong) !important;
  color: var(--wz-text) !important;
  border-radius: 10px;
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--wz-glass-hover) !important;
  border-color: color-mix(in srgb, var(--wz-accent) 40%, transparent) !important;
}

/* -----------------------------------------------------------------------------
   الحقول والجداول
----------------------------------------------------------------------------- */
.form-control,
.input-with-feedback,
select.form-control,
textarea.form-control {
  background: var(--wz-glass) !important;
  border: 1px solid var(--wz-line) !important;
  color: var(--wz-text) !important;
  border-radius: 10px;
}
.form-control:focus {
  border-color: var(--wz-accent) !important;
  box-shadow: 0 0 0 3px var(--wz-accent-soft) !important;
}
.form-control::placeholder {
  color: var(--wz-text-mute) !important;
}

.list-row-head,
.list-row-container .list-row-head,
thead th,
.dt-header {
  background: var(--wz-thead-bg) !important;
  color: var(--wz-text-dim) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--wz-accent) 20%, transparent) !important;
}

.list-row:hover,
tbody tr:hover,
.dt-row:hover {
  background: color-mix(in srgb, var(--wz-accent) 6%, transparent) !important;
}

.datatable,
.dt-scrollable,
.dt-cell {
  background: transparent !important;
  color: var(--wz-text) !important;
}

/* ❗ خانات الهيدر لازم تتلوّن هي كمان، مش الحاوية بس.
   الأخضر كان مرسوم على `.dt-header` لوحدها، وعرضها = عرض الشاشة. والهيدر
   ده بيتزحلق بـ`translateX(-scrollLeft)` من جافاسكربت مع التمرير الأفقي،
   فكانت الحاوية الملوّنة تمشي والخانات الشفافة (من القاعدة اللي فوق)
   تكشف خلفية الصفحة — الشريط الأخضر يبان مقصوص. الخانات هي اللي بتمدّ
   على عرض التمرير كله، فتلوينها هو اللي بيسدّ الفراغ. */
.datatable .dt-header .dt-cell--header,
.datatable .dt-header .dt-cell--header .dt-cell__content {
  background: var(--wz-thead-bg) !important;
}

/* =============================================================================
   الهيدر وصف الفلترة لازم يمتدّوا على عرض التمرير كله

   ❗ ده سبب «الشريط مقصوص» الحقيقي، وهو **مقاس** مش لون. قياس على دفتر
      الأستاذ العام بعرض 1600px:
          .dt-header       = 1511px
          .dt-row-filter   = 1511px
          عرض تمرير المحتوى = 2049px
      يعني 538px المحتوى بيمتد فيهم والهيدر لأ. أول ما تمرّر أفقيًا،
      الجزء اللي بعد 1511 بيطلع بلا هيدر وبلا تظليل.
      بيحصل في **أي** تقرير أعمدته أعرض من الشاشة، مش دفتر الأستاذ بس.

   `min-width: 100%` مهم مع `max-content`: لو الأعمدة أضيق من الشاشة
   (تقرير عمودين مثلًا) الهيدر مايقصرش ويسيب فراغ على جنب.
============================================================================= */
.datatable .dt-header,
.datatable .dt-header .dt-row {
  width: max-content !important;
  min-width: 100% !important;
}

/* =============================================================================
   صف الفلترة في جداول التقارير

   ❗ ده **مش** صف فاضي — كل خانة فيه حقل بيفلتر عمودها وإنت بتكتب. المشكلة
      إنه كان *باين* فاضي: حقول بلا نص ولا أيقونة ولا أي إشارة إنها تتكتب.
      فبدل ما نخفيه ونخسر الفلترة، بنخليه يقول على نفسه.
============================================================================= */
/* ❗ التظليل على **الخانات** مش على الصف — نفس الفخ بتاع الهيدر فوق.
   الصف عرضه = عرض الحاوية، والخانات هي اللي بتمتد على عرض التمرير. */
.datatable .dt-row-filter .dt-cell,
.datatable .dt-row[data-is-filter] .dt-cell {
  background: color-mix(in srgb, var(--wz-accent) 4%, transparent) !important;
}
.datatable .dt-filter {
  background-color: var(--wz-raised) !important;
  border: 1px solid color-mix(in srgb, var(--wz-accent) 18%, transparent) !important;
  border-radius: 6px !important;
  /* أيقونة بحث مضمّنة — مافيش ملف خارجي عشان ما نزوّدش طلب */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2387938F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  /* ❗ خصائص فيزيائية مش منطقية هنا عن قصد. الأيقونة متحطّة بـ`right`
     (فيزيائي)، وفي RTL الـ`padding-inline-end` بيروح **شمال** — يعني
     المساحة كانت بتتحجز في الناحية المعاكسة للأيقونة والنص يركب عليها.
     لازم الاتنين يتكلموا نفس اللغة. */
  background-position: right 8px center !important;
  padding-right: 26px !important;
  padding-left: 8px !important;
}
[dir="ltr"] .datatable .dt-filter {
  background-position: left 8px center !important;
  padding-left: 26px !important;
  padding-right: 8px !important;
}
.datatable .dt-filter::placeholder {
  color: var(--wz-text-mute);
  opacity: 1;
  font-size: 11px;
}
.datatable .dt-filter:focus {
  border-color: color-mix(in srgb, var(--wz-accent) 55%, transparent) !important;
  background-image: none !important;
}

/* -----------------------------------------------------------------------------
   القوائم المنسدلة والحوارات
----------------------------------------------------------------------------- */
.dropdown-menu,
.modal-content,
.popover {
  background: var(--wz-raised) !important;
  border: 1px solid color-mix(in srgb, var(--wz-accent) 22%, transparent) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--wz-shadow) 55%, transparent) !important;
}
.dropdown-item {
  color: var(--wz-text-dim) !important;
}
.dropdown-item:hover {
  background: var(--wz-accent-soft) !important;
  color: var(--wz-accent-3) !important;
}

/* -----------------------------------------------------------------------------
   صفحة الدخول

   ❗ الغلطة اللي كانت: كنا بنلوّن تلات عناصر متداخلة كـ"بطاقة" —
      section.for-login (الحاوية الكبيرة) و .login-content و .page-card
      (الكارت الجوّاني) — فطلع مربع جوه مربع.
      وفرابي مدّي للكارت الجوّاني `margin: 0 auto` يعني مفيش هامش رأسي
      خالص، فكان لازق في قاع الحاوية تمامًا.

   الحل: الحاوية بقت هي اللوحة الوحيدة — عرض محدود، متوسّطة، وحشو مريح
   من كل جهة. والكارت الجوّاني بقى سطح خفيف جوّاها مش بطاقة تانية.
----------------------------------------------------------------------------- */

/* بطاقة عامة — صفحات الرسائل (404، تأكيد الإيميل، إلخ) */
.page-card {
  background: color-mix(in srgb, var(--wz-raised) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--wz-accent) 25%, transparent);
  border-radius: 18px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--wz-shadow) 60%, transparent);
}
.page-card .page-card-head .indicator {
  color: var(--wz-accent-2) !important;
}

/* ---- اللوحة الخارجية ---- */
section.for-login,
section.for-signup,
section.for-forgot,
section.for-email-login,
section.for-login-with-email-link {
  display: block;
  max-width: 470px;
  margin: 46px auto 64px !important;
  padding: 6px 30px 34px !important;
  background: color-mix(in srgb, var(--wz-raised) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--wz-accent) 25%, transparent) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--wz-shadow) 60%, transparent) !important;
}

/* الشعار والعنوان — مسافة متوازنة فوق وتحت بدل max(5vh,30px) */
section[class^="for-"] .page-card-head,
section[class*=" for-"] .page-card-head {
  padding: 30px 0 22px !important;
}
section[class*="for-"] .page-card-head h4 {
  margin-top: 14px !important;
  color: var(--wz-heading) !important;
}

/* ---- السطح الجوّاني ---- */
.for-login .page-card,
.for-signup .page-card,
.for-forgot .page-card,
.for-email-login .page-card,
.for-login-with-email-link .page-card {
  background: var(--wz-glass) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 26px 22px 24px !important;
}

/* الفورم ياخد عرض الكارت كله — فرابي بيقصّه على 320px فبيبان مزنوق */
.for-login .page-card form,
.for-signup .page-card form,
.for-forgot .page-card form,
.for-email-login .page-card form,
.for-login-with-email-link .page-card form {
  max-width: 100% !important;
}

/* مسافات متساوية بين الحقول والزراير */
.for-login .page-card form .form-group,
.for-forgot .page-card form .form-group,
.for-email-login .page-card form .form-group {
  margin-bottom: 14px !important;
}
.for-login .page-card .page-card-actions,
.for-forgot .page-card .page-card-actions,
.for-email-login .page-card .page-card-actions {
  margin-top: 22px !important;
}
.for-login .page-card .page-card-body .forgot-password-message {
  margin: 10px 0 0 !important;
  text-align: start !important;
}
.for-login .page-card .btn-login,
.for-login .page-card .btn-login-option {
  height: 36px;
}

/* البريد الإلكتروني دايمًا من الشمال لليمين حتى في الواجهة العربية —
   الحقل نوعه text مش email فمكانش داخل في قاعدة الاتجاه العامة */
#login_email,
.email-field input {
  direction: ltr !important;
  text-align: left !important;
}

/* الأيقونة جوه الحقل: فرابي حاجز 35px لجنب الإيميل بس نسي جنب كلمة المرور،
   فكلمة "تبين" كانت بتركب على النجوم لما الكلمة تطول */
.password-field input {
  padding-left: 52px !important;
}
.for-login .page-card .page-card-body .toggle-password {
  color: var(--wz-accent-3) !important;
}

/* -----------------------------------------------------------------------------
   دعم اليمين لليسار
----------------------------------------------------------------------------- */
[dir="rtl"] .desk-sidebar .desk-sidebar-item,
[dir="rtl"] .list-row {
  text-align: right;
}

/* -----------------------------------------------------------------------------
   إخفاء أي أثر متبقٍّ لـ Frappe / ERPNext
   (بنخفي بالـ CSS كمان مش بس بالإعدادات — بعض العناصر بتترسم من الجافاسكربت)
----------------------------------------------------------------------------- */
.navbar .dropdown-help [href*="frappe.io"],
.navbar .dropdown-help [href*="discuss.frappe"],
.navbar .dropdown-help [href*="docs.erpnext.com"],
.navbar .dropdown-help [href*="github.com/frappe"],
a[href*="frappe.io/support"],
a[href*="frappe.io/school"],
.frappe-branding,
.powered-by-frappe,
footer .powered {
  display: none !important;
}

/* شريط التمرير */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wz-accent);
}

/* -----------------------------------------------------------------------------
   القوايم المنسدلة
   ❗ عناصر <option> بيرسمها المتصفح/النظام بشكل منفصل عن <select>.
   لو ظبطنا الـ select غامق ونسينا الـ option، القايمة بتطلع بيضا
   والنص فاتح عليها = مش باين خالص.
----------------------------------------------------------------------------- */
select.form-control option,
select option,
optgroup,
select optgroup {
  background-color: var(--wz-raised) !important;
  color: var(--wz-text) !important;
}
select option:checked,
select option:hover {
  background-color: var(--wz-field) !important;
  color: var(--wz-accent-3) !important;
}

/* قوايم البحث والحقول المرتبطة (awesomplete) */
.awesomplete > ul,
.awesomplete > ul[hidden],
ul.dropdown-menu.list-group {
  background: var(--wz-raised) !important;
  border: 1px solid color-mix(in srgb, var(--wz-accent) 25%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--wz-shadow) 60%, transparent) !important;
}
.awesomplete > ul > li,
.awesomplete > ul > li > * {
  background: transparent !important;
  color: var(--wz-text) !important;
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"],
.awesomplete mark {
  background: color-mix(in srgb, var(--wz-accent) 16%, transparent) !important;
  color: var(--wz-accent-3) !important;
}
.awesomplete > ul::before { background: var(--wz-raised) !important; }

/* قوايم اختيار متعددة ومربعات البحث */
.multiselect-list,
.selectable-row,
.datepicker,
.datepicker--cell {
  background: var(--wz-raised) !important;
  color: var(--wz-text) !important;
}
.datepicker--cell.-current- { color: var(--wz-accent-3) !important; }
/* السنة جنب اسم الشهر: مكتبة التقويم بتديها #9c9c9c ثابت (تباين 2.75 على الأبيض) */
.datepicker--nav-title i { color: var(--wz-text-dim) !important; }
.datepicker--cell.-selected- { background: var(--wz-accent) !important; color: var(--wz-on-accent) !important; }

/* -----------------------------------------------------------------------------
   القوايم المنسدلة الأصلية (native) — الحل الحقيقي
   ❗ كروم على ويندوز بيرسم قايمة <select> المنبثقة بمحرّك النظام نفسه،
      مش بالـ CSS. عشان كده `option { background }` بيتجاهله وبتفضل بيضا،
      بينما لون النص بيتطبق — فيطلع نص فاتح على خلفية بيضا = مش باين.
      color-scheme هي الطريقة المعتمدة عشان نقول للمتصفح يرسم عناصر
      النظام (القوايم، أشرطة التمرير، التقويم) بالوضع الغامق.
----------------------------------------------------------------------------- */
:root {
  color-scheme: var(--wz-scheme);
}

select,
select.form-control,
input,
textarea,
.form-control,
.datepicker {
  color-scheme: var(--wz-scheme);
}

/* -----------------------------------------------------------------------------
   رسائل التنبيه (Toast) والإشعارات
   ❗ Frappe بيرسمها بخلفية فاتحة ثابتة. مع تيمة غامقة النص بيبقى فاتح
      على أبيض = مش باين خالص. لازم نغمّق الخلفية بنفسنا.
----------------------------------------------------------------------------- */
.desk-alert,
.desk-alert.blue,
.desk-alert.orange,
.desk-alert.red,
.desk-alert.green,
.desk-alert.yellow,
#alert-container .desk-alert,
.alert,
.alert-dismissable,
.toast,
.notification-body {
  background: var(--wz-card) !important;
  border: 1px solid color-mix(in srgb, var(--wz-accent) 35%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--wz-shadow) 55%, transparent) !important;
  color: var(--wz-text) !important;
}

.desk-alert .alert-title,
.desk-alert .alert-message,
.desk-alert .alert-body,
.desk-alert *,
.alert *,
.toast * {
  color: var(--wz-text) !important;
}

/* شريط اللون على جنب التنبيه — بيفرّق بين نجاح/تحذير/خطأ */
.desk-alert.green { border-inline-start: 4px solid var(--wazen-success) !important; }
.desk-alert.orange,
.desk-alert.yellow { border-inline-start: 4px solid var(--wazen-warning) !important; }
.desk-alert.red { border-inline-start: 4px solid var(--wazen-danger) !important; }
.desk-alert.blue { border-inline-start: 4px solid var(--wazen-info) !important; }

.desk-alert .close,
.alert .close,
.toast .close {
  color: var(--wz-text-dim) !important;
  opacity: 0.9;
}
.desk-alert .close:hover { color: var(--wz-accent-3) !important; }

/* شريط الإرشادات اللي فوق (بيبقى أزرق فاتح افتراضيًا) */
.form-message,
.form-message.blue,
.page-form .form-message,
.indicator-pill-message {
  background: color-mix(in srgb, var(--wazen-info) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--wazen-info) 35%, transparent) !important;
  color: var(--wz-info-text) !important;
  border-radius: 10px !important;
}

/* تلميحات الأدوات */
.tooltip-inner,
.popover-body {
  background: var(--wz-card) !important;
  color: var(--wz-text) !important;
  border: 1px solid color-mix(in srgb, var(--wz-accent) 30%, transparent) !important;
}

/* =============================================================================
   صفحات البوابة (portal) — /index و /me والصفحات العامة
   دي طبقة واجهة مختلفة تمامًا عن النظام الداخلي (desk) وليها قواعدها.

   ❗ المشكلة اللي كانت: Frappe بيحط lang="ar" بس مش بيحط dir="rtl" على
      صفحات البوابة. النتيجة: الاتجاه ltr والمحاذاة right = تنسيق مقلوب،
      القوايم على الشمال والنص متلخبط.
============================================================================= */

/* ---- إجبار الاتجاه من اليمين لليسار ---- */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] .container,
html[lang="ar"] .page_content,
html[lang="ar"] .page-content,
html[lang="ar"] .web-page-content {
  direction: rtl !important;
  text-align: right !important;
}

/* العناصر اللي لازم تفضل من الشمال لليمين (أرقام، أكواد، روابط) */
html[lang="ar"] .ltr,
html[lang="ar"] code,
html[lang="ar"] pre,
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"] {
  direction: ltr !important;
  text-align: left !important;
}

/* ---- ألوان محتوى البوابة ---- */
.page_content,
.page-content,
.web-page-content,
.website-content,
main,
article,
section > .container {
  background: transparent !important;
  color: var(--wz-text) !important;
}

.page_content h1, .page_content h2, .page_content h3,
.page_content h4, .page_content h5, .page_content h6,
.page-header, .page-title, .web-page-header,
main h1, main h2, main h3, main h4 {
  color: var(--wz-heading) !important;
}

.page_content p,
.page_content li,
.page_content span,
.page_content label,
.page_content div,
main p, main li, main span, main label {
  color: var(--wz-text) !important;
}

.page_content a,
main a,
.web-list-item a {
  color: var(--wz-accent-3) !important;
}
.page_content a:hover,
main a:hover {
  color: var(--wz-accent-2) !important;
}

.text-muted,
.text-secondary,
small.text-muted {
  color: var(--wz-text-dim) !important;
}

/* بطاقات وقوائم البوابة */
.web-list-item,
.list-group-item,
.card,
.portal-card,
.section-block {
  background: var(--wz-glass) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 14px !important;
  color: var(--wz-text) !important;
}
.web-list-item:hover,
.list-group-item:hover {
  background: color-mix(in srgb, var(--wz-accent) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--wz-accent) 35%, transparent) !important;
}

/* قائمة روابط الحساب على الجنب */
.sidebar-menu li a,
.portal-sidebar a,
.doc-sidebar a {
  color: var(--wz-text) !important;
}
.sidebar-menu li a:hover,
.portal-sidebar a:hover {
  color: var(--wz-accent-3) !important;
}

/* فوتر البوابة */
.web-footer,
.website-footer,
footer {
  background: color-mix(in srgb, var(--wz-bg) 85%, transparent) !important;
  border-top: 1px solid var(--wz-line) !important;
  color: var(--wz-text-dim) !important;
}
.web-footer a, footer a { color: var(--wz-text-dim) !important; }
.web-footer a:hover, footer a:hover { color: var(--wz-accent-3) !important; }

/* الفواصل */
hr { border-color: var(--wz-line) !important; }

/* -----------------------------------------------------------------------------
   صفحة "حسابي" وعناصر البوابة — ألوان ثابتة في كود Frappe
   ❗ العناصر دي بتيجي بـ color: rgb(23,23,23) مكتوب في CSS البوابة نفسه،
      مش من متغيرات التيمة. عشان كده تجاوزات المتغيرات مكانتش بتوصلها،
      ولازم نستهدفها بالاسم.
----------------------------------------------------------------------------- */
.my-account-header,
.my-account-name,
.my-account-item,
.item-link-text,
.my-account-api-access,
.web-sidebar .sidebar-item,
.doc-sidebar h5,
.page-content-wrapper h1,
.page-content-wrapper h2,
.page-content-wrapper h3 {
  color: var(--wz-text) !important;
}

.my-account-item-desc,
.my-account-item-description,
.web-list-item .text-muted {
  color: var(--wz-text-dim) !important;
}

.my-account-item-container,
.my-account-card,
.my-account-section {
  background: var(--wz-glass) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 14px !important;
}
.my-account-item-container:hover {
  background: color-mix(in srgb, var(--wz-accent) 8%, transparent) !important;
}

.my-account-item-container svg,
.my-account-item-container .icon,
.item-link-text + svg {
  stroke: var(--wz-accent-2) !important;
  color: var(--wz-accent-2) !important;
}

/* أي عنصر بلون شبه أسود مكتوب مباشرة في كود البوابة */
[style*="color: #171717"],
[style*="color:#171717"],
[style*="color: rgb(23, 23, 23)"] {
  color: var(--wz-text) !important;
}

/* -----------------------------------------------------------------------------
   الشعار على اليمين في الوضع العربي (كل الصفحات)

   ❗ Bootstrap بيستخدم ml-auto (هامش أيسر فيزيائي) لدفع عناصر القائمة.
      في الوضع العربي ده بيدفعها لليمين ويسيب الشعار على الشمال — عكس
      المتوقع. عشان كده بنعكس اتجاه الصف نفسه.
   ونستهدف dir="rtl" مش lang فقط: واجهة النظام الداخلي بتحط dir من غير lang.
----------------------------------------------------------------------------- */
html[dir="rtl"] .navbar > .container,
html[dir="rtl"] .navbar > .container-fluid,
html[lang="ar"] .navbar > .container,
html[lang="ar"] .navbar > .container-fluid,
[dir="rtl"] .navbar .navbar-collapse {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] .navbar-brand,
html[lang="ar"] .navbar-brand {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  order: -1;
}

/* عناصر القائمة تتدفع للشمال بدل اليمين */
html[dir="rtl"] .navbar .ml-auto,
html[lang="ar"] .navbar .ml-auto,
html[dir="rtl"] .navbar .navbar-nav.ml-auto {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  margin-left: 0 !important;
}

/* شريط البحث في الوسط */
html[dir="rtl"] .navbar .search-bar,
html[lang="ar"] .navbar .search-bar { margin-inline: auto !important; }

/* =============================================================================
   وازن — الصفحة الرئيسية وشاشة اختيار النشاط
============================================================================= */

/* ---- التخطيط: قائمة جانبية يمين + محتوى ---- */
/* الصفحة بتاخد عرض الشاشة كامل — Frappe بيحط حاوية بعرض محدود
   وهوامش تلقائية، فكان بيفضل فراغ بين الشريط الجانبي وحافة الشاشة. */
[data-page-route="wazen-home"] .container,
[data-page-route="wazen-home"] .page-container,
[data-page-route="wazen-home"] .layout-main-section-wrapper,
[data-page-route="wazen-home"] .layout-main-section,
[data-page-route="wazen-home"] .page-body,
.page-container[data-page-route="wazen-home"] {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wz-home {
  direction: rtl;
  display: flex;
  min-height: calc(100vh - 60px);
  width: 100%;
  margin: 0;
}

/* القائمة الجانبية — يمين */
.wz-side {
  flex: 0 0 232px;
  background: var(--wz-side-bg);
  border-inline-start: 1px solid var(--wz-side-line);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wz-side-logo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--wz-side-divider);
}
.wz-side-logo img { height: 74px; width: auto; }
.wz-side-logo span {
  color: var(--wz-side-icon);
  font-size: 11px; font-weight: 600; text-align: center; line-height: 1.5;
}

.wz-nav { display: flex; flex-direction: column; gap: 4px; }
.wz-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--wz-side-text-dim) !important;
  text-decoration: none !important;
  font-size: 15px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wz-nav-item svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--wz-side-icon); }
.wz-nav-item:hover { background: var(--wz-side-hover); color: var(--wz-side-text) !important; }
.wz-nav-item.active {
  background: var(--wz-side-active-bg);
  border-color: var(--wz-side-active-line);
  color: var(--wz-side-active-text) !important;
  font-weight: 600;
}

/* ---- المحتوى ---- */
.wz-main {
  flex: 1 1 auto;
  position: relative;
  padding: 34px 30px 40px;
  overflow: hidden;
}

/* ❗ الشعار جوه المحتوى مش على body: كده حدوده معروفة ومبيتقصّش،
   وقبل كده كان على body::before فبيتقص لأن ارتفاع body مش ارتفاع الشاشة. */
.wz-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 22% center;
  background-size: contain;
  opacity: var(--wz-watermark-opacity);
  pointer-events: none;
  z-index: 0;
}
.wz-grid, .wz-brand { position: relative; z-index: 1; }

/* ---- شبكة الكروت ---- */
/* ❗ flex مش grid: في الشبكة الصف الناقص بيتراص من أول عمود فبيبان
   مزاح لجنب. بالمرونة والتوسيط، الصف اللي فيه 4 كروت بيتوسّط تحت الصف
   اللي فيه 5 — الشكل الهرمي المطلوب. */
.wz-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 20px;
  max-width: 1120px;
  margin-inline: auto;
}
.wz-card { flex: 0 0 196px; width: 196px; }

@media (max-width: 1500px) { .wz-grid { max-width: 900px; } }
@media (max-width: 1150px) { .wz-grid { max-width: 680px; } }
@media (max-width: 820px)  {
  .wz-grid { max-width: 100%; gap: 14px; }
  .wz-card { flex: 0 0 150px; width: 150px; }
  .wz-home { flex-direction: column; }
  .wz-side { flex: none; width: 100%; }
}

.wz-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  height: 196px;
  padding: 20px 12px;
  border-radius: 18px;
  background: var(--wz-glass);
  border: 1px solid var(--wz-line);
  text-decoration: none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.wz-card:hover {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--wz-accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--wz-accent) 50%, transparent);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--wz-shadow) 45%, transparent);
}
.wz-card-icon svg { width: 52px; height: 52px; color: var(--wz-accent-2); }
.wz-card-label { color: var(--wz-text); font-size: 16px; font-weight: 600; text-align: center; }
.wz-card:hover .wz-card-label { color: var(--wz-accent-3); }

/* ---- بلوك اسم الشركة أسفل الصفحة ---- */
.wz-brand { text-align: center; margin-top: 54px; }
.wz-brand-top  { color: var(--wz-accent-2); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.wz-brand-name {
  font-size: 46px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(180deg,var(--wz-brand-1) 0%,var(--wz-brand-2) 45%,var(--wz-brand-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wz-brand-sub  { color: var(--wz-heading); font-size: 19px; font-weight: 600; margin-top: 4px; }
.wz-brand-line {
  width: 260px; height: 2px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--wz-accent-2), transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--wz-accent) 50%, transparent);
}

/* ---- شاشة اختيار النشاط ---- */
.wz-activity { direction: rtl; padding: 28px 24px 60px; min-height: 70vh; }
.wz-act-head { text-align: center; color: var(--wz-heading); font-size: 30px; font-weight: 700; margin: 42px 0 10px; }
.wz-act-sub  { text-align: center; color: var(--wz-text-dim); font-size: 15px; margin-bottom: 42px; }
.wz-act-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px; max-width: 1020px; margin-inline: auto;
}
@media (max-width: 900px) { .wz-act-grid { grid-template-columns: 1fr; } }
.wz-act-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 24px 30px; border-radius: 20px;
  background: var(--wz-glass); border: 1px solid var(--wz-line);
  cursor: pointer; text-align: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.wz-act-card:hover {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--wz-accent) 10%, transparent); border-color: color-mix(in srgb, var(--wz-accent) 55%, transparent);
}
.wz-act-icon svg { width: 64px; height: 64px; color: var(--wz-accent-2); }
.wz-act-title { color: var(--wz-heading); font-size: 21px; font-weight: 700; }
.wz-act-desc  { color: var(--wz-text-dim); font-size: 14px; line-height: 1.7; }
.wz-act-modules {
  color: var(--wz-accent-3); font-size: 12.5px; margin-top: 6px;
  padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--wz-accent) 22%, transparent); width: 100%;
}

/* =============================================================================
   الصفحات الداخلية — حشو الحواف وأيقونات الحقول

   السببين اتأكدنا منهم من ملف أنماط فرابي نفسه (النسخة العربية
   desk.bundle RTL) مش من تخمين:

   1) ‎.layout-side-section‎ عنده ‎padding-left: 30px‎ وبس.
      أداة قلب الاتجاه (rtlcss) حوّلت الحشو الأيمن لأيسر، فالشريط الجانبي
      في الوضع العربي — وهو بيقع على اليمين — فضل من غير أي حشو ناحية
      حافة الشاشة. النتيجة: مربعات الفلترة لازقة في الحافة خالص.

   2) ‎.form-control‎ حشوه ‎6px 8px‎ بس، بينما الأيقونات اللي جوّه الحقل
      متموضعة ‎absolute‎ على ‎4px‎ (‎.link-btn‎) و‎12px‎ (‎.select-icon‎)
      ومعاها خلفية صلبة. مع تدوير الأركان ‎10px‎ بتاعنا، المربع الصغير
      بتاع الأيقونة بيطلع بره قوس الحقل. وكمان النص بيمشي تحتها لأن
      مفيش حشو محجوز ناحيتها.

   بنستخدم الخصائص المنطقية (‎inset-inline-end‎ / ‎padding-inline-end‎)
   عشان نفس القاعدة تشتغل صح في العربي وفي النسخة الإنجليزية من غير
   ما نكتبها مرتين — الأيقونة في الحالتين بتقع ناحية نهاية السطر.
============================================================================= */

/* ---- 1) الشريط الجانبي: حشو متساوي على الجهتين ---- */
.layout-side-section {
  padding-inline-start: 24px !important;
  padding-inline-end: 20px !important;
}

/* العناصر جوّه الشريط ما تعدّيش عرضه */
.list-sidebar .sidebar-section,
.list-sidebar .group-by-field,
.list-sidebar .list-filters,
.list-sidebar .btn-group,
.layout-side-section .frappe-control {
  max-width: 100% !important;
  min-width: 0 !important;
}
.list-sidebar .list-sidebar-button {
  border-radius: 10px;
}
.list-sidebar .group-by-value {
  width: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 2) شريط الفلاتر فوق القائمة: مساحة تنفّس ---- */
.page-form {
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--wz-line) !important;
}
.page-form .form-group {
  padding: 0 7px !important;
  margin: 6px 0 !important;
}
.page-form .filter-section,
.page-form .standard-filter-section {
  padding-inline: 7px !important;
}

/* ---- 3) حشو داخلي مريح لكل الحقول ---- */
/* ❗ لازم تيجي قبل قواعد حجز مكان الأيقونة تحت: الاختصار `padding`
   بيمسح `padding-inline-end` حتى لو الاتنين !important — الأخير هو اللي
   بيكسب. لو اتعكس الترتيب، النص هيرجع يمشي تحت الأيقونة تاني. */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  padding: 6px 12px !important;
}
/* ❗ فرابي مثبّت ارتفاع الحقل على 28px، والحشو الرأسي فوق (6+6) كان بيسيب
   للنص 14px بس وسطر الخط العربي محتاج 21px — فالكلام في القوايم المنسدلة
   كان بيتقص من فوق وتحت («شهريا»، «تاريخ الترحيل»). الحقول ذات السطر
   الواحد بتاخد ارتفاع أكبر من غير حشو رأسي، والمتصفح بيوسّط النص لوحده.
   الـ 36px بتدخل كمان في خلايا جدول الأصناف (ارتفاعها 38px). */
input.form-control,
select.form-control {
  height: 36px !important;
  padding-block: 0 !important;
}
.like-disabled-input {
  min-height: 36px !important;
  height: auto !important;
  padding-block: 7px !important;
  line-height: 1.5 !important;
}

/* ---- 4) الأيقونات جوّه الحقول: ترجع لجوّه ويتحجزلها مكان ---- */
.frappe-control .link-btn,
.frappe-control .action-btn,
.frappe-control[data-fieldtype="Select"] .select-icon,
.frappe-control[data-fieldtype="Select"] .select-icon.xs {
  inset-inline-end: 9px !important;
  inset-inline-start: auto !important;
}

/* الخلفية الصلبة بتاعة زرار الرابط هي اللي كانت بتبان "طالعة بره" —
   مش محتاجينها طالما حجزنا حشو للنص */
.frappe-control button.link-btn,
.frappe-control button.action-btn {
  background: transparent !important;
  border-radius: 8px !important;
  padding: 3px 4px !important;
}

/* حجز مكان الأيقونة عشان النص ما يمشيش تحتها */
.frappe-control[data-fieldtype="Select"] select.form-control,
.frappe-control[data-fieldtype="Link"] input.form-control,
.frappe-control[data-fieldtype="Dynamic Link"] input.form-control,
.frappe-control[data-fieldtype="Date"] input.form-control,
.frappe-control[data-fieldtype="Datetime"] input.form-control,
.frappe-control[data-fieldtype="Time"] input.form-control,
.frappe-control[data-fieldtype="Autocomplete"] input.form-control {
  padding-inline-end: 30px !important;
}

/* النص المؤقّت جوّه القوايم المنسدلة بيتحط absolute برضه */
.frappe-control[data-fieldtype="Select"] .placeholder {
  inset-inline-start: 10px !important;
  inset-inline-end: auto !important;
  max-width: calc(100% - 42px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 5) جسم النموذج والقوائم: مسافة عن حواف اللوحة ---- */
.layout-main-section {
  border-radius: 14px;
}
.page-body .form-layout .form-page,
.form-section .section-body {
  padding-inline: 4px;
}
.list-row-container .list-row,
.list-row-head {
  padding-inline: 16px !important;
}

/* =============================================================================
   القوائم المنسدلة في الشريط العلوي (الجرس والحساب)

   ❗ Bootstrap بيستخدم .dropdown-menu-right اللي معناها "الحافة اليمنى
      للقائمة تتحاذى مع الحافة اليمنى للزرار" — منطق فيزيائي. في الوضع
      العربي الزرار نفسه بقى على يمين الشاشة، فالقائمة بتتفتح ناحية بره
      الشاشة وبتتقص من الشمال. عشان كده نص الإشعارات كان مختفي.
      الحل: نعكس نقطة الارتساء في RTL، ونحط حد أقصى للعرض عشان تفضل
      ظاهرة بالكامل في أي مقاس شاشة.
============================================================================= */
/* ❗ تصحيح: أول محاولة عكست الاتجاه غلط فثبّتت المشكلة بدل ما تحلها.
   المنطق الصح: الجرس بيقع على يمين الشاشة، فالقائمة لازم تتمدد ناحية
   الشمال — يعني `right: 0` (حافة القائمة اليمنى مع حافة الزرار اليمنى).
   ملف فرابي العربي بيقول `left: 0` لأن أداة قلب الاتجاه عكست القاعدة
   الأصلية، والنتيجة إن القائمة بتتمدد ناحية بره الشاشة وبتتقص. */
[dir="rtl"] .navbar .dropdown-menu,
[dir="rtl"] .navbar .dropdown-menu-right,
[dir="rtl"] .navbar .notifications-list,
[dir="rtl"] .navbar .dropdown-menu.notifications-list {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

.navbar .dropdown-menu {
  width: max-content;
  min-width: 260px;
  max-width: min(94vw, 460px);
  max-height: min(78vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* قائمة الإشعارات أعرض شوية — محتواها أطول */
.navbar .notifications-list,
.navbar .dropdown-menu .notification-list-body {
  min-width: 340px;
}

/* عناصر القائمة: النص ما يتقصّش ولا يخرج بره */
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .notification-item {
  white-space: normal;
  word-break: break-word;
  padding-inline: 14px !important;
}

/* على الموبايل القائمة تاخد عرض الشاشة وتفضل جوه الحدود */
@media (max-width: 640px) {
  [dir="rtl"] .navbar .dropdown-menu {
    position: fixed !important;
    inset-inline: 8px !important;
    max-width: none;
    min-width: 0;
  }
}

/* =============================================================================
   مساحات العمل — الإطار والمحاذاة

   المشاكل اللي كانت ظاهرة:
   1) اللوحة اللي تحت الكروت أضيق منها، فالكروت باينة كأنها خارجة عن الإطار
   2) عناصر زي "ملخص فواتير المشروع" و"فتح المشاريع" بتتعدى حافة الكارت
   3) زراير "تعديل" و"جديد" نصها على الخلفية الغامقة ونصها على الفاتحة
============================================================================= */

/* لوحة واحدة بعرض ثابت لكل أقسام مساحة العمل */
.layout-main-section .workspace-body,
.codex-editor__redactor,
.ce-block__content,
.ce-toolbar__content {
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* كل بطاقة جوه مساحة العمل: نفس الحشو ونفس الحواف */
.widget.links-widget-box,
.widget.shortcut-widget-box,
.widget.number-card,
.widget.onboarding-widget-box,
.widget.chart-widget-box {
  padding: 18px 18px 16px !important;
}

/* الروابط جوه البطاقة ما تتعدّاش حافتها */
.links-widget-box .link-item,
.links-widget-box .link-content,
.widget .widget-body .link-item {
  padding-inline: 2px !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* الاختصارات: العنصر كله جوه الإطار وبعرض متساوي */
.shortcut-widget-box {
  display: flex;
  align-items: center;
  min-height: 42px;
}
.shortcut-widget-box .indicator-pill {
  flex: 0 0 auto;
  margin-inline-start: 8px;
}

/* ---- زراير أسفل مساحة العمل (تعديل / جديد) ----
   كانت خارج اللوحة فبتقع نص على خلفية الصفحة ونص على اللوحة.
   بندخّلها جوه اللوحة وبنديها نفس حشو باقي المحتوى. */
.workspace-footer-actions,
.layout-main-section .edit-mode-actions,
.layout-main-section > .btn-group:last-child {
  padding-inline: 18px !important;
}

.layout-main-section .codex-editor + div,
.workspace-footer,
.new-workspace-actions {
  background: var(--wz-glass);
  border-top: 1px solid var(--wz-line);
  border-radius: 0 0 14px 14px;
  padding: 12px 18px !important;
  margin: 0 !important;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* اللوحة الرئيسية للمحتوى: إطار واحد واضح حوالين كل حاجة.
   ❗ من غير overflow: hidden — كان بيقص كل قايمة منسدلة في النماذج. */
.layout-main-section {
  background: var(--wz-glass);
  border: 1px solid var(--wz-line);
  border-radius: 14px;
  padding-bottom: 6px;
}

/* =============================================================================
   اتساع اللوحات — اللوحة الغامقة كانت أضيق من محتواها

   المستخدم شايف مربعين: الفاتح (اللوحة) والغامق (خلفية الصفحة). المسافات
   حواليهم مكانتش متساوية لأن Frappe بيدي الحاوية عرض ثابت وهوامش تلقائية،
   فاللوحة بتقف قبل حافة المحتوى. بنوسّع الاتنين ونوحّد الهوامش.
============================================================================= */
.layout-main-section-wrapper {
  padding-inline: 12px;
}

.layout-main-section {
  padding: 8px 10px 10px !important;
}

/* شبكة البطاقات جوه مساحة العمل: مسافات متساوية من كل جهة */
.layout-main-section .widget-group,
.layout-main-section .links-widget-box,
.layout-main-section .number-card-widget-box {
  margin-inline: 0 !important;
}

/* ---- القائمة الجانبية ----
   ❗ تصحيح: حطيت قبل كده min-width: 240px على .layout-side-section نفسه.
      العنصر ده عمود من شبكة Bootstrap وعرضه محسوب بنسبة مئوية — فرض
      عرض أدنى عليه خلّى مجموع الأعمدة أكبر من الصف، فظهر شريط تمرير
      أفقي والقائمة اتقصّت من جنبها ("متاكلة").
      الصح إننا نسيب العمود على حساباته ونشتغل على المحتوى جواه بس. */
.layout-side-section .list-sidebar,
.layout-side-section .desk-sidebar,
.layout-side-section .sidebar-section {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.desk-sidebar .desk-sidebar-item,
.desk-sidebar .standard-sidebar-item {
  padding-inline: 12px !important;
}

/* النص يفضل سطر واحد ويتقص بنقط لو زاد — أنضف من إنه يخرج بره العمود */
.desk-sidebar .sidebar-item-label,
.desk-sidebar .desk-sidebar-item span,
.standard-sidebar-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* بطاقات الأرقام: العنوان ما يتقصّش */
.number-card .widget-title,
.number-card-widget-box .widget-title,
.widget .number-card-label {
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.5;
}

/* ---- شيل دعاية Frappe CRM من الشريط الجانبي للقوائم ---- */
.list-sidebar .crm-switch,
.list-sidebar [href*="frappecrm"],
.list-sidebar [href*="/crm"][target="_blank"],
.sidebar-section a[href*="frappe.io"] {
  display: none !important;
}

/* =============================================================================
   منع التمرير الأفقي نهائيًا

   ❗ أي عنصر بيفرض عرض أكبر من الصف بيعمل شريط تمرير أفقي وبيقص الأعمدة
      من جنبها. بنقفل الباب ده على مستوى الصفحة كلها بدل ما نطارده عنصر
      عنصر — وبنخلي كل أعمدة الشبكة تقبل الانكماش (min-width: 0)، لأن
      القيمة الافتراضية auto بتمنع العمود إنه يصغّر عن محتواه.
============================================================================= */
/* ❗ لازم clip مش hidden: حسب مواصفة CSS، `overflow-x: hidden` بتحوّل
      `overflow-y` من visible لـ auto، فالـ body بيبقى منطقة تمرير ليها
      شريط تمرير خاص بيها. في الاتجاه العربي الشريط ده بيقعد على شمال
      الصفحة وبياخد 10 بكسل، فكل المحتوى — ومنه الشريط العلوي — بيقف
      قبل حافة الشاشة بـ10 بكسل. `clip` بتمنع الزحف الأفقي من غير ما
      تعمل منطقة تمرير. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

.layout-main,
.layout-main > .row,
.page-body .row,
.layout-main-section-wrapper,
.layout-side-section {
  min-width: 0;
}

/* ❗ من غير overflow-x هنا. حسب مواصفة CSS: لو محور اتحدد hidden
   والتاني visible، المتصفح بيحوّل الـ visible لـ auto تلقائيًا —
   يعني الحاوية بتبقى منطقة تمرير وبتقص أي عنصر منسدل جواها.
   الحماية من التمرير الأفقي على html/body كفاية. */
.layout-main-section-wrapper,
.layout-main-section {
  max-width: 100%;
}

/* الجداول والرسوم لها شريط تمرير خاص بيها بدل ما تمدّ الصفحة كلها
   ❗ `.datatable` اتشالت من هنا: المكتبة بتخليها `overflow: hidden` عن قصد،
      والتمرير شغل `.dt-scrollable` لوحدها. لما كنا بنفرض عليها auto كان
      بيبقى فيه منطقتين تمرير فوق بعض، والهيدر (اللي بيتزحلق بـtranslateX
      من جافاسكربت) بيفقد تزامنه مع الصفوف. */
.dt-scrollable,
.report-wrapper {
  max-width: 100%;
  overflow-x: auto;
}
.chart-container { max-width: 100%; }

/* =============================================================================
   قائمة البحث المنسدلة

   كانت بتتمدّ فوق الشريط الجانبي وتغطيه. المشكلة إن Frappe بيديها عرض
   أدنى كبير من غير حد أقصى، وفي الوضع العربي بتتمدّ ناحية الشمال فوق
   المحتوى. بنحددها بعرض شريط البحث نفسه.
============================================================================= */
.navbar .awesomplete > ul,
#navbar-search + .awesomplete > ul,
.search-bar .awesomplete > ul {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  inset-inline: 0 !important;
  max-height: 70vh;
  overflow-y: auto;
}

.navbar .search-bar,
.navbar .awesomplete {
  position: relative;
  width: min(46vw, 520px);
}

/* عناصر النتائج: سطر واحد نضيف بنقط لو زاد */
.navbar .awesomplete > ul > li > a,
.navbar .awesomplete > ul > li span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =============================================================================
   حماية القوائم المنسدلة في كل الصفحات

   ❗ المشكلة اللي حصلت: قايمة اقتراحات حقل الربط كانت بتظهر *ورا* القسم
      اللي بعدها بدل ما تظهر فوقه.

   سببين بيعملوا كده، والاتنين كانوا من تعديلاتنا:

   1) `overflow` غير `visible` على أي عنصر أب — بيقص العناصر المتموضعة
      absolute جواه. وكمان حسب المواصفة: `overflow-x: hidden` لوحدها
      بتحوّل `overflow-y` من visible لـ auto تلقائيًا، فالأب بيبقى منطقة
      تمرير بتقص من غير ما تقصد.

   2) `backdrop-filter` (وكذلك `filter` و`transform` و`perspective`
      و`will-change` و`contain`) بتعمل "سياق تكديس" جديد. العنصر المنسدل
      بيتحبس جوه السياق ده مهما كان z-index بتاعه، فأي عنصر شقيق بعده
      بيترسم فوقه.

   القاعدة دي بتقفل البابين على مستوى كل حاويات النماذج مرة واحدة، بدل
   ما نلاحق كل صفحة لوحدها.
============================================================================= */
.form-layout,
.form-page,
.form-section,
.section-body,
.form-column,
.frappe-control,
.control-input-wrapper,
.control-input,
.row.form-section,
.form-tabs-list,
.page-form,
.filter-section,
.standard-filter-section,
.layout-main-section,
.layout-main-section-wrapper,
.sidebar-section,
.frappe-card {
  overflow: visible !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* ❗ استثنينا .layout-side-section و .list-sidebar و .modal-body عن قصد:
   دول محتاجين التمرير بتاعهم (قايمة جانبية طويلة، حوار بمحتوى أطول من
   الشاشة). لو فرضنا عليهم overflow: visible هيبقى مفيش تمرير وهيضيع
   محتوى. بنكتفي فيهم برفع طبقة المنسدلة. */

/* العناصر المنسدلة نفسها فوق أي محتوى */
/* ❗ `.multiselect-list` اتشال من هنا عن قصد. ده **الحقل نفسه** مش قائمته
   المنسدلة — فكان قاعد على 1060 طول الوقت حتى وهو مقفول، وبيترسم فوق
   قائمة «الخيارات» بتاعة رأس الصفحة (z-index: 1000 من Bootstrap).
   ظهرت في شاشة ضيقة: حقلي فلتر التقرير «المستودعات» و«الأصناف» كانوا
   بيبانوا فوق القائمة المفتوحة. على 1440px مابيحصلش تقاطع هندسي،
   فالبق كان مستخبي. بنرفع القائمة بتاعته بس. */
.awesomplete > ul,
.frappe-control .dropdown-menu,
.control-input-wrapper .dropdown-menu,
.form-section .dropdown-menu,
.page-form .dropdown-menu,
.multiselect-list .dropdown-menu,
.datepicker.active,
.datepicker--nav,
ul.dropdown-menu.list-group {
  z-index: 1060 !important;
}

/* الحوارات أعلى من كل حاجة، وقوايمها أعلى منها */
.modal { z-index: 1050; }
.modal .awesomplete > ul,
.modal .dropdown-menu,
.modal .datepicker.active {
  z-index: 1070 !important;
}

/* ❗ استثناء: الجدول الشبكي لازم يفضل بيقص أفقيًا عشان التمرير بتاعه،
   لكن صفوفه المفتوحة للتعديل بتحتوي منسدلات — فبنرفع المنسدلة بدل ما
   نشيل القص عن الجدول. */
.datatable .dt-dropdown__list,
.grid-body .awesomplete > ul,
.grid-row .dropdown-menu {
  z-index: 1065 !important;
}

/* ❗ الشريط العلوي لازم يكون سياق تكديس فوق محتوى الصفحة — قوايمه
   المنسدلة محبوسة جواه، فلو هو ورا المحتوى بتختفي مهما رفعنا z-index
   بتاعها. (قبل كده كان backdrop-filter هو اللي بيعمل السياق ده؛ بعد ما
   شلناه للسرعة بقى position + z-index تحت هما اللي بيعملوه.) */
.navbar,
header.navbar {
  position: relative;
  z-index: 1030;
}

/* =============================================================================
   الشريط الجانبي الكحلي في الشاشات الداخلية — ملاصق لحافة الشاشة اليمنى

   ❗ فرابي بيحط الشريط كعمود (col-lg-2) جوه حاوية بعرض أقصى، فكان بيبان
      مزاح عن حافة الشاشة بمسافة، وبيخلص عند آخر عنصر فيه بدل ما يكمّل
      لتحت. هنا بنثبّته على الحافة بطول الشاشة تحت الشريط العلوي، وبنزق
      محتوى الصفحة بنفس عرضه — زي الشريط الجانبي في الصفحة الرئيسية.

   :has() بيحصر التعديل في الشاشات اللي فيها قايمة الأقسام بس، ومش بيلمس
   لوحة الفلاتر في شاشات القوائم والنماذج. ولما المستخدم يخفي الشريط من
   زرار ☰ (فرابي بيحط display:none) المحتوى بيرجع ياخد العرض كله.
   على الشاشات الصغيرة فرابي بيعرض الشريط كطبقة منبثقة، فسايبينه.
============================================================================= */
:root { --wz-side-width: 280px; }

@media (min-width: 992px) {
  .layout-side-section:has(.desk-sidebar):not([style*="display: none"]) {
    position: fixed !important;
    top: var(--navbar-height, 48px);
    bottom: 0;
    /* فرابي بيدي العمود ارتفاع ثابت فكان بيتجاوز قاع الشاشة أو بيقف قبله */
    height: calc(100vh - var(--navbar-height, 48px)) !important;
    inset-inline-start: 0;
    width: var(--wz-side-width) !important;
    max-width: var(--wz-side-width) !important;
    flex: none !important;
    margin: 0 !important;
    padding: 18px 14px 24px !important;
    overflow-y: auto;
    z-index: 100;
    border-radius: 0;
  }
  .layout-side-section:has(.desk-sidebar) .list-sidebar,
  .layout-side-section:has(.desk-sidebar) .desk-sidebar {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* المحتوى يتزق بعرض الشريط، والحاوية تاخد باقي الشاشة */
  .page-container:has(.layout-side-section:not([style*="display: none"]) .desk-sidebar) {
    padding-inline-start: var(--wz-side-width);
  }
  .page-container:has(.layout-side-section:not([style*="display: none"]) .desk-sidebar) .container {
    max-width: none !important;
  }
  .layout-main:has(> .layout-side-section:not([style*="display: none"]) .desk-sidebar) > .layout-main-section-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* عنوان القسم («عام») وسهم الطي فوق القايمة — مش مطلوبين */
.desk-sidebar .standard-sidebar-label {
  display: none !important;
}

/* العناصر أكبر وأوضح */
.desk-sidebar .standard-sidebar-item,
.desk-sidebar .desk-sidebar-item {
  min-height: 46px;
  padding-block: 8px !important;
  margin-block: 3px;
}
.desk-sidebar .item-anchor {
  gap: 12px;
  align-items: center;
}
.desk-sidebar .sidebar-item-label {
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5;
}
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-label {
  font-weight: 700;
}
.desk-sidebar .sidebar-item-icon .icon {
  width: 22px !important;
  height: 22px !important;
}

/* =============================================================================
   مربع البحث العلوي — الأيقونة كانت فوق كلمة «ابحث»

   ❗ فرابي بيحط أيقونة العدسة absolute في بداية الحقل، وقاعدة الحشو العامة
      عندنا (12px) مكانتش سايبة لها مكان، فالنص بيبدأ تحتها. بنحجز لها مسافة
      ثابتة ونوسّطها رأسيًا.
============================================================================= */
.navbar .search-bar .form-control,
.navbar .search-bar input.form-control {
  /* ❗ القياس بعد أول تعديل: الأيقونة كانت لازقة في أول حرف (40px مش كفاية
     لأن غلاف الأيقونة أعرض من الرسمة). 50px بتسيب فراغ واضح بينهم. */
  padding-inline-start: 50px !important;
  padding-inline-end: 14px !important;
  height: 34px;
}
.navbar .search-bar .search-icon {
  inset-inline-start: 14px !important;
  inset-inline-end: auto !important;
  left: auto;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}
[dir="ltr"] .navbar .search-bar .search-icon { left: 14px; right: auto; }
.navbar .search-bar .search-icon .icon { --icon-stroke: var(--wz-text-mute); }

/* =============================================================================
   التحويم على الروابط — الكلمة بتتحرك لجوه بس

   ❗ قبل كده فرابي كان بيغيّر لون الرابط وقت التحويم لـ --invert-neutral،
      والمتغير ده كان مربوط بلون الخلفية فالكلمة بتبيض وتختفي. المطلوب إن
      الكلمة تفضل بلونها وتتزق خطوة لجوه كإشارة إنها قابلة للضغط.
============================================================================= */
.links-widget-box .link-item .link-content,
.widget .link-item .link-content {
  display: inline-block;
  transition: transform .15s ease;
}
.widget.links-widget-box .link-item .link-content:hover,
.widget.links-widget-box .link-item:hover .link-content {
  color: inherit !important;
}
[dir="rtl"] .widget .link-item:hover .link-content { transform: translateX(-6px); }
[dir="ltr"] .widget .link-item:hover .link-content { transform: translateX(6px); }

.desk-sidebar .item-anchor .sidebar-item-label { transition: transform .15s ease; }
[dir="rtl"] .desk-sidebar .desk-sidebar-item:hover .sidebar-item-label { transform: translateX(-4px); }
[dir="ltr"] .desk-sidebar .desk-sidebar-item:hover .sidebar-item-label { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .widget .link-item .link-content,
  .desk-sidebar .item-anchor .sidebar-item-label { transition: none; }
}

/* لمسة خفيفة من العلم في مظهر اليوم الوطني: خط أبيض تحت الشريط الأخضر،
   تحته خط أخضر رفيع — من غير ما يأثر على وضوح القراءة */
[data-theme="national"] .navbar {
  box-shadow: 0 2px 0 var(--wazen-white), 0 4px 0 var(--wazen-emerald-500) !important;
}

/* =============================================================================
   الرسوم البيانية — التلميح (المربع اللي فيه القيمة) كان متقصوص من فوق

   ❗ السبب: قاعدة سابقة عندنا خلّت حاوية الرسم overflow-x: auto عشان الرسوم
      العريضة ما تمدّش الصفحة. حسب مواصفة CSS المحور التاني بيتحول لـ auto
      تلقائيًا، فالحاوية بقت منطقة تمرير بتقص أي حاجة طالعة منها — ومنها
      التلميح اللي بيظهر فوق النقطة. الرسم نفسه بيتقاس بعرض الحاوية، فمش
      محتاج تمرير أصلًا.
============================================================================= */
.chart-container,
.widget .chart-wrapper,
.widget.dashboard-widget-box .widget-body {
  overflow: visible !important;
}
.graph-svg-tip {
  z-index: 50;
}

/* نصوص المحاور مقروءة في كل المظاهر */
.chart-container .x.axis text,
.chart-container .y.axis text,
.chart-container .chart-label,
.chart-container .legend-dataset-text {
  fill: var(--wz-text-dim) !important;
}


/* =============================================================================
   مظهر اليوم الوطني — الشريط الجانبي على شكل علم بيرفرف
   حافة متموجة بطول الشريط ناحية المحتوى، ولفة من الشريط طالعة منه وعليها
   الشهادة والسيف — زي الصورة المرجعية. رسومات SVG مدمجة بألوان اللوحة
   (Emerald 900/700/500 والأبيض)، مرسومة فوق كل حاجة من غير ما تستقبل ضغط.
   المحتوى بيتزق 150px زيادة عشان اللفة ما تغطيش عليه.
============================================================================= */
/* ❗ :not ضروري: القاعدة دي بعد كتلة اليوم الوطني ولها نفس الأولوية، فلو كانت
   :root بس كانت هتصفّر الـ 100px بتوعه. */
:root:not([data-theme="national"]) { --wz-side-extra: 0px; }

/* الشاشات الداخلية: الشريط ثابت، فالرسومات ثابتة جنبه
   ❗ من غير :has جوه :has — المتصفح بيرفض القاعدة كلها لو اتداخلوا. */
@media (min-width: 992px) {
  [data-theme="national"] body:has(.page-container:not([style*="display: none"]) .layout-side-section:not([style*="display: none"]) .desk-sidebar)::after,
  [data-theme="national"] body:has(.page-container:not([style*="display: none"]) .layout-side-section:not([style*="display: none"]) .desk-sidebar)::before {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 101;
  }
  [data-theme="national"] body:has(.page-container:not([style*="display: none"]) .layout-side-section:not([style*="display: none"]) .desk-sidebar)::after {
    top: var(--navbar-height, 48px);
    bottom: 0;
    inset-inline-start: var(--wz-side-width);
    width: 44px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%20400%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2313866F%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23075B48%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20x2%3D%220%22%20y1%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2303382D%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%2303382D%22%20stop-opacity%3D%220.35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303382D%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Cpath%20d%3D%22M44%2C0%20L16%2C0%20C0%2C70%200%2C130%2016%2C200%20C32%2C270%2032%2C330%2016%2C400%20L44%2C400%20Z%22%20fill%3D%22url%28%23g%29%22%2F%3E%20%3Cpath%20d%3D%22M44%2C100%20L8%2C100%20C4%2C140%206%2C170%2016%2C200%20C26%2C230%2030%2C260%2030%2C300%20L44%2C300%20Z%22%20fill%3D%22url%28%23s%29%22%2F%3E%20%3Cpath%20d%3D%22M16%2C0%20C0%2C70%200%2C130%2016%2C200%20C32%2C270%2032%2C330%2016%2C400%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%2Fsvg%3E") right top / 44px 400px repeat-y;
    filter: drop-shadow(-4px 0 6px color-mix(in srgb, var(--wazen-emerald-900) 28%, transparent));
  }
  [data-theme="national"] body:has(.page-container:not([style*="display: none"]) .layout-side-section:not([style*="display: none"]) .desk-sidebar)::before {
    top: calc(var(--navbar-height, 48px) + 40px);
    inset-inline-start: calc(var(--wz-side-width) - 24px);
    width: 170px;
    height: 250px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20220%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22up%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2313866F%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%2313866F%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22bk%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2303382D%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22lo%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2303382D%22%2F%3E%3Cstop%20offset%3D%220.35%22%20stop-color%3D%22%23075B48%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22fade%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220.82%22%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000000%22%2F%3E%3C%2FlinearGradient%3E%20%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22150%22%20height%3D%22220%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%20%3C%2Fdefs%3E%20%3Cg%20mask%3D%22url%28%23m%29%22%3E%20%3Cpath%20d%3D%22M46%2C128%20C70%2C162%20110%2C178%20150%2C180%20L150%2C140%20C120%2C138%2088%2C124%2062%2C98%20Z%22%20fill%3D%22url%28%23lo%29%22%2F%3E%20%3Cpath%20d%3D%22M22%2C88%20L62%2C98%20L46%2C128%20C38%2C114%2028%2C102%2022%2C88%20Z%22%20fill%3D%22url%28%23bk%29%22%2F%3E%20%3Cpath%20d%3D%22M150%2C8%20C98%2C10%2038%2C42%2022%2C88%20L62%2C98%20C76%2C68%20112%2C50%20150%2C48%20Z%22%20fill%3D%22url%28%23up%29%22%2F%3E%20%3Cpath%20d%3D%22M150%2C8%20C98%2C10%2038%2C42%2022%2C88%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%2898%2036%29%20rotate%28-21%29%22%3E%20%3Ctext%20x%3D%220%22%20y%3D%220%22%20text-anchor%3D%22middle%22%20direction%3D%22rtl%22%20font-family%3D%22Amiri%2C%20%27Traditional%20Arabic%27%2C%20%27Segoe%20UI%27%2C%20Tahoma%2C%20serif%22%20font-size%3D%229.5%22%20font-weight%3D%22700%22%20fill%3D%22%23FFFFFF%22%3E%D9%84%D8%A7%20%D8%A5%D9%84%D9%87%20%D8%A5%D9%84%D8%A7%20%D8%A7%D9%84%D9%84%D9%87%20%D9%85%D8%AD%D9%85%D8%AF%20%D8%B1%D8%B3%D9%88%D9%84%20%D8%A7%D9%84%D9%84%D9%87%3C%2Ftext%3E%20%3Cpath%20d%3D%22M-24%208.4%20Q-16%206.6%20-6%206.8%20L18%206.8%20L18%209.2%20L-6%209.2%20Q-16%209.2%20-24%208.4%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Crect%20x%3D%2218%22%20y%3D%225%22%20width%3D%221.5%22%20height%3D%226%22%20rx%3D%220.6%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Crect%20x%3D%2219.5%22%20y%3D%227.2%22%20width%3D%225%22%20height%3D%221.6%22%20rx%3D%220.8%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
    filter: drop-shadow(-3px 3px 5px color-mix(in srgb, var(--wazen-emerald-900) 30%, transparent));
  }
  [data-theme="national"] .page-container:has(.layout-side-section:not([style*="display: none"]) .desk-sidebar) {
    padding-inline-start: calc(var(--wz-side-width) + var(--wz-side-extra));
  }
}

/* الصفحة الرئيسية: الشريط عنصر عادي في الصفحة، فالرسومات بتتعلّق عليه */
[data-theme="national"] .wz-side {
  position: relative;
  z-index: 2;
}
[data-theme="national"] .wz-side::after,
[data-theme="national"] .wz-side::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
[data-theme="national"] .wz-side::after {
  top: 0;
  bottom: 0;
  inset-inline-end: -44px;
  width: 44px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%20400%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2313866F%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23075B48%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20x2%3D%220%22%20y1%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2303382D%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%2303382D%22%20stop-opacity%3D%220.35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303382D%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Cpath%20d%3D%22M44%2C0%20L16%2C0%20C0%2C70%200%2C130%2016%2C200%20C32%2C270%2032%2C330%2016%2C400%20L44%2C400%20Z%22%20fill%3D%22url%28%23g%29%22%2F%3E%20%3Cpath%20d%3D%22M44%2C100%20L8%2C100%20C4%2C140%206%2C170%2016%2C200%20C26%2C230%2030%2C260%2030%2C300%20L44%2C300%20Z%22%20fill%3D%22url%28%23s%29%22%2F%3E%20%3Cpath%20d%3D%22M16%2C0%20C0%2C70%200%2C130%2016%2C200%20C32%2C270%2032%2C330%2016%2C400%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%2Fsvg%3E") right top / 44px 400px repeat-y;
  filter: drop-shadow(-4px 0 6px color-mix(in srgb, var(--wazen-emerald-900) 28%, transparent));
}
[data-theme="national"] .wz-side::before {
  top: 130px;
  inset-inline-end: -146px;
  width: 170px;
  height: 250px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20220%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22up%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2313866F%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%2313866F%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22bk%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2303382D%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22lo%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2303382D%22%2F%3E%3Cstop%20offset%3D%220.35%22%20stop-color%3D%22%23075B48%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23075B48%22%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22fade%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220.82%22%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000000%22%2F%3E%3C%2FlinearGradient%3E%20%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22150%22%20height%3D%22220%22%20fill%3D%22url%28%23fade%29%22%2F%3E%3C%2Fmask%3E%20%3C%2Fdefs%3E%20%3Cg%20mask%3D%22url%28%23m%29%22%3E%20%3Cpath%20d%3D%22M46%2C128%20C70%2C162%20110%2C178%20150%2C180%20L150%2C140%20C120%2C138%2088%2C124%2062%2C98%20Z%22%20fill%3D%22url%28%23lo%29%22%2F%3E%20%3Cpath%20d%3D%22M22%2C88%20L62%2C98%20L46%2C128%20C38%2C114%2028%2C102%2022%2C88%20Z%22%20fill%3D%22url%28%23bk%29%22%2F%3E%20%3Cpath%20d%3D%22M150%2C8%20C98%2C10%2038%2C42%2022%2C88%20L62%2C98%20C76%2C68%20112%2C50%20150%2C48%20Z%22%20fill%3D%22url%28%23up%29%22%2F%3E%20%3Cpath%20d%3D%22M150%2C8%20C98%2C10%2038%2C42%2022%2C88%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%2898%2036%29%20rotate%28-21%29%22%3E%20%3Ctext%20x%3D%220%22%20y%3D%220%22%20text-anchor%3D%22middle%22%20direction%3D%22rtl%22%20font-family%3D%22Amiri%2C%20%27Traditional%20Arabic%27%2C%20%27Segoe%20UI%27%2C%20Tahoma%2C%20serif%22%20font-size%3D%229.5%22%20font-weight%3D%22700%22%20fill%3D%22%23FFFFFF%22%3E%D9%84%D8%A7%20%D8%A5%D9%84%D9%87%20%D8%A5%D9%84%D8%A7%20%D8%A7%D9%84%D9%84%D9%87%20%D9%85%D8%AD%D9%85%D8%AF%20%D8%B1%D8%B3%D9%88%D9%84%20%D8%A7%D9%84%D9%84%D9%87%3C%2Ftext%3E%20%3Cpath%20d%3D%22M-24%208.4%20Q-16%206.6%20-6%206.8%20L18%206.8%20L18%209.2%20L-6%209.2%20Q-16%209.2%20-24%208.4%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Crect%20x%3D%2218%22%20y%3D%225%22%20width%3D%221.5%22%20height%3D%226%22%20rx%3D%220.6%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Crect%20x%3D%2219.5%22%20y%3D%227.2%22%20width%3D%225%22%20height%3D%221.6%22%20rx%3D%220.8%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
  filter: drop-shadow(-3px 3px 5px color-mix(in srgb, var(--wazen-emerald-900) 30%, transparent));
}
[data-theme="national"] .wz-main {
  padding-inline-start: calc(30px + var(--wz-side-extra));
}
[dir="ltr"] .wz-side::after, [dir="ltr"] .wz-side::before { transform: scaleX(-1); }

/* =============================================================================
   التحويم على عناصر الشريط الجانبي (كل المظاهر)
   ❗ طلب العميل: الوقوف على أي بند (رئيسي أو فرعي) يزيحه لجوه بس — من غير
      أي خلفية، ومن غير ما لون الكلام يتغيّر. (الأسود اللي اتجرّب قبل كده
      كان بيختفي على الشريط الغامق.) فرابي بيحط خلفية فاتحة وقت التحويم
      والتركيز على أكتر من عنصر جوه البند، فبنلغيها كلها هنا.
      العنصر المختار حاليًا بيفضل بإبرازه.
============================================================================= */
.desk-sidebar .desk-sidebar-item:not(.selected):hover,
.desk-sidebar .desk-sidebar-item:not(.selected):focus-within,
.desk-sidebar .desk-sidebar-item:not(.selected):active,
.desk-sidebar .standard-sidebar-item:not(.selected):hover,
.desk-sidebar .sidebar-item-container:hover,
.desk-sidebar .sidebar-item-container:focus-within,
.desk-sidebar .desk-sidebar-item:not(.selected) .item-anchor,
.desk-sidebar .desk-sidebar-item:not(.selected) .item-anchor:hover,
.desk-sidebar .desk-sidebar-item:not(.selected) .item-anchor:focus,
.desk-sidebar .sidebar-item-control .drop-icon,
.desk-sidebar .sidebar-item-control .drop-icon:hover,
.desk-sidebar .sidebar-item-control .drop-icon:focus,
.wz-nav-item:not(.active):hover,
.wz-nav-item:not(.active):focus,
.wz-nav-item:not(.active):active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.desk-sidebar .desk-sidebar-item:not(.selected):hover a,
.desk-sidebar .desk-sidebar-item:not(.selected):hover .sidebar-item-label,
.desk-sidebar .standard-sidebar-item:not(.selected):hover .sidebar-item-label,
.desk-sidebar .desk-sidebar-item:not(.selected) .item-anchor:focus,
.desk-sidebar .desk-sidebar-item:not(.selected) .item-anchor:focus .sidebar-item-label {
  color: var(--wz-side-text-dim) !important;
}
.wz-nav-item:not(.active):hover,
.wz-nav-item:not(.active):focus {
  color: var(--wz-side-text-dim) !important;
}
/* أدوات التعديل (سحب/إعدادات) ما تظهرش برّه وضع التعديل — زرها أبيض */
.desk-sidebar .standard-sidebar-section:not(.show-control) .sidebar-item-control .drag-handle,
.desk-sidebar .standard-sidebar-section:not(.show-control) .sidebar-item-control .setting-btn {
  display: none !important;
}
.wz-nav-item span { transition: transform .15s ease; display: inline-block; }
[dir="rtl"] .wz-nav-item:not(.active):hover span { transform: translateX(-4px); }
[dir="ltr"] .wz-nav-item:not(.active):hover span { transform: translateX(4px); }

/* =============================================================================
   الشعار ثابت أعلى الشريط الجانبي في الشاشات الداخلية — زي الصفحة الرئيسية
   العنصر بيتضاف بالجافاسكربت (wazen.bundle.js) من نفس بيانات شعار الشركة.
============================================================================= */
.wz-desk-logo {
  position: sticky;
  top: -18px;
  z-index: 2;
  margin: -18px -14px 14px;
  padding: 22px 14px 18px;
  background: inherit;
  text-decoration: none !important;
}
.wz-desk-logo img { height: 74px; width: auto; }
.wz-desk-logo:hover span { color: var(--wz-side-icon); }
@media (max-width: 991px) { .wz-desk-logo { display: none; } }

/* =============================================================================
   Phase 2 — نجمة الحقل الإلزامي
   فرابي بيحطها بلون --red-400 الافتراضي. بنوحّدها بلون الخطر في الهوية
   وبنكبّرها شوية عشان تبان، في الحقول وعناوين أعمدة الجداول والنوافذ.
   في الداكن بنفتّح اللون عشان التباين على الخلفية الغامقة.
============================================================================= */
:root { --wz-required: var(--wazen-danger); }
[data-theme="dark"] { --wz-required: color-mix(in srgb, var(--wazen-danger) 60%, #fff); }
/* ❗ عناوين الأعمدة بس — خلايا السطور نفسها عليها نفس الكلاس، ولو القاعدة
      شملتها بتظهر نجمة لوحدها في كل خلية فاضية */
.frappe-control .control-label.reqd::after,
.grid-heading-row .static-area.reqd::after {
  content: " *";
  color: var(--wz-required) !important;
  font-weight: 700;
  white-space: nowrap;
}

/* =============================================================================
   مربعات الاختيار المعلَّمة
   ❗ مربع الاختيار عليه نفس كلاس الحقول (.input-with-feedback)، فقاعدة
      الخلفية الشفافة فوق (background: … !important) كانت بتمسح لون التعليم
      وعلامة الصح — المربع المعلَّم كان بيبان فاضي في كل المظاهر.
      لون التعليم = --primary (أخضر في الأبيض واليوم الوطني، ذهبي في الداكن)،
      وعلامة الصح بيضا على الأخضر وكحلي غامق على الذهبي عشان التباين.
============================================================================= */
input[type="checkbox"]:checked,
input[type="checkbox"].input-with-feedback:checked {
  background-color: var(--primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 57% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
}
[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="checkbox"].input-with-feedback:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='%23061C38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
input[type="checkbox"].disabled-selected,
input[type="checkbox"]:disabled:checked {
  background-color: var(--gray-600) !important;
}

/* تاريخ الصلاحية (Phase 3): إلزامي بشرط (mandatory_depends_on)، وفرابي بيحط
   نجمة عنوان العمود للحقول الإلزامية دايمًا بس — فبنضيفها للعمود ده. */
.grid-heading-row .grid-static-col[data-fieldname="custom_expiry_date"] .static-area::after {
  content: " *";
  color: var(--wz-required);
  font-weight: 700;
  white-space: nowrap;
}

/* زر «إرفاق» جوّه خلية الجدول كان لازق في حافة الخلية والحقل اللي جنبه */
.form-grid .grid-static-col .btn-attach {
  margin-inline: 8px;
  max-width: calc(100% - 16px);
}

/* =============================================================================
   Phase 6 — القوائم الفرعية في الشريط الجانبي للصفحة الرئيسية
   (المحاسبة، الموارد البشرية، الرواتب) بتتفتح مكانها بزر السهم.
============================================================================= */
.wz-nav-row { display: flex; align-items: center; gap: 4px; }
.wz-nav-row .wz-nav-item { flex: 1 1 auto; min-width: 0; }
.wz-nav-toggle {
  flex: 0 0 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--wz-side-icon);
  cursor: pointer;
}
.wz-nav-toggle svg { width: 18px; height: 18px; transition: transform .15s ease; }
.wz-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wz-nav-toggle:hover,
.wz-nav-toggle:focus-visible { background: var(--wz-side-hover); outline: none; }
.wz-nav-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin-block: 2px 6px;
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--wz-side-divider);
  margin-inline-start: 24px;
}
.wz-nav-sub[hidden] { display: none; }
.wz-nav-sub .wz-nav-sub-item {
  padding: 7px 12px;
  font-size: 14px;
}

/* الشريط الجانبي الداخلي: البنود الفرعية مزاحة لجوه وتحتها خط يربطها
   بالبند الأب — من غيرها كانت على نفس المحاذاة ومش باين إنها فرعية. */
.desk-sidebar .sidebar-child-item.nested-container {
  margin-inline-start: 26px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--wz-side-divider);
}
.desk-sidebar .sidebar-child-item .desk-sidebar-item .sidebar-item-label {
  font-size: 0.95em;
}

/* =============================================================================
   الصفحة الرئيسية: الشريط الجانبي بنفس مقاس الشاشات الداخلية
   (العرض --wz-side-width، ونفس حجم الخط والأيقونات وارتفاع البند)
============================================================================= */
@media (min-width: 821px) {
  .wz-side {
    flex: 0 0 var(--wz-side-width);
    width: var(--wz-side-width);
    padding: 18px 14px 24px;
  }
}
.wz-nav-item {
  min-height: 46px;
  padding-block: 8px;
  font-size: 16px;
}
.wz-nav-item svg { width: 22px; height: 22px; flex-basis: 22px; }
.wz-nav-item.active { font-weight: 700; }
.wz-nav-sub .wz-nav-sub-item {
  min-height: 40px;
  font-size: 15px;
}
.wz-nav-sub .wz-nav-sub-item svg { width: 20px; height: 20px; flex-basis: 20px; }

/* =============================================================================
   Phase 13 — هوية وازن
   - الشريط الجانبي (الرئيسية والشاشات الداخلية): الشعار الكامل بنسخته الفاتحة،
     لأن الشريط غامق في كل المظاهر. من غير نص جنبه — كلمة «وازن» جزء من الشعار.
   - الشريط العلوي: النسخة الأفقية؛ الغامقة على الأبيض والفاتحة على الأخضر
     (اليوم الوطني) والكحلي (الداكن).
   - خلفية الرئيسية: لو الشركة ما رفعتش شعار، شعار وازن خافت بدرجة كل مظهر.
============================================================================= */
.wz-side-logo {
  display: flex;
  justify-content: center;
  text-decoration: none !important;
}
.wz-side-logo img,
.wz-desk-logo img {
  height: 128px;
  width: auto;
  max-width: 100%;
}
.navbar-brand .app-logo {
  height: 34px !important;
  width: auto !important;
  max-width: none !important;
}
[data-theme="national"] .navbar-brand .app-logo,
[data-theme="dark"] .navbar-brand .app-logo {
  content: url("/assets/wazen/images/wazen-lockup-light.png");
}
.wz-bg-default {
  background-image: url("/assets/wazen/images/wazen-logo.png");
}
[data-theme="dark"] .wz-bg-default {
  background-image: url("/assets/wazen/images/wazen-logo-light.png");
}

/* =============================================================================
   Phase 11 — النصوص والأيقونات المقطوعة
   ❗ المشكلة: عناوين البطاقات وروابط لوحات العمل في فرابي مكتوبة على سطر
      واحد مع قص (.ellipsis). الأسماء العربية أطول من الإنجليزية، فكان
      «إجمالي قيمة المخزون» يظهر «إجمالي قيمة المخز...» و«قالب الضرائب
      والرسوم على المبيعات» يتقصّ من نصه. الحل: نسمح بالالتفاف على أكتر من
      سطر بدل القص — نفس المساحة تقريبًا والنص كامل.
   ❗ الأيقونة الناقصة: في RTL فرابي بيطلب رمز «سهم لأعلى-يسار» مش موجود في
      ملف الأيقونات، فكان مكانه فاضي جنب كل رابط. بنولّد الرمز من نسخته
      المعكوسة في wazen.bundle.js.
   نفس القواعد في المظاهر الثلاثة (مفيش ألوان هنا — تخطيط بس).
============================================================================= */
.widget .widget-head .widget-label,
.widget .widget-head .widget-title { min-width: 0; }

.widget .widget-title .ellipsis,
.widget .widget-subtitle .ellipsis,
.widget .widget-label .ellipsis {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45;
}

.widget.number-widget-box .widget-head,
.widget.shortcut-widget-box .widget-head,
.widget.chart-widget-box .widget-head,
.widget.dashboard-widget-box .widget-head { align-items: flex-start; }

/* روابط لوحات العمل: سطرين بدل القص، والسهم يفضل ملزوق بآخر الكلام */
.widget .link-item.ellipsis,
.widget .link-item .link-content.ellipsis,
.widget .link-item .link-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.widget .link-item {
  position: relative;
  height: auto;
  min-height: 28px;
  padding-block: 4px;
  padding-inline-end: 20px;
  line-height: 1.7;
}
.widget .link-item .link-content {
  display: inline;
}
/* ❗ السهم مثبّت في أول السطر: لو سبناه في النص كان بينزل لوحده في سطر
   جديد لما اسم الرابط يلتف. */
.widget .link-item .es-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 7px;
  margin: 0 !important;
}

/* أزرار الشريط الجانبي في شاشات القوائم (تعيين، منشئه بواسطة...) */
.list-sidebar .list-link .btn .ellipsis,
.list-sidebar .sidebar-label .ellipsis,
.list-sidebar .list-stats-label .ellipsis {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.list-sidebar .list-link .btn {
  height: auto;
  min-height: 28px;
  line-height: 1.6;
}

/* الجداول الفرعية (الأصناف، الضرائب...): الخلية بتلتف والصف بيطول معاها.
   ❗ صف العناوين لازم يطول هو كمان، وإلا العنوان الملتف بينزل فوق أول صف
      بيانات (شفناها فعلًا مع «الاجمالي غير شامل الضريبة»). */
.form-grid .grid-static-col .static-area.ellipsis,
.form-grid .grid-heading-row .static-area {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  line-height: 1.5;
}
.form-grid .data-row .grid-static-col,
.form-grid .grid-heading-row,
.form-grid .grid-heading-row .col {
  height: auto !important;
}
.form-grid .grid-heading-row { min-height: 32px; }
.form-grid .grid-heading-row .row { align-items: flex-end; }
.form-grid .data-row .grid-static-col { padding-block: 4px; }
.form-grid .grid-row > .row { align-items: flex-start; }

/* صفوف القوائم وأعمدة التقارير بتفضل بقص (الصف ارتفاعه ثابت) — بس النص
   بيظهر كامل في تلميح عند الوقوف عليها (wazen.bundle.js) */
.static-area.ellipsis[title],
.list-row-col .ellipsis[title],
.dt-cell__content[title] { cursor: help; }

/* =============================================================================
   Phase 14 — بانى التقارير المخصصة (صفحة wazen-pivot)
   جدول محوري بسيط: صفوف × أعمدة × قيمة، بنفس ألوان هوية وازن.
============================================================================= */
.wz-pivot { padding: 4px 0 24px; }
.wz-pv-controls {
  background: var(--card-bg, #fff);
  border: 1px solid var(--wazen-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.wz-pv-row { display: flex; flex-wrap: wrap; gap: 12px; }
.wz-pv-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  min-width: 150px; flex: 1 1 150px; margin: 0;
}
.wz-pv-row select, .wz-pv-row input {
  height: 32px; padding: 0 8px; border-radius: 7px;
  border: 1px solid var(--wazen-border); background: var(--control-bg, #fff);
  color: var(--text-color); font-size: 13px; font-weight: 500;
}
.wz-pv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.wz-pv-saved-wrap { display: inline-flex; gap: 8px; align-items: center; margin-inline-start: auto; }
.wz-pv-saved { height: 30px; border-radius: 7px; border: 1px solid var(--wazen-border);
  background: var(--control-bg, #fff); color: var(--text-color); padding: 0 8px; font-size: 13px; }
.wz-pv-empty { padding: 42px 16px; text-align: center; color: var(--text-muted); }
.wz-pv-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.wz-pv-title span { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.wz-pv-scroll { overflow-x: auto; }
table.wz-pv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.wz-pv-table th, table.wz-pv-table td {
  border: 1px solid var(--wazen-border); padding: 7px 10px; white-space: nowrap;
}
table.wz-pv-table thead th { background: var(--wazen-emerald-700); color: #fff; font-weight: 600; }
table.wz-pv-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--wazen-emerald-100) 40%, transparent); }
table.wz-pv-table tfoot td { font-weight: 700; background: var(--wazen-surface); }
.wz-pv-num { text-align: left; font-variant-numeric: tabular-nums; direction: ltr; }
.wz-pv-total { font-weight: 700; }

/* عرض كامل دائمًا: المحتوى ياخد عرض الشاشة كله بدل العمود الضيق —
   طلب العميل بعد إخفاء «التطبيقات» من قائمة المستخدم. */
.main-section > .container,
.page-container .container,
body[data-route] .container {
  max-width: 100% !important;
  padding-inline: 24px;
}
@media (max-width: 991px) {
  .main-section > .container,
  .page-container .container,
  body[data-route] .container { padding-inline: 12px; }
}

/* =============================================================================
   الموبايل — تخفيف وتسريع
   ❗ الشكوى: البرنامج تقيل على الجوال. الأسباب اللي بنعالجها هنا:
      - خلفيات وظلال وتدرّجات كتير بترسم في كل تمرير (الجوال أضعف في ده).
      - مربعات الصفحة الرئيسية بأعمدة ضيقة بتخلي الكلام يتكسّر.
      - أهداف اللمس صغيرة (أقل من 40 بكسل) فالضغط بيضيع.
   الشبكة نفسها بتتعالج من ناحية الخادم (تسخين الكاش + النفق).
============================================================================= */
@media (max-width: 767px) {
  /* الخلفيات الزخرفية: بتتشال على الجوال — أهم حاجة السرعة */
  .wz-bg-default,
  .wz-home-bg,
  .wz-watermark { display: none !important; }

  /* ❗ حتى طبقة الخلفية الواحدة بتكلّف على الشاشات الصغيرة: التدرّج
     القُطري بيتحسب على مساحة الشاشة كلها. على الجوال لون واحد يكفي. */
  body::before { background: var(--wz-page-a); }

  .wz-grid, .wz-act-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }

  /* ❗ الظلال بتجبر المتصفح يرسم كل عنصر في طبقة لوحدها. على الجوال
     بنستبدلها بخط فاصل — نفس الإحساس بجزء من التكلفة. */
  .wz-card, .widget, .frappe-card, .form-section, .page-head, header.navbar {
    box-shadow: none !important;
  }

  /* أهداف اللمس: 40 بكسل على الأقل */
  .btn, .list-row-col .list-row-checkbox, .sidebar-item-container .item-anchor,
  .wz-nav a, .link-item, .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .page-actions .btn { padding-inline: 14px; }

  /* ❗ `-webkit-overflow-scrolling: touch` اتشالت: ميتة من iOS 13 (التمرير
     بالزخم بقى الافتراضي)، ومالهاش أي أثر في كروم أندرويد أصلًا. ومنطقة
     التمرير نفسها جاية من `overflow: auto` مش منها، فمفيش حاجة اتخسرت.
     وفي iOS القديم كانت بتحوّل العنصر لطبقة مركّبة بترسم فوق إخواتها. */

  /* ❗ القوائم الطويلة: المتصفح بيحسب تنسيق ورسم كل صف حتى لو برّه الشاشة.
     content-visibility بتخليه يتخطى الصفوف اللي مش ظاهرة، و
     contain-intrinsic-size بتحجزلها مكانها عشان شريط التمرير ما ينطّش.
     ده بيقلّل شغل التنسيق على قايمة 100 صف لأقل من العُشر. */
  .list-row-container,
  .frappe-list .result .list-row-container,
  .grid-body .grid-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 46px;
  }

  /* ❗ الحركات: بدل ما نقصّر مدتها، بنوقّفها خالص. تحديد مدة انتقال لكل
     عنصر (‎*‎) بيخلي المتصفح يراقب تغيّر كل خاصية على كل عنصر — وده في
     حد ذاته تكلفة. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* صفحة التقرير المخصص على الجوال: عمود واحد */
  .wz-pv-row label { min-width: 100%; flex: 1 1 100%; }
  .wz-pv-actions { flex-direction: column; align-items: stretch; }
  .wz-pv-saved-wrap { margin-inline-start: 0; }
}


/* =============================================================================
   إخفاء دعاية «جرّب مصمم الطباعة الجديد»
   ❗ فرابي بيحط الرابط ده في شريط شاشة الطباعة (printing/page/print/print.js)،
      وهو رابط لمتجر خارجي مالوش لازمة عندنا. بنخفي الرابط والحاوية بتاعته
      من غير ما نلمس ملفات فرابي (عشان الترقيات).
   ============================================================================= */
.inner-page-message a[href*="print_designer"],
.inner-page-message a[href*="print-designer"] { display: none !important; }
.inner-page-message:has(> a[href*="print_designer"]),
.inner-page-message:has(> a[href*="print-designer"]) { display: none !important; }

/* =============================================================================
   إصلاحات واجهة — قوائم الاقتراح داخل النوافذ + الشريط العلوي على الصفحات العريضة
   ============================================================================= */

/* ---- قائمة الاقتراح بتطلع برّه النافذة في الوضع العربي ----------------------
   ❗ Awesomplete (قائمة اقتراحات الحقول المرتبطة) بتتظبط بـ left: 0 — وده صح
      في الاتجاه الإنجليزي وغلط عندنا: بتبتدي من حافة الحقل اليسرى فتخرج
      برّه النافذة وتغطي إطارها. بنربطها بالحافة اليمنى ونخليها فوق النافذة.
   ---------------------------------------------------------------------------- */
[dir="rtl"] .awesomplete > ul,
html[lang="ar"] .awesomplete > ul {
  right: 0 !important;
  left: auto !important;
  text-align: right;
  min-width: 100%;
  max-width: 100%;
}
.awesomplete > ul { box-sizing: border-box; }
.modal .awesomplete > ul,
.modal-dialog .awesomplete > ul { z-index: 1060 !important; }
.modal-body,
.modal-content { overflow: visible; }

/* ---- الصفحة ما تزحفش أفقيًا (الشريط العلوي كان بيقف قبل آخر الصفحة) --------
   ❗ لما جدول تقرير أو رسم بياني عريض بيدفع عرض الصفحة كلها، الجسم بيبقى
      أعرض من الشاشة. الشريط العلوي عرضه 100% من الشاشة، فلما تزحف يمين
      بيبان فراغ أبيض بعد نهايته. الحل من أصل المشكلة: الجدول والرسم
      يزحفوا جوه صندوقهم، مش يوسّعوا الصفحة.
   ---------------------------------------------------------------------------- */
.layout-main-section-wrapper,
.layout-main-section,
.page-body,
.page-content,
.report-wrapper,
.dashboard-section { min-width: 0; }

.report-wrapper .datatable,
.dt-scrollable,
.frappe-chart,
.chart-container,
.frappe-chart-container { max-width: 100%; }


/* =============================================================================
   قائمة «مساعدة»: «دعم وازن» و«اختصارات لوحة المفاتيح» بس
   ❗ فرابي بيحقن في القائمة دي روابط توثيق ERPNext حسب الصفحة اللي أنت فيها
      (فاتورة مبيعات، Accounts Opening Balance، Recurring Sales Invoice...)
      وبتوديك لموقع erpnext بالإنجليزي. مصدرها help_links.js — يعني مش
      موجودة في «إعدادات شريط التنقل» عشان نخفيها من هناك.
   ============================================================================= */
.dropdown-help #help-links,
.dropdown-help .dropdown-divider.documentation-links { display: none !important; }

/* =============================================================================
   مبدّل الشركات — الأيقونة الدائرية العائمة
   ❗ على الشمال فيزيائيًا (left مش inset-inline) عشان مكانها يفضل ثابت
      سواء الواجهة عربي أو إنجليزي — المستخدم بيتعوّد على مكان الزرار.
   ❗ الارتفاع 24 بكسل من تحت: المساحة اللي فوقها محجوزة لأيقونة كلود.
   ============================================================================= */
.wz-co-btn {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 1035;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  /* ❗ الزرار ده بيستخدم ألوان اللوحة مباشرة مش متغيرات التيمة — عن قصد:
     لازم يفضل أخضر غامق في كل المظاهر عشان الشعار الأبيض اللي جواه يبان.
     لو مشى مع التيمة، في المظهر الفاتح هيبقى أبيض على أبيض. */
  border: 2px solid color-mix(in srgb, var(--wazen-emerald-300) 45%, transparent);
  background: linear-gradient(135deg, var(--wazen-emerald-900) 0%, var(--wazen-emerald-700) 100%);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--wz-shadow) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.wz-co-btn:hover { border-color: var(--wazen-gold-500); }

/* ❗ الشعار أبيض جوه الدايرة زي شعار القائمة الجانبية. الفلتر ده بيحوّل
   أي شعار — مهما كانت ألوانه — لأبيض خالص، فكل شركة شكلها هيبقى موحّد
   ونضيف على الخلفية الخضرا، من غير ما نطلب من كل شركة نسخة بيضا من شعارها. */
.wz-co-btn .wz-co-logo { filter: brightness(0) invert(1); }
.wz-co-btn .wz-co-initial { color: var(--wazen-white); }
.wz-co-btn:focus-visible { outline: 2px solid var(--wz-accent); outline-offset: 2px; }

/* ❗ contain مش cover: شعارات الشركات عريضة، و cover بتقصّها فيبان
   جزء منها بس. contain بتوريها كاملة جوه الدائرة. */
.wz-co-logo { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.wz-co-face .wz-co-logo { padding: 3px; }
.wz-co-initial {
  font-weight: 700;
  line-height: 1;
  color: var(--wz-navbar-text);
}

/* ---- اللوحة ---- */
.wz-co-panel {
  position: fixed;
  left: 20px;
  bottom: 88px;
  z-index: 1036;
  width: min(330px, calc(100vw - 40px));
  max-height: min(60vh, 460px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--wz-line);
  background: var(--wz-surface, var(--wz-glass));
  box-shadow: 0 14px 40px color-mix(in srgb, var(--wz-shadow) 55%, transparent);
  overflow: hidden;
}
.wz-co-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--wz-heading);
  border-bottom: 1px solid var(--wz-line);
}
.wz-co-count { font-weight: 400; font-size: 12px; color: var(--wz-muted); }
.wz-co-list { overflow-y: auto; }

.wz-co-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
  color: var(--wz-text);
}
.wz-co-item:hover { background: var(--wz-glass-hover); }
.wz-co-item.active { background: color-mix(in srgb, var(--wz-accent) 12%, transparent); }

.wz-co-face {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wz-accent) 16%, transparent);
  border: 1px solid var(--wz-line);
}
.wz-co-face .wz-co-initial { color: var(--wz-heading); }

.wz-co-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wz-co-name {
  font-weight: 600;
  line-height: 1.35;
  /* ❗ الاسم ممكن يكون طويل — بيلف مش بيتقص */
  overflow-wrap: anywhere;
}
.wz-co-meta { font-size: 11px; color: var(--wz-muted); overflow-wrap: anywhere; }
.wz-co-check { color: var(--wz-accent); font-weight: 700; }

.wz-co-add {
  display: block;
  padding: 11px 14px;
  border-top: 1px solid var(--wz-line);
  color: var(--wz-accent) !important;
  font-weight: 600;
  text-decoration: none !important;
}
.wz-co-add:hover { background: var(--wz-glass-hover); }

/* على الجوال: الزرار أصغر شوية وقريب من الحافة */
@media (max-width: 767px) {
  .wz-co-btn { width: 46px; height: 46px; left: 14px; bottom: 16px; }
  .wz-co-panel { left: 14px; bottom: 72px; width: calc(100vw - 28px); }
}

/* =============================================================================
   درج الشريط الجانبي على الجوال والتابلت
   ❗ المشكلة: على الشاشات الصغيرة فرابي بينقل الشريط الجانبي لدرج منزلق
      ويحط عليه ‎background: var(--fg-color)‎ — أبيض. القاعدة دي أخص من
      قاعدة الخلفية بتاعتنا فبتغلبها، والنتيجة: درج أبيض ونصوصه بلون فاتح
      (متصمّم لخلفية غامقة) = كلام مش باين خالص. المستخدم وصفها «كأنه لاج».
   ❗ كل قاعدة لوحدها مش مجمّعة: لو المتصفح ما بيدعمش ‎:has()‎ بيتجاهل
      القاعدة اللي فيها بس، وباقي القواعد تفضل شغالة.
   ============================================================================= */
@media (max-width: 991px) {
  /* الأساس: أي درج جانبي ياخد لون لوحاتنا مش الأبيض */
  .overlay-sidebar { background: var(--wz-panel-bg) !important; }

  /* درج مساحات العمل (الأقسام) — ده اللي نصوصه فاتحة فمحتاج خلفية غامقة */
  .overlay-sidebar:has(.desk-sidebar) { background: var(--wz-side-bg) !important; }
  .overlay-sidebar .desk-sidebar { background: transparent !important; }

  /* العناصر جواه تاخد نفس ألوان الشريط الجانبي العادي */
  .overlay-sidebar .desk-sidebar-item,
  .overlay-sidebar .desk-sidebar-item a,
  .overlay-sidebar .sidebar-item-label,
  .overlay-sidebar .standard-sidebar-label { color: var(--wz-side-text-dim) !important; }

  .overlay-sidebar .desk-sidebar-item.selected a,
  .overlay-sidebar .desk-sidebar-item.selected span,
  .overlay-sidebar .desk-sidebar-item:hover a,
  .overlay-sidebar .desk-sidebar-item:hover .sidebar-item-label {
    color: var(--wz-side-text) !important;
  }

  /* الطبقة السودا ورا الدرج تبقى أوضح شوية عشان الفصل يبان */
  .layout-side-section div.close-sidebar { opacity: 0.45; }
}

/* =============================================================================
   المهمة 2 — الجداول الفرعية (الأصناف، الضرائب، الدفعات المقدمة، شروط السداد)
   ⚑ مفعّلة للكل (html.wz-grid-v2). الإيقاف في متصفح واحد: ?wz_preview=off

   ❗ السبب الحقيقي لـ«البيانات سايحة على بعض»: فرابي بيرسم حدود الجدول بـ
      --table-border-color، وقيمته الافتراضية --gray-200. وإحنا رابطين
      --gray-200 بخلفية الحقول (أبيض)، فكل حدود الجداول في النظام كانت
      بيضا على خلفية بيضا — الخطوط موجودة بس مش باينة.
      الإصلاح: لون حد الجدول بقى من لون الخطوط في الهوية (في التلات مظاهر).
============================================================================= */
html.wz-grid-v2 {
  --table-border-color: var(--wz-line-strong);
}
html.wz-grid-v2 .form-grid {
  border: 1px solid var(--wz-line-strong);
}
/* صف العناوين: خلفية خفيفة وخط تحته عشان يتفصل عن البيانات */
html.wz-grid-v2 .form-grid .grid-heading-row {
  background: color-mix(in srgb, var(--wz-accent) 8%, var(--wz-raised));
  border-bottom: 1px solid var(--wz-line-strong);
  color: var(--wz-heading);
  font-weight: 600;
}
/* كل سطر وكل خلية ليهم حد واضح */
html.wz-grid-v2 .form-grid .grid-body .grid-row {
  border-bottom: 1px solid var(--wz-line);
}
html.wz-grid-v2 .form-grid .grid-body .grid-row:last-child {
  border-bottom: 0;
}
html.wz-grid-v2 .form-grid .grid-static-col,
html.wz-grid-v2 .form-grid .row-index {
  border-inline-end: 1px solid var(--wz-line);
}
html.wz-grid-v2 .form-grid .grid-body .grid-row:nth-child(even) .data-row:not(.editable-row) {
  background: color-mix(in srgb, var(--wz-accent) 3%, transparent);
}

/* الداكن: خطوط الهوية ١٣٪ و٨٪ أبيض — باينة بس باهتة جدًا بين السطور */
html.wz-grid-v2[data-theme="dark"] .form-grid {
  border-color: color-mix(in srgb, var(--wazen-white) 24%, transparent);
}
html.wz-grid-v2[data-theme="dark"] .form-grid .grid-heading-row {
  border-bottom-color: color-mix(in srgb, var(--wazen-white) 24%, transparent);
}
html.wz-grid-v2[data-theme="dark"] .form-grid .grid-body .grid-row,
html.wz-grid-v2[data-theme="dark"] .form-grid .grid-static-col,
html.wz-grid-v2[data-theme="dark"] .form-grid .row-index {
  border-color: color-mix(in srgb, var(--wazen-white) 15%, transparent);
}

/* زر حذف السطر (بدل خانة التحديد المتعدد) */
html.wz-grid-v2 .wz-row-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline-start: 6px;
  border-radius: 6px;
  color: var(--wz-text-dim);
  cursor: pointer;
}
html.wz-grid-v2 .wz-row-delete:hover,
html.wz-grid-v2 .wz-row-delete:focus-visible {
  color: var(--wazen-danger);
  background: color-mix(in srgb, var(--wazen-danger) 12%, transparent);
  outline: none;
}
html.wz-grid-v2 .wz-row-delete .icon { stroke: currentColor; }
html.wz-grid-v2 .form-grid .btn-open-row { display: inline-flex; }

/* عمود «المبلغ» محسوب: علامة معلومة صغيرة بدل نجمة «إلزامي» */
html.wz-grid-v2 .grid-heading-row .static-area.wz-computed::after {
  content: " ⓘ";
  color: var(--wz-text-dim);
  font-weight: 400;
  cursor: help;
}

/* حالة «لا توجد بيانات» جوّه إطار الجدول */
html.wz-grid-v2 .form-grid .grid-empty {
  padding-block: 24px;
  color: var(--wz-text-dim);
}

/* =============================================================================
   توسيع حوار معاينة القيد والمخزون (W-09)

   ❗ حوار «extra-large» بتاع فرابي عرضه ثابت، ومعاينة القيد أعمدتها كتير
      فبتتعصر. الزرار في wazen.bundle.js بيضيف/يشيل الصنف ده.
   ❗ بنسيب هامش بسيط على الجناب بدل ملء الشاشة بالكامل: حوار ملزّق
      في حافة الشاشة بيبقى صعب تقفله على اللمس.
============================================================================= */
.modal-dialog.wz-modal-wide {
  max-width: calc(100vw - 32px) !important;
  width: calc(100vw - 32px) !important;
  margin-inline: 16px !important;
}
.modal-dialog.wz-modal-wide .modal-body {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.wz-expand { padding: 0 8px; opacity: 0.75; }
.wz-expand:hover { opacity: 1; }

/* ===========================================================================
   وازن — قصّ أرقام المستندات وتجاوز الجداول (T-20261021-01 · ① و⑤)

   ❗ ① العطل: أرقام الفواتير في القوائم بتبان كده:
          ...-2026-00020      ...V-2026-00022
      مش ناقصة في البيانات — القيمة سليمة والقائمة بتترجم قيمها فعلًا
      (list_view.js:871 بيعمل __(value)). القص بصري بحت:
      `.ellipsis` + عمود ضيق.

   ❗ وليه بالذات **أول** النص هو اللي بيضيع: الرقم لاتيني جوّه حاوية
      اتجاهها RTL، فالمتصفح بيحط النقط في «بداية» السطر بصريًا =
      ناحية اليمين. والبادئة (ACC-SINV / ACC-PINV) هي اللي بتفرّق بين
      فاتورة مبيعات ومشتريات ومرتجع — يعني اللي بيضيع هو **المعلومة
      المميِّزة**، واللي بيفضل هو الرقم المسلسل المشترك.

   ❗ `direction: ltr` على خلية المعرّف بتخلي الرقم يترسم زي ما هو
      لاتيني، فلو اضطر يتقص بيتقص من **آخره** (الأرقام) مش من أوله
      (النوع). و`text-align: right` بتحافظ على محاذاة الصف العربي.
      دي مش حيلة تجميلية — دي بتحدد أي نص يضيع لما المساحة تضيق.
   ======================================================================== */
/* ❗ المحدِّد ده **مقيس من DOM حي**، مش مستنتج. البنية الفعلية:
     <div class="list-row-col ellipsis hidden-xs">
       <span class="ellipsis" title="المعرّف: ACC-SINV-2026-00020">
         <a class="filterable ellipsis" data-filter="name,=,ACC-SINV-2026-00020">
   أول محاولة مني استخدمت `.like-disabled-input` وهي **مش موجودة
   أصلًا** في القائمة — لو ماكنتش فحصت الـDOM كانت القاعدة هتتكتب
   وماتعملش حاجة، وأقول إنها اتصلحت. */
.list-row-col a.filterable[data-filter^="name,"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ❗ 111 بكسل مش كفاية لـACC-SINV-2026-00020 (19 حرفًا) — مقيسة حيًّا.
   و`:has()` هي الطريقة الوحيدة نستهدف بيها العمود من محتواه، لأن
   فرابي مابيحطش أي صنف يميّز عمود المعرّف. مدعومة في كل المتصفحات
   الحديثة؛ ولو مادُعمتش بيرجع العرض الافتراضي — يعني يفشل لنفس
   الوضع القديم مش لوضع أسوأ. */
.list-row-col:has(> .ellipsis > a.filterable[data-filter^="name,"]) {
  min-width: 170px;
  flex: 0 0 170px;
}

/* ❗ وصف العمود في **شريط العناوين** لازم ياخد نفس العرض — وإلا
   العناوين تتزحزح عن صفوفها. ده انحدار عملته أنا في bb8778a: وسّعت
   عمود الصف لـ170 وسيبت العنوان 111، فالفرق 59 بكسل زحزح **كل**
   الأعمدة اللي بعده. مقيس قبل الإصلاح:
       العنوان -24 · الحالة -36 · الإجمالي -47 · حالة زاتكا -59
   وبعده صفر في الكل.
   بنيته مختلفة عن الصف (span بدل a)، فمحتاج محدّدًا خاصًا:
       <span data-sort-by="name" title="انقر للفرز حسب المعرّف"> */
.list-row-head .list-row-col:has(> span[data-sort-by="name"]) {
  min-width: 170px;
  flex: 0 0 170px;
}