/* ===========================================================================
   غين — رموز التصميم
   ---------------------------------------------------------------------------
   الهوية: بورغندي دافئ #591B24 وكريمي رق #F5E6DA، ولمستان نحاس #B87333
   وتيل عميق #008080.

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

   القاعدة الناتجة، وهي قاعدة لا تفضيل: **البورغندي لون واجهة فقط** — الشريط
   العلوي والتبويبات والزر الأساسي — ولا يلمس حالةً ولا بياناً أبداً. وألوان
   الحالة تُقاس بتباعدها عنه لا بانتمائها للوحة:

     خطر  #C4382C   يبعد ٢٥ درجة سطوع عن البورغندي — أفتح وأشدّ تشبّعاً
     تحذير #B87333   النحاس، ويبعد ٤٦° صبغةً عن البورغندي
     جيد   #008080   التيل، ويبعد ١٧٨° — أبعد ما يمكن، وهو من اللوحة أصلاً

   أضيق فارق هو خطر ↔ بورغندي (١٨° صبغة)، ويحسمه فرق السطوع ٢٥ ومنع البورغندي
   من دخول نطاق الحالة — فلا يقعان في دور واحد ليُخلط بينهما.

   كل لون يُعلن على :root أولاً ثم يُعاد تعريفه — رموزاً فقط — للوضع الداكن،
   حتى لا يوجد مكوّن يظهر في وضع ويختفي في الآخر.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Graphik Arabic — خطّ الهوية، حين تصل ملفاته.
   ---------------------------------------------------------------------------
   هو خطّ هوية «غين»، وهو خطٌّ تجاريّ من Commercial Type لا يُوزَّع مع الشيفرة:
   رخصته تُشترى، ورخصة الويب غير رخصة سطح المكتب. فلا يُحمل هنا كما حُمل Plex.

   وقواعده لا تُكتب في هذا الملف بل تُبنى عند الطلب في /fonts/graphik.css،
   ويُعلنها الخادم للأوزان الموجودة على القرص وحدها. والسبب أن إعلان قاعدة
   لملفٍّ غائب يُنتج طلباً فاشلاً لكل وزن في كل فتح — أربعة أخطاء حمراء في
   سجلّ المتصفح تُعلّم قارئه تجاهله، وهو السجلّ نفسه الذي سيُقرأ يوم يقع خطأ
   حقيقي.

   ضع الملفات في web/fonts/ (التفاصيل في README هناك)، فيتحوّل النظام إليها
   عند أول تحديث بلا سطر شيفرة. وحتى تصل يرسم Plex Sans Arabic — وهو قريبٌ
   منه في البنية: هندسيٌّ مفتوح العدادات، منخفض التباين، يصلح للواجهات.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Tajawal، محمولاً مع النظام لا مستعاراً من الجهاز.
   ---------------------------------------------------------------------------
   القاعدة السابقة كانت قائمة أمنيات — «SF Arabic ثم Segoe UI ثم Noto» — أي أن
   شكل النظام يتقرّر على جهاز القارئ لا هنا. تصميمٌ لا يملك خطّه ليس تصميماً.

   وTajawal اختير ليقف مكان Graphik Arabic حتى تصل رخصته: هندسيٌّ منخفض
   التباين، مفتوح العدادات، عربيٌّ مرسومٌ عربياً لا لاتينيٌّ مُعرَّب — وهي
   صفات Graphik نفسها، فلا يتغيّر تخطيطٌ حين يُبدَّل.

   ورخصته SIL Open Font License 1.1 (النصّ في web/fonts/LICENSE-tajawal.txt)
   تسمح بحمله مع الشيفرة، وهو ما لا تسمح به رخصة Graphik.

   ولا وزن ٦٠٠ فيه: أوزانه ٤٠٠ و٥٠٠ و٧٠٠. وقاعدة مطابقة الأوزان في CSS تصعد
   عند طلب ما فوق ٥٠٠، فكل `font-weight: 600` في النظام يُرسم ٧٠٠. جُرِّب على
   الشاشة قبل قبوله، لا في الذهن.

   والملفات ١٢٨ كيلوبايت بعد أن كانت ٣٠٤ — Tajawal أصغر من Plex بكثير.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/tajawal-ar-400.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
  font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/tajawal-la-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/tajawal-ar-500.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
  font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/tajawal-la-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/tajawal-ar-700.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
  font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/tajawal-la-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* الأرقام وحدها بخطّ أحادي العرض: عمود المال يُقرأ عمودياً، وعرض الخانة
   الثابت يضع الآحاد فوق الآحاد. Tajawal ليس أحاديّ العرض، وهذا ليس عيباً فيه
   — هو خطّ نصّ. */

