/* ‏U9 · رموزُ التصميم — طبقتان: أوّليّةٌ ثابتة، ودلاليّةٌ تنقلب مع الوضع.

   **ولماذا طبقتان لا واحدة.** الوضعُ الداكن ليس «ألوانًا أخرى» بل **إعادةُ
   إسنادٍ للأدوار**: ما كان سطحًا فاتحًا يصير سطحًا داكنًا، والحبرُ ينقلب،
   والحدودُ تخفّ. فلو كانت الأدوارُ مكتوبةً قيمًا مباشرةً في 3,194 سطرًا لصار
   الوضعُ الداكن نسخةً ثانية من الملفّ كلِّه. والطبقةُ الدلاليّة تجعله **إعادةَ
   تعريفِ عشرين رمزًا** لا أكثر.

   **وهذا هو السبب الحقيقيّ لاستبدال الألوان الخام أيضًا** — لا الترتيب: لونٌ
   مكتوبٌ `#fff` مباشرةً **لا ينقلب**، فيبقى بياضًا في شاشةٍ داكنة. وكان في
   الملفّ **113 لونًا خامًا و41 `rgba`** خارج الرموز، وكلُّها كانت ستبقى فاتحةً
   وسطَ الظلام.

   **والتباينُ محسوبٌ لا مذوق.** الشريطُ أعلاه (‏U8) يشرح لماذا: نصفُ من
   يستعمل هذا التطبيق يقرأ **تحت شمس مباشرة**. فقيمُ الوضع الفاتح **لم تتغيّر
   قيمةً واحدة** — نُقلت أسماؤها فقط. وأيُّ تحسينٍ للداكن لا يجوز أن يُنقص
   تباينَ الفاتح، وهو شرطٌ منصوصٌ في البطاقة. */

:root {
  color-scheme: light;

  /* ---- الطبقة الأوّليّة: قيمٌ لا معنى لها وحدها ---------------------- */
  --c-white: #ffffff;
  --c-off-white: #fbfcf8;
  --c-paper: #f7f8f4;
  --c-mist: #f3f4f6;
  --c-cloud: #f7f8fa;
  --c-line: #dfe7e3;
  --c-line-cool: #e5e5e5;
  --c-ink: #16231f;
  --c-ink-deep: #101614;
  --c-slate: #5f6a66;
  --c-slate-cool: #4b5563;
  --c-slate-soft: #6b7280;
  --c-slate-faint: #9ca3af;
  --c-green: #176b52;
  --c-green-mist: #eaf4ef;
  /* تشييدنا: الرمليُّ مساعدٌ للتمييز البصريّ، والعاجيُّ سطحُ الهوية. */
  --c-sand: #d9b36c;
  --c-ivory: #f7f4ec;
  /* لونٌ ثانٍ قريبٌ منه ومختلفٌ عنه: كان `--panel-soft` في اللوحة القديمة.
     وضمُّهما في واحد كان **يغيّر قيمةً في الوضع الفاتح** — وهو ما تمنعه
     البطاقة نصًّا. والفرقُ بينهما لا تراه العين، لكنّ «لا تتغيّر قيمة» شرطٌ
     يُقاس لا يُقدَّر. */
  --c-panel-mist: #edf5ef;
  --c-teal: #177373;
  --c-teal-deep: #126060;
  --c-teal-mist: #eef8f7;
  --c-amber: #b7791f;
  --c-amber-deep: #8a5504;
  --c-amber-mist: #fff6df;
  --c-red: #b13a2c;
  --c-red-line: #f3c9c1;
  --c-red-mist: #fff0ed;
  --c-blue: #2b6cb0;
  /* قنواتُ الأوّليّات — تُبنى منها الشفافيّاتُ، وتُعاد إليها الأدوارُ عند
     الطباعة. ووجودُها هنا يمنع أن تُكتَب القيمةُ نفسُها في ثلاثة مواضع. */
  --c-ink-rgb: 23 32 29;
  --c-green-rgb: 35 122 87;
  --c-teal-rgb: 31 138 138;
  --c-amber-rgb: 196 122 12;
  --c-slate-rgb: 104 115 111;
  --c-white-rgb: 255 255 255;
  --c-blue-rgb: 56 189 248;
  --c-red-rgb: 177 58 44;
  --c-ink-deep-rgb: 16 22 20;
  --c-slate-faint-rgb: 148 163 184;

  /* ---- الطبقة الدلاليّة: هذه وحدها ما ينقلب في الوضع الداكن --------- */
  --surface: var(--c-white);
  --surface-2: var(--c-off-white);
  --surface-3: var(--c-mist);
  --surface-cool: var(--c-cloud);
  --surface-page: var(--c-paper);
  --ink: var(--c-ink);
  --ink-strong: var(--c-ink-deep);
  --ink-2: var(--c-slate);
  --ink-2-cool: var(--c-slate-cool);
  --ink-3: var(--c-slate-soft);
  --ink-4: var(--c-slate-faint);
  --line: var(--c-line);
  --line-2: var(--c-line-cool);
  --brand: var(--c-green);
  --brand-soft: var(--c-green-mist);
  --surface-brand: var(--c-panel-mist);
  --accent: var(--c-teal);
  --accent-strong: var(--c-teal-deep);
  --accent-soft: var(--c-teal-mist);
  --warn: var(--c-amber);
  --warn-strong: var(--c-amber-deep);
  --warn-soft: var(--c-amber-mist);
  --danger: var(--c-red);
  --danger-line: var(--c-red-line);
  --danger-soft: var(--c-red-mist);
  --info: var(--c-blue);
  /* **لا رمزَ مستقلٌّ للنصّ فوق التعبئة — و`--surface` هو الصحيح.** كُتب أوّلًا
     `--on-fill: #ffffff` ثابتًا، وحسابُ التباين أسقطه: في الوضع الداكن تصير
     العلامةُ خضراءَ فاتحة، فالأبيضُ فوقها **2.15:1** — أي زرُّ الحفظ الأساسيّ
     غيرُ مقروء. و`var(--surface)` ينقلب معها بالضبط: أبيضُ فوق أخضرَ داكن
     نهارًا، وداكنٌ فوق أخضرَ فاتح ليلًا. فالقاعدةُ القائمة (‏`.primary-button`)
     كانت صحيحةً أصلًا، والرمزُ الزائد هو الذي كان خطأً. */
  /* الغطاءُ خلف النوافذ. أسودُ شفّاف في الوضعين — والشفافيةُ تشتدّ في الداكن
     لأن السطحَ الذي تحته أقربُ إلى لونها. */
  /* قنواتُ الألوان — لتُبنى منها الشفافيّاتُ فتنقلب مع الوضع. */
  --brand-rgb: var(--c-green-rgb);
  --accent-rgb: var(--c-teal-rgb);
  --warn-rgb: var(--c-amber-rgb);
  --ink-rgb: var(--c-slate-rgb);
  --surface-rgb: var(--c-white-rgb);
  --info-rgb: var(--c-blue-rgb);
  --danger-rgb: var(--c-red-rgb);
  --ink-deep-rgb: var(--c-ink-deep-rgb);
  --ink-4-rgb: var(--c-slate-faint-rgb);
  --shadow-tint-1: rgb(var(--c-ink-rgb) / 6%);
  --shadow-tint-2: rgb(var(--c-ink-rgb) / 8%);
  --scrim: rgba(9, 14, 12, 0.55);
  --scrim-soft: rgba(9, 14, 12, 0.28);

  /* ---- الأسماءُ القديمة تبقى أسماءً مستعارة ------------------------- */
  /* أحدَ عشرَ اسمًا يستعملها 3,194 سطرًا. تركُها مستعارةً يجعل هذه البطاقةَ
     **إضافةَ طبقةٍ لا إعادةَ كتابة**، ويُبقي الفرقَ مقروءًا. */
  --paper: var(--surface-page);
  --panel: var(--surface);
  --panel-soft: var(--surface-brand);
  --muted: var(--ink-2);
  --green: var(--brand);
  --teal: var(--accent);
  --amber: var(--warn);
  --red: var(--danger);
  --black: var(--ink-strong);

  /* ---- المسافات ------------------------------------------------------
     سلّمٌ من أربعة بكسلات. وكانت المسافاتُ تُكتب قيمًا في كل موضع، فكلُّ شاشةٍ
     جديدة تُعيد اختراعَ إيقاعها. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ---- أنصافُ الأقطار ------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- الظلال والارتفاع ---------------------------------------------
     ثلاثُ درجاتٍ لا أكثر: بطاقةٌ، ونافذةٌ منبثقة، ونافذةٌ مشروطة. وزيادتُها
     تجعل الاختيارَ ذوقًا في كل مرّة. */
  --shadow-1: 0 2px 8px rgba(23, 32, 29, 0.06);
  --shadow-2: 0 8px 24px rgba(23, 32, 29, 0.08);
  --shadow-3: 0 18px 50px rgba(23, 32, 29, 0.1);
  --shadow: var(--shadow-3);
  --z-sticky: 20;
  --z-overlay: 60;
  --z-modal: 80;

  /* ---- أحجامُ الخطّ --------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.8rem;

  /* ---- رموزُ اللمس الميدانيّ (‏U2) — لم تتغيّر ------------------------
     المستخدم اليومي الأكثر لهذا التطبيق مشرف موقع: واقف، على هاتف، بيد واحدة،
     وأحيانًا بقفازات. القيم هنا معلنة مرة واحدة بدل أن تتناثر أرقامًا في الملف
     كما كانت (‏38 و40 و44 و46 في مواضع متفرقة).
     48px هو حد أهداف اللمس الموصى به؛ اخترناه لا الحد الأدنى المطلق (24px في
     WCAG 2.5.8) لأن الإصبع بقفاز ليس مؤشر فأرة، وضغطة خاطئة في شاشة صرف مواد
     تعني رقمًا خاطئًا في المخزن. */
  --touch: 48px;
  --touch-gap: 12px;
  /* حقول الإدخال أعلى من الأزرار: الكتابة أطول من الضغط، والخطأ فيها أغلى. */
  --field-h: 52px;
  --font-body: "Alexandria", "Manrope", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-head: "Alexandria", "Manrope", "Segoe UI", Tahoma, Arial, sans-serif;
  font-family: var(--font-body);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ‏U9 · الوضعُ الداكن — إعادةُ إسنادٍ للأدوار، لا لوحةٌ ثانية.

   **والقاعدةُ التي حكمت الأرقام:** الحدُّ 4.5:1 لنصّ المتن (‏WCAG AA)، **بلا
   تخفيفٍ ولا استثناء** — وهو شرطُ الإغلاق حرفيًّا. والأسطحُ الداكنة ليست سوداءَ
   خالصة: `#000` على شاشةٍ OLED يُنتج هالةً حول النصّ الأبيض ويُتعب العين في
   قراءةٍ طويلة، فالأساسُ رماديٌّ مخضرٌّ يبقى قريبًا من هويّة المنتج.

   **والألوانُ الدلاليّة تُفتَح لا تُبقى:** الأخضرُ `#237a57` على سطحٍ داكن
   تباينُه دون الحدّ، فيصير أفتحَ في الداكن. وهذا هو الفرقُ بين وضعٍ داكن
   مصمَّمٍ وآخرَ مقلوبٍ آليًّا. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #1a221f;
  --surface-2: #212b28;
  --surface-3: #2a3532;
  --surface-cool: #232d2b;
  --surface-page: #131a18;
  --ink: #eef2f0;
  --ink-strong: #ffffff;
  --ink-2: #b6c1bd;
  --ink-2-cool: #aab4b1;
  --ink-3: #9aa5a1;
  --ink-4: #7d8884;
  --line: #33403c;
  --line-2: #3a4744;
  --brand: #5cc494;
  --brand-soft: #1e3830;
  --surface-brand: #1e3830;
  --accent: #55c2c2;
  --accent-strong: #7fd6d6;
  --accent-soft: #17332f;
  --warn: #e5b567;
  --warn-strong: #f0c98a;
  --warn-soft: #33290f;
  --danger: #f08c7d;
  --danger-line: #5a2a24;
  --danger-soft: #331915;
  --info: #7fb0e8;
  --brand-rgb: 92 196 148;
  --accent-rgb: 85 194 194;
  --warn-rgb: 229 181 103;
  --ink-rgb: 182 193 189;
  --surface-rgb: 26 34 31;
  --info-rgb: 127 176 232;
  --danger-rgb: 240 140 125;
  --ink-deep-rgb: 0 0 0;
  --ink-4-rgb: 125 136 132;
  --shadow-tint-1: rgb(0 0 0 / 35%);
  --shadow-tint-2: rgb(0 0 0 / 45%);
  --scrim: rgba(0, 0, 0, 0.68);
  --scrim-soft: rgba(0, 0, 0, 0.4);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* ‏D6 · **الفاتحُ هو الافتراضُ، ولا يُتَّبع تفضيلُ النظام.**

   كان المُحدِّدُ `:root:not([data-theme="light"])` — أي أن هاتفًا أو نظامًا
   مضبوطًا على الداكن يُعطي التطبيقَ داكنًا **بلا أن يطلبه أحد**، وأكثرُ
   الهواتف اليوم كذلك. وقرارُ صاحب المنتج: لا وضعَ داكنًا افتراضيًّا.

   وصار `:root[data-theme="dark"]` — فلا تنطبق هذه اللوحةُ إلّا على من اختار
   الداكنَ بالزرّ صراحةً، ويُحفَظ اختيارُه. والنتيجةُ بالحالات الأربع:

       نظامٌ فاتح · بلا اختيار   → فاتح
       نظامٌ داكن  · بلا اختيار   → **فاتح** (كان داكنًا)
       أيُّ نظام   · اختار داكنًا  → داكن
       أيُّ نظام   · اختار فاتحًا  → فاتح

   **والكتلةُ تبقى داخل `@media`** ولا تُنقَل خارجها: `tests/css-tokens.mjs`
   يحدّد نطاقَ الرموز من أوّل `:root {` إلى نهاية كتلة `prefers-color-scheme`،
   و`tests/css-contrast.mjs` يقتطع اللوحةَ الداكنةَ بموضعها. فنقلُها يُعطّل
   الحارسَين عن قراءة ما جاءا لقراءته — وحارسٌ لا يبلغ موضوعَه يُنتج ما
   يُنتجه حارسٌ نجح.

   **ولم يُنزَع الزرّ.** `qa-mobile` يشترط أن يبقى قابلًا للضغط على الهاتف،
   وهو شرطٌ محقّ: مشرفُ الموقع يعمل تحت شمسٍ مباشرةً نهارًا وفي الظلام ليلًا،
   والشاشةُ البيضاء في الظلام تُبهر العين. فالفرقُ الآن أن الداكنَ **يُطلَب
   ولا يُفرَض**. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --surface: #1a221f;
    --surface-2: #212b28;
    --surface-3: #2a3532;
    --surface-cool: #232d2b;
    --surface-page: #131a18;
    --ink: #eef2f0;
    --ink-strong: #ffffff;
    --ink-2: #b6c1bd;
    --ink-2-cool: #aab4b1;
    --ink-3: #9aa5a1;
    --ink-4: #7d8884;
    --line: #33403c;
    --line-2: #3a4744;
    --brand: #5cc494;
    --brand-soft: #1e3830;
    --surface-brand: #1e3830;
    --accent: #55c2c2;
    --accent-strong: #7fd6d6;
    --accent-soft: #17332f;
    --warn: #e5b567;
    --warn-strong: #f0c98a;
    --warn-soft: #33290f;
    --danger: #f08c7d;
    --danger-line: #5a2a24;
    --danger-soft: #331915;
    --info: #7fb0e8;
    --brand-rgb: 92 196 148;
  --accent-rgb: 85 194 194;
  --warn-rgb: 229 181 103;
  --ink-rgb: 182 193 189;
  --surface-rgb: 26 34 31;
  --info-rgb: 127 176 232;
  --danger-rgb: 240 140 125;
  --ink-deep-rgb: 0 0 0;
  --ink-4-rgb: 125 136 132;
  --shadow-tint-1: rgb(0 0 0 / 35%);
  --shadow-tint-2: rgb(0 0 0 / 45%);
  --scrim: rgba(0, 0, 0, 0.68);
    --scrim-soft: rgba(0, 0, 0, 0.4);
    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.5);
  }
}

