/* ══════════════════════════════════════════════════════════════════════
   sru-ui.css — حزمة الهوية الرقمية لجامعة سليمان الراجحي
   الإصدار: 2.0

   المصدر: مستخرَجة من sru.css في مستودع sru-website عند الإيداع 6077a61
           بتاريخ 2026-09-01. كلّ قاعدة أدناه منقولة حرفياً من ذلك الملفّ
           — لا قيمة مؤلَّفة هنا، ولا قيمة مستنتَجة.

   الحكم:  هذه الحزمة مرآةٌ لا مصدر. عند اختلافها عن sru.css فالموقع هو
           الحقّ، وهذه هي المتأخّرة. لتحديثها: قارن بـsru.css وأعد الاستخراج.

   الاستخدام: <link rel="stylesheet" href="sru-ui.css">
              الخطّ يجلب نفسه (انظر طبقة التوزيع أدناه). والأيقونات لا:
              خذ sru-icons.js معك — وغيابه يظهر صناديقَ متقطّعة لا فراغاً.
              وصفحة example.html تُظهر الحزمة عاملةً وتفحص شروطها بنفسها.

   أسماء الأصناف غير مسبوقة بـsru- عمداً: هي أسماء الموقع نفسها، وتبديلها
   يكسر المرآة. من أدخلها في مشروعٍ له أصنافٌ باسم .card أو .btn أو .link
   فليعزلها بحاويةٍ خاصّة به.

   ── تغييرات 2.0 عن 1.1 ─────────────────────────────────────────────
   · حُذف ‎--sru-cyan:#00aeef‎ والتوقيع القُطري ‎.sru-diag‎. الإصدار 1.1 وصفه
     بأنه «القيمة الملزمة في هوية الجامعة»، ولا وجود للرمز في الموقع، و‎#00aeef‎
     يظهر فيه لوناً لكلية الأعمال في الهيكل التنظيمي وحده.
     وفي شعار الجامعة سماويٌّ فعلاً — لكنّه ‎#00add9‎ مقيساً من بكسلات
     logo-color.png، لا ‎#00aeef‎. وهو لونُ شعارٍ لا رمزُ واجهة: انظر
     «ألوان الشعار» في SRU_IDENTITY.md.
   · الزوايا 2px لا 4px — ‎--r-btn‎ و‎--r-card‎ كما في الموقع.
   · ‎--sru-ink‎ و‎--sru-muted‎ صارا ‎--text:#241331‎ و‎--muted:#675b72‎ بأسماء
     الموقع وقيمه. القيمتان القديمتان (#241436 و#6b5a80) لم تكونا مطابقتين.
   · أُضيفت الظلال والعرض والهيدر وخمسة أنماط أزرار ونظام الأقسام والحركة
     المحترمة لتقليل الحركة ومبدّل اللغة — وكلّها كانت غائبة عن 1.1.
   · خلفية الجسم ‎#fff‎ لا ‎--sru-bg‎. الأخيرة للأقسام البديلة ‎.sec-alt‎.

   ── ما لم يُنقل ─────────────────────────────────────────────────────
   مكوّنات تخصّ صفحات الموقع التعريفي ولا تصلح حزمةً عامّة: بطاقات القيادة
   ومجلس الأمناء (بما فيها البطاقة المقلوبة) · الأرقام والاعتمادات والأهداف
   والقيم · الأخبار · الهيكل التنظيمي وألوانه الستّة · إحصاءات هيئة التدريس
   · القائمة الكبرى (mega) · بطل الصفحة الرئيسية. من احتاجها فمرجعه sru.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ طبقة التوزيع — ليست من sru.css ═══════════════════════════════════
   قاعدتان لا وجود لهما في الموقع، أُضيفتا هنا وحدهما لأنّ الحزمة تُسلَّم
   ليدٍ لا تعرف شروطها. وهما مفصولتان ومعلَنتان كي لا تُحسبا من المرآة.
   من أراد مرآةً خالصة فليحذف ما بين هذا العنوان ونهاية الطبقة.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) الخطّ يجلب نفسه. الموقع يجلبه بوسم <link> وهو أسرع — ومن نسخ
      الوسوم من SRU_IDENTITY.md استغنى عن هذا السطر ولم يضرّه بقاؤه.
      ولولا هذا لسقطت كلّ صفحةٍ نسيت الوسم إلى Tahoma بصمت. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

/* 2) أيقونةٌ لم تُروَ تصير مرئية. بلا sru-icons.js يبقى <i data-lucide>
      عنصراً فارغاً لا يراه أحد، فيظنّ الناسي أنّ التصميم هكذا. الصندوق
      المتقطّع يقول: هنا أيقونةٌ غائبة. ويزول وحده متى حقن السكربت svg. */
