/* ══════════════════════════════════════════════════════════════════
   ڤيما — طبقة التوكنات
   ══════════════════════════════════════════════════════════════════

   مستخرجة من موقع المنصة (‎site/src/app/globals.css‎) لتصير المنتجات
   عائلةً واحدة لا تطبيقاتٍ متفرّقة. كانت الألوان وحدها قد عبرت من
   الموقع، وتُرك خلفها كلُّ ما يجعل مجموعة الألوان نظامًا: السلالم،
   والمسافات، والطباعة، والظلال، ونقاط الكسر.

   قاعدة استخدام اللون — تُحترم في كل مكوّن:
     الأزرق  : العلامة والأفعال الأساسية
     البنفسجي: شريك التدرّج والإبراز
     السماوي : التوهّج والحالات التفاعلية
     الأخضر  : التوفّر والنجاح فقط
   الإفراط في أيٍّ منها يحوّل Premium SaaS إلى Neon Overload.

   هذه الطبقة **لا تغيّر شكل شيء**: كل توكن قيمتُه مطابقة تمامًا لما
   كان مكتوبًا حرفيًا قبله. القيم الشاذّة التي لا تنتمي إلى سلّم بقيت
   كما هي عمدًا، وتُهاجَر مع الشاشة التي تسكنها لا قبلها.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── الأرضيات: Deep Midnight ── */
  --void: #050816;
  --abyss: #080d1c;
  --deep: #0a1020;
  --surface: #0d1426;
  --line: #16203c;
  --line-2: #24304f;

  /* ── سلّم الحبر — مقلوب عمدًا: ٠ أرضية الصفحة، ٩٥٠ أعلى تباين ──
     قلبُ السلّم في طبقة التوكنات وحدها هو ما جعل الموقع يتحوّل إلى
     الوضع الداكن دون لمس مئات الأصناف في المكوّنات. */
  --ink-0:   #050816;
  --ink-50:  #080d1c;
  --ink-100: #0d1426;
  --ink-200: #16203c;
  --ink-300: #24304f;
  --ink-400: #6e7ca0;   /* مضبوط على 4.8:1 فوق الأرضية */
  --ink-500: #8a97b8;
  --ink-600: #a8b4d0;
  --ink-700: #c2cce4;
  --ink-800: #d8e0f0;
  --ink-900: #e8eefa;
  --ink-950: #f5f8ff;

  /* الأسماء القصيرة تبقى: ٩٠ صنفًا تستعملها، وإزالتها تغيير بلا عائد */
  --ink:   var(--ink-950);
  --ink-2: var(--ink-600);
  --ink-3: var(--ink-400);

  /* ── الأزرق: العلامة والأفعال ── */
  --brand-900: #172554;
  --brand-800: #1e3a8a;
  --brand-700: #1e40af;
  --brand-600: #1d4ed8;
  --brand-500: #2563eb;
  --brand-400: #60a5fa;
  --brand-300: #93c5fd;
  --brand: var(--brand-500);

  /* ── البنفسجي: الإبراز وشريك التدرّج ── */
  --violet-800: #4c1d95;
  --violet-700: #5b21b6;
  --violet-600: #6d28d9;
  --violet-500: #7c3aed;
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --violet: var(--violet-500);

  /* ── السماوي: التفاعل ── */
  --cyan-600: #0891b2;
  --cyan-500: #22d3ee;
  --cyan-400: #67e8f9;
  --cyan: var(--cyan-500);

  /* ── الأخضر: التوفّر والنجاح فقط ── */
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal: var(--teal-400);

  /* ── دلالية ── */
  --success: #2dd4bf;
  --warning: #fbbf24;
  --danger:  #fb7185;

  --gradient-action: linear-gradient(100deg, #6d28d9 0%, #1d4ed8 52%, #0891b2 100%);

  /* ── لون الإبراز ──
     كان البنفسجي مكتوبًا حرفيًا في عشرة مواضع بصيغة rgba، فكانت كلُّ هويّة
     جديدة تعني تتبّع عشرة أرقام في ملف من ثمانمئة سطر. هذان التوكنان هما
     المقبض الوحيد، وكلُّ درجة مشتقّة منهما بـ color-mix لا بقيمة مكتوبة. */
  --accent: var(--violet-500);
  --accent-soft: var(--violet-400);

  /* أرضية الأسطح كأرقام مفصولة، لتُبنى منها الشفافيات الثلاث أدناه. */
  --surface-rgb: 13, 20, 38;

  /* ── سلّم نصف القطر ── */
  --radius-xs:  .5rem;
  --radius-sm:  .75rem;
  --radius-md:  1rem;
  --radius-lg:  1.3rem;
  --radius-xl:  1.4rem;
  --radius-pill: 999px;
  --radius: var(--radius-md);   /* الاسم القديم — مستعمَل في ١٤ موضعًا */

  /* ── سلّم المسافات ──
     ثلاثون قيمة مختلفة كانت مكتوبة حرفيًا في الملف، وهي ليست سلّمًا بل
     قرارات فردية اتُّخذت لحظةَ كتابة كل سطر. هذا السلّم يغطّي أكثرها
     شيوعًا؛ والقيم الشاذّة (‎11 · 13 · 21 · 26 · 34‎) تبقى حرفية حتى
     تُهاجَر شاشتُها. */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 28px;
  --space-13: 32px;
  --space-14: 40px;
  --space-15: 46px;
  --space-16: 56px;

  /* ── سلّم الطباعة ──
     أحد عشر حجمًا مختلفًا رُصد على صفحة واحدة. السلّم يوحّدها تدريجيًا،
     والعربية تحتاج ارتفاع سطر أعلى من اللاتينية لأن التشكيل يصطدم بما
     فوقه عند القيم المعتادة. */
  --text-2xs: 11.5px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  13.5px;
  --text-base: 14px;
  --text-lg:  15px;
  --text-xl:  17px;
  --text-2xl: 19px;
  --leading-tight: 1.6;
  --leading-body:  1.85;
  --leading-prose: 1.95;

  /* ── سلّم الظلال — عمق أسود حقيقي، والتوهّج الملوّن للأفعال وحدها ── */
  --shadow-hairline: 0 0 0 1px rgba(15,23,42,.06);
  --shadow-card: 0 0 0 1px rgba(15,23,42,.07), 0 20px 48px -22px rgba(0,0,0,.8);
  --shadow-card-hover: 0 0 0 1px color-mix(in srgb, var(--accent-soft) 35%, transparent), 0 24px 56px -22px rgba(0,0,0,.85);
  --shadow-panel: 0 0 0 1px rgba(15,23,42,.08), 0 30px 70px -26px rgba(0,0,0,.9);
  --shadow-action: 0 12px 32px -10px color-mix(in srgb, var(--accent) 50%, transparent);

  /* ── الأسطح ── */
  --surface-raised: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.012)), rgba(var(--surface-rgb), .6);
  --surface-card:   linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.015)), rgba(var(--surface-rgb), .72);
  --surface-lifted: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.015)), rgba(var(--surface-rgb), .85);

  /* ── نقاط الكسر ──
     أربع نقاط متناثرة (‎560 · 760 · 860‎) بلا منطق يجمعها. هذه أسماؤها
     المعتمدة؛ ولأن CSS لا يقبل متغيّرًا داخل ‎@media‎، فهي هنا للتوثيق
     والاتّساق لا للاستبدال الآلي:
       --bp-sm: 560px   الهاتف
       --bp-md: 768px   التابلت
       --bp-lg: 860px   حدّ انهيار الشريط الجانبي */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink-2);
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { color: var(--ink); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem); line-height: 1.45; margin: 0 0 .3em; }
h2 { font-size: 1.1rem; line-height: 1.6; margin: 0 0 .4em; }
p { margin: 0 0 12px; }
a { color: var(--cyan); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

.lead { color: var(--ink-2); max-width: 60ch; }
.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: var(--brand-400); margin: 0 0 .2em;
}