@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/plex-mono-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;

  /* الأرضية والأسطح — كريمي الرق مخفَّف، فاللون بتشبّعه الكامل يرهق العين
     على مساحة شاشة كاملة ويصلح للوحة هوية لا لواجهة تُقرأ ساعات. */
  --plane: #f7efe6;
  --surface: #ffffff;
  --surface-2: #fdf8f3;
  --surface-sunken: #f0e4d8;

  /* الحبر — أسود مائل للبورغندي لا رمادي محايد، ليجلس على الكريمي بلا برودة */
  --ink: #2a1a1c;
  --ink-2: #6b565a;
  /* لا #948086 كما يقترحه الذوق: النص الثانوي يجلس على ثمانية أسطح فاتحة،
     وأغمقها «الهوية الفاتحة» و«الغائر». قيست القيمة على أسوأها لا على الأبيض،
     فحققت ٤٫٥ في كل موضع بدل أن تنجح على بطاقة وتسقط على أخرى. */
  --ink-3: #705a61;

  --rule: #eadccf;
  --rule-strong: #d9c8b9;

  /* الهوية — واجهة فقط */
  --brand: #591b24;
  --brand-2: #73242f;
  --ink-on-brand: #f5e6da;
  /* لون الهوية حين يقع على أرضية الصفحة لا على الواجهة الملوّنة. يفترق عن
     --brand في الوضع الداكن، حيث لا يُقرأ البورغندي نصاً على خلفية داكنة. */
  --brand-accent: #591b24;
  --brand-soft: #f5e6da;
  --brand-ring: rgba(89, 27, 36, .35);

  /* الحالة — محجوزة للمعنى، ولا تُستخدم زينةً */
  --good: #008080;
  --good-text: #016b6b;
  --good-soft: #e2f0ef;
  --warn: #b87333;
  --warn-text: #8a5420;
  --warn-soft: #faeede;
  --bad: #c4382c;
  --bad-text: #a62b21;
  --bad-soft: #fbeae7;
  --info: #474a51;
  --info-soft: #eeecea;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 26, 28, .06);
  --shadow: 0 1px 2px rgba(42, 26, 28, .05), 0 8px 20px -10px rgba(42, 26, 28, .22);

  --gap: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* الهوية أولاً، ثم الخط المحمول، ثم احتياطات الجهاز للحظة التحميل الأولى
     وحدها لا لتقرير الشكل. */
  --font: "Graphik Arabic", "Tajawal", "SF Arabic", "Segoe UI", "Noto Sans Arabic", system-ui, sans-serif;
  /* الأرقام في جدول مالي تُقرأ عمودياً، وعرض الخانة الثابت يجعل الآحاد فوق
     الآحاد. بدونه يتعرّج العمود ويصعب مسحه بالنظر. */
  /* «Plex Arabic» ثانياً لا آخراً: قيمة المال نصٌّ مختلط — «22,167 ر.س» —
     ومقاطع الأرقام تأخذ Plex Mono بينما «ر.س» تسقط خارج مداه. بلا هذه الحلقة
     يرسمها المتصفح بأيّ خطٍّ عنده يحمل العربية، فيظهر حرفان غريبان بجانب كل
     مبلغ في النظام. */
  --num: "Plex Mono", "Graphik Arabic", "Tajawal", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