[data-lucide]:empty{
  display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  border:1px dashed currentColor;border-radius:1px;opacity:.45}

/* ══ نهاية طبقة التوزيع · وما بعده مرآةٌ حرفية لـsru.css ═════════════ */

/* ── الرموز ───────────────────────────────────────────────────────── */
:root{
  --sru-purple:#501e8c; --sru-purple-dark:#3a1464; --sru-purple-light:#f0ebf8;
  --sru-blue:#0a6eaa; --sru-blue-light:#e6f3fa;
  --sru-bg:#f7f5fb; --sru-border:rgba(80,30,140,0.12);
  --text:#241331; --muted:#675b72;
  --r-btn:2px; --r-card:2px;   /* زوايا شبه قائمة — بقي 2px لتفادي خشونة البكسل */
  --sh-soft:0 10px 28px rgba(31,13,51,.08); --sh:0 16px 44px rgba(31,13,51,.12);
  --container:1200px; --hdr:108px;
}

/* ── الأساس ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* أي قاعدة display في صنفٍ ما تغلب قاعدة المتصفح للسمة hidden، فيظهر عنصر
   أُخفي بها (مثل زر يحمل .btn). هذا السطر يجعل hidden موثوقاً في كل مكان. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Cairo",Tahoma,Arial,sans-serif;background:#fff;color:var(--text);line-height:1.75}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── الحاوية والأقسام ─────────────────────────────────────────────── */
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.sec{padding:80px 0;scroll-margin-top:var(--hdr)}
.sec-alt{background:var(--sru-bg)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-head.start{text-align:start;margin-inline:0}
.eyebrow{display:inline-block;color:var(--sru-blue);font-weight:800;font-size:14px;margin-bottom:8px}
.eyebrow-light{color:#8fd0f5}
h2.title{margin:0 0 10px;font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.35}
.title-white{color:#fff}
.sec-sub{margin:0;color:var(--muted);font-size:16.5px}
.sub-white{color:rgba(255,255,255,.84)}

/* ── الظهور بالتمرير — ويحترم تفضيل تقليل الحركة ──────────────────── */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ── الأزرار ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-btn);
     padding:12px 20px;font-weight:700;font-size:15px;border:0;cursor:pointer;font-family:inherit;transition:.16s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(80,30,140,.18)}
.btn-primary{background:var(--sru-purple);color:#fff}
.btn-secondary{background:#fff;color:var(--sru-purple);border:1px solid var(--sru-purple)}
.btn-blue{background:var(--sru-blue);color:#fff}
.btn-white{background:#fff;color:var(--sru-purple)}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-lg{padding:14px 26px;font-size:16px}

/* ── الهيدر: الشريط العلوي ────────────────────────────────────────── */
.topbar{background:var(--sru-purple-dark);color:rgba(255,255,255,.9);font-size:13px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px}
.toplinks{display:flex;gap:16px;flex-wrap:wrap}
.toplinks a{opacity:.85}.toplinks a:hover{opacity:1}
/* مبدّل اللغة — يعزل اتجاهه عن اتجاه الصفحة كي لا تتشظّى العلامات
   حول نصٍّ بعكس اتجاه ما حوله. لا يظهر أصلاً إلا حين للصفحة مقابل. */
.lang-switch{display:inline-flex;align-items:center;gap:6px;opacity:.85;font-weight:700;
  border-inline-start:1px solid rgba(255,255,255,.24);padding-inline-start:16px}
.lang-switch span{unicode-bidi:isolate}
.lang-switch:hover{opacity:1}
.lang-switch i,.lang-switch svg{width:14px;height:14px}
.portal-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--r-btn);padding:5px 12px;font-weight:700}
.portal-btn:hover{background:rgba(255,255,255,.2)}

/* ── الهيدر: شريط التنقّل ─────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:40;background:var(--sru-purple);color:#fff;transition:box-shadow .2s}
.navbar.stuck{box-shadow:0 8px 26px rgba(58,20,100,.28)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:14px}
.brand img{height:36px}
.nav-list{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0;font-weight:600;font-size:14.5px;white-space:nowrap}
.nav-list a{opacity:.9;padding:6px 0;border-bottom:2px solid transparent}
.nav-list a:hover,.nav-list a.active{opacity:1;border-bottom-color:#fff}
.nav-right{display:flex;align-items:center;gap:10px}
/* أزرار الشريط العلوي لا تُلَفّ على سطرين مهما ضاقت الشاشة */
.nav-right .btn{white-space:nowrap;flex-shrink:0}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-btn);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.burger{display:none}
.mobile-nav{display:none;background:var(--sru-purple-dark);padding:8px 0}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav a{display:block;padding:11px 20px;color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08)}
/* المجموعة الخدمية في ذيل قائمة الجوال — تقابل الشريط العلوي الذي يختفي
   دون 820px. أخفض وزناً من القائمة الرئيسية كي لا تنافسها. */
.mobile-nav .m-util{margin-top:6px;border-top:1px solid rgba(255,255,255,.18)}
.mobile-nav .m-util a{font-weight:500;font-size:14px;color:rgba(255,255,255,.82);padding:10px 20px}

/* ── بطل الصفحة الداخلية وفتات الطريق ─────────────────────────────── */
.page-hero{position:relative;background:linear-gradient(115deg,var(--sru-purple-dark) 25%,var(--sru-purple) 75%);color:#fff;padding:56px 0 56px;overflow:hidden}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.75);margin-bottom:18px}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.page-hero h1{margin:0 0 12px;font-size:clamp(30px,4.2vw,48px);font-weight:800;line-height:1.28}
.page-hero h1 .accent{display:block;color:#7fd0ff}
.page-hero p{margin:0 0 24px;max-width:660px;font-size:17.5px;color:rgba(255,255,255,.88)}
.page-hero .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ── شريط التبويبات الداخلي اللاصق ────────────────────────────────── */
.sectabs{position:sticky;top:66px;z-index:30;background:#fff;border-bottom:1px solid var(--sru-border);box-shadow:0 4px 16px rgba(31,13,51,.05)}
.sectabs .container{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.sectabs .container::-webkit-scrollbar{display:none}
.sectabs a{padding:15px 16px;font-weight:700;font-size:14.5px;color:var(--muted);white-space:nowrap;
  border-bottom:3px solid transparent;transition:.16s}
.sectabs a:hover{color:var(--sru-purple)}
.sectabs a.active{color:var(--sru-purple);border-bottom-color:var(--sru-purple)}

/* ── البطاقات ─────────────────────────────────────────────────────── */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--sru-border);border-radius:var(--r-card);padding:24px;box-shadow:var(--sh-soft)}
.card .ico{width:46px;height:46px;border-radius:var(--r-btn);display:grid;place-items:center;margin-bottom:14px;
  background:var(--sru-purple-light);color:var(--sru-purple)}
.card .ico.b{background:var(--sru-blue-light);color:var(--sru-blue)}
.card h3{margin:0 0 8px;font-size:19px}
.card p{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.link{color:var(--sru-purple);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px}

/* ── الخطوات المرقّمة والوسوم ─────────────────────────────────────── */
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;background:#fff;border:1px solid var(--sru-border);
  border-radius:var(--r-card);padding:22px;box-shadow:var(--sh-soft)}
.step-n{width:48px;height:48px;border-radius:var(--r-btn);display:grid;place-items:center;font-weight:800;font-size:19px;
  background:var(--sru-purple);color:#fff}
.step h3{margin:0 0 6px;font-size:18px}
.step p{margin:0 0 10px;color:var(--muted);font-size:14.5px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips span{background:var(--sru-bg);border:1px solid var(--sru-border);border-radius:var(--r-btn);
  padding:4px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--sru-blue-light);color:var(--sru-blue);
  border-radius:var(--r-btn);padding:3px 9px;font-size:12px;font-weight:800;margin-bottom:6px}

/* ── القوائم المرجعية ─────────────────────────────────────────────── */
.checks{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.checks li{display:flex;align-items:start;gap:9px;font-size:14.5px}
.checks li i,.checks li svg{color:var(--sru-purple);flex-shrink:0;margin-top:5px}

/* ── الحالة الفارغة ───────────────────────────────────────────────── */
.empty-state{background:var(--sru-bg);border:1px solid var(--sru-border);border-radius:var(--r-card);
  padding:38px 28px;text-align:center}
.empty-state i,.empty-state svg{color:var(--sru-purple);opacity:.5;margin-bottom:10px}
.empty-state h3{margin:0 0 6px;font-size:18px}
.empty-state p{margin:0 auto 18px;color:var(--muted);font-size:14.5px;max-width:480px}
.empty-state .chans{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-state .chans a{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--sru-border);border-radius:var(--r-btn);padding:8px 14px;
  font-weight:700;font-size:13.5px;transition:.18s ease}
.empty-state .chans a:hover{color:var(--sru-purple);box-shadow:var(--sh-soft)}
.empty-state .chans i,.empty-state .chans svg{margin-bottom:0;opacity:1;width:16px;height:16px}

/* ── الفوتر ───────────────────────────────────────────────────────── */
footer{background:#170822;color:#fff;padding:60px 0 22px}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.f-brand img{height:40px;margin-bottom:14px}
.f-brand p{color:rgba(255,255,255,.7);font-size:14px;margin:0 0 16px}
.social{display:flex;gap:10px}
.social a{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-btn);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.social a:hover{background:var(--sru-purple)}
footer h4{margin:0 0 12px;font-size:15px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer ul a,.f-contact div{color:rgba(255,255,255,.7);font-size:14px}
footer ul a:hover{color:#fff}
.f-contact{display:grid;gap:9px}
.f-contact div{display:flex;align-items:center;gap:8px}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.55);font-size:13px}
.f-legal{display:flex;gap:16px}

/* ── نداء الفعل ───────────────────────────────────────────────────── */
.cta{background:var(--sru-purple);color:#fff;padding:60px 0}
.cta .container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{margin:0;font-size:clamp(24px,3vw,34px);font-weight:800}
.cta p{margin:6px 0 0;color:rgba(255,255,255,.85)}

/* ── نقاط الانكسار ────────────────────────────────────────────────── */
@media (max-width:1140px){.nav-list{gap:11px;font-size:13.5px}}
@media (max-width:980px){
  .nav-list,.nav-right .icon-btn{display:none}
  /* لا بد أن يطابق هذا المحدِّد قوة `.nav-right .icon-btn` أعلاه، وإلا بقي
     زر القائمة مخفياً على الجوال (زر القائمة نفسه يحمل الصنفين معاً). */
  .nav-right .burger{display:grid}
  .hide-sm{display:none}
  .cards3,.cards4{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .sectabs{top:66px}
}
@media (max-width:640px){
  :root{--hdr:66px}
  .sec{padding:56px 0}
  .cards3,.cards4,.f-grid{grid-template-columns:1fr}
  .page-hero .acts .btn{width:100%}
  .step{grid-template-columns:1fr}
}