/* ── الهيكل ── */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.side {
  background: var(--abyss);
  border-inline-start: 1px solid var(--line);
  padding: 26px 20px;
  display: flex; flex-direction: column; gap: 26px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.logo { width: 30px; height: 27px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-ar { color: #fff; font-weight: 700; font-size: 15px; }
.brand-en {
  font-size: 9px; font-weight: 600; letter-spacing: .28em;
  color: var(--ink-3); margin-top: 4px;
}

.tenant-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 7px 13px;
  font-size: 12.5px; color: var(--ink);
}
.tenant-dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--teal); flex: none;
  box-shadow: 0 0 0 3px rgba(45,212,191,.16);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: block; padding: 9px 13px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 14px; transition: background .2s, color .2s;
}
.nav-item:hover { background: rgba(15,23,42,.05); color: var(--ink); text-decoration: none; }
.nav-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #fff; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.who { font-size: 12.5px; color: var(--ink-3); }

.main { padding: 46px clamp(20px, 4vw, 56px); max-width: 1100px; }
.page-head { margin-bottom: 34px; }

/* ── بطاقات ── */
.cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 40px;
}
.card {
  background: var(--surface-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 21px;
  transition: box-shadow .3s, transform .3s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.card p { font-size: 13.5px; margin-bottom: 10px; }
.card.muted { opacity: .72; }
.card.muted:hover { transform: none; }

.tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-soft);
  padding: 2px 9px; border-radius: 4px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11.5px; direction: ltr;
  background: rgba(15,23,42,.04); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 9px; color: var(--ink-3);
  font-family: ui-monospace, monospace;
}
.perms h2 { margin-bottom: 12px; }

/* ── نماذج الدخول ── */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 34px 18px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(ellipse 45% 40% at 82% 30%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 66%),
    var(--void);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface-lifted);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
  padding: 34px 30px;
}
.auth-card.wide { max-width: 560px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field > span:first-child { font-size: 13px; color: var(--ink); font-weight: 500; }
.hint { font-size: 11.5px; color: var(--ink-3); }
.field input {
  background: rgba(15,23,42,.04);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 11px 13px; color: var(--ink);
  font-family: inherit; font-size: 14px;
  transition: border-color .2s, background .2s;
}
/* حقل نصّي متعدّد الأسطر — لم تكن له قاعدة واحدة في هذا الملف، فكان
   المتصفّح يرسمه بأبيضه الافتراضي: مستطيل أبيض ساطع وسط صفحة داكنة،
   في محرّر السؤال تحديدًا وهو أكثر شاشة استخدامًا في المنتج. */
.field textarea {
  background: rgba(15,23,42,.04);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 11px 13px; color: var(--ink);
  font-family: inherit; font-size: 14px; line-height: 1.8;
  resize: vertical; min-height: 84px;
  transition: border-color .2s, background .2s;
}
.field textarea::placeholder { color: var(--ink-3); }

/* إطار التركيز: كان ‎outline: none‎ يُلغيه على الحقول والقوائم وحدها —
   أي على العناصر التي يقضي مستخدم لوحة المفاتيح أطول وقته فيها. البديل
   الذي كان موضوعه تحوّلُ لونٍ بسمك بكسل، وهو مؤشّر لا يكفي وحده. */
.field input:focus, .field textarea:focus {
  border-color: var(--violet-400); background: rgba(15,23,42,.06);
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.field input::placeholder { color: var(--ink-3); }

.row { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 18px; }

.btn-primary {
  width: 100%; border: none; cursor: pointer;
  background: var(--gradient-action);
  background-size: 180% 100%; background-position: 100% 0;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 500;
  padding: 12px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-action);
  transition: background-position .5s, transform .3s, box-shadow .3s;
}
.btn-primary:hover { background-position: 0 0; transform: translateY(-1px); }

.btn-ghost {
  background: transparent; border: 1px solid var(--line-2); cursor: pointer;
  color: var(--ink-2); font-family: inherit; font-size: 13px;
  padding: 8px 13px; border-radius: var(--radius-sm); width: 100%;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--violet-400); color: var(--ink); }

.alert {
  background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.35);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px;
}
.alt { font-size: 13px; color: var(--ink-3); margin: 18px 0 0; text-align: center; }
.validation-message { color: var(--danger); font-size: 12px; }

/* سطر تعريفي تحت اسم العلامة — ليس أبيض ناصعًا: الأبيض للاسم وحده،
   وإلا تساوى التابع بالمتبوع وضاعت الأولوية البصرية. */
.brand-tag {
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-2); margin-top: 5px;
}

/* ── خطأ ملتصق بحقله ──
   الصندوق العام أعلى النموذج يترك المستخدم يخمّن أي حقل رُفض. حدث ذلك
   فعلًا: رسالةٌ عن مسافة في المعرّف فُهمت على أنها عن كلمة المرور، لأن
   كلمة المرور هي الحقل الوحيد الذي تحته قواعد مكتوبة. */
.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--danger); font-size: 12px; line-height: 1.7;
  margin-top: 3px;
}
.field-error::before {
  content: "!"; flex: none; margin-top: 3px;
  width: 15px; height: 15px; border-radius: var(--radius-pill);
  background: var(--danger); color: var(--void);
  font-size: 11px; font-weight: 700; line-height: 15px;
  text-align: center;
}

/* الحقل المرفوض يحمل علامته بنفسه، فلا يحتاج المستخدم قراءة الرسالة
   ليعرف أين ينظر. */
.field input.bad, .field select.bad, .field textarea.bad {
  border-color: rgba(251,113,133,.55);
  background: rgba(251,113,133,.05);
}
.field input.bad:focus, .field select.bad:focus { border-color: var(--danger); }

