/* ════════════════════════════════════════════════════════════════
   نظام «إنجاز» — نظام التصميم
   القاعدة الحاكمة: لا لون ولا تباعد ولا ظل يُكتب خارج هذا الملف.
   أي قيمة تتكرر مرتين تصير رمزًا (variable) هنا.
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── الأسطح: من الأعمق إلى الأعلى ─────────────────────────── */
  --canvas:        #080d13;   /* خلفية الصفحة */
  --surface:       #0f1720;   /* البطاقات */
  --surface-2:     #16212d;   /* المرتفع: نوافذ، رؤوس جداول */
  --surface-3:     #1e2c3a;   /* التمرير والتحديد */
  --border:        #24343f;
  --border-strong: #35495a;

  /* ── النص ─────────────────────────────────────────────────── */
  --ink:        #eaf1f8;
  --ink-soft:   #b3c4d4;
  --ink-muted:  #7d92a6;
  --ink-faint:  #55697c;

  /* ── الهوية: تركوازي مستمدّ من هوية الشهادات الرسمية ──────── */
  --brand-50:  #e6fbf7;
  --brand-200: #7fe3d3;
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  --brand-600: #0f9d8f;
  --brand-700: #0f7a6b;   /* لون الشهادة الرسمي */
  --brand-900: #0a4b43;

  /* ── الذهبي: لون الإنجاز والشارات والشهادة ────────────────── */
  --gold-200: #f0dfae;
  --gold-400: #dcbc63;
  --gold-500: #d4a53a;
  --gold-600: #b8862a;
  --gold-ink: #3d2c07;

  /* ── دلالات ───────────────────────────────────────────────── */
  --ok:      #22c55e;  --ok-bg:      #0d2b1a;
  --warn:    #f59e0b;  --warn-bg:    #2e2008;
  --danger:  #ef4444;  --danger-bg:  #2f1212;
  --info:    #38bdf8;  --info-bg:    #08222e;

  /* ── حالات الحضور الأربع — لون واحد لكل حالة في كل النظام ─── */
  --att-present: #22c55e;
  --att-absent:  #ef4444;
  --att-late:    #f59e0b;
  --att-excused: #7d92a6;

  /* ── مستويات الشهادات ─────────────────────────────────────── */
  --tier-gold:   #d4a53a;
  --tier-silver: #b6c2cd;
  --tier-bronze: #c07f4a;

  /* ── الشكل ────────────────────────────────────────────────── */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* ── الظلال: الحافة المضيئة هي البطل، لا الظل الأسود ─────── */
  --sh-1: 0 1px 0 rgba(255,255,255,.045) inset, 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px -6px rgba(0,0,0,.7);
  --sh-3: 0 1px 0 rgba(255,255,255,.07) inset, 0 18px 44px -14px rgba(0,0,0,.85);
  --sh-brand: 0 8px 24px -10px rgba(20,184,166,.55);
  --sh-gold:  0 8px 24px -10px rgba(212,165,58,.5);

  /* ── التباعد ──────────────────────────────────────────────── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ── الخط ─────────────────────────────────────────────────── */
  --font: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 13px; --fs-sm: 15px; --fs-md: 17px;
  --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 44px;

  /* ── الحركة ───────────────────────────────────────────────── */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 120ms; --t-mid: 220ms;

  /* ── المقاسات ─────────────────────────────────────────────── */
  --sidebar-w: 264px;
  --tap: 44px;             /* أصغر هدف لمس مقبول */
}

/* ════════════════════════════════════════════════════════════════
   الأساس
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.75;
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* توهّج خفيف جدًا يمنع الخلفية المسطّحة الميتة */
  background-image:
    radial-gradient(1100px 620px at 88% -12%, rgba(20,184,166,.11), transparent 62%),
    radial-gradient(900px 520px at 6% 104%, rgba(212,165,58,.07), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ⚠ الوزن لا يتجاوز 900 — الخط محمّل حتى 900، وما فوقه يصطنعه
   المتصفح فيلطّخ أطراف الحروف العربية */
h1,h2,h3,h4 { margin: 0; font-weight: 800; line-height: 1.35; letter-spacing: -.2px; }
h1 { font-size: var(--fs-2xl); font-weight: 900; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s3); }

a { color: var(--brand-400); text-decoration: none; }
a:hover { color: var(--brand-200); }

::selection { background: var(--brand-700); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* شريط التمرير */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* ════════════════════════════════════════════════════════════════
   النصوص المساعدة
   ════════════════════════════════════════════════════════════════ */
.muted   { color: var(--ink-muted); }
.soft    { color: var(--ink-soft); }
.faint   { color: var(--ink-faint); }
.tiny    { font-size: var(--fs-xs); }
.small   { font-size: var(--fs-sm); }
.big     { font-size: var(--fs-lg); }
.bold    { font-weight: 800; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }

/* الأرقام دائمًا إنجليزية ومصطفّة عموديًا في الجداول */
.num { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }

/* التدرّج على العناوين — القاعدة: أبقِ الطرفين واضحين على الداكن */
.grad-brand {
  background: linear-gradient(100deg, var(--brand-200), var(--brand-500) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-gold {
  background: linear-gradient(100deg, var(--gold-200), var(--gold-500) 72%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ════════════════════════════════════════════════════════════════
   التخطيط
   ════════════════════════════════════════════════════════════════ */
.stack   { display: flex; flex-direction: column; gap: var(--s4); }
.row     { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between;
           gap: var(--s3); flex-wrap: wrap; }
.spacer  { flex: 1 1 auto; }

/* الشبكة تحسب أعمدتها من عرض الشاشة لا من عدد العناصر —
   تعمل بفصلين وبعشرين بلا تعديل سطر واحد */
.grid { display: grid; gap: var(--s4);
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.grid-lg { --min: 320px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr)); }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding: var(--s5); }

@media (max-width: 700px) {
  .wrap { padding: var(--s4) var(--s3); }
  :root { --fs-2xl: 28px; --fs-3xl: 34px; }
}