/* ‏U9 · **الورقُ فاتحٌ دائمًا — مهما كانت السِّمة على الشاشة.**

   وهذا ليس تفصيلًا تجميليًّا. قواعدُ الطباعة في هذا الملفّ تقرأ الرموزَ
   الدلاليّة (`background: var(--surface)` · `color: var(--ink)`)، والملفّ يضبط
   `print-color-adjust` فيُجبر المتصفّحَ على طباعة الخلفيات. فمستخلصٌ يُطبَع
   والتطبيقُ في الوضع الداكن كان سيخرج **خلفيةً سوداء ونصًّا أبيض** — أي ورقةً
   لا تُقرأ، وحبرًا يُستهلك بلا فائدة.

   **وطباعةُ المستخلص شرطُ قبولٍ صريح** («مستخلصٌ مطبوع يطابق النموذج
   بالقرش»)، وهي أكثرُ ما يخرج من هذا التطبيق إلى يد طرفٍ آخر: المالك
   والاستشاريّ. فالعطبُ هنا يقع **عند العميل لا عند المستخدم**.

   **والقيمُ لا تُكرَّر:** تُعاد الأدوارُ إلى الطبقة الأوّليّة (`--c-*`) التي لا
   تنقلب أصلًا — فلا هيكسٌ مكتوبٌ مرّتين، ولا لوحةٌ ثالثة تُنسى عند التعديل.

   **والمُحدِّداتُ ثلاثةٌ عمدًا:** `:root[data-theme="dark"]` أعلى تخصيصًا من
   `:root`، فقاعدةُ طباعةٍ على `:root` وحده **تخسر** أمام الاختيار الصريح
   للوضع الداكن. وذكرُ المُحدِّدَين معًا يُساوي التخصيص، والترتيبُ اللاحق يحسم. */
@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    color-scheme: light;

    --surface: var(--c-white);
    --surface-2: var(--c-off-white);
    --surface-3: var(--c-mist);
    --surface-cool: var(--c-cloud);
    --surface-page: var(--c-paper);
    --ink: var(--c-ink);
    --ink-strong: var(--c-ink-deep);
    --ink-2: var(--c-slate);
    --ink-2-cool: var(--c-slate-cool);
    --ink-3: var(--c-slate-soft);
    --ink-4: var(--c-slate-faint);
    --line: var(--c-line);
    --line-2: var(--c-line-cool);
    --brand: var(--c-green);
    --brand-soft: var(--c-green-mist);
    --surface-brand: var(--c-panel-mist);
    --accent: var(--c-teal);
    --accent-strong: var(--c-teal-deep);
    --accent-soft: var(--c-teal-mist);
    --warn: var(--c-amber);
    --warn-strong: var(--c-amber-deep);
    --warn-soft: var(--c-amber-mist);
    --danger: var(--c-red);
    --danger-line: var(--c-red-line);
    --danger-soft: var(--c-red-mist);
    --info: var(--c-blue);
    --brand-rgb: var(--c-green-rgb);
    --accent-rgb: var(--c-teal-rgb);
    --warn-rgb: var(--c-amber-rgb);
    --ink-rgb: var(--c-slate-rgb);
    --surface-rgb: var(--c-white-rgb);
    --info-rgb: var(--c-blue-rgb);
    --danger-rgb: var(--c-red-rgb);
    --ink-deep-rgb: var(--c-ink-deep-rgb);
    --ink-4-rgb: var(--c-slate-faint-rgb);
    /* الظلالُ لا تُطبَع أصلًا، لكنّ تركَها داكنةً يُنتج حوافَّ رماديّةً على
       الورق في بعض المحرّكات. */
    --shadow-tint-1: rgb(var(--c-ink-rgb) / 6%);
    --shadow-tint-2: rgb(var(--c-ink-rgb) / 8%);
  }
}
h1, h2, h3, h4, .kicker {
  font-family: var(--font-head);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.is-hidden {
  display: none !important;
}

.kicker {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 24px;
  align-items: stretch;
}

/* LANDING-01: صفحة الدخول عمودٌ واحد في الوسط — بلا لوحةٍ تسويقية بجانبها. */
.login-shell.login-only {
  width: min(440px, 100%);
  grid-template-columns: 1fr;
  gap: 12px;
}

.login-back {
  justify-self: start;
  /* هدف لمس 48px كسائر الأزرار — أمسكه qa-mobile عند 73×21. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.login-back:hover { color: var(--green); }

.login-copy,
.login-panel,
.risk-banner,
.card,
.detail-panel,
.rail-account,
.project-switcher,
.modal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-copy {
  min-height: 590px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px);
  background:
    linear-gradient(90deg, rgb(var(--brand-rgb) / 8%), transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 33px, rgb(var(--accent-rgb) / 8%) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgb(var(--accent-rgb) / 8%) 34px 35px),
    var(--surface);
}

.login-copy h1 {
  max-width: 680px;
  margin: 0;
  /* AUTH-UX-2: كان 4.9rem فانكسر الشعار خمسة أسطر على شاشة مكتب. */
  font-size: clamp(1.9rem, 3.3vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.login-tagline {
  display: block;
  margin-top: 10px;
  color: var(--green);
  font-size: 0.78em;
}

.login-copy p:not(.kicker) {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.9;
}

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.proof-strip span,
.soft-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink);
  background: rgb(var(--surface-rgb) / 78%);
  font-size: 0.82rem;
  font-weight: 800;
}

.login-panel {
  padding: 28px;
}

.login-panel h2,
.login-panel p {
  margin: 0;
}

.login-panel p {
  margin-top: 6px;
  color: var(--muted);
}

.product-mark {
  /* تشييدنا: الرمز ملفُّ SVG إنتاجيّ بمسارات، لا رسمٌ بـCSS. المقاس الأدنى
     المعتمد في دليل الهوية 24px؛ هنا 76 على شاشة الدخول و44 في الشريط. */
  display: block;
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
}

.product-mark.small {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin: 0;
}

/* ‏BG-AUTH-01 · أنماطُ `.role-grid` و`.role-card` حُذفت مع الشبكةِ نفسِها.
   وتُحذف لا تُترك: صنفٌ بلا حاملٍ في المستند هو دعوةٌ إلى إعادةِ إحياءِ
   الشبكة لاحقًا «لأنّ النمطَ موجود»، و`tests/css-tokens.mjs` يقيس المستخدَم. */

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.auth-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-tabs button.active {
  color: var(--surface);
  background: var(--black);
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 18px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  font-weight: 900;
}

.social-button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--surface);
  background: #4285f4;
  font-weight: 900;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.remember-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800 !important;
}