/* ══ الشاشات الضيّقة ══
   العطل الذي عاش في هذا الموضع: الشريط الجانبي يصير صفًّا أفقيًا، و‎.nav‎
   بلا ‎flex-wrap‎. فتصطفّ روابط التنقّل في سطر واحد عرضه الطبيعي ‎607px‎
   وتجرّ المستند كلَّه معها إلى ‎648px‎ على شاشة ‎390px‎. والواجهة من اليمين
   إلى اليسار، فالمتصفّح يفتح الصفحة على الجانب الفارغ: أول ما يراه
   المستخدم على هاتفه مساحةٌ خالية، والمحتوى خارج الإطار.

   ‎min-width: 0‎ ضروري مع ‎flex-wrap‎: عنصر المرن لا ينكمش دون عرض محتواه
   افتراضيًا، فيتجاوز الحاوية حتى بعد السماح بالالتفاف. */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; min-width: 0; }
  .side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; min-width: 0; }
  .side-foot { margin: 0; flex-direction: row; align-items: center; }
  .nav { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .main { max-width: 100%; min-width: 0; }
  /* فاصل الأقسام كان يقطع الصف رأسيًا؛ على العرض يصير فاصلًا كاملًا */
  .nav-sep { flex-basis: 100%; margin: 6px 0 2px; }
}

/* ══════════════════════════════════════════════════════════════════
   شاشات الإدارة: الأعضاء والأدوار
   ══════════════════════════════════════════════════════════════════ */

.panel {
  background: var(--surface-raised);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hairline);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.panel > h2 { margin-bottom: .5em; }
.panel > .hint { margin: 0 0 16px; max-width: 66ch; line-height: 1.85; }