/* الوضع الداكن: الشريط العلوي يبقى بورغندياً — أعمق درجةً ليجلس على أرضية
   داكنة — بينما ينتقل لون الهوية النصّي إلى «أحمر الخدود» من اللوحة الفرعية،
   لأن البورغندي على خلفية داكنة نصٌّ لا يُقرأ. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --dark-plane: #16100f;
  --dark-surface: #1f1817;
  --dark-surface-2: #271e1c;
  --dark-surface-sunken: #120d0c;
  --dark-ink: #f5e6da;
  --dark-ink-2: #c6b3a8;
  /* قيست على أفتح الأسطح الداكنة (بطاقة «جيد» #102a2a) لا على الأرضية:
     الأرضية أغمق سطح في الصفحة، ومن عايرها نجح فيها وسقط في كل بطاقة ملوّنة. */
  --dark-ink-3: #a5958c;
  --dark-rule: #332825;
  --dark-rule-strong: #453733;
  --dark-brand: #4a161e;
  --dark-brand-2: #5e1d27;
  --dark-brand-accent: #f0bdb4;
  --dark-brand-soft: #2e1a1b;
  --dark-brand-ring: rgba(240, 189, 180, .4);
  --dark-good: #3fb3ad;
  --dark-good-text: #6ed0c9;
  --dark-good-soft: #102a2a;
  --dark-warn: #cf9350;
  --dark-warn-text: #e0a360;
  --dark-warn-soft: #2c2015;
  --dark-bad: #e0776b;
  --dark-bad-text: #f08b80;
  --dark-bad-soft: #2e1614;
  --dark-info: #a3acb8;
  --dark-info-soft: #1e1a19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --plane: var(--dark-plane);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --surface-sunken: var(--dark-surface-sunken);
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink-2);
  --ink-3: var(--dark-ink-3);
  --rule: var(--dark-rule);
  --rule-strong: var(--dark-rule-strong);
  --brand: var(--dark-brand);
  --brand-2: var(--dark-brand-2);
  --brand-accent: var(--dark-brand-accent);
  --brand-soft: var(--dark-brand-soft);
  --brand-ring: var(--dark-brand-ring);
  --good: var(--dark-good);
  --good-text: var(--dark-good-text);
  --good-soft: var(--dark-good-soft);
  --warn: var(--dark-warn);
  --warn-text: var(--dark-warn-text);
  --warn-soft: var(--dark-warn-soft);
  --bad: var(--dark-bad);
  --bad-text: var(--dark-bad-text);
  --bad-soft: var(--dark-bad-soft);
  --info: var(--dark-info);
  --info-soft: var(--dark-info-soft);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .65);
  }
}

:root[data-theme="dark"] {
  --plane: var(--dark-plane);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --surface-sunken: var(--dark-surface-sunken);
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink-2);
  --ink-3: var(--dark-ink-3);
  --rule: var(--dark-rule);
  --rule-strong: var(--dark-rule-strong);
  --brand: var(--dark-brand);
  --brand-2: var(--dark-brand-2);
  --brand-accent: var(--dark-brand-accent);
  --brand-soft: var(--dark-brand-soft);
  --brand-ring: var(--dark-brand-ring);
  --good: var(--dark-good);
  --good-text: var(--dark-good-text);
  --good-soft: var(--dark-good-soft);
  --warn: var(--dark-warn);
  --warn-text: var(--dark-warn-text);
  --warn-soft: var(--dark-warn-soft);
  --bad: var(--dark-bad);
  --bad-text: var(--dark-bad-text);
  --bad-soft: var(--dark-bad-soft);
  --info: var(--dark-info);
  --info-soft: var(--dark-info-soft);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.booting { padding: 4rem 1rem; text-align: center; color: var(--ink-3); }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- الهيكل ------------------------------------------------------------- */

.shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--brand); color: var(--ink-on-brand);
}
.topbar .mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: rgba(255, 255, 255, .16); font-weight: 700;
}
/* حين يوجد ملف الشعار: يحلّ محلّ الحرف في مربّعه نفسه، بلا أرضية ولا هوامش —
   الأرضية تأتي من الشريط، وشعارٌ يحمل أرضيته يظهر مربّعاً غريباً فوق مربّع.
   و`object-fit: contain` يحفظ نسبه مهما كان شكل الملف. */
/* القاعدة على `has-logo` وحدها لا على `.mark`: الشعار الكامل يحمل صنفاً آخر
   (`lockup`)، وقصرُها على الأول ترك القناع بلا لون ولا مقاس فاختفى تماماً. */