.remember-row input {
  width: 16px;
  min-height: 16px;
}

.link-button {
  border: 0;
  padding: 0;
  color: var(--green);
  background: transparent;
  font-weight: 900;
}

.link-button.full {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}

.auth-note {
  margin-top: 12px !important;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.82rem;
  line-height: 1.6;
}

.auth-note.error {
  border-color: rgb(var(--danger-rgb) / 35%);
  color: var(--red);
  background: var(--danger-soft);
}

.login-panel label {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  font-weight: 800;
}

.login-panel input,
.modal-fields input,
.modal-fields select,
.modal-fields textarea,
.project-switcher select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: var(--ink);
  background: var(--surface);
}

.modal-fields textarea {
  min-height: 112px;
  padding: 12px 13px;
  resize: vertical;
  line-height: 1.7;
}

.modal-fields input[type="file"] {
  padding: 10px 13px;
}

.primary-button,
.ghost-button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 900;
}

.primary-button {
  margin-top: 18px;
  color: var(--surface);
  background: var(--green);
}

.login-panel .primary-button {
  width: 100%;
}

/* AUTH-UX-2: زرّ جوجل رابط `<a>` فكان سطريًّا — بلا ارتفاع ولا هامش وتحته خطّ،
   ملتصقًا بزرّ الدخول. و«أو» تفصل الطريقين حتى لا يُقرآ زرًّا واحدًا. */
.login-panel .google-button {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  text-decoration: none;
}

.login-panel .google-button::before {
  content: attr(data-or);
  position: absolute;
  top: -26px;
  inset-inline: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.login-panel .google-button:hover {
  border-color: var(--green);
}

.login-panel .auth-row {
  margin-top: 12px;
}

.header-actions .primary-button {
  width: auto;
  margin-top: 0;
}

.ghost-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

.ghost-button.compact {
  min-height: 38px;
  padding: 0 13px;
}

.app-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 310px 1fr;
}

.side-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  border-left: 1px solid var(--line);
  padding: 18px;
  background: var(--surface);
}

.rail-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rail-brand strong,
.rail-brand small,
.project-switcher small,
.project-switcher span,
.rail-account small,
.rail-account span {
  display: block;
}

.rail-brand small,
.project-switcher small,
.project-switcher span,
.rail-account small,
.rail-account span {
  color: var(--muted);
  line-height: 1.5;
}

.project-switcher,
.rail-account {
  padding: 14px;
  box-shadow: none;
}

.project-switcher strong {
  display: block;
  margin: 5px 0;
}

.project-switcher select {
  margin-top: 8px;
}

.rail-nav {
  display: grid;
  gap: 16px;
}

.rail-search {
  margin: 4px 0 10px;
}

.rail-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
}

.rail-search input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.nav-empty {
  margin: 8px 2px;
  color: var(--muted);
  font-size: 0.85rem;
}

.nav-group {
  display: grid;
  gap: 4px;
}

/* Collapsed by default: only the active (or user-opened) group shows its items. */
.nav-group-body {
  display: none;
  gap: 6px;
}

.nav-group.open .nav-group-body {
  display: grid;
}

.nav-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 800;
}

.nav-group-head:hover {
  color: var(--ink);
  background: var(--panel-soft);
}

.nav-group.open .nav-group-head {
  color: var(--ink);
}

.nav-group-head em {
  color: var(--muted);
  background: var(--panel-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
}

/* A caret that rotates when the group opens, so the state is obvious at a glance. */
.nav-group-head::after {
  content: "";
  order: -1;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nav-group.open .nav-group-head::after {
  transform: rotate(-45deg);
}

.nav-button {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: right;
  color: var(--ink);
  background: transparent;
}

.nav-button:hover {
  background: var(--panel-soft);
}

.nav-button b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--green);
  background: var(--panel-soft);
  font-size: 0.72rem;
}

.nav-button strong,
.nav-button small {
  display: block;
}

.nav-button small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.nav-button.active {
  border-color: var(--green);
  background: var(--panel-soft);
}

.rail-account button {
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  color: var(--surface);
  background: var(--black);
}

.main-workspace {
  padding: clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px) 96px;
}

/* ‏D3 · **بطاقاتُ التعريف تظهر على «مركز اليوم» وحدَه.**

   كان عمودُ القرارات يبدأ في كلّ شاشةٍ بأربعِ بطاقاتٍ لا تخصُّ أيًّا منها:
   «ابدأ التشغيل — ٤ من ٥» · «ابدأ إدخال بياناتك» · «بروفايل صاحب الشركة» ·
   «أقسام هذا البروفايل». فمن فتح «المالية» ليرى أرقامَ الفلوس يقرأ قائمةَ
   تهيئةٍ وخريطةَ أقسامٍ ووصفَ دورِه أوّلًا. **ومقيسٌ: شاشةُ المالية 7344px،
   موضوعُها يبدأ بعد أكثرَ من نصفِها.**

   والبطاقاتُ لا تُحذَف: على «مركز اليوم» هي ما يحتاجه من فتح التطبيقَ أوّلَ
   مرّة. والخطأُ كان في موضعها لا في وجودها. */
body:not(.home-view) .command-orientation {
  display: none;
}

/* WASTE-01 · «فين الفلوس بتضيع؟» — ثلاث خانات، والخانةُ التي فيها ما يُقلق حمراءُ الحافّة. */
.waste-board-wrap .waste-card { margin: 0; }
.waste-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.waste-tile {
  display: grid;
  gap: 6px;
  min-height: 48px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  text-align: start;
}

