/* ============================================================
   arabic-ui.css — DACUM Lite
   ------------------------------------------------------------
   طبقة واحدة تجمع كل ما يخصّ الخط العربي واتجاه الكتابة في
   الواجهة. أُنشئت كملف مستقلّ عمداً وليس كتعديلات متفرّقة داخل
   base.css و components.css و index.html.

   لماذا ملف مستقلّ؟
   لأن هذين الإصلاحين ضاعا مرّتين. حين تكون القواعد موزّعة على
   ثلاثة ملفات، يكفي أن يُستبدل أحدها بنسخة أقدم أثناء دمج يدوي
   ليختفي نصف الإصلاح دون أن يلاحظ أحد. تجميعها هنا يجعل الفقدان
   مرئياً فوراً: إمّا أن يكون الملف موجوداً ومرتبطاً فيعمل كل
   شيء، أو يكون مفقوداً فيظهر العطبان معاً — لا حالة وسطى صامتة.

   يجب أن يُحمَّل هذا الملف بعد base.css و layout.css و
   components.css مباشرةً، وقبل أي <style> داخل index.html.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   ١ — خط Cairo المستضاف محلياً
   ══════════════════════════════════════════════════════════════
   الملف ./fonts/Cairo.woff2 كان مُدرجاً في قائمة sw.js منذ
   الإصدار 3.2.1، لكن لم توجد قاعدة @font-face واحدة تستخدمه —
   فكان المتصفح يخزّنه للعمل دون اتصال ولا يعرضه أبداً.

   لا طلب خارجي إلى Google Fonts: الخط يأتي من نفس النطاق،
   فيعمل التطبيق كاملاً دون اتصال.

   font-display:swap — النص يظهر فوراً بخط احتياطي ثم يُستبدل
   حين يجهز Cairo. البديل (block) يترك الواجهة فارغة لحظات على
   الاتصالات البطيئة.

   unicode-range — يحصر تحميل الخط على النطاقات العربية، فلا
   يُجلب الملف إطلاقاً في الواجهة الإنجليزية أو الفرنسية. */

@font-face {
    font-family: 'Cairo';
    src: url('./fonts/Cairo.woff2') format('woff2');
    font-weight: 200 1000;          /* الملف متغيّر الأوزان */
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061F;
}

/* احتياط: نسخة ثابتة الوزن إن كان الملف المتاح ليس متغيّراً.
   المتصفح يتجاهل هذه إن نجحت الأولى. */
@font-face {
    font-family: 'Cairo';
    src: url('./fonts/Cairo-Regular.woff2') format('woff2'),
         url('./fonts/Cairo-Regular.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061F;
}


/* ══════════════════════════════════════════════════════════════
   ٢ — تطبيق الخط على الواجهة العربية
   ══════════════════════════════════════════════════════════════
   Cairo أولاً، ثم السلسلة الاحتياطية الأصلية كما هي. بفضل
   unicode-range أعلاه، المحارف اللاتينية داخل النص العربي
   تُرسم بـ Segoe UI تلقائياً — وهو المطلوب: الأسماء اللاتينية
   والأرقام تبدو طبيعية داخل الجملة العربية.

   القاعدة تستخدم :where() لإبقاء وزن الانتقائية عند الصفر، فلا
   تتغلّب على أي قاعدة خطّ أكثر تحديداً قد تُضاف لاحقاً. */

html[dir="rtl"] :where(body, button, select,
                       h1, h2, h3, h4, label, .container) {
    font-family: 'Cairo', 'Segoe UI', Tahoma, 'Arial', sans-serif;
}

/* حقول الإدخال ومناطق النص تحتاج ذكراً صريحاً بلا :where().
   السبب: base.css يحدّد الخط عبر `input[type="text"], textarea`
   بوزن (0,1,1) للأول. و:where() وزنه صفر، فكانت القاعدة أعلاه
   تتعادل معه أو تخسر — وهو ما جعل Cairo يظهر في العناوين ويغيب
   عن مربّعات النص. الانتقائية هنا مقصودة، لا سهو. */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input:not([type]),
html[dir="rtl"] textarea,
html[dir="rtl"] [contenteditable="true"],
html[dir="rtl"] [contenteditable="plaintext-only"] {
    font-family: 'Cairo', 'Segoe UI', Tahoma, 'Arial', sans-serif;
}

/* العناصر التي تُصرّح font-family:inherit تتبع الأصل تلقائياً.
   أمّا التي تحمل سلسلة صريحة فتحتاج ذكراً مباشراً. */
html[dir="rtl"] .wv-container,
html[dir="rtl"] .top-toolbar,
html[dir="rtl"] #sidebar {
    font-family: 'Cairo', 'Segoe UI', Tahoma, 'Arial', sans-serif;
}

/* تحسين بصري: Cairo أعلى قليلاً في ارتفاع السطر من Segoe UI،
   فبدون هذا تبدو البطاقات مزدحمة عند التبديل إلى العربية. */