.has-logo { background: none; }
.has-logo > i {
  display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* الشعار الكامل بكلمته: عريض لا مربّع، فيُقاس بعرضه */
/* الشعار الكامل: يُقاس بعرضه وارتفاعه معاً لأن نسبته قد تكون عريضة أو قريبة
   من المربّع بحسب ملف المصمّم، ولا يصحّ أن يبتلع البطاقة في الحالة الثانية. */
.lockup { width: min(230px, 62vw); aspect-ratio: 1 / .92; color: var(--brand); }
.lockup img { width: 100%; height: 100%; object-fit: contain; display: block; }

.topbar .who { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.topbar .who span { opacity: .8; }
.topbar button {
  background: rgba(255, 255, 255, .14); color: inherit; border: 0;
  padding: 6px 12px; border-radius: var(--pill); cursor: pointer;
}
.topbar button:hover { background: rgba(255, 255, 255, .24); }

/* صفّان: المجموعة فوق والشاشة تحتها. الأول على أرضية العلامة لأنه كسوة،
   والثاني على أرضية الصفحة لأنه موضع القارئ الآن. */
.groups {
  display: flex; gap: 6px;
  padding: 6px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--brand); position: sticky; top: 52px; z-index: 20;
}
.groups button {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  padding: 5px 14px; border-radius: var(--pill); font-size: .82rem;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78);
}
.groups button[aria-selected="true"] { background: rgba(255, 255, 255, .92); color: var(--brand); font-weight: 600; }

.tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 8px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--brand); position: sticky; top: 85px; z-index: 19;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  padding: 8px 14px; border-radius: 10px 10px 0 0;
  background: transparent; color: rgba(255, 255, 255, .72);
}
.tabs button[aria-selected="true"] { background: var(--plane); color: var(--ink); font-weight: 600; }

main {
  flex: 1; width: min(1100px, 100%); margin: 0 auto;
  padding: var(--gap) max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left));
  display: grid; gap: var(--gap);
}

/* --- البطاقات ------------------------------------------------------------ */

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
  display: grid; gap: 12px; align-content: start;
}
.card > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card > header .note { color: var(--ink-3); font-size: .82rem; }

.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- الأرقام الكبيرة ----------------------------------------------------- */

.stat { display: grid; gap: 2px; }
.stat .label { font-size: .8rem; color: var(--ink-3); }
.stat .value { font-family: var(--num); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
/* التاريخ قيمة نصّية لا رقم: بحجم الرقم الكبير ينكسر سطرين داخل البلاطة. */
.stat .value.sm { font-family: var(--font); font-size: 1.15rem; letter-spacing: 0; }
.stat .sub { font-size: .8rem; color: var(--ink-2); }
.stat.good .value { color: var(--good-text); }
.stat.warn .value { color: var(--warn-text); }
.stat.bad .value { color: var(--bad-text); }

.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile {
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 12px;
}
.tile.bad { background: var(--bad-soft); border-color: transparent; }
.tile.warn { background: var(--warn-soft); border-color: transparent; }
.tile.good { background: var(--good-soft); border-color: transparent; }

/* --- الأشرطة ------------------------------------------------------------- */

.bar { height: 8px; border-radius: var(--pill); background: var(--surface-sunken); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand-accent); border-radius: inherit; }
.bar > i.good { background: var(--good); }
.bar > i.warn { background: var(--warn); }
.bar > i.bad { background: var(--bad); }

/* --- الشارات ------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 9px; border-radius: var(--pill); font-size: .76rem; font-weight: 600;
  background: var(--surface-sunken); color: var(--ink-2);
}
.badge.done { background: var(--good-soft); color: var(--good-text); }
.badge.overdue, .badge.blocked { background: var(--bad-soft); color: var(--bad-text); }
.badge.due_soon, .badge.late_start { background: var(--warn-soft); color: var(--warn-text); }
.badge.on_track { background: var(--brand-soft); color: var(--brand-accent); }
.badge.critical { background: var(--bad-soft); color: var(--bad-text); }
/* الحالة الاعتيادية الغالبة — المنصرف في جدول المخزون — تبقى صامتة. لو أخذت
   لون العلامة التجارية لصار نصف الجدول مصبوغاً بها، والبرغندي هنا كسوة لا خبر. */