/* رسالة نجاح — الأخضر للتوفّر والنجاح وحدهما، كما في الهوية */
.ok {
  background: rgba(45,212,191,.09);
  border: 1px solid rgba(45,212,191,.3);
  color: #7ee7d5;
  border-radius: var(--radius-sm);
  padding: 12px 15px; font-size: 13.5px; margin-bottom: 16px;
}
.ok strong { color: #b8f5ea; }

/* كلمة المرور المؤقّتة: تُقرأ حرفًا حرفًا، فتحتاج خطًا أحادي العرض */
.secret {
  margin-top: 10px; padding: 11px 14px;
  background: rgba(15,23,42,.035); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 16px; letter-spacing: .1em; color: var(--ink);
  user-select: all;
}

.row-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.row-3 { display: grid; gap: 0 14px; grid-template-columns: 1.1fr 1.3fr .9fr; }
/* أربع قوائم المجال: النوع أضيقها لأنه كلمة واحدة، والثلاثة الباقية
   أسماءٌ كاملة تحتاج مساحة متساوية. */
.row-4 { display: grid; gap: 0 14px; grid-template-columns: .8fr 1fr 1fr 1fr; }
@media (max-width: 760px) {
  .row-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .row-4 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .row-2, .row-3 { grid-template-columns: 1fr; }
}

/* القوائم المنسدلة بنفس هيئة حقول الإدخال — الاختلاف بينها يبدو خللًا */
.field select {
  background: rgba(15,23,42,.04);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 11px 13px; color: var(--ink);
  font-family: inherit; font-size: 14px;
  appearance: none;
  /* سهم حقيقي بدل مربّعين ‎5×5‎ كانا يُقرآن شكلًا غامضًا لا سهمًا.
     صورة SVG مضمّنة: لا طلب شبكة، ويكبر بلا تشوّه. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236e7ca0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left 14px center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-inline-start: 38px;
}
.field select:focus {
  border-color: var(--violet-400);
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
/* الخيارات ترسمها المنصة لا الصفحة — بلا لون صريح تظهر بيضاء على أبيض */
.field select option { background: var(--surface); color: var(--ink); }

/* زر بعرض محتواه: btn-primary أساسًا بعرض كامل لأنه زر نموذج الدخول */
.btn-primary.inline, .btn-ghost.inline { width: auto; padding-inline: 26px; }
.btn-ghost.danger { border-color: rgba(251,113,133,.4); color: var(--danger); }
.btn-ghost.danger:hover { border-color: var(--danger); color: #ffd0d8; }

/* ── الرابط كإجراء ──
   الصنف ‎.link‎ كان مستخدَمًا ٢٣ مرة وغير معرَّف في هذا الملف إطلاقًا، فيرثه
   المتصفّح كرابط عادٍ بارتفاع ‎14–16px‎. وهو «تعديل» و«فتح» و«إدارة» — أي
   الإجراء الرئيسي في كل جدول، وأصغر هدف لمس في المنتج كلّه.
   ‎44px‎ هو الحد المتعارف عليه لهدف اللمس، ويُبلَغ هنا بالحشو لا بالحجم
   حتى لا يتضخّم النص. */
.link {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 5px 10px;
  margin-inline: -10px;              /* الحشو لا يزيح النص عن محاذاته */
  border-radius: var(--radius-sm);
  color: var(--cyan); font-size: 13.5px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.link:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); text-decoration: none; }
.link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* في خلية جدول يكفي هدف أوسع بلا إزاحة تكسر محاذاة العمود */
td .link { min-height: 34px; }

@media (max-width: 860px) {
  /* على اللمس يُرفع إلى الحد الكامل */
  .link { min-height: 44px; padding: 10px 12px; }
}

/* ── التبويبات ──
   تُستعمل لتقسيم قسم واحد إلى شاشات، لا للتنقّل بين أقسام مختلفة: التنقّل
   العام مكانه الشريط الجانبي، والخلط بينهما يجعل المستخدم يفقد موضعه. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.tab {
  padding: 10px 16px; font-size: 13.5px; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--ink); border-bottom-color: var(--violet-400); }

/* ── الجداول ── */
.table-scroll { overflow-x: auto; margin-inline: -6px; padding-inline: 6px; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
table.grid th {
  text-align: start; font-weight: 600; font-size: 12px;
  color: var(--ink-3); letter-spacing: .04em;
  padding: 0 12px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td { padding: 13px 12px; border-bottom: 1px solid rgba(22,32,60,.7); vertical-align: middle; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover td { background: rgba(15,23,42,.022); }
table.grid tr.off td { opacity: .55; }
table.grid td.end { text-align: end; white-space: nowrap; }
table.grid td.dim { color: var(--ink-3); }

.who-name { color: var(--ink); font-weight: 500; }
.who-mail { font-size: 12px; color: var(--ink-3); }

.pill {
  display: inline-block; font-size: 11.5px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(15,23,42,.05); color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.pill.ok { background: rgba(45,212,191,.12); color: #6fe0cd; border-color: rgba(45,212,191,.28); }
.pill.danger { background: rgba(251,113,133,.1); color: var(--danger); border-color: rgba(251,113,133,.3); }

/* شريحة بنص عربي — النسخة الأصلية أحادية العرض ولاتينية الاتجاه */
.chip.fa {
  font-family: inherit; direction: rtl; font-size: 12px; color: var(--ink-2);
}

/* ── مصفوفة الصلاحيات ── */
.perm-group { margin-bottom: 22px; }
.perm-group h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--brand-400); margin: 0 0 10px;
}
.perm-list {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.perm {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  background: rgba(15,23,42,.025);
  border: 1px solid transparent;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.perm:hover { background: rgba(15,23,42,.05); border-color: var(--line-2); }
.perm input { margin-top: 5px; accent-color: var(--violet); flex: none; width: 15px; height: 15px; }
.perm > span { display: flex; flex-direction: column; line-height: 1.5; }
.perm-name { font-size: 13px; color: var(--ink); }
.perm-key { font-size: 10.5px; color: var(--ink-3); font-family: ui-monospace, monospace; }

/* ══════════════════════════════════════════════════════════════════
   منصة الاختبارات — شاشات الإدارة
   ══════════════════════════════════════════════════════════════════ */

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.panel-head h2 { margin-bottom: .5em; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions form { margin: 0; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input { width: 84px; }
a.as-link { display: inline-flex; align-items: center; text-decoration: none; }
a.as-link:hover { text-decoration: none; }

.checks { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
.checks .check { margin: 0; }

.warn, .warn-text { color: var(--warning); }
.ok-text { color: var(--teal); }
.ready { font-size: 14px; margin: 0 0 12px; }

/* نص طويل داخل خلية أو شريحة — سطران ثم قصّ */
.clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 52ch;
}

.facts {
  display: grid; gap: 10px 22px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 4px 0 2px;
}
.facts > div { display: flex; flex-direction: column; }
.facts span { font-size: 11.5px; color: var(--ink-3); }
.facts strong { color: var(--ink); font-weight: 600; font-size: 15px; }

.secret.code { font-size: 22px; letter-spacing: .35em; text-align: center; }

/* خانات الخيارات في محرّر السؤال */
/* نصّ السؤال — إدخالًا وعرضًا —
   السؤال هو المادة، وكلُّ ما عداه في الصفحة إطارٌ له. حجمُه في الحالتين
   أكبر من محيطه عمدًا: ما يُكتب صغيرًا يُراجَع صغيرًا، وما يُقرأ صغيرًا
   يُساء فهمه. الصنف مخصوص فلا يتضخّم كل textarea في النظام. */
textarea.q-input {
  font-size: 18px; line-height: 1.8; font-weight: 500; color: var(--ink);
}

.options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.option-row { display: flex; align-items: center; gap: 10px; }
.option-row input[type="radio"] { accent-color: var(--teal); width: 17px; height: 17px; flex: none; }
.option-text {
  flex: 1;
  background: rgba(15,23,42,.04); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 11px 14px;
  color: var(--ink); font-family: inherit; font-size: 16px;
}
.option-text:focus {
  border-color: var(--violet-400);
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* مجمّع أسئلة النموذج */
.pool {
  display: grid; gap: 8px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-height: 520px; overflow-y: auto;
  padding-inline-end: 4px;
}

/* مراجعة الورقة */
.review-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.review-item:last-child { border-bottom: none; }
.review-q { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 14.5px; }
.review-no {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px;
  background: rgba(15,23,42,.06); color: var(--ink-2);
}
.review-opts { list-style: none; margin: 10px 0 0; padding: 0 36px 0 0; display: grid; gap: 5px; }
.review-opts li {
  font-size: 13.5px; padding: 7px 12px; border-radius: 9px;
  background: rgba(15,23,42,.025); color: var(--ink-2);
}
.review-opts li.correct { background: rgba(45,212,191,.12); color: #8ff0e0; }
.review-opts li.chosen-wrong { background: rgba(251,113,133,.12); color: #ffbcc7; }
.review-opts .tag { margin-inline-start: 8px; }

/* ══════════════════════════════════════════════════════════════════
   شاشة الطالب — الرابط العام
   ══════════════════════════════════════════════════════════════════ */

.sit-shell {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 40% at 85% 25%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 66%),
    var(--void);
}
.sit-top { padding: 20px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.sit-main { padding: 26px clamp(14px, 4vw, 40px) 60px; max-width: 780px; margin: 0 auto; }

.sit-card {
  background: var(--surface-lifted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 28px clamp(18px, 4vw, 32px);
  margin-bottom: 16px;
}
.sit-card.slim { padding: 18px clamp(16px, 3vw, 24px); }
.sit-card .btn-primary { margin-top: 8px; }
.sit-card .facts { margin: 18px 0 22px; }

.notice {
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 18px;
}
.notice p { margin: 0 0 6px; }
.notice p:last-child { margin: 0; }

/* الشريط العلوي أثناء الاختبار */
.sit-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(8,13,28,.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 20px; margin-bottom: 16px;
}
.sit-title { font-size: 13px; color: var(--ink-2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-progress { font-size: 12.5px; color: var(--ink-3); flex: none; }
.sit-clock {
  font-family: ui-monospace, monospace; font-size: 19px; font-weight: 600;
  color: var(--ink); flex: none; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.sit-clock.warn { color: var(--warning); }
.sit-clock.danger { color: var(--danger); }

.q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.q-no { font-size: 12px; font-weight: 600; color: var(--brand-400); letter-spacing: .04em; }
.q-defer { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.q-defer input { accent-color: var(--violet); width: 15px; height: 15px; }

.q-text { font-size: 21px; line-height: 1.85; color: var(--ink); margin: 0 0 22px; font-weight: 500; }

.choices { display: grid; gap: 9px; margin-bottom: 22px; }
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16.5px; line-height: 1.75;
  padding: 15px 17px; border-radius: var(--radius-sm);
  background: rgba(15,23,42,.03); border: 1px solid transparent;
  cursor: pointer; transition: background .2s, border-color .2s;
  font-size: 15px; line-height: 1.7; color: var(--ink-2);
}
.choice:hover { background: rgba(15,23,42,.06); border-color: var(--line-2); }
.choice input { accent-color: var(--violet); width: 18px; height: 18px; margin-top: 4px; flex: none; }
.choice:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent-soft) 45%, transparent); color: var(--ink);
}

.q-nav { display: flex; gap: 10px; justify-content: space-between; }
.q-nav button { min-width: 120px; }
.q-nav button:disabled { opacity: .4; cursor: not-allowed; }

/* شبكة أرقام الأسئلة */
.q-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.q-cell {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(15,23,42,.04); border: 1px solid var(--line-2);
  color: var(--ink-3); font-family: inherit; font-size: 13px;
  transition: background .2s, border-color .2s, color .2s;
}
.q-cell:hover { border-color: var(--violet-400); color: var(--ink); }
.q-cell.done { background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.3); color: #8ff0e0; }
.q-cell.flag { border-color: var(--warning); color: var(--warning); }
.q-cell.here { outline: 2px solid var(--cyan); outline-offset: 1px; color: var(--ink); }

.q-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 14px; }
.q-legend .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  border: 1px solid var(--line-2); margin-inline-end: 5px;
}
.q-legend .dot.done { background: rgba(45,212,191,.5); border-color: transparent; }
.q-legend .dot.flag { border-color: var(--warning); }

/* النتيجة */
.score {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 28px 20px; border-radius: 1.2rem; margin: 20px 0;
}
.score.pass { background: rgba(45,212,191,.1); box-shadow: inset 0 0 0 1px rgba(45,212,191,.28); }
.score.fail { background: rgba(251,113,133,.09); box-shadow: inset 0 0 0 1px rgba(251,113,133,.28); }
.score-value { font-size: 54px; font-weight: 700; line-height: 1; color: var(--ink); }
.score-value small { font-size: 22px; font-weight: 500; color: var(--ink-3); margin-inline-start: 3px; }
.score-label { font-size: 14px; font-weight: 600; }
.score.pass .score-label { color: var(--teal); }
.score.fail .score-label { color: var(--danger); }

@media (max-width: 560px) {
  .sit-bar { flex-wrap: wrap; border-radius: 1.1rem; }
  .sit-title { flex-basis: 100%; }
  .q-nav { flex-direction: column-reverse; }
  .q-nav button { width: 100%; }
}

.nav-sep {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-3); margin: 14px 13px 4px;
}

/* ملخّص التحقق — يجعل فشل الربط ظاهرًا بدل أن يبتلعه النموذج بصمت */
.validation-errors { margin: 0 0 14px; padding: 0; list-style: none; }
.validation-errors li {
  background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.35);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: 9px 13px; font-size: 13px; margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   الشريط العلوي — التحية والوقت ومبدّل الهويّة
   ══════════════════════════════════════════════════════════════════ */

/* في اتجاه RTL يدفع flex-end المحتوى إلى اليسار لا إلى اليمين.
   استعمال flex-start هنا هو الخطأ المتوقّع، ونتيجته شريطٌ يجلس في
   الجهة المقابلة تمامًا لما طُلب. */
.topbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 20px; flex-wrap: wrap;
  margin: -16px 0 30px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.topbar-who { text-align: start; }
.greet { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.stamp { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

.theme-pick { display: flex; align-items: center; gap: 7px; }
.swatch {
  width: 18px; height: 18px; padding: 0; flex: none;
  border: 0; border-radius: var(--radius-pill);
  background: var(--sw); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover { transform: scale(1.16); }
/* الحلقة مرسومة بظلّين لا بإطار: الإطار يقضم من قطر الدائرة فتقفز
   الأزرار مكانها عند التبديل. */
.swatch.on { box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--sw); }
.swatch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* نصّ السؤال في جدول البنك — أكبر من بقيّة الخلايا لأنه ما يُبحث عنه.
   صنفٌ مستقلّ لا ‎.who-name‎: ذاك يخدم أسماء الأعضاء والأدوار أيضًا. */
.q-brief { color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════
   الهويّات اللونية
   ══════════════════════════════════════════════════════════════════

   المفتاح يُكتب على <html data-theme>‎ من إعداد المؤسسة. كل كتلة تعيد
   تعريف التوكنات الحاملة للّون وحدها؛ وما كان منها اسمًا مختصرًا
   (‎--ink‎ · ‎--brand‎ · ‎--accent‎) مرجعٌ إلى رقمٍ في السلّم فيتبع بلا
   تكرار.

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

[data-theme="emerald"] {
  --void: #05100e; --abyss: #071613; --deep: #091a16; --surface: #0b1c18;
  --line: #152e28; --line-2: #204237;
  --surface-rgb: 11, 28, 24;

  --ink-0: #05100e; --ink-50: #071613; --ink-100: #0b1c18;
  --ink-200: #152e28; --ink-300: #204237;
  --ink-400: #648d83; --ink-500: #83aa9e; --ink-600: #a2cabd;
  --ink-700: #bfdcd3; --ink-800: #d8ece5; --ink-900: #e9f7f2; --ink-950: #f2fbf8;

  --brand-900: #042f2e; --brand-800: #115e59; --brand-700: #0f766e;
  --brand-600: #0e8378; --brand-500: #0d9488; --brand-400: #2dd4bf; --brand-300: #99f6e4;

  --violet-800: #064e3b; --violet-700: #047857; --violet-600: #059669;
  --violet-500: #10b981; --violet-400: #6ee7b7; --violet-300: #a7f3d0;

  --cyan-600: #0e7490; --cyan-500: #5eead4; --cyan-400: #a7f3d0;

  --gradient-action: linear-gradient(100deg, #047857 0%, #0d9488 52%, #0891b2 100%);
}

[data-theme="amber"] {
  --void: #0d0b07; --abyss: #12100a; --deep: #15120d; --surface: #171310;
  --line: #2a231a; --line-2: #3d3324;
  --surface-rgb: 23, 19, 16;

  --ink-0: #0d0b07; --ink-50: #12100a; --ink-100: #171310;
  --ink-200: #2a231a; --ink-300: #3d3324;
  --ink-400: #8f8269; --ink-500: #a99b81; --ink-600: #cbbfa8;
  --ink-700: #ded4c2; --ink-800: #eee7da; --ink-900: #faf6ee; --ink-950: #fdfaf4;

  --brand-900: #451a03; --brand-800: #78350f; --brand-700: #92400e;
  --brand-600: #b45309; --brand-500: #d97706; --brand-400: #fbbf24; --brand-300: #fcd34d;

  --violet-800: #78350f; --violet-700: #92400e; --violet-600: #d97706;
  --violet-500: #f59e0b; --violet-400: #fcd34d; --violet-300: #fde68a;

  --cyan-600: #b45309; --cyan-500: #fbbf24; --cyan-400: #fde68a;

  --gradient-action: linear-gradient(100deg, #b45309 0%, #d97706 52%, #f59e0b 100%);
}

[data-theme="rose"] {
  --void: #0d060c; --abyss: #120810; --deep: #150a13; --surface: #180c15;
  --line: #2c1523; --line-2: #412032;
  --surface-rgb: 24, 12, 21;

  --ink-0: #0d060c; --ink-50: #120810; --ink-100: #180c15;
  --ink-200: #2c1523; --ink-300: #412032;
  --ink-400: #93708a; --ink-500: #ae8da4; --ink-600: #cfaac2;
  --ink-700: #e2c4d8; --ink-800: #f0dcea; --ink-900: #fbeef6; --ink-950: #fdf2f9;

  --brand-900: #500724; --brand-800: #831843; --brand-700: #9d174d;
  --brand-600: #a81a54; --brand-500: #be185d; --brand-400: #f472b6; --brand-300: #f9a8d4;

  --violet-800: #831843; --violet-700: #9d174d; --violet-600: #be185d;
  --violet-500: #db2777; --violet-400: #f9a8d4; --violet-300: #fbcfe8;

  --cyan-600: #a21caf; --cyan-500: #f472b6; --cyan-400: #fbcfe8;

  --gradient-action: linear-gradient(100deg, #86198f 0%, #be185d 52%, #db2777 100%);
}

/* ── شريط الأدوات: القالب والاستيراد ── */
.tool-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.icon-btn { display: inline-flex; align-items: center; gap: 7px; }
.icon-btn svg { width: 17px; height: 17px; flex: none; }

/* حقل الملف بلبوس النظام: مظهرُه الافتراضي في المتصفّح رماديٌّ فاتح
   يقفز من كل ما حوله في واجهة داكنة. */
.file-input {
  flex: 1; min-width: 200px;
  background: rgba(15,23,42,.04); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 9px 12px;
  color: var(--ink-2); font-family: inherit; font-size: 13px;
}
.file-input::file-selector-button {
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--radius-xs); padding: 5px 11px; margin-inline-end: 10px;
  color: var(--ink-2); font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.file-input::file-selector-button:hover { border-color: var(--accent-soft); color: var(--ink); }

/* أخطاء الاستيراد: قائمة بأرقام الصفوف، لا رسالة واحدة مبهمة. */
.err-list { margin: 8px 0 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.9; }
.err-list li { margin-bottom: 2px; }


/* ── مدرّج توزيع الدرجات ──
   أعمدة بـCSS خالص لا مكتبة رسم: عشرة صفوف لا تستحق ٣٠٠ كيلوبايت
   جافاسكربت تُحمَّل مع كل صفحة، والعرض نسبةٌ مئوية يفهمها المتصفّح وحده. */
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.bar-row { display: grid; grid-template-columns: 78px 1fr 40px; align-items: center; gap: 10px; }

.bar-label { font-size: 12px; color: var(--muted, #94a3b8); font-variant-numeric: tabular-nums; }

.bar-track {
  height: 16px;
  border-radius: 8px;
  background: rgba(148, 163, 184, .14);
  overflow: hidden;
}

.bar-fill { display: block; height: 100%; border-radius: 8px; min-width: 2px; }
.bar-fill.pass { background: linear-gradient(90deg, #22d3ee, #3b6ff5); }
.bar-fill.fail { background: linear-gradient(90deg, #fb7185, #e11d48); }

.bar-value { font-size: 13px; font-weight: 700; text-align: start; font-variant-numeric: tabular-nums; }

/* ── رسوم الإحصاءات ──
   SVG مكتوب بيدنا لا مكتبة: أربعة رسوم لا تستحق مئات الكيلوبايتات على
   كل صفحة، والقيد المعلن في المشروع «لا مكتبات ثقيلة». */
.viz { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }

.viz .axis { stroke: rgba(148,163,184,.28); stroke-width: 1; }
.viz .grid { stroke: rgba(148,163,184,.14); stroke-width: 1; }

/* النصّ يلبس رموز النصّ لا لون السلسلة: الرقم بيانٌ لا علامةُ هوية. */
.viz .tick { fill: var(--ink-3, #94a3b8); font-size: 11px; }
.viz .val  { fill: var(--ink-2, #cbd5e1); font-size: 11px; font-weight: 700; }

/* حلقة بلون السطح حول النقاط المتراكبة، فلا تذوب نقطتان متجاورتان. */
.viz .dot { stroke: var(--surface, #0d1426); stroke-width: 2; }
.viz .gap { fill: none; stroke: rgba(148,163,184,.45); stroke-width: 1.5; stroke-dasharray: 2 2; }

/* ── مفتاح الرسم ── */
.legend { display: flex; gap: 16px; margin: 4px 0 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2, #cbd5e1); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch.pass { background: #0ca30c; }
.swatch.fail { background: #d03b3b; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.34) 0 2px, transparent 2px 5px); }

/* ── شريط مكدّس ── */
.bar-row.wide { grid-template-columns: 150px 1fr 52px; }
.bar-track { display: flex; }
.seg { display: block; height: 100%; }

/* فجوة ٢ بكسل بلون السطح بين الجزأين: حافّةٌ فاصلة لا تعتمد على فرق
   الصبغة، فتُقرأ ولو لم يُميَّز اللونان. */
.seg.pass { background: #0ca30c; border-radius: 8px 0 0 8px; }
.seg.fail {
  background: #d03b3b;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.34) 0 2px, transparent 2px 5px);
  border-radius: 0 8px 8px 0;
  box-shadow: inset 2px 0 0 var(--surface, #0d1426);
}

/* ── بطاقة «إضافة المواد والمقررات» ──
   مجموعة حقول لكل تصنيف عند المستقلّ: بلا إطار المتصفّح الافتراضي،
   والمخفيّة لا تشغل مكانًا. واختيارات التصنيف ونوع الاختبار أفقية
   مضغوطة بدل بطاقات الأسئلة الكبيرة. */
.field-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-group[hidden] { display: none; }
.field .choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.field .choice { padding: 9px 13px; font-size: 14px; align-items: center; }
.field .choice input { margin-top: 0; }

/* ── «صلاحياتك» في الإعدادات: مجموعات بدل شارات متراصّة ── */
.perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.perm-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: rgba(15,23,42,.02); }
.perm-group header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.perm-group h3 { margin: 0; font-size: 14px; color: var(--ink); }
.perm-count { font-size: 12px; color: var(--ink-3); direction: ltr; }
.perm-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.perm-group li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.perm-group li.off { color: var(--ink-3); opacity: .6; }
.perm-mark { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(37,99,235,.14); color: var(--brand-400); }
.perm-group li.off .perm-mark { background: transparent; color: var(--ink-3); }
.perm-group.danger { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.05); }
.perm-group.danger h3 { color: #f87171; }
.perm-group.danger li.on .perm-mark { background: rgba(239,68,68,.15); color: #f87171; }

/* ── الفوترة ولوحة الإدارة ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface-raised); border-radius: var(--radius); box-shadow: var(--shadow-hairline); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat > span { font-size: 12.5px; color: var(--ink-3); }
.stat > strong { font-size: 24px; color: var(--ink); line-height: 1.3; }
.stat > small { font-size: 12px; color: var(--ink-2); }
.follow-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 14px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.inline-form select { min-width: 220px; }
.row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 12px; }
.secret-key { font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: 1px; color: var(--ink); background: rgba(15,23,42,.04); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; display: inline-block; }
.steps-list { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; }
.sub-h { font-size: 14px; margin: 20px 0 10px; color: var(--ink); }
.usage-bars { display: grid; gap: 6px; max-width: 520px; }
.usage-row { display: grid; grid-template-columns: 48px 1fr 36px; align-items: center; gap: 10px; font-size: 12.5px; }
.usage-track { height: 8px; border-radius: 99px; background: rgba(15,23,42,.06); overflow: hidden; }
.usage-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-500), #7c3aed); }

/* لوحة مدير المنصة: شارة بلون مختلف تذكّر بأنك خارج أي مؤسسة */
.admin-chip { border-color: rgba(183,121,62,.45) !important; color: #D9A56E !important; }
.admin-chip .tenant-dot { background: #B7793E !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════════════
   هوية 2026 — المنصة
   أرضية فاتحة موحّدة (#F8F7F4) وحبر كحلي (#0F172A) لكل الجهات، ويبقى
   للجهة اختيار «لون التمييز» فقط من أربعة ألوان تناسب الهوية:
   midnight = أخضر مزرق (لون الهوية) · emerald = أزرق · amber = برونزي · rose = توت.
   (المفاتيح قديمة ومخزّنة في القاعدة، فلا تُغيَّر أسماؤها.)
   الكتلة في آخر الملف عمدًا: تغلب ما قبلها بالترتيب لا بالتخصيص.
   ══════════════════════════════════════════════════════════════════ */

:root, [data-theme="emerald"], [data-theme="amber"], [data-theme="rose"] {
  --void: #F8F7F4; --abyss: #F1F0EC; --deep: #EEF2F4; --surface: #FFFFFF;
  --line: #E3E4E0; --line-2: #D2D5D9;
  --surface-rgb: 255, 255, 255;

  --ink-0: #FFFFFF; --ink-50: #F8F7F4; --ink-100: #EEF2F4;
  --ink-200: #E3E4E0; --ink-300: #D2D5D9;
  --ink-400: #5B6676; --ink-500: #4A5566; --ink-600: #344054;
  --ink-700: #26324A; --ink-800: #1B2539; --ink-900: #141D31; --ink-950: #0F172A;

  /* البرونزي لون الإبراز، والأزرق للتفاعل (الروابط) — ثابتان لكل الجهات */
  --violet-800: #5C3A1B; --violet-700: #734A23; --violet-600: #8C5A2B;
  --violet-500: #9A6534; --violet-400: #B7793E; --violet-300: #D4A574;
  --cyan-600: #1D4ED8; --cyan-500: #2563EB; --cyan-400: #2563EB;
  --teal-500: #0F766E; --teal-400: #0F766E;

  --success: #047857; --warning: #B45309; --danger: #B91C1C;

  --highlight: #B7793E;

  --shadow-hairline: 0 0 0 1px rgba(15,23,42,.07);
  --shadow-card: 0 0 0 1px rgba(15,23,42,.07), 0 10px 28px -18px rgba(15,23,42,.18);
  --shadow-card-hover: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 14px 32px -18px rgba(15,23,42,.22);
  --shadow-panel: 0 0 0 1px rgba(15,23,42,.08), 0 18px 40px -24px rgba(15,23,42,.22);
  --shadow-action: 0 8px 20px -10px color-mix(in srgb, var(--accent) 55%, transparent);

  --surface-raised: #FFFFFF;
  --surface-card:   #FFFFFF;
  --surface-lifted: #FFFFFF;
}

/* لون التمييز لكل اختيار */
:root {
  --brand-900: #042F2E; --brand-800: #134E4A; --brand-700: #115E59;
  --brand-600: #0F766E; --brand-500: #0F766E; --brand-400: #0F766E; --brand-300: #2A9D90;
  --accent: #0F766E; --accent-soft: #2A9D90;
}
[data-theme="emerald"] {
  --brand-900: #172554; --brand-800: #1E3A8A; --brand-700: #1E40AF;
  --brand-600: #1D4ED8; --brand-500: #2563EB; --brand-400: #1D4ED8; --brand-300: #4F7FEF;
  --accent: #2563EB; --accent-soft: #4F7FEF;
}
[data-theme="amber"] {
  --brand-900: #3F2710; --brand-800: #5C3A1B; --brand-700: #734A23;
  --brand-600: #8C5A2B; --brand-500: #8C5A2B; --brand-400: #8C5A2B; --brand-300: #B7793E;
  --accent: #8C5A2B; --accent-soft: #B7793E;
}
[data-theme="rose"] {
  --brand-900: #4C0519; --brand-800: #881337; --brand-700: #9F1239;
  --brand-600: #9F1239; --brand-500: #9F1239; --brand-400: #9F1239; --brand-300: #C8456A;
  --accent: #9F1239; --accent-soft: #C8456A;
}
:root, [data-theme] {
  --brand: var(--brand-500);
  --gradient-action: linear-gradient(var(--accent), var(--accent));   /* زر مصمت لا متدرّج */
}

/* لا توهّج ملوّن خلف الصفحات — الهوية هادئة */
.auth-wrap, .sit-shell { background: var(--void); }

/* نصوص كانت بيضاء لأنها على خلفية داكنة */
.brand-ar { color: var(--ink); }

/* ── القائمة الجانبية: علامة «المعيّن» البرونزي ──
   بدل الشريط الملوّن أو الحبّة المعتادة: العنصر النشط بطاقة بيضاء صغيرة
   يتقدّمها معيّن برونزي — كعلامة الفقرة في المخطوطات. */
.side { background: var(--abyss); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent;
}
.nav-item::before {
  content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg);
  border: 1.5px solid var(--line-2); border-radius: 1px;
  transition: background .2s, border-color .2s, transform .2s;
}
.nav-item:hover { background: rgba(15,23,42,.035); color: var(--ink); }
.nav-item:hover::before { border-color: var(--highlight); }
.nav-item.active {
  background: #FFFFFF; color: var(--ink); font-weight: 600;
  border-color: var(--line); box-shadow: 0 6px 16px -12px rgba(15,23,42,.25);
}
.nav-item.active::before {
  background: var(--highlight); border-color: var(--highlight); transform: rotate(45deg) scale(1.1);
}
.nav-sep { color: var(--ink-3); }

/* ── تبويبات الصفحات: بطاقات فهرس ──
   التبويبات تجلس على شريط رمادي فاتح، والنشط منها بطاقة بيضاء مرفوعة
   يعلوها خيط برونزي وتتصل بالمحتوى أسفلها — كألسنة ملفّ الأرشيف. */
.tabs {
  gap: 4px; padding: 6px 6px 0; background: var(--deep);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: inset 0 -1px 0 var(--line);
}
.tab {
  position: relative; padding: 9px 18px 10px; margin-bottom: 0;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0; color: var(--ink-3); font-weight: 500;
}
.tab:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.tab.active {
  color: var(--ink); font-weight: 600; background: #FFFFFF;
  border-color: var(--line); border-bottom-color: transparent;
  box-shadow: inset 0 2px 0 var(--highlight), 0 1px 0 #FFFFFF;
}

/* ألوان كانت مكتوبة لخلفية داكنة */
.bar-label { color: var(--ink-3); }
.bar-fill.pass { background: var(--accent); }
.bar-fill.fail { background: #C2410C; }
.swatch.pass, .seg.pass { background: var(--accent); }
.perm-group.danger h3 { color: var(--danger); }
.perm-group.danger li.on .perm-mark { background: rgba(185,28,28,.08); color: var(--danger); }
.usage-fill { background: var(--accent); }
.admin-chip { color: #8C5A2B !important; background: rgba(183,121,62,.08); }
.btn-ghost.danger { border-color: rgba(185,28,28,.35); }
.btn-ghost.danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(185,28,28,.05); }
.pill.danger { background: rgba(185,28,28,.07); border-color: rgba(185,28,28,.25); }
.danger-zone { border: 1px solid rgba(185,28,28,.25); }
.danger-zone h2 { color: var(--danger); }

/* وسائل التواصل (صفحة الفوترة) */
.contact-box { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.contact-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 170px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--ink); text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.contact-item:hover { border-color: var(--accent); box-shadow: 0 6px 16px -12px rgba(15,23,42,.3); text-decoration: none; }
.contact-item .ci-label { font-size: 12px; color: var(--ink-3); }
.contact-item .ci-value { font-weight: 600; font-size: 14px; text-align: right; }
.contact-item.wa { border-color: rgba(21,128,61,.35); }
.contact-item.wa .ci-label { color: #15803D; }

/* طلب كريدت (صفحة الفوترة) */
.pack-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.credit-total { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: rgba(183,121,62,.06); }
.credit-total span { font-size: 12px; color: var(--ink-3); }
.credit-total strong { font-size: 18px; color: var(--ink); }
.tier-chip { display: inline-block; margin-inline-end: 8px; padding: 2px 10px; border-radius: 99px; background: var(--deep); font-size: 12.5px; color: var(--ink-2); }
.req-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; background: #FFFFFF; }
.req-card.pending { border-color: rgba(183,121,62,.5); }
.req-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.bank-box { display: grid; gap: 6px; padding: 12px 14px; margin: 8px 0; border-radius: var(--radius-sm); background: var(--deep); }
.bank-box span { font-size: 12px; color: var(--ink-3); margin-inline-end: 8px; }
.nav-badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-inline-start: auto; border-radius: 99px; background: var(--highlight); color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }

/* روابط الشروط والخصوصية أسفل بطاقات الدخول والتسجيل (٢٠٢٦/١٠/٠٤) */
.legal-links { margin-top: 10px; text-align: center; font-size: 12.5px; opacity: .7; }
.legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* هوية المؤسسة في صفحات الطالب، وسطر حقوق المنصة (٢٠٢٦/١٠/٠٥) */
.sit-top .tenant-logo { height: 44px; width: auto; max-width: 140px; object-fit: contain; }
.sit-top .brand { gap: 12px; }
.vima-credit { margin: 40px auto 18px; text-align: center; font-size: 12px; color: var(--ink-3, #64748B); opacity: .85; line-height: 1.9; padding: 0 16px; }
.vima-credit a { color: inherit; font-weight: 600; text-decoration: none; }
.branding-preview { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.branding-preview img { height: 48px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid #E2E8F0; border-radius: 8px; padding: 4px; background: #fff; }

/* ════════════════════════════════════════════════════════════════════
   شعار المؤسسة في القائمة الجانبية: أكبر، في المنتصف، والاسم تحته
   ════════════════════════════════════════════════════════════════════ */
.side .brand.has-logo { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.side .brand.has-logo .brand-text { align-items: center; }
.side .brand.has-logo .brand-ar { line-height: 1.5; }

/* زر الوضع الليلي في الشريط العلوي (بدل مربعات الألوان) */
.mode-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-card); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s;
}
.mode-toggle:hover { border-color: var(--accent); }
.mode-light-icon { display: none; }
html[data-mode="dark"] .mode-light-icon { display: inline; }
html[data-mode="dark"] .mode-dark-icon { display: none; }

/* ════════════════════════════════════════════════════════════════════
   الوضع الليلي — كحلي هادئ بنفس هوية 2026 (التيل والبرونزي)
   ════════════════════════════════════════════════════════════════════ */
html[data-mode="dark"] {
  color-scheme: dark;
  --void: #0B1220; --abyss: #0E1627; --deep: #111B2E; --surface: #141E33;
  --line: #24324D; --line-2: #31415F;
  --surface-rgb: 20, 30, 51;
  --ink-0: #0B1220; --ink-50: #0E1627; --ink-100: #141E33; --ink-200: #24324D; --ink-300: #31415F;
  --ink-400: #94A1B8; --ink-500: #A3AEC3; --ink-600: #BAC4D6; --ink-700: #CFD7E5;
  --ink-800: #E0E6EF; --ink-900: #EEF2F7; --ink-950: #F6F8FB;
  --surface-raised: #162038; --surface-card: #162038; --surface-lifted: #1B2643;
  --accent: #14A394; --accent-soft: #2DD4BF;
  --brand-500: #14A394; --brand-600: #14A394; --brand-400: #2DD4BF; --brand-300: #5EEAD4;
  --teal-500: #14A394; --teal-400: #2DD4BF;
  --highlight: #D19A5B;
  --success: #34D399; --warning: #FBBF24; --danger: #F87171;
  --shadow-hairline: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-card: 0 0 0 1px rgba(255,255,255,.06), 0 10px 28px -18px rgba(0,0,0,.6);
  --shadow-panel: 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px -24px rgba(0,0,0,.65);
}
html[data-mode="dark"] .nav-item.active,
html[data-mode="dark"] .tab.active,
html[data-mode="dark"] .contact-item,
html[data-mode="dark"] .req-card { background: var(--surface-lifted); }
html[data-mode="dark"] .tab:hover { background: rgba(255,255,255,.05); }
html[data-mode="dark"] .tab.active { box-shadow: inset 0 2px 0 var(--highlight); }
html[data-mode="dark"] .branding-preview img { background: #fff; border-color: var(--line); }
html[data-mode="dark"] .admin-chip { color: var(--highlight) !important; }
html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea { color-scheme: dark; }
.plain-list { margin: 6px 0 0; padding-inline-start: 18px; line-height: 2.1; }

/* رسالة النجاح في الهوية الفاتحة: أخضر داكن مقروء بدل ألوان الواجهة الداكنة القديمة */
.ok { background: #E7F3F0; border-color: #9FD3C9; color: #0B5F57; }
.ok strong { color: #064A44; }
html[data-mode="dark"] .ok { background: rgba(45,212,191,.09); border-color: rgba(45,212,191,.3); color: #7ee7d5; }
html[data-mode="dark"] .ok strong { color: #b8f5ea; }

/* خيارات بشرحٍ قصير (نوع التقييم عند الشركات والجهات) */
.field.span-all { grid-column: 1 / -1; }
.choices.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
@media (max-width: 760px) { .choices.two-col { grid-template-columns: 1fr; } }
.choice-hint { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7; font-weight: 400; color: #64748B; }
html[data-mode="dark"] .choice-hint { color: #94A3B8; }