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

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

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

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

  /* الأسطح والنص */
  --paper:#FBFAF7;              /* خلفية الصفحة — دافئة، ليست بيضاء نقية أبداً */
  --surface:#FFFFFF;            /* البطاقات واللوحات — تباين خفيف فوق الورقي */
  --surface-2:#F4F2ED;          /* الصفوف البديلة، رؤوس الجداول، الحقول المعطّلة */
  --ink:#15181B;                /* النص الأساسي */
  --muted:rgba(21,24,27,0.62);  /* نص ثانوي */
  --faint:rgba(21,24,27,0.45);  /* بيانات وصفية، تواريخ، عدّادات */
  --line:rgba(21,24,27,0.12);   /* حدود وفواصل */
  --line-strong:rgba(21,24,27,0.22);

  /* لوحة العلامة — منقولة كما هي من الهوية المعتمدة */
  --green:#2F8F5E;
  --green-dark:#227449;         /* حالة الضغط والتمرير */
  --green-soft:#E4F1EA;
  --green-ink:#1C6344;          /* نص مقروء فوق green-soft */

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

  --coral:#F0603E;
  --coral-soft:#FDE8E2;
  --coral-ink:#A8341A;

  --violet:#6C5CE7;
  --violet-soft:#ECE9FC;
  --violet-ink:#4A3BC4;

  /* الظلال والتحديد */
  --shadow-card:0 20px 40px -20px rgba(21,24,27,0.18);
  --shadow-pop:0 12px 28px -8px rgba(21,24,27,0.22);
  --ring:0 0 0 3px rgba(47,143,94,0.32);
}

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

  --paper:#15181B;              /* حبر الهوية نفسه — لا أسود نقي */
  --surface:#1D2126;
  --surface-2:#252A2F;
  --ink:#F0EEE9;                /* دافئ لا أبيض ناصع — يمنع وهج القراءة الطويلة */
  --muted:rgba(240,238,233,0.62);
  --faint:rgba(240,238,233,0.42);
  --line:rgba(240,238,233,0.13);
  --line-strong:rgba(240,238,233,0.24);

  --green:#45B87C;
  --green-dark:#6ACF98;         /* في الظلام يُضيء عند التمرير لا يُعتم */
  --green-soft:rgba(69,184,124,0.15);
  --green-ink:#7FD3A5;

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

  --coral:#FF7A5C;
  --coral-soft:rgba(255,122,92,0.15);
  --coral-ink:#FF9E86;

  --violet:#8F82F0;
  --violet-soft:rgba(143,130,240,0.16);
  --violet-ink:#AFA5F5;

  --shadow-card:0 20px 40px -20px rgba(0,0,0,0.65);
  --shadow-pop:0 12px 28px -8px rgba(0,0,0,0.7);
  --ring:0 0 0 3px rgba(69,184,124,0.38);
}

/* يتبع تفضيل النظام ما لم يختر المستخدم صراحةً */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#15181B; --surface:#1D2126; --surface-2:#252A2F;
    --ink:#F0EEE9; --muted:rgba(240,238,233,0.62); --faint:rgba(240,238,233,0.42);
    --line:rgba(240,238,233,0.13); --line-strong:rgba(240,238,233,0.24);
    --green:#45B87C; --green-dark:#6ACF98;
    --green-soft:rgba(69,184,124,0.15); --green-ink:#7FD3A5;
    --amber:#F2B24B; --amber-soft:rgba(242,178,75,0.15); --amber-ink:#F6C878;
    --coral:#FF7A5C; --coral-soft:rgba(255,122,92,0.15); --coral-ink:#FF9E86;
    --violet:#8F82F0; --violet-soft:rgba(143,130,240,0.16); --violet-ink:#AFA5F5;
    --shadow-card:0 20px 40px -20px rgba(0,0,0,0.65);
    --shadow-pop:0 12px 28px -8px rgba(0,0,0,0.7);
    --ring:0 0 0 3px rgba(69,184,124,0.38);
  }
}

/* -----------------------------------------------------------------------------
   3 — نظام الحالة  ·  اللون كوظيفة
   -----------------------------------------------------------------------------
   هذه الأسماء — لا أسماء الألوان — هي ما يُكتب في كود النظام.
   استخدام var(--coral) مباشرةً في مكوّن حالة خطأ: استخدم var(--st-late).
   الفائدة: تغيير معنى «متأخر» لاحقاً يتم من سطر واحد هنا.
   -------------------------------------------------------------------------- */
:root{
  /* سليم · ضمن النافذة · منجَز · مسدَّد */
  --st-ok:var(--green);
  --st-ok-soft:var(--green-soft);
  --st-ok-ink:var(--green-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{
  --font-display:'Noto Kufi Arabic','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-body:'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;
}

/* --- الأزرار --- */
.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;}
}