.badge.neutral { background: var(--surface-sunken); color: var(--ink-2); }
.badge b { font-weight: 700; }

/* --- التنبيهات ----------------------------------------------------------- */

.notice {
  display: grid; gap: 4px; padding: 12px 14px;
  border-radius: var(--radius-sm); border-inline-start: 3px solid var(--info);
  background: var(--info-soft);
}
.notice strong { font-size: .92rem; }
.notice p { font-size: .85rem; color: var(--ink-2); }
.notice.bad { border-color: var(--bad); background: var(--bad-soft); }
.notice.warn { border-color: var(--warn); background: var(--warn-soft); }
.notice.good { border-color: var(--good); background: var(--good-soft); }

/* --- قوائم المهام -------------------------------------------------------- */

.tasks { display: grid; gap: 8px; }
.task {
  display: grid; gap: 8px; padding: 12px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  grid-template-columns: 1fr auto; align-items: start;
}
.task.is-overdue, .task.is-blocked { border-inline-start: 3px solid var(--bad); }
.task.is-due_soon, .task.is-late_start { border-inline-start: 3px solid var(--warn); }
.task.is-done { opacity: .62; }
.task .title { font-weight: 500; }
.task .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; color: var(--ink-3); margin-top: 3px; }
.task .meta .money { font-family: var(--num); }
.task .note { font-size: .82rem; color: var(--ink-2); margin-top: 4px; }
.task .actions { display: grid; gap: 6px; justify-items: end; }

/* المهمة التي تدفع التاريخ تُعلَّم بحافّة داخلية لا بلون خلفية: لون الخلفية
   محجوز للحالة، وحشر معنى ثانٍ فيه يجعل البطاقة تقول شيئين ولا تقول أياً منهما. */
.task.on-path { box-shadow: inset 0 0 0 1px var(--brand-accent); }

.task-detail {
  display: grid; gap: 14px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--rule);
}
.deps { display: grid; gap: 8px; }
.deps h3 { font-size: .85rem; color: var(--ink-2); }
.dep-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dep {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-sunken); border-radius: var(--pill);
  padding: 3px 4px 3px 12px; font-size: .8rem;
}
.dep.done { background: var(--good-soft); color: var(--good-text); }
.dep button { padding: 0 8px; background: transparent; font-size: 1rem; line-height: 1; }

.phase-head {
  display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
  font-weight: 600; color: var(--ink-2); font-size: .9rem;
}
.phase-head .count { font-family: var(--num); color: var(--ink-3); font-size: .8rem; }

/* --- جدول اليوم -------------------------------------------------------- */

/* شبكة: عمود للوقت وعمود لكل موظفة، وصفٌّ لكل ربع ساعة. الموعد يمتدّ عبر
   الصفوف بقدر مدّته، فيقول طولُه مدّته قبل قراءة أي رقم — وهذا ما يجعل الجدول
   يُقرأ بلمحة بدل أن يُفكّ. */
