/* ============================================================
   الهوية البصرية — الأساس
   ألوان الهوية مستمدة من ترويسة وزارة التعليم الرسمية
   انسخ هذا الملف إلى public/assets/ ثم ابنِ المكوّنات فوقه
   ============================================================ */
@import url('fonts/fonts.css');

:root {
  /* تدرّج الوزارة */
  --g1: #3f9d6d;                 /* أخضر الوزارة */
  --g2: #2e7fb8;                 /* أزرق الوزارة */
  --gm: #33929a;                 /* منتصف التدرّج */
  --deep: #033b45;               /* الأزرق الداكن — الشريط العلوي ولوح العنوان */
  --grad:   linear-gradient(105deg, var(--g2) 0%, var(--gm) 52%, var(--g1) 100%);
  --grad-r: linear-gradient(285deg, var(--g2) 0%, var(--gm) 52%, var(--g1) 100%);

  /* الحبر والأسطح */
  --ink:   #0d2233;
  --ink-2: #3d5568;
  --ink-3: #7e91a3;
  --line:  #e4ebf2;
  --line-2:#d2dfe9;
  --bg:    #eef4f9;
  --card:  #ffffff;
  --tint:  #f6fafc;

  /* الحالات */
  --ok:  #17825c;  --ok-bg:  #e6f6ee;
  --warn:#a06a12;  --warn-bg:#fdf2df;
  --dan: #b23b3b;  --dan-bg: #fdecec;
  --info:#2e7fb8;  --info-bg:#eaf3fa;
  --gold:#b8893a;                /* لمسة تأكيد — أختام وشهادات، لا أسطح */

  /* الشكل */
  --r: 16px; --r-s: 11px; --r-l: 26px;
  --sh-1: 0 1px 2px rgba(13,34,51,.05), 0 4px 14px rgba(13,34,51,.05);
  --sh-2: 0 2px 6px rgba(13,34,51,.07), 0 14px 38px rgba(13,34,51,.10);
  --sh-3: 0 30px 70px rgba(13,34,51,.20);

  /* الخطوط — ثلاثة أدوار */
  --ui:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;  /* الواجهة */
  --disp:  'Aref Ruqaa', 'Amiri', serif;                            /* العناوين */
  --serif: 'Amiri', 'Traditional Arabic', serif;                    /* متن الوثائق */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; direction: rtl; background: var(--bg); color: var(--ink);
  font-family: var(--ui); font-size: 15px; line-height: 1.8;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--g2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
svg.ic { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3.5px; }
::selection { background: #cfe8f7; }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c6d5e1; border-radius: 20px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #a6bbcc; }

h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; }
.disp { font-family: var(--disp); font-weight: 700; }

/* الأرقام في سياق عربي: تثبيت الاتجاه ومحاذاة الأعمدة.
   بدون هذا يعيد المتصفح ترتيب أرقام الهوية والجوال بصرياً. */
.mono { font-variant-numeric: tabular-nums; letter-spacing: .3px; direction: ltr;
        unicode-bidi: embed; display: inline-block; }

.muted { color: var(--ink-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.sp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.wrap   { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
.wrap-s { max-width: 900px;  margin: 0 auto; padding: 0 18px; }

/* شبكة الحقول — ١٢ عموداً تنهار إلى عمود واحد على الجوال */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px 16px; }
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
@media (max-width: 860px) { .grid > * { grid-column: span 12 !important; } }

/* ============================================================
   الطباعة — القاعدة الحاكمة
   المتصفح يُسقط ألوان وصور الخلفية عند الطباعة افتراضياً،
   فكل عنصر ملوّن يجب أن يظهر مطبوعاً يحتاج print-color-adjust صراحةً.
   ============================================================ */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 10mm 9mm 9mm; }
  html, body { background: #fff !important; font-size: 11.4px; }
  .no-print, .topbar, .tabs, .btn, .modal { display: none !important; }
  .print-only { display: block; }
  .card { box-shadow: none !important; border-color: #cbd6df !important; break-inside: avoid; }
  a[href]::after { content: ''; }
  .break { break-before: page; }
  .avoid { break-inside: avoid; }
}