/* =============================================================================
   7 BRAND — العلامة السابعة  ·  طبقة الرموز التصميمية (Design Tokens)
   -----------------------------------------------------------------------------
   امتداد مباشر لهوية pk/makers: نفس البنية والنِّسب ونفس منطق الطبقات الثلاث،
   مع ثلاثة تعديلات يفرضها كون هذا نظام تشغيل داخلي لا موقعاً تسويقياً:

     1. أبجدية عربية أصيلة — لا خط لاتيني يُستبدل خلف الكواليس.
     2. وضعا ليل ونهار — مرحلة التشغيل تعمل ميدانياً مساءً.
     3. اللون وظيفة لا زينة — الأخضر لم يعد يهيمن على 35٪ من الشاشة،
        بل صار يعني «سليم». والألوان الأربعة أُسنِدت لمعانٍ ثابتة.

   يُستورد قبل أي ملف ستايل آخر.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1 — الوضع النهاري (الافتراضي)
   -------------------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* ---- ألوان الهوية الخام · الفصلان 43 و44 ----
     لا يُستعمل أيٌّ منها مباشرةً في مكوّن: كلها تمرّ بالأدوار أدناه. */
  --graphite:#0E0F10;           /* الحبر المهيمن — 55٪ من الشاشة */
  --bone:#F2EFE9;               /* سطح القراءة — 25٪ */
  --plane:#7B8CFF;              /* أزرق الطائرة — نبرة الهوية، 12٪ */
  --signal:#1B34F5;             /* الأزرق الإشاري — الفعل وحده، ≤5٪ */
  --signal-deep:#1226B8;        /* ضغط الأزرار والتمرير */
  --live:#FF5A1F;               /* البرتقالي — الحالة الحيّة والخطأ فقط، ≤3٪ */

  /* الأسطح والنص */
  --paper:#F2EFE9;              /* العظم الرسمي — سطح القراءة */
  --surface:#FFFFFF;            /* البطاقات واللوحات فوق العظم */
  --surface-2:#E7E3DA;          /* الصفوف البديلة ورؤوس الجداول — عظم داكن */
  --ink:#0E0F10;                /* الجرافيت — النص الأساسي */
  --muted:#4A4A46;              /* نص ثانوي — رمادي الهوية */
  --faint:#6B6B66;              /* بيانات وصفية وتسميات أحادية المسافة */
  --line:#C9C4BA;               /* حدود وفواصل — خط العظم */
  --line-strong:#A9A49A;

  /* لوحة الأدوار — الفعل أزرق إشاري كما تنصّ الهوية.
     الاسم القديم --green باقٍ لأن ستين شاشة تستدعيه؛ قيمته هي التي تغيّرت. */
  --green:#1B34F5;
  --green-dark:#1226B8;
  --green-soft:#E4E7FE;
  --green-ink:#1226B8;

  --amber:#F0A93A;
  --amber-soft:#FBF0DE;
  --amber-ink:#8A5A08;

  --coral:#FF5A1F;              /* برتقالي الهوية — الخطأ والمتأخر */
  --coral-soft:#FDE7DC;
  --coral-ink:#B03A0E;

  --violet:#7B8CFF;             /* أزرق الطائرة — البوابات والأحداث التحوّلية */
  --violet-soft:#E9EBFF;
  --violet-ink:#3B47B8;

  /* «سليم» تحتفظ بخضرتها: نظام تشغيل بلا لون نجاح يفقد إشارته،
     والهوية تحكم الأسطح والفعل لا لوحة الإشارات الوظيفية. */
  --ok:#1E7A55;
  --ok-soft:#E2F0EA;
  --ok-ink:#155C3F;

  /* الظلال والتحديد */
  --shadow-card:0 20px 40px -20px rgba(14,15,16,0.18);
  --shadow-pop:0 12px 28px -8px rgba(14,15,16,0.22);
  --ring:0 0 0 3px rgba(27,52,245,0.30);
}