.waste-tile small { color: var(--muted); font-weight: 800; }
.waste-tile strong { font-size: 1.5rem; }
.waste-tile span { color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.waste-tile:hover { border-color: var(--green); }

.waste-tile.is-alarm {
  border-color: rgb(var(--danger-rgb) / 45%);
  background: var(--danger-soft);
}

.waste-tile.is-alarm strong { color: var(--red); }

@media (max-width: 760px) {
  .waste-tiles { grid-template-columns: 1fr; }
}

/* ‏D4 · **موضوعُ الشاشة أوّلًا، وما يصلح لكلّ شاشةٍ بعده.**

   بعد `D3` بقي على شاشةِ المشتريات — وهي شاشةُ عملٍ يوميّة — ترتيبٌ يضع
   موضوعَها رابعًا. مقيسٌ من أعلى مساحة العمل:

       تنبيهات بعد إدخال البيانات   250px   عامّة، وتقول «لا توجد مهام عاجلة»
       الموديولات القريبة           534px   اختصاراتٌ إلى أقسامٍ أخرى
       أرقام الإدارة                919px   أرقامٌ عامّة
       داخل قسم المشتريات          1209px   شرحٌ لا محتوى
       ← طلبات الشراء              1519px   **موضوع الشاشة**

   ولا واحدةٌ من الأربع تخصّ المشتريات. فمن فتح الشاشة ليُنشئ طلبَ شراءٍ
   يمرّ على ألفٍ وخمسِمئةِ بكسلٍ من محتوًى متطابقٍ على الشاشات كلِّها — ثمّ
   على ملاحةٍ تدعوه إلى مغادرتها.

   **والترتيبُ هنا لا الحذفُ:** «أرقام الإدارة» تنفع من يراجع، و«الموديولات
   القريبة» تنفع من يتنقّل — بعد أن يرى ما جاء من أجله لا قبله. والشرحُ
   (`module-guide`) بعد المحتوى للسبب نفسِه: من يعرف لا يقرؤه، ومن لا يعرف
   يجده حيث يبحث.

   وبـ`order` على أبناء الشبكة: صفرُ تغييرٍ في بناء النصّ، فصفرُ قالبٍ جديدٍ
   يرفع قياسَ `i18n-literals` — وهو الدرسُ نفسُه الذي أنتج `home-view`. */
body:not(.home-view) .workspace-grid > .detail-column {
  order: 1;
}

body:not(.home-view) .workspace-grid > .command-column {
  order: 2;
}

body:not(.home-view) .detail-column > .detail-panel {
  order: 1;
}

body:not(.home-view) .detail-column > .module-guide {
  order: 2;
}

/* ‏D1 · شريطُ الأدوات والهويّة ------------------------------------------------

   يلتصق بأعلى الشاشة: من نزل ثلاثةَ آلافِ بكسلٍ في شاشةِ المالية يبقى يعرف
   **أين هو وبأيّ صفة**، ويصل إلى البحث والخروج بلا أن يعود إلى القمّة.

   والوزنُ البصريُّ مقصودٌ أخفُّ من كلّ ما تحته: حجمُ خطٍّ أصغر، وحدٌّ واحدٌ
   أسفلُه لا إطارٌ ولا ظلّ، وأزرارٌ بلا تعبئة. فهو أثاثٌ لا محتوى. */
.app-topbar {
  position: sticky;
  /* ‏D2: مع `viewport-fit=cover` و`black-translucent` يمتدّ المحتوى تحت ساعةِ
     النظام على آيفون. و`safe-area-inset-top` يردّ المسافةَ **على الأجهزة التي
     لها نتوءٌ وحدَها** — وقيمتُها صفرٌ في المتصفّح العاديّ، فلا تُزاح الشاشةُ
     على سطح المكتب. */
  top: 0;
  padding-top: max(10px, env(safe-area-inset-top));
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: calc(-1 * clamp(18px, 3vw, 34px)) calc(-1 * clamp(18px, 3vw, 34px)) 18px;
  padding: 10px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: rgb(var(--surface-rgb) / 92%);
  backdrop-filter: blur(10px);
  font-size: 0.86rem;
}

/* العلامةُ هنا للهاتف: الشريطُ الجانبيُّ يحملها على الشاشات الكبيرة، وينزل
   أسفلَ العمل على الصغيرة — فكان التطبيقُ على الهاتف **بلا أيّ علامة**. */
.topbar-brand {
  display: none;
  align-items: center;
  gap: 8px;
}

.topbar-brand strong {
  font-size: 0.95rem;
}

.topbar-identity {
  display: grid;
  gap: 1px;
  padding-inline-end: 14px;
  border-inline-end: 1px solid var(--line);
  line-height: 1.35;
}

.topbar-identity small,
.topbar-identity span {
  color: var(--muted);
  font-size: 0.74rem;
}

.topbar-identity strong {
  font-size: 0.9rem;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.tool-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink-2);
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tool-button:hover {
  color: var(--ink);
  background: var(--surface-3);
}

.tool-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.tool-button:active {
  border-color: var(--line);
}

.tool-button[disabled] {
  opacity: 0.5;
}

/* الخروجُ آخرُ الشريط وبلونِ الخطر الخفيف: يُميَّز عن أدواتِ العرض لأنه
   ينهي الجلسة، ولا يُصرَخ به لأنه ليس خطأً. */
.tool-exit {
  color: var(--red);
}

.tool-exit:hover {
  color: var(--red);
  background: var(--danger-soft);
}

/* ‏D8 · دعوةُ التثبيت على الشاشة الرئيسية.
 *
 * تشغل عرضَ الشريط كاملًا تحت الأدوات، ولا تُرسَم إن كانت فارغة — والمضيفُ
 * فارغٌ لمن ثبّته أو رفض الدعوة أو يفتح من سطح مكتب. و`:empty` أصدقُ من صنفٍ
 * يُضاف بـJS: الفراغُ هو الحالةُ نفسُها لا وصفًا لها.
 *
 * وعلى آيفون تحمل **خطواتٍ لا زرًّا** (سفاري لا يعطي بابًا برمجيًّا)، فالنصُّ
 * قد يبلغ سطرين — ولذلك `flex-wrap` لا صفٌّ جامد. */
.install-invite-host:empty {
  display: none;
}

.install-invite {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand-soft);
  font-size: 0.82rem;
}

.install-invite strong {
  font-size: 0.86rem;
}

.install-invite span {
  color: var(--ink-2);
}

/* زرُّ الفعل يُميَّز عن «تمام» — أحدُهما يُنجز والآخرُ يُغلق. */
.install-action {
  border-color: var(--brand);
  color: var(--surface);
  background: var(--brand);
}

.install-action:hover {
  color: var(--surface);
  background: var(--brand);
}

.install-action[disabled] {
  opacity: 0.6;
}

.workspace-header,
.risk-banner,
.card-head,
.detail-head,
.header-actions,
.risk-banner div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.workspace-header {
  margin-bottom: 18px;
}

.workspace-header h1,
.workspace-header p,
.card-head h2,
.card-head p,
.detail-head h2,
.detail-head p {
  margin: 0;
}

.workspace-header h1 {
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: 1.2;
}

.workspace-header p:not(.kicker),
.card-head p,
.detail-head p {
  color: var(--muted);
  line-height: 1.65;
}

.header-actions {
  flex-wrap: wrap;
}

.risk-banner {
  min-height: 82px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: none;
  border-color: rgb(var(--danger-rgb) / 28%);
}

.risk-banner div {
  justify-content: flex-start;
}

.risk-banner p {
  margin: 3px 0 0;
  color: var(--muted);
}

.risk-banner button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: var(--surface);
  background: var(--red);
  font-weight: 900;
}

.live-dot,
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.workflow-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  text-align: right;
  color: var(--ink);
  background: var(--surface);
}

.workflow-card strong,
.workflow-card span {
  display: block;
}

.workflow-card span {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.workflow-card.active {
  border-color: var(--teal);
  background: var(--accent-soft);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.25fr);
  gap: 18px;
  align-items: start;
}

.command-column,
.detail-column {
  display: grid;
  gap: 16px;
}

.card,
.detail-panel {
  padding: 16px;
  box-shadow: none;
}

.card-head,
.detail-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.card-head h2,
.detail-head h2 {
  font-size: 1.1rem;
}

.action-stack,
.table-list {
  display: grid;
  gap: 8px;
}

/* U2: شريط المسودّة المستعادة داخل نافذة الإدخال. */
.draft-notice {
  margin: 0 0 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgb(var(--warn-rgb) / 12%);
  border: 1px solid rgb(var(--warn-rgb) / 32%);
  color: var(--warn-strong);
  font-size: 0.86rem;
  font-weight: 700;
}

/* U1: شارة حالة الاتصال والطابور في رأس مساحة العمل. */
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.conn-status.tone-warn {
  background: rgb(var(--warn-rgb) / 12%);
  border-color: rgb(var(--warn-rgb) / 34%);
  color: var(--warn-strong);
}

.conn-status.tone-sync {
  background: rgb(var(--accent-rgb) / 12%);
  border-color: rgb(var(--accent-rgb) / 34%);
  color: var(--accent-strong);
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* H3: بحث خادمي + «عرض المزيد» على شاشة السجلات العامة. */
.list-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.list-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgb(var(--ink-deep-rgb) / 18%);
  border-radius: 10px;
  font: inherit;
  background: var(--surface);
}

.list-search:focus-visible {
  outline: 2px solid rgb(var(--brand-rgb) / 55%);
  outline-offset: 1px;
}

.list-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

/* U8: كان `rgb(var(--ink-deep-rgb) / 62%)` — يمتزج مع الأبيض فيعطي 4.46:1، أي أقلّ
   من الحدّ بأربعة أجزاء من مئة. ولونٌ شفّاف لا يُقاس بالنظر: يتغيّر تباينه مع
   كل خلفية يقع عليها. فصار `--muted` المُعلَن، وهو 5.61:1 على الأبيض. */
.list-footer small {
  color: var(--muted);
}

.start-flow-card {
  border-color: rgb(var(--brand-rgb) / 34%);
}

.startup-flow {
  display: grid;
  gap: 8px;
}

.startup-flow button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  text-align: right;
  color: var(--ink);
  background: var(--surface);
}

.startup-flow button:hover,
.startup-flow button:focus-visible {
  border-color: var(--green);
  background: var(--panel-soft);
}

.startup-flow strong,
.startup-flow small {
  display: block;
}

.startup-flow small,
.muted-copy {
  color: var(--muted);
  line-height: 1.5;
}

.profile-card {
  border-color: rgb(var(--accent-rgb) / 32%);
  background: linear-gradient(180deg, var(--surface), var(--accent-soft));
}

.start-here {
  min-height: 86px;
  margin-bottom: 12px;
  border: 1px solid rgb(var(--accent-rgb) / 28%);
  border-radius: 8px;
  padding: 14px;
  background: var(--accent-soft);
}

.start-here small,
.start-here strong {
  display: block;
}

.start-here small,
.guide-grid small {
  color: var(--muted);
  font-weight: 900;
}

.start-here strong {
  margin-top: 7px;
  line-height: 1.6;
}

.permission-list {
  display: grid;
  gap: 8px;
}

.permission-list span {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.5;
  font-weight: 800;
}

.permission-list b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--surface);
  background: var(--green);
  font-size: 0.82rem;
}

.section-map-list {
  display: grid;
  gap: 10px;
}

.section-map-list article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2);
}

.section-map-list article > strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.section-map-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.section-map-list button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--ink);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 900;
}

.section-map-list button.active {
  border-color: var(--green);
  color: var(--surface);
  background: var(--green);
}

.module-guide {
  border-color: rgb(var(--brand-rgb) / 30%);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guide-grid > div {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}

.guide-grid strong {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  line-height: 1.45;
}

.daily-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.daily-layout div {
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-2);
}

.daily-layout small,
.daily-layout strong,
.daily-layout span {
  display: block;
}

.daily-layout small {
  color: var(--muted);
  font-weight: 900;
}

.daily-layout strong {
  margin-top: 8px;
  font-size: 1.08rem;
}

.daily-layout span {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.module-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-shortcuts button {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  text-align: right;
  color: var(--ink);
  background: var(--surface);
}

.module-shortcuts b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--teal);
  background: var(--accent-soft);
  font-size: 0.7rem;
}

.module-shortcuts strong,
.module-shortcuts small {
  display: block;
}

.module-shortcuts small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.compact-metrics .metric-card {
  min-height: 76px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.process-steps span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.78rem;
  font-weight: 900;
}

.action-row,
.table-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  text-align: right;
  color: var(--ink);
  background: var(--surface);
}

.table-row {
  grid-template-columns: 1fr auto;
}

.saved-row {
  border-color: rgb(var(--brand-rgb) / 30%);
  background: var(--surface-2);
}