.sched-wrap { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }
.sched { display: grid; gap: 0 6px; min-width: max-content; --slot-h: 15px; }
.sched-head {
  position: sticky; top: 0; z-index: 2; padding: 6px 4px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-ruler, .sched-col { display: grid; }
.ruler-cell {
  font-family: var(--num); font-size: .7rem; color: var(--ink-3);
  text-align: end; padding-inline-end: 4px; line-height: 1;
}
.ruler-cell.hour { border-top: 1px solid var(--rule); padding-top: 1px; }
.sched-col { position: relative; border-inline-start: 1px solid var(--rule); }
/* خطوط الساعات خلف المواعيد: تدرّج متكرّر كل أربعة صفوف بدل ستين عنصراً فارغاً */
.sched-col {
  background-image: repeating-linear-gradient(
    to bottom, var(--rule) 0 1px, transparent 1px calc(var(--slot-h) * 4));
}

.appt {
  display: grid; align-content: start; gap: 1px; overflow: hidden;
  margin: 1px 2px; padding: 3px 6px; cursor: pointer; text-align: start;
  border: 0; border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius-xs); background: var(--brand-soft); color: var(--ink);
  font-size: .74rem; line-height: 1.25;
}
.appt:hover { filter: brightness(.97); }
.appt-time { font-family: var(--num); font-size: .68rem; color: var(--ink-3); }
.appt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-svc { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt.is-short .appt-svc { display: none; }
.appt.is-tiny {
  grid-auto-flow: column; grid-template-columns: auto 1fr;
  align-content: center; gap: 0 6px; padding-block: 1px;
}
.appt.is-tiny .appt-svc { display: none; }

.appt.is-confirmed { border-color: var(--good); background: var(--good-soft); }
.appt.is-arrived { border-color: var(--info); background: var(--info-soft); }
.appt.is-done { border-color: var(--good); background: var(--good-soft); opacity: .7; }
.appt.is-no_show { border-color: var(--bad); background: var(--bad-soft); }
.appt.is-cancelled { border-color: var(--rule-strong); background: var(--surface-sunken); opacity: .55; text-decoration: line-through; }

/* --- السلسلة الحاكمة ---------------------------------------------------- */

/* خطّ رأسي يصل الخطوات، ونقطة عند كل مهمة: الشكل نفسه يقول «هذه تتبع تلك»،
   وهي المعلومة التي تميّز السلسلة عن قائمة مهام عادية. */
.chain { display: grid; gap: 0; }
.chain-step {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  padding: 8px 0; position: relative;
}
.chain-step::before {
  content: ''; position: absolute; inset-block: 0;
  inset-inline-start: 8px; width: 2px; background: var(--rule-strong);
}
.chain-step:first-child::before { inset-block-start: 50%; }
.chain-step:last-child::before { inset-block-end: 50%; }
.chain-mark {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 7px;
  margin-inline-start: 4px; background: var(--ink-3);
  box-shadow: 0 0 0 3px var(--surface); position: relative; z-index: 1;
}
.chain-step.is-done .chain-mark { background: var(--good); }
.chain-step.is-overdue .chain-mark, .chain-step.is-blocked .chain-mark { background: var(--bad); }
.chain-step.is-due_soon .chain-mark, .chain-step.is-late_start .chain-mark { background: var(--warn); }
.chain-step .title { font-weight: 500; font-size: .92rem; }
.chain-step .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--ink-3); }

/* --- الجداول ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--rule); }
th { font-size: .78rem; color: var(--ink-3); font-weight: 600; }
/* الخطّ أحادي العرض للأرقام وحدها. عناوين الأعمدة عربية، وإجبارها عليه يباعد
   حروفها فتُقرأ «ا ل د قا ئق» — الخط مصمّم لمحاذاة الأرقام لا لكتابة العربية. */
td.num, th.num { text-align: end; white-space: nowrap; }
td.num { font-family: var(--num); }
tr.total td { border-top: 2px solid var(--rule-strong); border-bottom: 0; font-weight: 600; }
tr.over td.num { color: var(--bad-text); }
/* صفٌّ يستحق النظر يُعلَّم بحافّة لا بتلوين أرقامه كلها: الحافّة تقول «انظر
   هنا»، وتلوين الصفّ بأكمله يقول «كل رقم فيه خطأ» — وهو ليس كذلك. */
tr.flagged td:first-child { border-inline-start: 3px solid var(--bad); }
/* شريط تغطية اليوم: الخطّ كامل اليوم، والفجوة وحدها تُرسم. رسم المغطّى بدل
   المكشوف يجعل العين تبحث عن غياب اللون، وهي لا تجيده — تجيد العثور على لون
   غريب وسط لا شيء. */
.cover-track {
  position: relative; height: 12px; min-width: 120px; border-radius: 6px;
  background: var(--good-soft); border: 1px solid var(--rule); overflow: hidden;
}
.cover-track > i.hole { position: absolute; inset-block: 0; background: var(--bad); }

/* شريط حول الصفر: الربح ينمو في اتجاه والخسارة في الآخر، والخطّ في المنتصف.
   رسمُ الخسارة شريطاً قصيراً من الطرف نفسه يجعلها تُقرأ ربحاً صغيراً — والفرق
   بين الاثنين هو كل ما في السطر. */