/* -----------------------------------------------------------------------------
   2 — الوضع الليلي
   الحبر يصبح الخلفية، والورقي يصبح النص. الألوان تُرفَع إضاءةً لأن
   الدرجات النهارية تسقط تحت حدّ التباين المقروء فوق سطح داكن.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  color-scheme: dark;

  --graphite:#0E0F10; --bone:#F2EFE9; --plane:#7B8CFF;
  --signal:#3D51F7; --signal-deep:#7B8CFF; --live:#FF7A45;

  --paper:#0E0F10;              /* الجرافيت الرسمي — أرض الوضع الليلي */
  --surface:#17191B;
  --surface-2:#202325;
  --ink:#F2EFE9;                /* العظم — النص فوق الجرافيت */
  --muted:rgba(242,239,233,0.66);
  --faint:rgba(242,239,233,0.46);
  --line:rgba(242,239,233,0.14);
  --line-strong:rgba(242,239,233,0.26);

  /* في الظلام يقود أزرق الطائرة: الإشاري يغمق تحت العظم فيفقد تباينه */
  --green:#7B8CFF;
  --green-dark:#A3AEFF;
  --green-soft:rgba(123,140,255,0.16);
  --green-ink:#A3AEFF;

  --amber:#F2B24B;
  --amber-soft:rgba(242,178,75,0.15);
  --amber-ink:#F6C878;

  --coral:#FF7A45;
  --coral-soft:rgba(255,122,69,0.16);
  --coral-ink:#FF9E73;

  --violet:#A3AEFF;
  --violet-soft:rgba(163,174,255,0.16);
  --violet-ink:#C2C9FF;

  --ok:#45B87C;
  --ok-soft:rgba(69,184,124,0.15);
  --ok-ink:#7FD3A5;

  --shadow-card:0 20px 40px -20px rgba(0,0,0,0.7);
  --shadow-pop:0 12px 28px -8px rgba(0,0,0,0.75);
  --ring:0 0 0 3px rgba(123,140,255,0.38);
}

/* يتبع تفضيل النظام ما لم يختر المستخدم صراحةً */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --graphite:#0E0F10; --bone:#F2EFE9; --plane:#7B8CFF;
    --signal:#3D51F7; --signal-deep:#7B8CFF; --live:#FF7A45;
    --paper:#0E0F10; --surface:#17191B; --surface-2:#202325;
    --ink:#F2EFE9; --muted:rgba(242,239,233,0.66); --faint:rgba(242,239,233,0.46);
    --line:rgba(242,239,233,0.14); --line-strong:rgba(242,239,233,0.26);
    --green:#7B8CFF; --green-dark:#A3AEFF;
    --green-soft:rgba(123,140,255,0.16); --green-ink:#A3AEFF;
    --amber:#F2B24B; --amber-soft:rgba(242,178,75,0.15); --amber-ink:#F6C878;
    --coral:#FF7A45; --coral-soft:rgba(255,122,69,0.16); --coral-ink:#FF9E73;
    --violet:#A3AEFF; --violet-soft:rgba(163,174,255,0.16); --violet-ink:#C2C9FF;
    --ok:#45B87C; --ok-soft:rgba(69,184,124,0.15); --ok-ink:#7FD3A5;
    --shadow-card:0 20px 40px -20px rgba(0,0,0,0.7);
    --shadow-pop:0 12px 28px -8px rgba(0,0,0,0.75);
    --ring:0 0 0 3px rgba(123,140,255,0.38);
  }
}

/* -----------------------------------------------------------------------------
   3 — نظام الحالة  ·  اللون كوظيفة
   -----------------------------------------------------------------------------
   هذه الأسماء — لا أسماء الألوان — هي ما يُكتب في كود النظام.
   استخدام var(--coral) مباشرةً في مكوّن حالة خطأ: استخدم var(--st-late).
   الفائدة: تغيير معنى «متأخر» لاحقاً يتم من سطر واحد هنا.
   -------------------------------------------------------------------------- */