/* U8: كان `opacity: 0.82`. والشفافية على حاوية تسحب **كل** لون بداخلها
   نحو الخلفية — فأسقطت نصّ الوصف إلى 3.79:1 وشارة الحالة الحمراء إلى
   3.94:1، وكلاهما دون 4.5:1.

   والتعتيم هنا لم يكن يحمل معنى أصلًا: العنوان فوقها يقول صراحةً «أمثلة
   إرشادية وليست بياناتك الفعلية». فصار التمييز بخلفية وحدّ — لا يمسّ
   لون نصّ واحد. */
.demo-list {
  background: repeating-linear-gradient(
    135deg,
    rgb(var(--ink-rgb) / 5%) 0,
    rgb(var(--ink-rgb) / 5%) 8px,
    transparent 8px,
    transparent 16px
  );
  border-radius: 10px;
}

.empty-records {
  display: grid;
  gap: 8px;
  min-height: 154px;
  place-items: center;
  border: 1px dashed rgb(var(--brand-rgb) / 42%);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  background: var(--surface-2);
}

.empty-records strong,
.empty-records small {
  display: block;
}

.empty-records small {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.6;
}

.empty-records .primary-button {
  margin-top: 4px;
}

.action-row strong,
.action-row small,
.table-row strong,
.table-row small {
  display: block;
}

.action-row small,
.table-row small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.action-row em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.status-dot.red {
  background: var(--red);
}

.status-dot.amber {
  background: var(--amber);
}

.status-dot.green {
  background: var(--green);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.metric-card strong,
.metric-card span {
  display: block;
}

.metric-card strong {
  font-size: 1.25rem;
}

.metric-card span {
  margin-top: 5px;
  color: var(--muted);
}

.metric-card.red {
  border-color: rgb(var(--danger-rgb) / 38%);
}

.metric-card.amber {
  border-color: rgb(var(--warn-rgb) / 42%);
}

.metric-card.green {
  border-color: rgb(var(--brand-rgb) / 35%);
}

.pill {
  display: inline-flex;
  min-width: 72px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 900;
}

.pill.red {
  color: var(--red);
  background: var(--danger-soft);
}

/* ‏U9: `--warn-strong` لا `--warn`. والأصفرُ الأفتح على خلفيةٍ عاجيّة يعطي
   **3.38:1** — دون الحدّ، وعلى شارةٍ تقول «متأخر» أو «تحذير» تُقرأ تحت الشمس.
   والعطبُ كان قائمًا على `main` قبل هذه البطاقة (‏`color: var(--amber)` على
   `#fff6df`)، ولم تُمسّ قيمةُ `--amber` نفسُها — تغيّر **أيُّ رمزٍ يُستعمل هنا**
   لا قيمةُ الرمز، فلا تتأثّر بقيّةُ مواضعه. */
.pill.amber {
  color: var(--warn-strong);
  background: var(--warn-soft);
}

.pill.green {
  color: var(--green);
  background: var(--brand-soft);
}

.pill.sky {
  color: var(--teal);
  background: var(--accent-soft);
}

/* P13 nav unread badge + read/dismiss alert styling. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: var(--surface);
  font-size: 0.72rem;
  font-weight: 900;
  font-style: normal;
  vertical-align: middle;
}

/* U8: كان `opacity: 0.62` — أي أن كل نصّ وكل شارة حالة في تنبيه مقروء
   تسقط تحت حدّ التباين. والمقروء يُهدأ ولا يُطمَس: من يعود إلى
   تنبيه قرأه يريد أن يقرأه ثانيةً لا أن يخمّنه. */
.table-row.is-read {
  background: var(--panel-soft);
}

.table-row.is-read strong {
  font-weight: 600;
}

/* P13 audit-log filter grid. Reuses .metric-grid for layout; each labelled
   field stacks its caption above the control. */
.audit-filter .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: start;
}

.audit-filter .field span {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 700;
}

.audit-filter .field input,
.audit-filter .field select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
}

.audit-filter .leak-actions {
  margin-top: 12px;
}

.validation-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
}

.validation-grid span {
  color: var(--muted);
}

.validation-grid strong {
  font-weight: 900;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--ink-deep-rgb) / 52%);
}

.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 20px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.modal-head h2,
.modal-head p {
  margin: 0;
}

.modal-head p {
  color: var(--muted);
}

.modal-head button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-fields label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.modal-fields .wide-field {
  grid-column: 1 / -1;
}

/* ‏D1 · **ملاحةٌ واحدةٌ في الشاشة، لا اثنتان.**

   كان هذا الشريطُ `position: fixed` بلا حدٍّ أعلى، ويُزاح جنبَ الشريط الجانبيّ
   بدل أن يختفي — فعلى شاشةِ مكتبٍ يرى المستخدمُ **ملاحتين معًا**: الشريطُ
   الجانبيّ بأحدَ عشرَ قسمًا، وسبعةُ أزرارٍ عائمةٍ أسفل الشاشة لنفس الأقسام.
   والعينُ لا تعرف أيَّهما المصدر، فتُقرأ الشاشةُ «غيرَ مرتّبة» — وهو وصفٌ
   صحيحٌ لسببٍ واحدٍ قابلٍ للقياس.

   فالشريطُ السفليُّ **للهاتف وحدَه**: هناك لا شريطَ جانبيًّا ثابتًا، والإبهامُ
   يصل إلى أسفل الشاشة ولا يصل إلى أعلاها. وحدُّ 1120px هو نفسُه الحدُّ الذي
   عنده يتفكّك التخطيطُ ذو العمودين أدناه — فحدٌّ واحدٌ لا حدّان ينحرفان. */
.bottom-nav {
  display: none;
  position: fixed;
  right: max(18px, calc(310px + 18px));
  /* ‏D2: على آيفون المثبَّت على الشاشة الرئيسية يحتلّ شريطُ الهوم أسفلَ الزجاجة
     — وزرٌّ تحته يُلمَس فيُغلِق التطبيقَ بدل أن يعمل. */
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 18px;
  z-index: 8;
  /* ‏`grid-template-columns` تبقى هنا وتعمل متى أُعيد `display: grid` في
     استعلامِ الهاتف — والإعلانُ عن التخطيط في موضعٍ واحد أوضحُ من تكراره. */
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: rgb(var(--surface-rgb) / 96%);
  box-shadow: 0 12px 36px rgb(var(--ink-deep-rgb) / 14%);
  backdrop-filter: blur(12px);
}

.bottom-nav button {
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 900;
}

.bottom-nav b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--green);
  font-size: 1rem;
  line-height: 1;
}

/* Drawn nav icons (src/icons.js) inherit the button's colour state. Solid
   shapes carry more weight than outlines, so they sit a notch smaller. */
.bottom-nav b svg {
  display: block;
  width: 22px;
  height: 22px;
}

.bottom-nav button.active b {
  color: var(--green);
}

.bottom-nav button.active {
  border-color: var(--green);
  color: var(--ink);
  background: var(--panel-soft);
}