html[dir="rtl"] body {
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   ٣ — اتجاه الكتابة داخل البطاقات القابلة للتحرير
   ══════════════════════════════════════════════════════════════
   هذا هو العطب الظاهر في لقطة الشاشة: نصّ الواجب يلتفّ فيهبط
   السطر الثاني إلى اليسار بدل اليمين.

   السبب: العناصر تُبنى في design-system.js عبر createEditable()
   بـ contenteditable، ولا ترث اتجاه <html> لأن أياً من
   .cv-duty-text و .cv-task-text و .wv-duty-title و .wv-task-text
   لا يصرّح direction ولا text-align. المتصفح يطبّق افتراض
   الوثيقة على الفقرة الأولى فقط، وسطور الالتفاف اللاحقة تُحاذى
   لليسار.

   لماذا direction:rtl وليس text-align:right وحدها؟
   لأن المحاذاة تحرّك النص بصرياً فقط. direction تضبط اتجاه
   الفقرة الأساسي، وهو ما يحدّد أيضاً موضع مؤشّر الكتابة، وسلوك
   مفاتيح Home/End، ومكان علامات الترقيم في نهاية الجملة. بدونها
   تنتقل النقطة والفاصلة إلى الطرف الخاطئ. */

html[dir="rtl"] .cv-duty-text,
html[dir="rtl"] .cv-task-text,
html[dir="rtl"] .wv-duty-title,
html[dir="rtl"] .wv-task-text,
html[dir="rtl"] .task-label,
html[dir="rtl"] .duty-title,
html[dir="rtl"] .section-header-editable h3,
html[dir="rtl"] [contenteditable="true"],
html[dir="rtl"] [contenteditable="plaintext-only"] {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* unicode-bidi:plaintext يستحقّ توضيحاً — هو ما يجعل السطر
   المختلط يعمل. يحدّد اتجاه كل فقرة من أول محرف قويّ فيها، لا
   من اتجاه الحاوية. فالنتيجة:
       "تركيب مضخة Grundfos طراز CR-32"   ← عربي، والاسم اللاتيني
                                             يبقى بترتيبه الصحيح
       "Install pump CR-32"               ← لاتيني، يُحاذى لليسار
                                             تلقائياً رغم rtl
   وهذا مهمّ في مخططات DACUM تحديداً، حيث تكثر المصطلحات التقنية
   والاختصارات اللاتينية داخل المهام العربية. */


/* ── نائب النص (placeholder) داخل العناصر الفارغة ─────────────
   يُرسم عبر ::before في components.css، ويحتاج المحاذاة نفسها
   وإلا ظهر "أدخل المهمة" ملتصقاً باليسار في بطاقة فارغة. */
html[dir="rtl"] .cv-duty-text:empty::before,
html[dir="rtl"] .cv-task-text:empty::before,
html[dir="rtl"] .wv-duty-title:empty::before,
html[dir="rtl"] .wv-task-text:empty::before {
    direction: rtl;
    text-align: right;
}


/* ── مُعرّفات البطاقات: A · B1 · C3 ───────────────────────────
   تبقى LTR دائماً. الرمز "B1" ليس نصاً عربياً بل معرّف نظامي،
   وتركه يرث RTL يقلبه إلى "1B" في بعض المتصفحات. */
html[dir="rtl"] .cv-task-label,
html[dir="rtl"] .cv-duty-index-label,
html[dir="rtl"] .wv-duty-badge,
html[dir="rtl"] .wv-task-label {
    direction: ltr;
    unicode-bidi: isolate;
}


/* ══════════════════════════════════════════════════════════════
   ٤ — حقول الإدخال ومناطق النص
   ══════════════════════════════════════════════════════════════
   تبويب المعلومات الإضافية يعتمد على <textarea>، والقوائم
   النقطية والرقمية تُكتب فيها كنصّ عادي. بدون direction تظهر
   العلامة "•" في نهاية السطر بدل بدايته. */

html[dir="rtl"] input[type="text"],
html[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* حقل التاريخ استثناء: صيغته رقمية دولية وقلبها يربك الإدخال. */
html[dir="rtl"] input[type="date"] {
    direction: ltr;
    text-align: right;
}


/* ══════════════════════════════════════════════════════════════
   ٥ — تحقّق بصري سريع
   ══════════════════════════════════════════════════════════════
   لمعرفة ما إذا كان Cairo محمَّلاً فعلاً دون فتح أدوات المطوّر،
   افتح الطرفية واكتب:

       document.fonts.check('16px Cairo')

   true  = الخط جاهز.
   false = الملف ./fonts/Cairo.woff2 مفقود أو مساره خاطئ.

   وللتحقّق من الاتجاه: اكتب في بطاقة واجب جملة عربية طويلة تكفي
   لسطرين. السطر الثاني يجب أن يبدأ من اليمين. */