:root{
  /* سليم · ضمن النافذة · منجَز · مسدَّد */
  --st-ok:var(--ok);
  --st-ok-soft:var(--ok-soft);
  --st-ok-ink:var(--ok-ink);

  /* تحذير · 75٪ من مدة المرحلة · محطة مراجعة تقترب · سداد جزئي */
  --st-warn:var(--amber);
  --st-warn-soft:var(--amber-soft);
  --st-warn-ink:var(--amber-ink);

  /* خطر · out_of_window · متأخر · بلاغ عالي الخطورة */
  --st-late:var(--coral);
  --st-late-soft:var(--coral-soft);
  --st-late-ink:var(--coral-ink);

  /* بوابة انتقال بين المراحل · اعتماد مطلوب · حدث تحوّلي */
  --st-gate:var(--violet);
  --st-gate-soft:var(--violet-soft);
  --st-gate-ink:var(--violet-ink);

  /* محايد · مسوّدة · مؤرشف */
  --st-idle:var(--faint);
  --st-idle-soft:var(--surface-2);
  --st-idle-ink:var(--muted);
}

/* -----------------------------------------------------------------------------
   4 — الطباعة  ·  ثلاث طبقات عربية
   -------------------------------------------------------------------------- */
:root{
  /* طبقات الهوية: TheMixArab للعرض العربي (غير متاح على الويب — يسقط إلى
     IBM Plex Sans Arabic كما تفعل ملفات الهوية نفسها)، Manrope للاتيني،
     IBM Plex Mono للأرقام والتسميات الفوقية. */
  --font-display:'TheMixArab','IBM Plex Sans Arabic','Manrope',system-ui,sans-serif;
  --font-body:'IBM Plex Sans Arabic','Manrope',system-ui,sans-serif;
  --font-latin:'Manrope','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-num:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace;

  /* سُلَّم الأحجام — أضيق من سُلَّم الموقع التسويقي:
     شاشة إدارية تُقرأ عن قرب ولا تحتاج عناوين ضخمة. */
  --fs-display:30px;
  --fs-h1:24px;
  --fs-h2:19px;
  --fs-h3:16px;
  --fs-body:14.5px;
  --fs-sm:13px;
  --fs-xs:11.5px;
  --fs-num:12.5px;

  /* العربية لا تُباعَد حروفها إطلاقاً، وتحتاج تؤدة أوسع من اللاتينية
     لطول الصواعد والنوازل — والتؤدة تضيق كلما كبر الحجم. */
  --lh-display:1.28;
  --lh-heading:1.42;
  --lh-body:1.75;
  --lh-dense:1.5;   /* داخل الجداول والبطاقات المضغوطة */
}

/* -----------------------------------------------------------------------------
   5 — المسافات والاستدارة والكثافة
   -------------------------------------------------------------------------- */
:root{
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --r-xs:6px;
  --r-sm:9px;     /* أزرار، حقول إدخال */
  --r-md:12px;    /* بطاقات */
  --r-lg:20px;    /* لوحات كبرى */
  --r-chip:16px;  /* رقاقة الشعار — قيمة مثبَّتة، لا تُغيَّر */
  --r-pill:999px;

  /* الكثافة المريحة — لوحات المعلومات والنماذج */
  --row-h:44px;
  --cell-py:11px;
  --cell-px:14px;
  --fs-table:14px;
}

/* الكثافة المضغوطة — شاشات فيها مئات الصفوف: المهام، الحضور، البلاغات.
   تُفعَّل بـ data-density="compact" على الحاوية لا على الصفحة كلها. */
[data-density="compact"]{
  --row-h:34px;
  --cell-py:6px;
  --cell-px:10px;
  --fs-table:13px;
  --lh-body:1.55;
}

/* =============================================================================
   6 — الأساسيات (Primitives)
   الحد الأدنى الذي يبني عليه النظام. أي مكوّن جديد يمتدّ من هذه لا يخترعها.
   ============================================================================= */

*{box-sizing:border-box;}

html{
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0;            /* العربية لا تُباعَد — أبداً */
  margin:0;
  line-height:var(--lh-heading);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}

a{color:inherit;}
img,svg{max-width:100%;}