@media (max-width: 1120px) {
  .login-shell,
  .app-view,
  .workspace-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked layout: the work comes first, the rail after. Module navigation on
     small screens is handled by the bottom nav, so the rail on top only pushed
     the actual content below the fold. */
  .main-workspace {
    order: 1;
  }

  .side-rail {
    order: 2;
    position: static;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* وهنا وحدَه يظهر — الشريطُ الجانبيّ صار ساكنًا أسفلَ العمل، فلا ملاحةَ
     ثابتةً في متناول الإبهام غيرُ هذا. */
  .bottom-nav {
    display: grid;
    right: 12px;
    left: 12px;
  }

  /* العلامةُ تظهر هنا لأن الشريطَ الجانبيَّ الحاملَ لها نزل أسفلَ العمل. */
  .topbar-brand {
    display: flex;
  }

  /* والهويّةُ تتضامّ إلى سطرٍ واحد: الدورُ وحدَه يكفي على شاشةِ هاتف،
     ونطاقُ الصلاحيّة جملةٌ طويلةٌ تأكل العرض. */
  .topbar-identity {
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .topbar-identity small,
  .topbar-identity span {
    display: none;
  }

  /* ‏D1 · **صفٌّ واحدٌ يُسحَب، لا ثلاثةُ صفوفٍ تُطوى.**

     بالالتفاف كان الشريطُ يبلغ **153 بكسلًا على شاشة 812** — أي خُمسَ الشاشة
     أثاثًا قبل أوّل سطرِ عمل، والهاتفُ هو جهازُ مشرف الموقع لا جهازُه الثاني.

     **ولم يُخفَ زرّ.** إخفاءُ الأقلِّ أهميّةً كان الحلَّ الأسهل، ويُسقِط
     `qa-mobile` الذي يشترط أن يكون زرُّ السِّمة قابلًا للضغط على الهاتف —
     وهو شرطٌ محقّ: من يعمل تحت شمسٍ مباشرة يحتاج الوضعَ الداكنَ أكثرَ ممّن
     يجلس إلى مكتب. فالسحبُ يُبقي كلَّ زرٍّ قابلًا للوصول، ويُعيد الشريطَ
     إلى سطرٍ واحد. */
  .topbar-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* بلا هذا ينكمش الصفُّ داخل الشريط بدل أن ينساب، فلا يُسحَب ولا يُقرَأ. */
    min-width: 0;
    margin-inline-start: 0;
    padding-bottom: 2px;
  }

  .topbar-tools::-webkit-scrollbar {
    display: none;
  }

  .tool-button {
    flex: 0 0 auto;
  }

  .rail-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .login-view,
  .main-workspace,
  .side-rail {
    padding: 12px;
  }

  .main-workspace {
    padding-bottom: 104px;
  }

  /* ‏`minmax(0, …)` لا `1fr` وحدَها: `1fr` تعني `minmax(auto, 1fr)`، و`auto`
     تمنع العمودَ أن ينكمش تحت أصغرِ عرضٍ لمحتواه — فعنصرٌ عريضٌ واحدٌ بالداخل
     يوسّع العمودَ كلَّه. مقيسٌ على 360px: العمودُ 374px داخل حاويةٍ 360px،
     والفرقُ تمريرٌ أفقيّ على كلّ شاشة.

     **ولماذا `body.field-mode` هنا صراحةً:** القاعدةُ التي تُقرّر العمودَ في
     وضع الموقع هي `body.field-mode .app-view` وهي **بلا `@media`**، فتغليبُها
     يحتاج تخصيصَها نفسَه — و`@media` لا يضيف تخصيصًا.

     **ولماذا داخل `700px` وحدَها:** أُصلحت أوّلَ مرّةٍ في القاعدة غيرِ
     المحصورة، فطُبِّقت على الشاشات الكبيرة أيضًا — وأسقطت `qa-offline`
     (استعادةُ المسودّة) على مقاس 900px. **مقيسٌ بضبطٍ وضابط:** بالتعديل
     تسقط، وبدونه تمرّ ثلاثةَ عشرَ فحصًا. فالإصلاحُ يبقى حيث قِيس العطب. */
  body.field-mode .app-view,
  body.field-mode .workspace-grid,
  .app-view,
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ‏نزيفُ الشريط العلويّ يجب أن يُطابق حشوةَ ساحة العمل، لا أن يُخمَّن.
     كانت الحشوةُ هنا تنزل إلى `12px` بينما يبقى النزيفُ `-18px/18px` من
     المقاس الكبير — فيخرج الشريطُ 6px من كلّ ناحية (مقيسٌ: عرضُه 372px
     داخل شاشةٍ 360px). والرقمان الآن واحد. */
  .app-topbar {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  /* ‏هدفُ اللمس 48px — من يعمل بقفّازٍ تحت الشمس لا يُصيب 34px.
     والارتفاعُ وحدَه هو الناقص: العرضُ كان كافيًا (98–115px) والارتفاعُ 34px
     في كلّ زرٍّ من أزرار الشريط، على المقاسات الثلاثة وفي 33 شاشة. */
  .tool-button {
    min-height: 48px;
  }

  .login-copy {
    min-height: auto;
  }

  .rail-nav,
  .workflow-strip,
  .auth-tabs,
  .metric-grid,
  .daily-layout,
  .guide-grid,
  .module-shortcuts,
  .process-steps {
    grid-template-columns: 1fr;
  }

  .workspace-header,
  .risk-banner,
  .card-head,
  .detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .header-actions,
  .risk-banner button,
  .header-actions button {
    width: 100%;
  }

  .auth-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .action-row,
  .table-row,
  .modal-fields,
  .validation-grid {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: auto;
  }
}

/* --- P10 certificates board + modal --- */
.cert-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.cert-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cert-card-head strong,
.cert-card-head small {
  display: block;
}

.cert-card-head small {
  color: var(--muted);
  margin-top: 2px;
}

.cert-blocked {
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
}

.cert-actions {
  display: flex;
  gap: 8px;
}

.cert-card-foot {
  display: flex;
  justify-content: flex-end;
}

.cert-lines-detail {
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.cert-line {
  background: var(--panel-soft);
}

.cert-blockers {
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--danger-soft);
  color: var(--red);
  font-size: 0.8rem;
}

.cert-blockers ul {
  margin: 4px 0 0;
  padding-inline-start: 18px;
}

.cert-lines {
  display: grid;
  gap: 10px;
}

.cert-line-row {
  display: grid;
  grid-template-columns: 1fr 110px auto;
  gap: 8px;
  align-items: center;
}

.cert-line-row:has([data-line-rate]) {
  grid-template-columns: 1fr 110px 130px auto;
}

@media (max-width: 640px) {
  .cert-line-row,
  .cert-line-row:has([data-line-rate]) {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- N14 money-leak detector board --- */
.leak-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.leak-impact {
  display: grid;
  gap: 2px;
}

.leak-impact small {
  color: var(--muted);
}

.leak-impact strong {
  font-size: 1.3rem;
  color: var(--red);
}

.leak-sev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.leak-card {
  align-items: flex-start;
}

.leak-card > div {
  display: grid;
  gap: 3px;
}

.leak-meta {
  color: var(--muted);
}

.leak-money {
  color: var(--red);
  font-weight: 700;
}

.leak-owner,
.leak-note {
  color: var(--muted);
}

.leak-rec {
  color: var(--accent, var(--accent-strong));
  font-weight: 600;
}

.leak-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.leak-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.leak-actions .compact {
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* --- N7 schedule board --- */
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.primary-button.compact,
.ghost-button.compact {
  padding: 6px 12px;
  font-size: 0.82rem;
  min-height: 34px;
}

.activity-row {
  align-items: flex-start;
  gap: 12px;
}

.activity-main {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.activity-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.progress-bar {
  margin-top: 4px;
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: var(--line, var(--line-2));
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--muted, var(--ink-4));
  transition: width 0.2s ease;
}

.progress-bar > span.amber {
  background: var(--amber, var(--warn));
}

.progress-bar > span.green {
  background: var(--green, var(--brand));
}

/* --- P8 quality board --- */
.obs-card {
  align-items: flex-start;
  gap: 12px;
}

.obs-main {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.obs-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 45%;
}

.obs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.obs-resolution {
  margin-top: 6px;
  color: var(--muted);
}

/* --- P5 procurement board --- */
.proc-request,
.proc-order {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.proc-request-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.proc-request-head strong,
.proc-request-head small {
  display: block;
}

.proc-request-head small {
  color: var(--muted);
  margin-top: 2px;
}

.proc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proc-quotes {
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.proc-quotes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.proc-quote {
  align-items: center;
  gap: 12px;
  background: var(--surface-alt, var(--surface-cool));
}

.proc-quote-side {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* --- P9 subcontractors board --- */
.sub-contract {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.sub-detail {
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.sub-detail-label {
  color: var(--muted);
  font-weight: 700;
  margin-top: 4px;
}

.sub-progress,
.sub-deduction {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--surface-alt, var(--surface-cool));
}

/* --- N16 v2 reports & role dashboards ------------------------------------ */
.report-lane-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.filter-chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.filter-chip:hover {
  border-color: var(--green);
}
.filter-chip.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--surface);
}
.chip-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-inline-start: 4px;
  border-radius: 999px;
  background: var(--shadow-tint-2);
  font-size: 11px;
  text-align: center;
}
.filter-chip.is-active .chip-count {
  background: rgb(var(--surface-rgb) / 25%);
}
.report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.report-tab {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.report-tab.is-active {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--green);
  box-shadow: inset 0 -2px 0 var(--green);
}
.report-actions {
  display: flex;
  gap: 8px;
}
.report-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.report-filter {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--panel);
}
.report-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.report-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.report-print-head {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.report-print-head strong {
  font-size: 15px;
}
.report-print-head small {
  color: var(--muted);
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-table th,
.report-table td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.report-table th {
  position: sticky;
  top: 0;
  background: var(--panel-soft);
  font-weight: 700;
  color: var(--ink);
}
.report-table td.num,
.report-table th.num {
  text-align: left;
  font-variant-numeric: tabular-nums;
}
/* N16 v2 · صفٌّ يفتح مصدره. المؤشّر وحلقة التركيز هما ما يقول ذلك — ولا
   يُستعمل اللون وحده للدلالة (قاعدة U8). */
.report-table tbody tr.is-linked {
  cursor: pointer;
}
.report-table tbody tr.is-linked:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.report-table tbody tr:hover {
  background: var(--panel-soft);
}
.report-table tr.report-totals td {
  font-weight: 700;
  background: var(--panel-soft);
  border-top: 2px solid var(--green);
}

/* N6 estimation: pricing-signal flags row. */
.crm-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

/* Print just the report table: hide everything, reveal the print area. */
/* طباعة التقرير — ورقةٌ تُرسَل إلى المالك والاستشاري.
 *
 * **ما كان:** الإخفاء بـ`visibility: hidden`. والعنصر المخفيّ بها **يبقى
 * يحجز مكانه في التدفّق**، فتخرج صفحاتٌ بيضاء بينه وبين التقرير — وهي نفس
 * العلّة التي عُولجت في مسار المستند (سطر 3001) وبقيت هنا. وبلا `@page`
 * يطبع كل متصفّح بهوامشه، وبلا `break-inside` يُقطع الصفّ بين صفحتين، وبلا
 * `print-color-adjust` تخرج حالات «خطر / متابعة / سليم» بيضاء كلّها —
 * فتُقرأ الورقة على أن **لا خطر فيها**.
 *
 * وهذا هو المخرج الفعلي إلى PDF اليوم (‏«حفظ كـPDF» في المتصفّح)، فما يضبطه
 * هذا القسم هو ما يصل إلى العميل. */
@media print {
  body.printing-report > *:not(.app-view),
  body.printing-report .side-rail,
  body.printing-report .app-header,
  body.printing-report .report-actions,
  body.printing-report .report-filter-row,
  body.printing-report .report-tabs,
  body.printing-report [data-print-hide] {
    display: none !important;
  }

  /* كل ما ليس التقرير يُزال من التدفّق، والتقرير يعود عنصرًا عاديًّا في أعلى
     الصفحة — لا `position: absolute` التي تقصّه عند حدّ الصفحة الأولى. */
  body.printing-report .app-view,
  body.printing-report .app-view > *,
  body.printing-report .detail-panel {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    overflow: visible !important;
  }

  body.printing-report .app-view > *:not(:has([data-report-print])) {
    display: none !important;
  }

  body.printing-report [data-report-print] {
    display: block !important;
    width: 100%;
    border: none;
    overflow: visible !important;
    max-height: none !important;
  }

  /* الرأس يتكرّر على كل صفحة: تقريرٌ يمتدّ ثلاث صفحات بلا رؤوس يُقرأ بالتخمين.
     و`position: static` لأن الرأس اللاصق على الشاشة يطبع فوق البيانات. */
  body.printing-report .report-table thead {
    display: table-header-group;
  }
  body.printing-report .report-table th {
    position: static;
  }
  body.printing-report .report-table tr {
    break-inside: avoid;
  }
  body.printing-report .report-print-head,
  body.printing-report .report-totals {
    display: flex;
    break-inside: avoid;
  }

  /* الحالات الملوّنة تُطبع بألوانها. المتصفّح يُسقط خلفيّات الطباعة افتراضيًّا،
     فتخرج «خطر» و«سليم» بيضاوين متطابقين — وهذا أسوأ من غياب اللون، لأن
     القارئ يظنّ أنه رأى الحالة. */
  body.printing-report .pill,
  body.printing-report .report-table td,
  body.printing-report .report-table th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page {
    size: A4;
    margin: 14mm;
  }
}

/* The site board: four oversized targets for someone standing on scaffolding.
   Deliberately larger and higher-contrast than the rest of the UI. */
.field-board-wrap {
  border: 2px solid var(--green);
  border-radius: 16px;
  padding: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.field-board-head h2 {
  margin: 0 0 4px;
  font-size: 1.3rem;
}

.field-board-head p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.field-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.field-board button {
  display: grid;
  gap: 4px;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: right;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 2px 8px var(--shadow-tint-1);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field-board button:hover,
.field-board button:focus-visible {
  border-color: var(--green);
  background: var(--panel-soft);
}

.field-board button b {
  font-size: 1.9rem;
  line-height: 1;
}

.field-board button strong {
  font-size: 1.12rem;
  font-weight: 800;
}

.field-board button small {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* One clear column on a phone — no side-by-side guessing. */
@media (max-width: 640px) {
  .field-board {
    grid-template-columns: 1fr;
  }

  .field-board button {
    min-height: 96px;
  }
}

/* Touch devices (site tablets and phones, often used with gloves or dusty hands):
   every tappable target gets at least the 44px minimum. Mouse layouts stay compact. */
/* U2 · اللمس الميداني.
   الشرط الأول `pointer: coarse` يلتقط الهواتف واللوحات. والثاني `max-width`
   مقصود معه لا بديلًا عنه: نافذة ضيقة على حاسوب هي نفس المساحة الضيقة، ومشرف
   يفتح التطبيق على شاشة مقسومة يستحق نفس الأهداف. الاكتفاء بالأول كان يعني أن
   أي جهاز لا يُبلّغ عن لمس يعود إلى أهداف 38px. */
@media (pointer: coarse), (max-width: 640px) {
  button,
  input,
  select,
  textarea,
  [role="button"] {
    min-height: var(--touch);
  }

  /* حقول الكتابة أعلى: الخطأ فيها أغلى من خطأ ضغطة. و16px حدّ لا ينزل عنه حجم
     الخط في حقل إدخال — دونه يُقرّب iOS الصفحة تلقائيًا عند التركيز فيقفز
     التخطيط تحت إصبع المستخدم. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  /* حقول النموذج تعلن 46px بأصناف، والصنف يغلب العنصر — فتُسمّى هنا صراحةً. */
  .login-panel input,
  .modal-fields input,
  .modal-fields select,
  .modal-fields textarea,
  .project-switcher select {
    min-height: var(--field-h);
    font-size: max(1rem, 16px);
  }

  /* زر الإغلاق: ارتفاعه كان صحيحًا وعرضه 25px — والهدف مساحة لا ارتفاع. */
  .modal-head button {
    min-width: var(--touch);
    min-height: var(--touch);
  }

  textarea {
    min-height: calc(var(--field-h) * 2.2);
  }

  .section-map-list button,
  .ghost-button.compact {
    min-height: var(--touch);
    padding: 10px 16px;
    font-size: 0.86rem;
  }

  .nav-button {
    min-height: 66px;
  }

  /* الأصناف تغلب العناصر في CSS مهما تأخّر ترتيبها، فقاعدة `button` وحدها لا
     تكفي: كل صنف يعلن ارتفاعه الخاص يحتاج تجاوزًا باسمه.
     القياس هو ما كشف القائمة — أزرار الميدان السريعة («+ يومية») كانت **34px**،
     وهي أكثر ما يُضغط في الموقع وأصغر ما في الشاشة. */
  .primary-button,
  .ghost-button,
  .nav-group-head,
  .auth-tabs button,
  .rail-account button,
  .risk-banner button,
  .empty-records .primary-button,
  .header-actions .primary-button,
  .login-panel .primary-button,
  .primary-button.compact {
    min-height: var(--touch);
  }

  /* مسافة بين الأهداف المتجاورة: هدفان بالحجم الصحيح متلاصقان ما زالا يُنتجان
     ضغطة خاطئة، لأن الإصبع أعرض من الحدّ بينهما. */
  .header-actions,
  .list-controls,
  .list-footer,
  .bottom-nav {
    gap: var(--touch-gap);
  }

  /* Checkboxes and radios must stay their intrinsic size, not stretch. */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0;
    width: 24px;
    height: 24px;
  }

  /* الأرقام هي ما يُقرأ تحت الشمس: أكبر، وبأرقام متساوية العرض حتى لا يرقص
     العمود بين صف وصف. */
  .metric-value,
  .stat-value,
  .money,
  [data-money] {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
  }
}

/* U2 · نافذة الإدخال على الهاتف: عمود واحد.
   شبكة العمودين تعني حقلين بعرض 160px لكلٍّ منهما — أي أن اسم البند وكميته
   يتزاحمان على سطر واحد. الإدخال الميداني خطوة واحدة في الشاشة، رأسيًا. */
@media (max-width: 640px) {
  #modalFields {
    grid-template-columns: 1fr;
  }

  #modalFields label {
    grid-column: 1 / -1;
  }
}

/* N11 documents: hint line listing the transmittals carrying a document. */
.doc-tr-hint {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(var(--info-rgb) / 8%);
  color: var(--muted, var(--ink-3));
}

/* N3 BOQ import: the column hint and the validate-then-commit verdict, both
   full width inside the two-column modal grid. */
.field-hint,
#boqImportReport {
  grid-column: 1 / -1;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.import-ok,
.import-bad {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 800;
}

.import-ok {
  color: var(--green);
  background: var(--brand-soft);
}

.import-bad {
  color: var(--red);
  background: var(--danger-soft);
}

.import-errors {
  margin: 8px 0 0;
  padding-inline-start: 20px;
  max-height: 220px;
  overflow-y: auto;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.8;
}
/* ---------------------------------------------------------------- U3 · الصور
 *
 * شريط الكاميرا داخل نافذة التقرير. أهداف اللمس تتبع رموز U2 (`--touch`) لا
 * أرقامًا جديدة: هذا الشريط يُضغط بقفاز واقفًا في الموقع، وهو أكثر ما يُضغط في
 * الشاشة. والمصغّرات شبكة تلتفّ (`auto-fill`) فلا تُنتج تمريرًا أفقيًا على 360px
 * — التمرير الأفقي هو ما تحرسه `qa-mobile`.
 */

/* N16 v2 (ب) · بطاقات لوحة الدور.
 *
 * البطاقة **زرّ** لا `div`: هي مدخلٌ إلى تقريرها (النزول إلى المصدر من الرقم
 * نفسه)، ورقمٌ يُضغَط ولا يُبلَغ بلوحة المفاتيح يخرق U8 من الباب الذي أُغلق
 * لتوّه. فالعنصر زرّ حقيقي، ويُورَّث شكل `.metric-card` كما هو. */
.dashboard-tiles .metric-card {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: start;
  font: inherit;
  min-height: var(--touch, 48px);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.dashboard-tiles .metric-card:hover {
  border-color: var(--green);
}

.dashboard-tiles .metric-card:active {
  transform: translateY(1px);
}

/* حلقة تركيز صريحة لا اتّكال على افتراضي المتصفّح: البطاقة ملوّنة الخلفية،
   والحلقة الافتراضية الرفيعة تذوب فيها — ومن يتنقّل بلوحة المفاتيح ولا يرى
   أين هو تائه. وهي قاعدة U8 نفسها التي أُغلقت للتوّ. */
.dashboard-tiles .metric-card:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* U8 v2 · معرض صور تقريرٍ أُرسل.
 *
 * «3 صور» على الصفّ لا تقول **أي** ثلاث، ومن أرسل تقريرًا لا يستطيع أن يتحقّق
 * أن ما أرسله هو ما وصل — وهي صور دليل مطالبة. المعرض يفتح تحت الصفّ نفسه، لا
 * في شاشةٍ أخرى: الدليل يُقرأ بجوار ما يُثبته. */
.photo-gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.photo-thumb {
  margin: 0;
  display: grid;
  gap: 4px;
  position: relative;
}

.photo-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt, var(--surface-cool));
}

.photo-thumb .pill {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
}

/* سطر الدليل يُقصّ لسطرين لا يُخفى: الوقت والإحداثيات هما ما يُسأل عنه، وإخفاؤهما
   خلف تمرير يجعل المعرض صورًا بلا دليل. */
.photo-thumb figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.photo-thumb.is-missing figcaption {
  color: var(--amber, var(--warn-strong));
}

.photo-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--touch-gap, 0.6rem);
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-alt, var(--surface-cool));
}

.photo-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--touch-gap, 0.6rem);
}

/* الزرّ label يلفّ input مخفيًا — فالضغط على الزرّ يفتح الكاميرا مباشرة.
 *
 * وله أصنافه الخاصة لا `primary-button`/`ghost-button`: `qa-offline` يُرسل
 * النموذج بـ`#recordForm .primary-button`، فاستعارة الصنف كانت تجعل زرّ الإرسال
 * يفتح الكاميرا. الشكل مستعار، والصنف لا. */
.photo-capture-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch, 48px);
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.photo-capture-button.is-primary {
  border-color: transparent;
  background: var(--green);
  color: var(--surface);
}