.zero-track {
  position: relative; height: 12px; min-width: 120px; border-radius: 6px;
  background: var(--surface-sunken); border: 1px solid var(--rule); overflow: hidden;
}
.zero-track::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 50%;
  width: 1px; background: var(--rule-strong);
}
.zero-track > i { position: absolute; inset-block: 2px; border-radius: 3px; }
.zero-track > i.up { background: var(--good); }
.zero-track > i.down { background: var(--bad); }

/* نبرة على الرقم وحده، حيث يكون الخبر في الرقم لا في الصفّ. */
.tone-bad { color: var(--bad-text); }
.tone-good { color: var(--good-text); }
.tone-warn { color: var(--warn-text); }
.table-wrap { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }

/* الشريط ونسبته كتلة واحدة: في الوضع المكدّس تصير الخانة flex، والشريط بلا
   عرض أدنى ينضغط إلى صفر فيبقى الرقم وحده بلا ما يجعله مقروءاً بلمحة. */
td.consumed { min-width: 110px; }
.gauge { display: flex; align-items: center; gap: 8px; }
.gauge .bar { flex: 1 1 70px; min-width: 60px; }
.gauge span { font-size: .74rem; font-variant-numeric: tabular-nums; }

/* على الجوال يصير الجدول المعلَّم `stacked` قائمةً: كل صف كتلة، وكل خانة سطر
   يحمل عنوان عموده. ستة أعمدة على شاشة ٤٣٠ بكسل تُقرأ بالسحب الجانبي، وما
   يُقرأ بالسحب لا يُقرأ — وهذه الأرقام تحديداً هي التي يُفتح النظام لأجلها. */
@media (max-width: 620px) {
  table.stacked thead { display: none; }
  table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; width: 100%; }
  table.stacked tr {
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2);
  }
  table.stacked td { border: 0; padding: 3px 0; }
  table.stacked td[data-label]::before {
    content: attr(data-label) '  ';
    color: var(--ink-3); font-size: .78rem; font-family: var(--font);
  }
  table.stacked td[data-label] { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  table.stacked td:first-child { font-weight: 600; margin-bottom: 4px; }
  table.stacked td:first-child::before { content: none; }
  table.stacked tr.total { background: var(--surface-sunken); }
}

/* --- النماذج ------------------------------------------------------------- */

.field { display: grid; gap: 5px; }
.field label { font-size: .82rem; color: var(--ink-2); }
.field .hint { font-size: .76rem; color: var(--ink-3); }
input, select, textarea {
  width: 100%; padding: 9px 11px; background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-xs);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand-ring); outline-offset: 1px;
}
input[type="number"] { font-family: var(--num); }
/* مربّعات الاختيار والمنزلقات تأخذ لون الهوية: هي كسوة عنصر تحكّم لا خبر عن
   حالة، والأزرق الافتراضي كان اللون الوحيد في النظام الذي لا ينتمي إليه. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: var(--brand);
}

button.primary, button.ghost, button.danger, button.chip {
  border: 1px solid transparent; border-radius: var(--radius-xs);
  padding: 8px 14px; cursor: pointer; font-weight: 500;
}
button.primary { background: var(--brand); color: var(--ink-on-brand); }
button.primary:hover { background: var(--brand-2); }
button.ghost { background: var(--surface); border-color: var(--rule-strong); }
button.ghost:hover { background: var(--surface-2); }
button.danger { background: var(--bad); color: #fff; }
button.chip { background: var(--surface-sunken); padding: 4px 11px; font-size: .8rem; border-radius: var(--pill); }
button.chip[aria-pressed="true"] { background: var(--brand); color: var(--ink-on-brand); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* --- اللمس ---------------------------------------------------------------
   الشاشة ستُشغَّل على آيباد في الاستقبال. وحدّ آبل لمساحة اللمس ٤٤ نقطة، وكل
   عنصر تفاعلي في النظام كان دونه: الرقاقة ٣٠ بكسلاً، والزرّ ٣٩، والحقل ٤٣.
   قِيس ذلك ولم يُقدَّر — ٤١ رقاقة في شاشة واحدة دون الحدّ.

   وإصبعٌ يخطئ الهدف يعني ضغطةً ثانية، وفي كاشير مزدحم يعني فاتورة مكرّرة.

   والتكبير مشروطٌ بمؤشّر خشن: على الفأرة الهدف الصغير دقيقٌ ومريح، وتكبيره
   يفرّق الشاشة بلا سبب. فالكثافة تتبع أداة الإدخال لا الذوق. */