/* الأرقام — لاتينية دائماً، في كل مكان بلا استثناء: البيانات والنص الجاري
   والتسميات والتواريخ والنسب. الأرقام العربية-الهندية تكسر الاصطفاف العمودي
   في الجداول وتمنع المقارنة السريعة بين الصفوف.
   وهنا تُقفَل على LTR حتى لا تنعكس داخل جملة عربية، وتُطلب صيغتها الجدولية
   حتى يتساوى عرض كل رقم فتصطفّ الأعمدة. */
.num,.mono{
  font-family:var(--font-num);
  font-size:var(--fs-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

/* تسمية فوقية — بديل الـ eyebrow اللاتيني المكتوب بحروف كبيرة.
   العربية لا تملك حروفاً كبيرة، فالتمييز يأتي من الوزن واللون لا من الحالة. */
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-xs);
  color:var(--green-dark);
  letter-spacing:0;
}

/* تسمية فوقية لاتينية — أحادية المسافة ومتباعدة كما في الهوية.
   للرموز والأكواد لا للنص العربي: العربية لا تُباعَد حروفها. */
.kicker{
  font-family:var(--font-num);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--faint);
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

/* --- الأزرار --- */
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-sm);
  padding:10px 18px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  transition:background .15s,border-color .15s,color .15s;
}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}

.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
:root[data-theme="dark"] .btn-primary{color:#0F1214;}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-outline:hover{background:var(--surface-2);}

.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}

.btn-danger{background:transparent;color:var(--st-late);border-color:var(--st-late);}
.btn-danger:hover{background:var(--st-late-soft);}

/* --- البطاقات واللوحات --- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-5);
}
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

/* --- شارات الحالة ---
   الاستخدام:  <span class="badge is-late">خارج النافذة</span>            */
.badge{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-xs);
  padding:4px 10px;
  border-radius:var(--r-pill);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  background:var(--st-idle-soft);
  color:var(--st-idle-ink);
}
.badge::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  flex:none;
}
.badge.is-ok  {background:var(--st-ok-soft);   color:var(--st-ok-ink);}
.badge.is-warn{background:var(--st-warn-soft); color:var(--st-warn-ink);}
.badge.is-late{background:var(--st-late-soft); color:var(--st-late-ink);}
.badge.is-gate{background:var(--st-gate-soft); color:var(--st-gate-ink);}

/* --- الجداول --- */
.table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-table);
  line-height:var(--lh-dense);
}
.table th{
  text-align:start;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-xs);
  color:var(--muted);
  background:var(--surface-2);
  padding:var(--cell-py) var(--cell-px);
  border-block-end:1px solid var(--line);
  white-space:nowrap;
}
.table td{
  padding:var(--cell-py) var(--cell-px);
  border-block-end:1px solid var(--line);
  height:var(--row-h);
  vertical-align:middle;
}
.table tbody tr:hover{background:var(--surface-2);}

/* --- شريط النافذة الزمنية ---
   يقارن نسبة الإنجاز بنسبة الوقت المستهلك. الفجوة هي الرسالة:
   إن تخلّف الإنجاز عن الزمن بأكثر من 15 نقطة → المرحلة «في خطر». */
.window-bar{
  position:relative;
  height:8px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  overflow:hidden;
}
.window-bar > i{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  border-radius:var(--r-pill);
  background:var(--st-ok);
  display:block;
}
.window-bar.is-warn > i{background:var(--st-warn);}
.window-bar.is-late > i{background:var(--st-late);}
/* علامة الزمن المستهلك — الخط الذي يجب ألا يسبق الإنجاز */
.window-bar > b{
  position:absolute;
  inset-block:-3px;
  width:2px;
  background:var(--ink);
  opacity:.55;
  display:block;
}

/* --- حقول الإدخال --- */
.field{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:10px 12px;
  width:100%;
}
.field:focus{outline:none;border-color:var(--green);box-shadow:var(--ring);}
.field:disabled{background:var(--surface-2);color:var(--faint);}

/* --- الشعار --- */
.logomark{width:36px;height:36px;border-radius:var(--r-chip);flex:none;display:block;}
.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  letter-spacing:0;
}
.wordmark b{font-weight:700;color:var(--green-dark);}

/* من فعّل تقليل الحركة لا يرى حركة */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}