.photo-capture-button:has(input:disabled) {
  opacity: 0.6;
  cursor: progress;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--touch-gap, 0.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-alt, var(--surface-cool));
}

.photo-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: rgb(var(--ink-4-rgb) / 20%);
}

.photo-thumb-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.72rem;
  opacity: 0.8;
}

/* الحذف هدف لمس كامل: زرّ صغير هنا يعني حذفًا بالخطأ لصورة لا تُعاد. */
.photo-thumb .photo-remove {
  min-height: var(--touch, 48px);
  width: 100%;
}

/* --- U6 · شاشة واحدة لمشرف الموقع -------------------------------------
   مشرف الموقع يحمل صلاحية واحدة (`field.entry`) ومع ذلك كان يرى هيكل التنقّل
   كاملًا بمجموعاته — وهو مصمَّم لصاحب الشركة على شاشة مكتب. وهو أكثر من
   يستعمل التطبيق يوميًا وأصعبهم ظرفًا: واقف، هاتف، شمس، قفاز.

   والوضع **لا يحذف وحدة واحدة**: كل ما هنا `display: none` يرفعه زرّ
   «كل الشاشات» المجاور. التبسيط إعادة ترتيب وتقديم، لا إزالة قدرات. */
body.field-mode .side-rail,
body.field-mode .workflow-strip,
body.field-mode .command-column {
  display: none;
}