@media (pointer: coarse) {
  button, select, summary, [role="tab"],
  input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }
  /* والعرض كالارتفاع: رقاقة «حذف» بأربعة أحرف كانت ٤١ بكسلاً عرضاً */
  button, select, [role="tab"] { min-width: 44px; }
  button.chip { padding: 8px 14px; font-size: .85rem; }
  /* صندوق الاختيار لا يُمطَّط بالعرض داخل صفّ مرن: يبقى مربّعاً ويكبر وحده.
     ومساحة اللمس يحملها السطر المحيط لا الصندوق: هو داخل <label>، فالنصّ
     كلّه يبدّله — وتكبير المربّع إلى ٤٤ يجعله يبدو صندوقاً لا علامة. */
  input[type="checkbox"], input[type="radio"] {
    flex: 0 0 auto; width: 26px; height: 26px; min-height: 0; min-width: 0;
  }
  label.row { min-height: 44px; align-items: center; }
  /* مساحة اللمس تكبر والصورة لا: صفّ الجدول يبقى قابلاً للمسح بالنظر */
  td button.chip { padding: 8px 12px; }
}

/* المحاذاة من الأعلى لا من الأسفل: الحقل الذي يحمل تلميحاً أطول من جاره،
   ومحاذاةُ الأسفل كانت تحاذي التلميح بالحقل فتُزيح حقله إلى فوق — فتبدو
   العناوين والمدخلات في الصفّ الواحد غير مستوية. والعناوين سطرٌ واحد، فمحاذاة
   الأعلى تُسوّيها وتُسوّي المدخلات تحتها، ويتدلّى التلميح وحده. */
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: start; }
.row > .field { flex: 1 1 150px; }
/* الصفّ الذي هو <label> صندوقُ اختيارٍ ونصّه: يُتوسَّط لا يُحاذى، فالعلامة
   في وسط سطرها. ومن أراد نصّاً متعدّد السطور حاذاه من الأعلى بنفسه. */
label.row { align-items: center; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- الدخول -------------------------------------------------------------- */

.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login form {
  width: min(380px, 100%); display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.login .brand { display: grid; gap: 4px; justify-items: center; margin-bottom: 4px; }
.login .brand .mark {
  width: 48px; height: 48px; border-radius: 14px; background: var(--brand);
  color: var(--ink-on-brand); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700;
}
.login .brand p { color: var(--ink-3); font-size: .85rem; }

/* --- متفرقات ------------------------------------------------------------- */

/* ملف العميلة نافذة طويلة المحتوى: تُقيَّد بارتفاع الشاشة وتُمرَّر داخلياً،
   وإلا امتدّت خلف حافّة الشاشة ولم يُوصل إلى زرّ الإغلاق. */
dialog.profile {
  width: min(680px, 94vw); max-height: 88dvh; overflow-y: auto;
  text-align: start;
}
dialog.profile h3 { margin-top: 4px; }

.muted { color: var(--ink-3); font-size: .85rem; }
.money { font-family: var(--num); }
.error { color: var(--bad-text); font-size: .85rem; }
.toast-stack { position: fixed; inset-block-end: 16px; inset-inline: 16px; display: grid; gap: 8px; z-index: 60; justify-items: center; }
.toast {
  background: var(--ink); color: var(--plane); padding: 10px 16px;
  border-radius: var(--pill); box-shadow: var(--shadow); font-size: .88rem;
  max-width: min(520px, 100%);
}
.toast.bad { background: var(--bad); color: #fff; }
.toast.good { background: var(--good); color: #fff; }

@media (max-width: 560px) {
  .task { grid-template-columns: 1fr; }
  .task .actions { justify-items: stretch; }
  .task .actions select { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .bar > i { transition: width .4s var(--ease); }
}