/* عمود واحد: لا عمودان يتقاسمان شاشة هاتف تحت الشمس. */
body.field-mode .workspace-grid,
body.field-mode .app-view {
  grid-template-columns: 1fr;
}

/* الأزرار الكبيرة أولًا، قبل أي شيء آخر في الصفحة. */
body.field-mode .field-board-wrap {
  order: -1;
}

body.field-mode .field-board button {
  min-height: 132px;
}

.conn-status.tone-ok {
  border-color: var(--green, var(--brand));
  color: var(--green, var(--brand));
}

.field-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.field-board-head h2,
.field-board-head p {
  flex: 1 1 220px;
}

/* هدف لمس كامل للزرّ الذي يعيد الهيكل — لا رابط صغير يُخطَأ بالقفاز. */
.field-board-head [data-toggle-all-screens] {
  min-height: var(--touch, 48px);
  flex: 0 0 auto;
}
/* --- U5 · معالج تهيئة الشركة الجديدة ----------------------------------
   البطاقة تتصدّر شاشة البداية لأنها موجّهة لمن لا يعرف أين يبدأ. وحدّها
   الأخضر ليس زخرفًا: هو ما يميّزها عن بقيّة البطاقات في أول نظرة. */
.onboarding-card {
  border: 2px solid var(--green, var(--brand));
}

.onboarding-card.is-done {
  border-color: var(--sky, var(--info));
}

.onboarding-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.onboarding-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line, var(--line-2));
  border-radius: 10px;
  padding: 10px 12px;
}

.onboarding-steps li > div {
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.onboarding-steps small {
  color: var(--muted, var(--ink-3));
  font-size: 0.85rem;
  line-height: 1.4;
}

/* المُنجَز يهدأ ولا يختفي: رؤية ما تمّ جزء من معرفة أين أنت. */
/* U8 · الخطوة المنجَزة تُعرَف بعلامتها لا بخفوتها.
   كانت `opacity: 0.72` — والشفافية تخفض تباين **كل** ما تحتها، فأعطت
   ‏3.1:1 على نصّ الخطوة (المطلوب 4.5:1)، وأسقطت بوابة axe على عشر شاشات.
   وهي نفس العلّة التي أُصلحت في `.demo-list` و`.table-row.is-read`، عادت
   من فرع آخر لأن البوابة لم ترَ هذه الشاشة يومها. فالحالة الآن في الخلفية
   وفي علامة الصحّ الخضراء — والنصّ يبقى بتباينه كاملًا. */
.onboarding-steps li.is-done {
  background: var(--panel-soft, var(--surface-3));
  border-color: var(--green, var(--brand));
}

.onboarding-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-soft, var(--surface-3));
  font-weight: 800;
}

.onboarding-steps li.is-done .onboarding-mark {
  background: var(--green, var(--brand));
  color: var(--surface);
}

.onboarding-state {
  color: var(--green, var(--brand));
  font-size: 0.85rem;
  font-weight: 700;
}

/* زرّ «ابدأ» هدف لمس كامل — المعالج يُستعمل على الهاتف كما على المكتب. */
.onboarding-steps [data-module-shortcut] {
  min-height: var(--touch, 48px);
  flex: 0 0 auto;
}

.onboarding-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.onboarding-numbers div {
  border: 1px solid var(--line, var(--line-2));
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.onboarding-numbers small {
  color: var(--muted, var(--ink-3));
  font-size: 0.8rem;
}

.onboarding-numbers strong {
  font-size: 1.15rem;
  font-weight: 800;
}

/* وليس رابطًا نصيًّا مهما بدا كذلك في النصّ: هو إجراء يُضغط على هاتف،
   فيسري عليه ما يسري على كل هدف لمس (‏U2 يفرض 48px). وقد جاءت النسخة
   الأولى بـ`min-height: 0` فأسقطت بوابة الهاتف على عشر شاشات دفعةً واحدة. */
.link-button.inline {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch, 48px);
  padding: 0 2px;
  text-align: start;
}

/* --- U4 · لوحة البحث العام --------------------------------------------- */
.palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 8vh 16px 16px;
}

.palette.is-hidden {
  display: none;
}

.palette-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.palette-card {
  position: relative;
  width: min(680px, 100%);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  background: var(--panel, var(--surface));
  border: 1px solid var(--line, var(--line-2));
  border-radius: 16px;
  box-shadow: 0 24px 60px var(--scrim-soft);
  overflow: hidden;
}

.palette-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line, var(--line-2));
}

.palette-head input {
  flex: 1 1 auto;
  min-height: var(--touch, 48px);
  border: 0;
  background: transparent;
  color: var(--ink, var(--ink));
  font-size: 1.05rem;
  font-family: inherit;
}

.palette-head input:focus {
  outline: none;
}

.palette-head button {
  min-height: var(--touch, 48px);
  min-width: var(--touch, 48px);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, var(--ink-3));
  font-size: 1.4rem;
  cursor: pointer;
}

.palette-results {
  overflow-y: auto;
  padding: 8px;
}

.palette-group {
  margin-bottom: 8px;
}

.palette-group > small {
  display: block;
  padding: 6px 8px 4px;
  color: var(--muted, var(--ink-3));
  font-size: 0.8rem;
  font-weight: 700;
}

.palette-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: var(--touch, 48px);
  text-align: start;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink, var(--ink));
  cursor: pointer;
}

/* المُحدَّد بالسهمين والمُحدَّد بالفأرة يبدوان واحدًا: مسار لوحة المفاتيح
   ليس مسارًا ثانويًّا. */
.palette-item.is-active,
.palette-item:hover {
  border-color: var(--green, var(--brand));
  background: var(--panel-soft, var(--surface-3));
}

.palette-item small {
  color: var(--muted, var(--ink-3));
  font-size: 0.85rem;
}

.palette-empty {
  margin: 0;
  padding: 18px 10px;
  color: var(--muted, var(--ink-3));
  text-align: center;
}

.palette-hint {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line, var(--line-2));
  color: var(--muted, var(--ink-3));
  font-size: 0.8rem;
  text-align: center;
}

kbd {
  display: inline-block;
  border: 1px solid var(--line, var(--line-2));
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0 5px;
  font-family: inherit;
  font-size: 0.75rem;
}

/* على الهاتف تملأ اللوحة الشاشة: نصف شاشة بحث على 360px ليست بحثًا. */
@media (max-width: 640px) {
  .palette {
    padding: 0;
  }

  .palette-card {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    border: 0;
  }
}

/* --- U7 · ورقة المستند -------------------------------------------------
   المستخلص وأمر الشراء وأمر التغيير والتقرير اليومي مستنداتٌ تُطبَع وتُوقَّع
   وتُقدَّم للمالك أو الاستشاري. وكلها كانت في القاعدة بلا طريق إلى ورقة
   رسمية — فيعود المستخدم إلى Excel ليكتبها يدويًّا.

   والاتجاه وتشكيل الحروف العربية يتكفّل بهما محرّك الطباعة في المتصفّح، وهو
   ما لا يأتي مجّانًا في مولّد PDF مكتوب باليد. */
.print-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  background: var(--ink-3);
  padding: 16px;
}

.print-sheet.is-hidden {
  display: none;
}

.print-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 210mm;
  margin: 0 auto 12px;
}

.print-toolbar .muted-copy {
  color: var(--surface-3);
}

.print-page {
  max-width: 210mm;
  margin: 0 auto;
  background: var(--surface);
  color: var(--ink);
  padding: 16mm 14mm;
  box-shadow: 0 10px 30px rgb(var(--ink-deep-rgb) / 25%);
}

.print-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
}

.print-head strong {
  display: block;
  font-size: 1.15rem;
}

.print-head small,
.print-title small {
  color: var(--ink-2-cool);
  font-size: 0.85rem;
}

.print-title {
  text-align: end;
}

.print-title h1 {
  margin: 0;
  font-size: 1.35rem;
}

.print-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.print-meta small {
  display: block;
  color: var(--ink-2-cool);
  font-size: 0.78rem;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.9rem;
}

.print-table th,
.print-table td {
  border: 1px solid var(--ink-4);
  padding: 6px 8px;
  text-align: start;
}

.print-table th {
  background: var(--surface-3);
}

.print-totals {
  margin-top: 12px;
  display: grid;
  gap: 4px;
  justify-content: end;
}

.print-totals div {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-width: 240px;
}

.print-totals .is-net {
  border-top: 2px solid var(--ink);
  padding-top: 6px;
  font-size: 1.05rem;
  font-weight: 800;
}

.print-notes,
.print-body {
  margin-top: 12px;
}

.print-notes small {
  color: var(--ink-2-cool);
}

.print-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.print-photos figure {
  margin: 0;
}

.print-photos img {
  width: 100%;
  border: 1px solid var(--ink-4);
}

.print-photos figcaption {
  font-size: 0.78rem;
  color: var(--ink-2-cool);
}

/* خانات التوقيع: مستندٌ بلا مكان للتوقيع ليس مستندًا رسميًّا. */
.print-signatures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.print-signatures div {
  text-align: center;
}

.print-signatures span {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-2-cool);
}

.print-signatures i {
  display: block;
  border-top: 1px solid var(--ink);
  margin-top: 34px;
}

@media print {
  /* لا نُخفي بـ`visibility` هنا: العنصر المخفيّ بها يبقى يحجز مكانه فتخرج
     صفحات بيضاء بينه وبين المستند. `display: none` يزيله من التدفّق. */
  body.printing-doc > *:not(#printSheet) {
    display: none !important;
  }

  body.printing-doc #printSheet {
    position: static;
    padding: 0;
    background: var(--surface);
    overflow: visible;
  }

  body.printing-doc .print-page {
    max-width: none;
    box-shadow: none;
    padding: 0;
  }

  body.printing-doc [data-print-hide] {
    display: none !important;
  }

  /* رأس الجدول يتكرّر على كل صفحة: جدول بنود يمتدّ ثلاث صفحات بلا رؤوس
     يُقرأ بالتخمين. */
  body.printing-doc .print-table thead {
    display: table-header-group;
  }

  body.printing-doc .print-table tr,
  body.printing-doc .print-photos figure {
    break-inside: avoid;
  }

  /* التوقيعات لا تُقطع بين صفحتين. */
  body.printing-doc .print-signatures {
    break-inside: avoid;
  }

  @page {
    size: A4;
    margin: 14mm;
  }
}