/* الهوية البصرية الفاخرة لمنصة دربيا (تحديث التصميم المؤسسي، الدفعة 51):
   Tajawal لنصوص المحتوى والعناوين معًا (خط عربي احترافي واحد متّسق بدل
   خطّين مختلفين سابقًا)، Poppins للنصوص الإنجليزية (اسم Darbya وما شابه).
   مصدرها Google Fonts — مسموح بها صراحة في ترويسة Content-Security-Policy
   (.htaccess). أُبقي Cairo كخط احتياطي فقط (fallback) للمتصفحات/الأجهزة
   التي يتعذّر عليها تحميل Tajawal، فلا كسر لأي عرض قائم. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;600;700;800&family=Poppins:wght@500;600;700&display=swap');

:root{
  /* كحلي عميق: اللون الأساسي — العناصر الرئيسية، القائمة الجانبية، الثقة
     والاحترافية المؤسسية (هوية بصرية فاخرة — تحديث الدفعة 52: درجة محدَّدة
     صراحة من العميل بدل الدرجة التقريبية السابقة) */
  --primary:#12376A;
  --primary-solid:var(--primary);   /* للخلفيات الصلبة (أزرار/شرائط) — يختلف عن لون النص في الوضع الليلي */
  --danger-solid:var(--danger);
  --primary-deep:#0D223F;
  /* أزرق بترولي هادئ: لون العناصر النشطة والمؤشرات والروابط — محور التفاعل
     في كل الواجهة (كان تركوازيًا أكثر دفئًا سابقًا، أصبح بتروليًا أهدأ) */
  --primary-2:#0A5EBE;
  /* ذهبي مطفأ: لمسات محدودة فقط لعناصر مهمة (شارات مميّزة، تنبيهات أولوية،
     زر "إنشاء حساب" في الشريط العام) — ليس لون الأزرار العام */
  --secondary:#E2BA5B;
  --secondary-deep:#8A6A1E;
  /* أزرق بترولي مساند (رسوم بيانية/مؤشرات) — نفس عائلة --primary-2 */
  --accent:#0A5EBE;
  --accent-deep:#0B4A94;
  --gold:#E2BA5B;
  --danger:#AD4038;
  /* رمادي فاتح دافئ جدًا للخلفية العامة */
  --bg:#F7FAFF;
  --surface:#FFFFFF;
  --line:#DDE6F2;
  --text:#1C2833;
  --muted:#586A7E;
  --input-bg:#FFFFFF;
  --radius:12px;
  --shadow:0 2px 14px rgba(18,55,106,0.08);
  --focus-ring:0 0 0 3px rgba(10,94,190,0.30);
  /* لون رقم كروت الإحصائيات (KPI) الرئيسي — نفس النص الداكن الأساسي ليبرز
     الرقم كبيانات، مع نسخة فاتحة محايدة في الوضع الليلي (تساوي --text) */
  --kpi-num:#1C2833;
  /* أخضر هادئ لمؤشرات النمو (محدَّد صراحة من العميل) + أحمر للتراجع */
  --kpi-up:#2AA889; --kpi-up-text:#1B7F66;
  --kpi-down:#AD4038;
  --font-body:'Tajawal','Cairo','Segoe UI',Tahoma,sans-serif;
  --font-heading:'Tajawal','Cairo','Segoe UI',Tahoma,sans-serif;
  --font-en:'Poppins','Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
html{overflow-x:hidden; max-width:100%;}
body{
  margin:0; font-family:var(--font-body);
  background:var(--bg); color:var(--text); direction:rtl;
  overflow-x:hidden; max-width:100%;
}
/* شبكة احترازية عامة لمنع خروج أي عنصر عريض (اسم طويل، عنوان دورة طويل،
   رقم كبير) عن حدود الشاشة على الجوال بدل تمرير أفقي غير مرغوب أو قصّ
   النص — تُطبَّق على عناصر الواجهة الشائعة فقط، لا تغيّر أي تخطيط مقصود. */
h1,h2,h3,h4,p,span,a,button,.btn,.stat-card .num,.brand .name{
  overflow-wrap:break-word; word-break:break-word;
}
h1,h2,h3,h4,.brand .name,.stat-card .num{font-family:var(--font-heading);}
a{color:var(--primary-2);}
::selection{background:var(--primary-2); color:#fff;}

/* سهولة الوصول: مؤشر تركيز واضح وموحّد لكل عنصر تفاعلي عند التنقّل بلوحة
   المفاتيح (Tab) — لا يظهر عند النقر بالفأرة حتى لا يزعج بصريًا. */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--primary-2); outline-offset:2px; border-radius:4px;
}

/* رابط "تخطَّ إلى المحتوى" لمستخدمي لوحة المفاتيح وقارئ الشاشة — مخفي بصريًا
   إلى أن يحصل على التركيز (أول ضغطة Tab في الصفحة) */
.skip-link{
  position:absolute; right:12px; top:-48px; z-index:2000; background:var(--primary-solid,var(--primary));
  color:#fff; padding:10px 18px; border-radius:0 0 10px 10px; text-decoration:none;
  font-weight:700; font-size:13.5px; transition:top .15s;
}
.skip-link:focus{top:0;}
.page-wrap{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px;}
/* شريط "رجوع / الرئيسية" أعلى بطاقات صفحات الدخول والتحقق (login.php وما
   شابهها) — هذه الصفحات لا تحتوي على أي شريط تنقّل، فبدونها لا يملك المستخدم
   طريقة واضحة للعودة سوى زر الرجوع في المتصفح، وهو غير واضح لكثيرين. */
.auth-back-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.auth-back-link{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none; color:var(--muted);
  font-size:13px; font-weight:700; padding:6px 10px; border-radius:8px; transition:background .15s, color .15s;
}
@media (hover:hover) and (pointer:fine){ .auth-back-link:hover{background:var(--bg); color:var(--primary-2);} }
.auth-card{
  width:100%; max-width:440px; background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px 32px; border:1px solid var(--line);
}
.auth-card.wide{max-width:640px;}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:22px; justify-content:center;}
.brand .logo{
  width:42px; height:42px; border-radius:12px; position:relative; overflow:hidden;
  /* الشعار الرسمي المعتمَد (assets/brand/logo-icon.png): أيقونة حرف "D" ثلاثية
     الأبعاد بتدرّج تركوازي مع مسار نجمي صاعد (تحديث 2026). الملف شفاف الخلفية
     عمدًا؛ تُبقي قاعدة linear-gradient() كخلفية احتياطية خلفه في كل مكان يُستخدم
     فيه (تظهر حول الأيقونة داخل هذا المربع) وأيضًا إن تعذّر تحميل الصورة لأي سبب. */
  background:
    url('brand/logo-icon.png') center / cover no-repeat,
    var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0;
  font-family:var(--font-heading);
}
.brand .name{font-weight:800; font-size:19px; color:var(--primary);}
h1.title{font-size:21px; margin:0 0 4px; text-align:center;}
p.subtitle{color:var(--muted); text-align:center; margin:0 0 26px; font-size:14px;}
label{display:block; font-size:13px; font-weight:700; margin:14px 0 6px; color:var(--text);}
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], select, textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; background:var(--input-bg); color:var(--text);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary-2); box-shadow:0 0 0 3px rgba(10,94,190,0.14);}
.role-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:6px;}
.role-option{
  border:1.5px solid var(--line); border-radius:12px; padding:12px 10px; text-align:center;
  cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); transition:.15s;
}
.role-option input{display:none;}
.role-option.active{border-color:var(--primary); color:var(--primary); background:rgba(18,55,106,0.06);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:10px; font-weight:700; font-size:15px;
  border:none; cursor:pointer; width:100%; margin-top:20px; transition:.15s;
}
/* زر الإجراء الرئيسي بالكحلي العميق (الهوية الفاخرة المُحدَّثة) — الذهبي
   المطفأ أصبح محجوزًا للمسات المحدودة فقط (شارات/تنبيهات مهمة)، لا لكل
   أزرار الحفظ/الإرسال المتكررة في المنصة بأكملها. */
.btn-primary{background:var(--primary-solid,var(--primary)); color:#fff;}
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{background:var(--primary-deep);} }
.btn-primary:disabled{opacity:.6; cursor:not-allowed;}
/* أزرار موحّدة إضافية — لتقليل الأنماط المضمَّنة المتكرّرة عبر الصفحات ولضمان
   شكل احترافي متّسق لكل الإجراءات الثانوية والخطرة في المنصة */
.btn-outline{background:transparent; color:var(--primary); border:1.5px solid var(--primary);}
@media (hover:hover) and (pointer:fine){ .btn-outline:hover{background:rgba(18,55,106,0.06);} }
.btn-secondary{background:var(--line); color:var(--text);}
@media (hover:hover) and (pointer:fine){ .btn-secondary:hover{background:var(--muted); color:#fff;} }
.btn-danger{background:var(--danger-solid,var(--danger)); color:#fff;}
@media (hover:hover) and (pointer:fine){ .btn-danger:hover{background:#96332C;} }
.btn-sm{width:auto; margin:0; padding:8px 16px; font-size:13px;}
.divider{display:flex; align-items:center; gap:10px; margin:20px 0; color:var(--muted); font-size:13px;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--line);}
.foot-link{text-align:center; font-size:13.5px; color:var(--muted); margin-top:6px;}
.foot-link a{color:var(--primary-2); font-weight:700; text-decoration:none;}
@media (hover:hover) and (pointer:fine){ .foot-link a:hover{text-decoration:underline;} }
.alert{padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px; line-height:1.7;}
.alert-error{background:#FCEBEA; color:var(--danger); border:1px solid #F3C9C6;}
/* رسائل النجاح بالتركوازي — لون الهوية المخصَّص للرسائل الإيجابية والإنجاز.
   لون النص عُدِّل إلى أخضر غامق (#065F46) مع خط أثقل (600) بدل اللون الفاتح
   السابق (var(--accent-deep)) الذي كان تباينه ضعيفًا على الخلفية الفاتحة
   ويصعب قراءته — طلب صريح لتحسين وضوح رسائل النجاح. */
.alert-success{background:#E6F6F6; color:#065F46; font-weight:600; border:1px solid #BEE8E8;}
/* أيقونة بريد كبيرة أعلى عنوان صفحات التحقق من البريد الإلكتروني (مثل شاشة
   "تحقق من بريدك الإلكتروني" بعد التسجيل في register.php) — عنصر بصري رئيسي
   يوضّح فورًا طبيعة الخطوة المطلوبة من المستخدم. */
.verify-hero-icon{
  width:72px; height:72px; margin:0 auto 16px; border-radius:50%;
  background:#E6F6F6; display:flex; align-items:center; justify-content:center;
  font-size:32px; line-height:1;
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
@media (max-width:520px){.grid-2{grid-template-columns:1fr;}}
.hint{font-size:13px; color:var(--muted); margin-top:5px;}

/* Dashboard shell */
.dash-top{
  background:var(--primary);
  color:#fff; padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; row-gap:10px;
}
.dash-top .brand .name{color:#fff;}
.dash-top .user-chip{display:flex; align-items:center; gap:10px; font-size:14px; flex-wrap:wrap;}
.dash-top .logout{color:#fff; opacity:.85; text-decoration:none; font-size:13.5px; border:1px solid rgba(255,255,255,.4); padding:7px 14px; border-radius:8px;}
.dash-top .logout:focus-visible{opacity:1; background:rgba(255,255,255,.1);}
@media (hover:hover) and (pointer:fine){.dash-top .logout:hover{opacity:1; background:rgba(255,255,255,.1);}}

/* هيدر موحَّد بخلفية بيضاء نقية لصفحات لوحات التحكم تحديدًا (dashboards/_topbar.php
   فقط — يُضاف كصنف إضافي "dash-top-app" إلى جانب .dash-top الأساسي، فتبقى
   صفحات الموقع العامة — الرئيسية، تصفّح الدورات... — بخلفيتها المتدرّجة كما
   هي دون أي تغيير). مسطّحة بامتداد كامل العرض مع ظل ناعم بدل التدرّج الداكن. */
.dash-top.dash-top-app{
  background:var(--surface); color:var(--text); padding:18px 28px;
  box-shadow:0 1px 0 var(--line); border-bottom:1px solid var(--line);
  /* الهيدر يمتد الآن فقط فوق "منطقة المحتوى الرئيسية" وليس فوق كامل عرض
     الصفحة — إزاحة بعرض القائمة الجانبية الثابتة (260px، أو 64px عند طيّها)
     بدل امتداده خلفها كما كان يحدث سابقًا. ثابت أعلى الشاشة (sticky) أثناء
     التمرير، كما في لوحات تحكم SaaS القياسية. */
  margin-right:260px; position:sticky; top:0; z-index:30;
  transition:margin-right .18s ease;
}
.dash-top.dash-top-app .brand .name{color:var(--primary);}
.dash-top.dash-top-app .user-chip{color:var(--muted);}
.dash-top.dash-top-app .user-chip > span{color:var(--text); font-weight:600;}
/* مجموعة يمين الهيدر: زر طي القائمة + شعار المنصة + عنوان الصفحة الحالية */
.dash-top-start{display:flex; align-items:center; gap:14px; min-width:0;}
.dash-top-page-title{
  margin:0; font-size:15px; font-weight:800; color:var(--text); white-space:nowrap;
  padding-inline-start:14px; border-inline-start:1px solid var(--line);
  overflow:hidden; text-overflow:ellipsis;
}
/* اسم المستخدم ظاهرًا بجانب الصورة الدائرية ("كارت مستخدم" متكامل)، وزر
   خروج سريع منفصل بجانبه — إضافة إلى القائمة المنسدلة الحالية تحت الصورة
   (الدردشة/الوضع الليلي/البحث السريع) التي تبقى كما هي دون أي حذف. */
.dash-top-user-name{font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap;}
@media (max-width:640px){.dash-top-user-name{display:none;}}
/* يلغي إزاحة الهيدر عن القائمة الجانبية بمجرد تحوّلها إلى عنصر عادي ضمن
   تدفّق الصفحة (غير ثابت) على الجوال — نفس نقطة الانكسار (860px) المستخدَمة
   لقلب القائمة الجانبية من position:fixed إلى position:static أعلاه. */
@media (max-width:860px){
  .dash-top.dash-top-app{margin-right:0; position:static;}
  .dash-top-page-title{display:none;}
}
/* شريط البحث السريع (includes/_global_search.php) مصمَّم أصلًا بألوان شفافة
   بيضاء تناسب الهيدر الداكن في الصفحات العامة فقط — هنا نتجاوز أنماطه
   المضمَّنة (inline، لذا !important ضرورية) ليتناسق مع الهيدر الأبيض الجديد
   في لوحات التحكم تحديدًا، دون أي تعديل في الملف المشترك نفسه. */
.dash-top-app .darbya-search-wrap input{
  border:1px solid var(--line) !important; background:var(--bg) !important; color:var(--text) !important;
}
.dash-top-app .darbya-search-wrap input::placeholder{color:var(--muted); opacity:1;}
.dash-top-icon-btn{
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:10px; width:34px; height:34px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
  text-decoration:none; transition:background .15s, color .15s; margin-inline-end:4px;
}
.dash-top-icon-btn:focus-visible{background:var(--line); color:var(--primary-2);}
@media (hover:hover) and (pointer:fine){.dash-top-icon-btn:hover{background:var(--line); color:var(--primary-2);}}
/* زر خروج سريع ضمن "كارت المستخدم" في الهيدر — بجانب الاسم والصورة، إضافة
   إلى خيار الخروج الموجود أصلًا داخل القائمة المنسدلة (لم يُحذف). */
.dash-top-icon-btn.logout-icon:focus-visible{background:#FCEBEA; color:var(--danger);}
@media (hover:hover) and (pointer:fine){.dash-top-icon-btn.logout-icon:hover{background:#FCEBEA; color:var(--danger);}}

/* صورة المستخدم الدائرية (Avatar) في الهيدر الموحَّد + القائمة المنسدلة تحتها
   (الدردشة، الوضع الليلي، بحث لوحة التحكم، تسجيل الخروج) — تجمع كل الوظائف
   التي كانت أزرارًا متفرّقة في صف واحد طويل، في مكان واحد مرتَّب خلف صورة
   المستخدم، بدل تكرارها في شريط ثانٍ كما كان شريط التنقّل السفلي يفعل. */
.dash-top-avatar-wrap{position:relative;}
.dash-top-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--primary-solid,var(--primary)); color:#fff;
  border:none; cursor:pointer; font-weight:800; font-size:14px; font-family:var(--font-heading);
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.dash-top-avatar:focus-visible{background:var(--primary-2);}
@media (hover:hover) and (pointer:fine){.dash-top-avatar:hover{background:var(--primary-2);}}
.dash-top-avatar-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; width:230px; z-index:1500;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 40px rgba(15,23,42,0.16); padding:8px; text-align:start;
}
.dash-top-avatar-menu-header{display:flex; flex-direction:column; padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.dash-top-avatar-menu-header strong{color:var(--text); font-size:13.5px;}
.dash-top-avatar-menu-header span{color:var(--muted); font-size:13px; margin-top:2px;}
.dash-top-avatar-menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  text-align:start; background:none; border:none; cursor:pointer; text-decoration:none;
  color:var(--text); font-family:inherit; font-size:13px; font-weight:600;
  padding:10px; border-radius:10px; margin:0;
}
@media (hover:hover) and (pointer:fine){ .dash-top-avatar-menu-item:hover{background:var(--bg);} }
.dash-top-avatar-menu-item.danger{color:var(--danger);}
@media (hover:hover) and (pointer:fine){ .dash-top-avatar-menu-item.danger:hover{background:#FCEBEA;} }
.dash-top-avatar-menu-sep{height:1px; background:var(--line); margin:6px 2px;}
.dash-body{padding:32px; max-width:1080px; margin:0 auto;}
@media (max-width:720px){
  .dash-top{padding:14px 16px;}
  .dash-body{padding:18px;}
  .darbya-search-wrap{order:10; width:100%; max-width:none;}
}
/* تحصين إضافي لهيدر لوحات التحكم على الجوال: على الشاشات الضيّقة جدًا قد
   يتسبّب اسم مستخدم طويل + عدة أزرار أيقونات + زر الخروج في خروج بعض
   الأزرار عن حدود الشاشة أو تزاحمها. هنا نُخفي النص غير الضروري (الاسم
   والدور) ونُصغّر زر الخروج ليبقى صفًا واحدًا مضمونًا دائمًا. */
@media (max-width:480px){
  .dash-top .user-chip > span{display:none;}
  .dash-top .logout{padding:6px 10px; font-size:13px;}
  .dash-top{gap:8px; row-gap:8px;}
}
.welcome-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); margin-bottom:20px;}
/* شبكة كروت الإحصائيات: minmax 230px يُنتج 4 أعمدة متساوية عند عرض المحتوى
   المعتاد لصفحات لوحة التحكم (~1024px)، كما في المرجع البصري، دون كسر
   الشبكات الأخرى الأقل عددًا (2-3 كروت) التي تتوزّع ممتدة تلقائيًا. */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:18px; margin-top:18px;}
/* كروت بيضاء مسطَّحة بحدود رفيعة موحَّدة (بدل الشريط العلوي الملوَّن
   السابق) — مظهر أهدأ وأكثر فخامة، متّسق مع بقية بطاقات الواجهة */
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; box-shadow:var(--shadow);}
.stat-card .num{font-size:26px; font-weight:800; color:var(--kpi-num); font-family:var(--font-heading);}
.stat-card .lbl{font-size:13px; color:var(--muted); margin-top:4px;}
/* شبكة كروت KPI: أعمدة مرنة auto-fit (الحد الأدنى 200px) تملأ عرض الصفحة
   بالكامل وتتوزّع تلقائيًا 4 أو 6 أعمدة حسب اتساع الشاشة، كما طُلب تحديدًا؛
   صنف إضافي اختياري فوق .stat-grid، فلا يؤثر على بقية استخدامات .stat-grid
   (بطاقات الدورات، المفضلة...) التي تبقى بعرضها المرن الحالي. */
.darbya-kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr)); gap:20px;
}
/* شبكة بطاقات الدورات في صفحة تصفّح الدورات العامة (courses/browse.php) —
   صنف مخصَّص بدل التنسيق المضمَّن السابق (inline style)، بنفس القيم المطلوبة
   صراحةً: auto-fill بدل auto-fit (يحافظ على عرض أعمدة ثابت 280px حتى مع عدد
   قليل من النتائج بدل تمديدها لملء الصف) وفجوة 20px. */
.darbya-courses-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:20px;
}
/* صنف إضافي لشبكات من 6 كروت تحديدًا (قسم "النظرة العامة" في لوحة الإدارة):
   auto-fit وحدها قد تُنتج 4 أعمدة على عرض سطح مكتب متوسط، فيظهر صف أخير
   بعنصرين فقط (6 = 4+2) بدل التوزيع المتوازن المطلوب. هذا الصنف يفرض عدد
   أعمدة من قواسم 6 فقط (6 أو 3 أو 2 أو 1) حسب اتساع الشاشة، فلا يظهر أي
   صف غير مكتمل أبدًا، مع إبقاء grid-template-columns الأساسي أعلاه كما هو
   لبقية الشبكات (مثل قسم "بانتظار الإجراء" ذي الـ3 كروت، حيث auto-fit
   تعطي توزيعًا متوازنًا تلقائيًا بلا حاجة لتخصيص إضافي). */
.darbya-kpi-grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:1180px){.darbya-kpi-grid-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px){.darbya-kpi-grid-6{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.darbya-kpi-grid, .darbya-kpi-grid-6{grid-template-columns:1fr;}}
/* صنف الدفعة 52: 4 بطاقات رئيسية فقط في الصف الواحد (كما طُلب تحديدًا)،
   بعرض وارتفاع متساويين تمامًا دون أي قصّ أو تمرير أفقي. أي كروت إضافية
   تتجاوز 4 (بيانات حالية لم تُحذف) تنتقل تلقائيًا لصف جديد بنفس المقاس. */
.darbya-kpi-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.darbya-kpi-grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.darbya-kpi-grid-4{grid-template-columns:1fr;}}
/* قائمة "بانتظار الإجراء": صفوف نظيفة بدل كروت KPI — عنصر لكل نوع إجراء
   معلَّق، مع عدد بارز وزر "مراجعة" واضح، وحالة فارغة أنيقة عند عدم وجود
   أي إجراء معلَّق بدل عرض بطاقات بصفر مما قد يوحي بوجود خلل. */
.pending-action-list{display:flex; flex-direction:column; gap:1px; margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line);}
.pending-action-row{display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--surface);}
.pending-action-icon{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(185,151,91,0.14); color:var(--secondary-deep); flex-shrink:0;}
.pending-action-icon svg{width:19px; height:19px;}
.pending-action-label{flex:1; font-weight:700; color:var(--text); font-size:14px;}
.pending-action-count{font-weight:800; font-size:16px; color:var(--secondary-deep); margin-inline-end:4px;}
.pending-action-row .btn{padding:7px 16px; font-size:13px;}
/* كارت KPI تحديدًا (وليس كل .stat-card في الموقع — تلك تبقى بحوافها وظلّها
   الحاليين، مثل بطاقات الدورات): حواف منحنية أوضح (rounded-2xl) وظل ناعم
   جدًا بدل الظل الأقوى العام، وخلفية بيضاء نقية (--surface) صريحة. */
.darbya-kpi-card{border-radius:14px; box-shadow:0 2px 12px rgba(18,55,106,0.05); background:var(--surface);}
/* رقم كارت KPI تحديدًا (وليس كل .stat-card في الموقع — تلك تبقى بلون الهوية
   الأزرق كما هي، مثل سعر الدورة في بطاقاتها) — أكبر وأغمق لإبرازه كبيانات. */
.darbya-kpi-card .num{font-size:28px; font-weight:800; color:var(--kpi-num);}
.badge{display:inline-block; padding:3px 11px; border-radius:20px; font-size:13px; font-weight:700;}
.badge-pending{background:#F7EEDC; color:var(--secondary-deep);}
.badge-active{background:#E3F3F1; color:var(--accent-deep);}
.badge-suspended{background:#F8E9E7; color:var(--danger);}

/* الوضع الليلي: تلقائي حسب تفضيل نظام التشغيل، أو يدوي عبر data-theme (زر
   التبديل في dashboards/_topbar.php + includes/_theme_init.php). القيم هنا
   تتحكم بكل الصفحات لأنها متغيّرات CSS مستخدَمة في كل مكان أعلاه. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:#5B9BD0; --primary-solid:#2B6A94; --primary-deep:#0A1520; --primary-2:#7DB8E0; --secondary:#C9A96A; --secondary-deep:#E0C48F; --accent:#3A7CAA; --accent-deep:#7DB8E0;
    --gold:#D4B67D; --danger:#EF8A80; --danger-solid:#B5473F; --bg:#0F1720; --surface:#17222D; --line:#2A3947;
    --text:#E6EDF2; --muted:#9DB0BC; --input-bg:#0F1720; --shadow:0 8px 24px rgba(0,0,0,0.35);
    --kpi-num:#E6EDF2; --kpi-up:#4FCFA8; --kpi-up-text:#4FCFA8; --kpi-down:#EF8A80;
  }
  :root:not([data-theme="light"]) .alert-error{background:#3A2321; color:#F3A79E; border-color:#5A332F;}
  :root:not([data-theme="light"]) .alert-success{background:#123434; color:#7FE6E6; border-color:#1C4B4B;}
  :root:not([data-theme="light"]) .badge-pending{background:#3A3219; color:#E0B24A;}
  :root:not([data-theme="light"]) .badge-active{background:#123434; color:#7FE6E6;}
  :root:not([data-theme="light"]) .badge-suspended{background:#3A2321; color:#E5786F;}
}
:root[data-theme="dark"] {
  --primary:#5B9BD0; --primary-solid:#2B6A94; --primary-deep:#0A1520; --primary-2:#7DB8E0; --secondary:#C9A96A; --secondary-deep:#E0C48F; --accent:#3A7CAA; --accent-deep:#7DB8E0;
  --gold:#D4B67D; --danger:#EF8A80; --danger-solid:#B5473F; --bg:#0F1720; --surface:#17222D; --line:#2A3947;
  --text:#E6EDF2; --muted:#9DB0BC; --input-bg:#0F1720; --shadow:0 8px 24px rgba(0,0,0,0.35);
  --kpi-num:#E6EDF2; --kpi-up:#4FCFA8; --kpi-up-text:#4FCFA8; --kpi-down:#EF8A80;
}
:root[data-theme="dark"] .alert-error{background:#3A2321; color:#F3A79E; border-color:#5A332F;}
:root[data-theme="dark"] .alert-success{background:#123434; color:#7FE6E6; border-color:#1C4B4B;}
:root[data-theme="dark"] .badge-pending{background:#3A3219; color:#E0B24A;}
:root[data-theme="dark"] .badge-active{background:#123434; color:#7FE6E6;}
:root[data-theme="dark"] .badge-suspended{background:#3A2321; color:#E5786F;}

/* القائمة الجانبية للوحات التحكم (dashboards/_topbar.php): عمود ثابت بعرض
   260px يمتد من أعلى الشاشة لأسفلها على أقصى اليمين (position:fixed)، بدل
   الأسلوب العائم (float) السابق — وهو السبب الفعلي في "انهيار التوزيع"
   الذي أُبلِغ عنه: قاعدة ".dash-sidebar + .dash-body" القديمة كانت تستخدم
   محدِّد "الشقيق المجاور" (+) الذي لا يُطابق فعليًا، لأن عناصر أخرى (لوحة
   البحث السريع Cmd+K وغيرها) تقع بين القائمة الجانبية و.dash-body في الكود
   الفعلي — فكانت هذه القاعدة التصحيحية القديمة لا تُطبَّق إطلاقًا، ويبقى
   .dash-body على توسيطه التلقائي (margin:auto) غير المدرك لوجود القائمة
   الجانبية، فتتزاحم الكروت في مساحة أضيق من المتاحة فعليًا. الإصلاح هنا:
   محدِّد "أي شقيق لاحق" (~) الذي يُطابق بصرف النظر عن عدد العناصر بينهما،
   مع إزاحة صريحة (margin-right) بدل التوسيط التلقائي. النتيجة البصرية
   مطابقة تمامًا لتوزيع CSS Grid بعمودين (260px + 1fr) المطلوب، دون الحاجة
   لتعديل بنية HTML في عشرات ملفات لوحات التحكم. */
/* القائمة الجانبية: كحلي عميق ثابت (بدل الأبيض السابق) — هوية بصرية فاخرة
   مؤسسية، متّسقة بصرف النظر عن الوضع الليلي/النهاري العام للمحتوى (نفس
   مبدأ لوحات تحكم SaaS القياسية: شريط جانبي داكن ثابت + منطقة محتوى فاتحة). */
.dash-sidebar{
  position:fixed; top:0; right:0; bottom:0; width:260px; z-index:40;
  background:var(--primary);
  border-inline-start:none;
  padding:22px 14px; box-shadow:2px 0 18px rgba(8,26,46,0.18); overflow-y:auto;
  transition:width .18s ease;
}
.dash-sidebar summary{display:none; cursor:pointer; font-weight:800; color:#fff; margin-bottom:10px; list-style:none;}
.dash-sidebar summary::-webkit-details-marker{display:none;}
.sidebar-home-link{
  display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; color:#fff;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.14); text-decoration:none;
  padding:11px 14px; border-radius:11px; margin-bottom:18px; text-align:center; font-size:13.5px;
  transition:background .15s;
}
@media (hover:hover) and (pointer:fine){ .sidebar-home-link:hover{background:rgba(255,255,255,0.16);} }
/* كل مجموعة روابط في القائمة الجانبية أصبحت <details> قابلة للطي بنقرة على
   عنوانها (كما طُلب تحديدًا) — مفتوحة افتراضيًا، بسهم صغير يدور عند الطي. */
.sidebar-group{margin:0;}
.sidebar-group-title{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  font-size:13px; font-weight:800; color:rgba(255,255,255,0.62); letter-spacing:.4px;
  margin:22px 10px 10px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);
  list-style:none; user-select:none;
}
.sidebar-group-title::-webkit-details-marker{display:none;}
.sidebar-group:first-of-type .sidebar-group-title{margin-top:0; padding-top:0; border-top:none;}
.sidebar-group-chevron{flex-shrink:0; opacity:.7; transition:transform .15s ease;}
.sidebar-group:not([open]) .sidebar-group-chevron{transform:rotate(-90deg);}
/* عناصر القائمة: نص فاتح شبه-أبيض على الخلفية الكحلية، بمساحة داخلية مريحة */
.sidebar-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:10px; text-decoration:none; color:rgba(255,255,255,0.82);
  font-size:13.5px; font-weight:600; line-height:1.5; margin-bottom:3px;
  transition:background .15s, color .15s;
}
@media (hover:hover) and (pointer:fine){ .sidebar-link:hover{background:rgba(255,255,255,0.08); color:#fff;} }
.sidebar-link.has-alert{color:var(--secondary); font-weight:800;}
@media (hover:hover) and (pointer:fine){ .sidebar-link.has-alert:hover{color:#D7B35C;} }
/* تمييز القسم النشط في القائمة الجانبية (الصفحة الحالية) — يُحدَّد تلقائيًا في
   dashboards/_topbar.php بمقارنة مسار الرابط المحلول بمسار الصفحة الحالية:
   خلفية تركوازية هادئة + مؤشر تركوازي صريح على الحافة الداخلية، كما طُلب. */
.sidebar-link.active{
  background:rgba(10,94,190,0.22); color:#fff; font-weight:800; border-radius:10px;
  box-shadow:inset 3px 0 0 var(--primary-2);
}
.sidebar-link.active.has-alert{color:var(--secondary);}
.sidebar-badge{
  background:var(--secondary); color:var(--primary-deep); font-size:13px; font-weight:800; border-radius:999px;
  padding:1px 7px; min-width:18px; text-align:center; flex-shrink:0;
}
/* منطقة المحتوى الرئيسية: تبدأ دائمًا بعد عرض القائمة الجانبية الثابتة
   (260px فعليًا، 64px عند طيّها عبر body.sidebar-mini) — بلا أي توسيط
   تلقائي يُسبّب الانحصار القديم، وتمتد لتملأ بقية عرض الشاشة بالكامل. */
.dash-sidebar ~ .dash-body{overflow:hidden; margin:0; margin-right:260px; max-width:none; transition:margin-right .18s ease;}
body.sidebar-mini .dash-sidebar ~ .dash-body{margin-right:64px;}
@media (max-width:860px){
  .dash-sidebar{position:static; width:auto; height:auto; margin:16px 16px 0 16px;}
  .dash-sidebar summary{display:block;}
  .dash-sidebar ~ .dash-body{margin:0; max-width:none;}
  body.sidebar-mini .dash-sidebar ~ .dash-body{margin-right:0;}
}

/* زر طي الشريط الجانبي لرموز فقط (Mini-Sidebar): انتقل إلى الهيدر العلوي
   (dashboards/_topbar.php، يمين الصفحة بجانب عنوانها) بدل كونه زرًا صغيرًا
   داخل القائمة نفسها كما كان سابقًا — تماشيًا مع نمط لوحات تحكم SaaS
   القياسية. سطح المكتب فقط (فوق 860px)؛ على الجوال تبقى القائمة بنمط
   "طي كامل/فتح كامل" القائم على <details> كما هي. التفضيل يُحفَظ بـ
   localStorage (راجعي السكربت أسفل dashboards/_topbar.php). */
.sidebar-mini-toggle{display:none; font-size:16px;}
/* أيقونات القائمة الجانبية: خطية موحَّدة (SVG من includes/icons.php، بدل
   الإيموجي السابقة) بحجم ثابت 18px، ترث اللون الحالي (currentColor) فتتبع
   لون النص المجاور تلقائيًا (فاتح عادةً، ذهبي عند has-alert، أبيض عند active). */
.sidebar-icon{flex-shrink:0; display:inline-flex; width:20px; height:20px; justify-content:center; align-items:center; opacity:.92;}
.sidebar-icon svg{width:18px; height:18px;}
@media (min-width:861px){
  .sidebar-mini-toggle{display:inline-flex;}
  .dash-sidebar.mini{width:64px; padding:18px 8px;}
  .dash-sidebar.mini .sidebar-group-title,
  .dash-sidebar.mini .sidebar-text,
  .dash-sidebar.mini .sidebar-badge{display:none;}
  /* القائمة المصغَّرة (رموز فقط): تبقى كل المجموعات مفتوحة دائمًا بصرف النظر
     عن حالة الطي الفردية، لأن عنوان المجموعة (وزر الطي) مخفي أصلًا هنا. */
  .dash-sidebar.mini .sidebar-group > :not(summary){display:flex !important;}
  .dash-sidebar.mini .sidebar-home-link,
  .dash-sidebar.mini .sidebar-link{justify-content:center; padding:10px 4px;}
  body.sidebar-mini .dash-top.dash-top-app{margin-right:64px;}
}

/* لوحة البحث السريع (Cmd+K / Ctrl+K) للقفز الفوري لأي صفحة في لوحة التحكم */
.darbya-cmdk-overlay{
  position:fixed; inset:0; z-index:3000; background:rgba(10,16,22,.5);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh;
}
/* إصلاح حاسم: خاصية "hidden" في HTML تجعل العنصر مخفيًا (display:none) حسب
   تنسيقات المتصفح الافتراضية، لكن القاعدة أعلاه (display:flex) كانت تطغى
   عليها دائمًا بسبب ترتيب أوراق الأنماط — فتظهر لوحة البحث السريع مفتوحة
   بشكل دائم بصرف النظر عن حالة "hidden" الفعلية في الكود، ولا يُجدي إغلاقها
   نفعًا (لا بالنقر خارجها، ولا بزر Esc، ولا بإعادة الضغط على Ctrl/Cmd+K) لأن
   كل هذه الأزرار كانت تُغيّر الخاصية في الكود دون أي أثر بصري ظاهر. هذه
   القاعدة الإضافية (بخصوصية أعلى بسبب إضافة [hidden]) تضمن أن "hidden" تُخفي
   اللوحة فعليًا متى وُجدت. */
.darbya-cmdk-overlay[hidden]{display:none;}
.darbya-cmdk-box{
  width:92%; max-width:520px; background:var(--surface); border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.3); border:1px solid var(--line); overflow:hidden;
}
.darbya-cmdk-box input{
  width:100%; border:none; border-bottom:1px solid var(--line); padding:16px 18px;
  font-size:15px; background:var(--surface); color:var(--text); border-radius:0;
}
.darbya-cmdk-box input:focus{outline:none; box-shadow:none; border-color:var(--line);}
.darbya-cmdk-list{max-height:50vh; overflow-y:auto; padding:6px;}
.darbya-cmdk-item{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none;
  color:var(--text); font-size:13.5px; font-weight:600;
}
.darbya-cmdk-item.active{background:var(--bg); color:var(--primary-2);}
@media (hover:hover) and (pointer:fine){.darbya-cmdk-item:hover{background:var(--bg); color:var(--primary-2);}}
.darbya-cmdk-empty{padding:16px 12px; color:var(--muted); font-size:13px; text-align:center;}

/* كروت الإحصائيات (KPI): رسم اتجاه مصغَّر (Sparkline) + شارة نسبة التغيّر
   — راجعي includes/dashboard_widgets.php (darbya_kpi_card) */
.darbya-kpi-trend{display:flex; align-items:center; gap:8px; margin-top:10px;}
.darbya-sparkline{display:block; flex-shrink:0;}
.darbya-kpi-change{font-size:13px; font-weight:800; padding:2px 7px; border-radius:999px; white-space:nowrap;}
/* شارة الاتجاه الصاعد باللون الأخضر تحديدًا (وليس التركوازي العام --accent
   المستخدَم في badge-active وغيرها) — إشارة نمو واضحة ومنفصلة دلاليًا. */
.darbya-kpi-change.up{background:#ECFDF5; color:var(--kpi-up-text);}
.darbya-kpi-change.down{background:#FCEBEA; color:var(--kpi-down);}
.darbya-kpi-change.flat{background:var(--bg); color:var(--muted);}
:root[data-theme="dark"] .darbya-kpi-change.up{background:#123420;}
:root[data-theme="dark"] .darbya-kpi-change.down{background:#3A2321;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .darbya-kpi-change.up{background:#123420;}
  :root:not([data-theme="light"]) .darbya-kpi-change.down{background:#3A2321;}
}

/* رسالة "لا توجد بيانات" موحّدة برسمة SVG خفيفة — راجعي darbya_empty_state() */
.darbya-empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:36px 16px; color:var(--muted); text-align:center;}
.darbya-empty-state svg{opacity:.45;}
.darbya-empty-state p{margin:0; font-size:13.5px;}

/* تبويبات تصنيف المستخدمين حسب الفئة (admin/users.php) */
.role-tabs{display:flex; flex-wrap:wrap; gap:8px;}
.role-tab{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:999px;
  transition:background .15s, border-color .15s;
}
@media (hover:hover) and (pointer:fine){ .role-tab:hover{border-color:var(--primary-2);} }
.role-tab.active{background:var(--primary-solid,var(--primary)); border-color:var(--primary); color:#fff;}
.role-tab-count{
  background:rgba(0,0,0,0.08); color:inherit; font-size:13px; font-weight:800;
  border-radius:999px; padding:1px 8px; min-width:20px; text-align:center;
}
.role-tab.active .role-tab-count{background:rgba(255,255,255,0.25);}

/* زر عائم للمساعد الذكي (المتاح للزوار بلا تسجيل دخول) — يظهر في كل صفحات
   الموقع العامة التي تتضمّن هذا الملف. ثابت أسفل الصفحة على الجانب الذي
   يبدأ منه النص في الاتجاه من اليمين لليسار (inset-inline-end) ليبقى بجانب
   اليد الأقرب للإبهام على الجوال. */
.ai-chat-fab{
  position:fixed; z-index:1500; bottom:22px; inset-inline-end:22px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; text-decoration:none;
  padding:14px 18px; border-radius:999px; box-shadow:0 10px 28px rgba(10,94,190,0.4);
  font-weight:800; font-size:14px; transition:transform .15s, box-shadow .15s;
}
.ai-chat-fab:focus-visible{
  transform:translateY(-2px); box-shadow:0 14px 34px rgba(10,94,190,0.5); color:#fff;
}
@media (hover:hover) and (pointer:fine){.ai-chat-fab:hover{
  transform:translateY(-2px); box-shadow:0 14px 34px rgba(10,94,190,0.5); color:#fff;
}}
.ai-chat-fab-icon{font-size:20px; line-height:1;}
.ai-chat-fab{border:none; cursor:pointer; font-family:inherit;}
@media (max-width:520px){
  .ai-chat-fab{bottom:16px; inset-inline-end:16px; padding:14px; box-shadow:0 8px 22px rgba(10,94,190,0.4);}
  .ai-chat-fab-text{display:none;} /* على الجوال يبقى زرًا دائريًا بأيقونة فقط لتوفير المساحة */
}

/* لوحة الدردشة المباشرة العائمة (includes/_chat_widget.php) — تفتح فوق
   نفس الصفحة بدل الانتقال لصفحة منفصلة */
.chat-widget-panel{
  position:fixed; z-index:1500; bottom:90px; inset-inline-end:22px;
  width:320px; max-width:calc(100vw - 32px); height:440px; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 16px 40px rgba(0,0,0,0.2); display:flex; flex-direction:column; overflow:hidden;
}
/* سبب خلل "لا يُغلق الدردشة من الجوال أو الكمبيوتر": تحديد display:flex أعلاه
   يُلغي فعليًا تأثير خاصية hidden (التي يضيفها JS عند الإغلاق في
   includes/_chat_widget.php) لأن قاعدة المتصفح الافتراضية [hidden]{display:none}
   لها نفس درجة التحديد (specificity) وتُكتب قبل ملف CSS هذا، فتخسر التعارض —
   هذا السطر يرفع درجة التحديد خصيصًا لحالة hidden ليعمل الإغلاق فعليًا. */
.chat-widget-panel[hidden]{display:none;}
.chat-widget-header{
  background:var(--primary-solid,var(--primary)); color:#fff; padding:12px 14px; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.chat-widget-header button{background:none; border:none; color:#fff; font-size:16px; cursor:pointer; line-height:1; padding:2px 4px;}
.chat-widget-body{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--bg);}
.chat-widget-row{display:flex; max-width:82%;}
.chat-widget-row.is-me{align-self:flex-end;}
.chat-widget-row.is-admin{align-self:flex-start;}
.chat-widget-bubble{padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.6; border:1px solid var(--line); word-break:break-word;}
.chat-widget-warning{margin:0; padding:8px 12px; font-size:13px; line-height:1.6; color:#7a1f1f; background:#fdeaea; border-top:1px solid #c0392b;}
.chat-widget-warning[hidden]{display:none;}
.chat-widget-row.is-me .chat-widget-bubble{background:var(--primary-solid,var(--primary)); color:#fff; border-color:var(--primary);}
.chat-widget-row.is-admin .chat-widget-bubble{background:var(--surface); color:var(--text);}
.chat-widget-form{display:flex; gap:6px; padding:10px; border-top:1px solid var(--line); background:var(--surface);}
.chat-widget-form input[type="text"]{
  flex:1; font-size:13px; padding:9px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--input-bg); color:var(--text); font-family:inherit;
}
.chat-widget-form button{
  background:var(--accent); color:#fff; border:none; width:38px; height:38px; border-radius:50%;
  cursor:pointer; font-size:15px; flex-shrink:0;
}
@media (max-width:520px){
  .chat-widget-panel{bottom:78px; inset-inline-end:16px; width:calc(100vw - 32px);}
}

/* ===================================================================
   إتاحة الوصول (WCAG 2.1) — حد أدنى لمساحة اللمس على الجوال (44×44px تقريبًا)
   لكل الأزرار وعناصر الإدخال التفاعلية، دون تغيير الشكل البصري على الشاشات
   الكبيرة. أكثر من 70% من تصفّح المنصة متوقّع أن يكون عبر الهاتف.
   =================================================================== */
.btn, button, input[type=submit], input[type=button]{min-height:44px;}
.btn-sm{min-height:38px;}
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=url], select{min-height:44px;}
input[type=checkbox], input[type=radio]{min-width:18px; min-height:18px;}
a.logout, .role-tab, .lms-lesson-link{min-height:40px; display:inline-flex; align-items:center;}
@media (max-width:520px){
  .btn, button, input[type=submit], input[type=button]{min-height:46px;}
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=number], input[type=date], input[type=url], select, textarea{font-size:16px;}
}

/* ===================================================================
   إعادة تصميم الصفحة الرئيسية (home.php): بطاقات إحصائيات بأيقونات،
   بطاقات تخصصات تفاعلية، وبطاقات دورات بصورة بارزة وزر دعوة لإجراء —
   كل الأنماط هنا مبنية على متغيّرات الهوية البصرية أعلاه (--primary،
   --secondary، --accent) فتتوافق تلقائيًا مع الوضع الليلي.
   =================================================================== */

/* --- قسم الإحصائيات (Stats) --- */
.stats-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:600px; margin:28px auto 0;
}
.stat-pill{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px 14px; text-align:center; box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s;
}
@media (hover:hover) and (pointer:fine){ .stat-pill:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(18,55,106,0.14);} }
.stat-pill .icon{font-size:30px; line-height:1; margin-bottom:8px;}
.stat-pill .num{font-size:26px; font-weight:800; color:var(--primary); font-family:var(--font-heading);}
.stat-pill .lbl{font-size:13px; color:var(--muted); margin-top:4px;}
@media (max-width:520px){
  .stats-row{gap:10px;}
  .stat-pill{padding:16px 8px;}
  .stat-pill .icon{font-size:24px;}
  .stat-pill .num{font-size:20px;}
  .stat-pill .lbl{font-size:13px;}
}

/* --- قسم التصنيفات (Categories) --- */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:14px;
}
.cat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 14px; text-align:center; text-decoration:none; color:inherit;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.cat-card:focus-visible{
  transform:translateY(-4px); border-color:var(--primary-2);
  box-shadow:0 14px 30px rgba(18,55,106,0.16);
}
@media (hover:hover) and (pointer:fine){.cat-card:hover{
  transform:translateY(-4px); border-color:var(--primary-2);
  box-shadow:0 14px 30px rgba(18,55,106,0.16);
}}
@media (max-width:640px){
  /* شريط أفقي قابل للسحب بإطلالة جزئية (Peek) على البطاقة التالية، بدل شبكة
     رأسية طويلة — يلمّح للمستخدم أن هناك تخصصات أخرى يمكن تمريرها */
  .cat-grid{
    display:flex; grid-template-columns:unset; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:10px; padding-bottom:4px; margin:0 -28px; padding-inline:28px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cat-grid::-webkit-scrollbar{display:none;}
  .cat-grid .cat-card{flex:0 0 40%; scroll-snap-align:start; padding:16px 10px;}
}
/* --- شارات الأيقونات الدائرية (تحل محل الإيموجيات في كل البطاقات) --- */
.icon-badge{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(18,55,106,0.08); color:var(--primary); margin:0 auto 12px; flex-shrink:0;
}
.cat-card .icon-badge{width:50px; height:50px; margin-bottom:10px;}
.value-card .icon-badge{background:rgba(185,151,91,0.12); color:var(--secondary-deep);}
.cat-icon{font-size:32px; line-height:1; margin-bottom:10px;}
.cat-name-ar{font-weight:800; font-size:14px; color:var(--text); font-family:var(--font-heading);}
.cat-name-en{
  font-size:13px; color:var(--muted); font-family:var(--font-en);
  margin-top:2px; text-transform:uppercase; letter-spacing:.04em;
}
.cat-count{font-size:13px; color:var(--primary-2); margin-top:10px; font-weight:700;}

/* --- بطاقات الدورات (Course Cards) --- */
.course-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:20px;
}
.course-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s;
}
.course-card:focus-visible{
  transform:translateY(-5px); box-shadow:0 18px 36px rgba(18,55,106,0.18);
}
@media (hover:hover) and (pointer:fine){.course-card:hover{
  transform:translateY(-5px); box-shadow:0 18px 36px rgba(18,55,106,0.18);
}}
.course-card-img{
  position:relative; padding-top:56%; overflow:hidden;
  background:var(--primary);
}
.course-card-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .3s;
}
@media (hover:hover) and (pointer:fine){ .course-card:hover .course-card-img img{transform:scale(1.05);} }
.course-card-img .placeholder-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:42px; color:rgba(255,255,255,.9);
}
.course-card-badges{
  position:absolute; top:10px; inset-inline-start:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.course-card-badge{
  display:inline-flex; align-items:center; gap:4px; background:rgba(185,151,91,0.12); color:var(--secondary-deep);
  border:1px solid var(--secondary-deep); font-size:13px; font-weight:800; padding:4px 9px; border-radius:999px;
  backdrop-filter:blur(2px);
}
.course-card-badge-featured{background:rgba(185,151,91,0.12); color:var(--secondary-deep); border-color:var(--secondary-deep);}
.course-card-badge-verified{background:rgba(10,94,190,0.12); color:var(--accent-deep); border-color:var(--accent);}
.course-card-rating-chip{
  position:absolute; top:10px; inset-inline-end:10px; display:inline-flex; align-items:center; gap:4px;
  background:rgba(0,0,0,0.55); color:#fff; font-size:13px; font-weight:800; padding:4px 9px; border-radius:999px;
}
.course-card-price-chip{
  background:rgba(18,55,106,0.08); padding:4px 10px; border-radius:8px;
}
.course-card-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
.course-card-title{
  font-weight:800; font-size:15.5px; color:var(--text); line-height:1.45;
  margin-bottom:8px; font-family:var(--font-heading);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.course-card-meta{
  font-size:13px; color:var(--muted); margin-bottom:4px;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.course-card-footer{
  margin-top:auto; padding-top:14px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; border-top:1px dashed var(--line);
}
.course-card-price{font-weight:800; font-size:16.5px; color:var(--primary); font-family:var(--font-heading);}
.course-card-cta{
  background:var(--secondary); color:var(--primary-deep); font-size:13px; font-weight:800;
  padding:9px 16px; border-radius:8px; white-space:nowrap; transition:background .15s;
}
@media (hover:hover) and (pointer:fine){ .course-card:hover .course-card-cta{background:var(--secondary-deep);} }

/* ===================================================================
   لمسات تحويل إضافية على الصفحة الرئيسية (home.php): قسم بطل ثنائي العمود
   بوسائط بصرية، فلاتر بحث سريعة، بطاقات قيمة "لماذا دربيا؟"، أوسمة ثقة
   أبرز، شهادات متدربين حقيقية، وشريط إجراء ثابت على الجوال.
   =================================================================== */

/* --- بنرات الصفحة الرئيسية الترويجية (admin/homepage-content.php) --- */
.darbya-promo-banners{position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:16px;}
.darbya-promo-slide{position:relative;}
.darbya-promo-link{display:block; text-decoration:none; color:inherit;}
.darbya-promo-img{width:100%; max-height:260px; object-fit:cover; display:block;}
.darbya-promo-caption{position:absolute; inset-inline-start:0; bottom:0; width:100%; padding:18px 24px; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent); color:#fff;}
.darbya-promo-title{font-weight:800; font-size:19px;}
.darbya-promo-subtitle{font-size:13.5px; opacity:.9; margin-top:2px;}
.darbya-promo-cta{display:inline-block; margin-top:8px; padding:6px 16px; border-radius:20px; background:var(--primary-2); font-size:13px; font-weight:700;}
.darbya-promo-dots{position:absolute; bottom:10px; inset-inline-end:16px; display:flex; gap:6px;}
.darbya-promo-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer;}
.darbya-promo-dot.active{background:#fff;}

/* --- قسم البطل ثنائي العمود --- */
.hero-card{padding:0; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; min-height:420px;}
.hero-text{padding:40px 36px; display:flex; flex-direction:column; justify-content:center;}
.hero-search-form{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.hero-search-main{flex:1 1 220px; min-width:0;}
.hero-search-filters{display:flex; gap:8px; flex:1 1 260px;}
.hero-search-filters select{flex:1; min-width:0;}
.hero-search-btn{width:auto; margin:0; padding:12px 26px; font-size:15.5px; flex-shrink:0; box-shadow:0 8px 20px rgba(185,151,91,0.3);}
.hero-cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;}
.hero-secondary-cta{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--primary);
  background:rgba(18,55,106,0.06); border:1px solid rgba(18,55,106,0.15); border-radius:999px;
  padding:9px 16px; font-size:13px; font-weight:700; transition:.15s;
}
@media (hover:hover) and (pointer:fine){ .hero-secondary-cta:hover{background:rgba(18,55,106,0.12); transform:translateY(-1px);} }
.hero-text .stats-row{margin:0; max-width:none;}

.hero-visual{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--primary);
}
.hero-visual-blob{position:absolute; border-radius:50%; filter:blur(36px); opacity:.35;}
.hero-visual-blob-1{width:220px; height:220px; background:var(--accent); top:-40px; inset-inline-end:-50px;}
.hero-visual-blob-2{width:200px; height:200px; background:var(--secondary); bottom:-60px; inset-inline-start:-50px;}
.hero-visual-svg{width:78%; max-width:300px; position:relative; z-index:1;}
.hero-visual-chip{
  position:absolute; z-index:2; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(4px); color:#fff; font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px;
}
.hero-visual-chip-1{top:18%; inset-inline-start:8%;}
.hero-visual-chip-2{bottom:16%; inset-inline-end:10%;}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-text{padding:28px 22px;}
  /* على الجوال يتكدّس المحتوى رأسيًا وقد يتجاوز الارتفاع الأدنى، فنُلغي القص
     على مستوى البطاقة كاملة حتى لا يُقتطع زر "استكشف المسارات التدريبية"
     أو غيره، ونُبقي القص على الرسمة التوضيحية وحدها لحواف سفلية دائرية */
  .hero-card{overflow:visible; border-radius:var(--radius);}
  .hero-visual{min-height:220px; overflow:hidden; border-radius:0 0 var(--radius) var(--radius);}
}

/* --- قسم "لماذا دربيا؟" --- */
.value-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:16px;}
.value-card{
  text-align:center; padding:22px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); transition:transform .15s, box-shadow .15s;
}
@media (hover:hover) and (pointer:fine){ .value-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);} }
.value-title{font-weight:800; font-size:14.5px; color:var(--text); margin-bottom:6px; font-family:var(--font-heading);}
.value-desc{font-size:13px; color:var(--muted); line-height:1.7;}
@media (max-width:640px){
  /* عمودان بدل التكديس الرأسي الكامل، وحشو أقل لتقصير طول الصفحة على الجوال */
  .value-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .value-card{padding:14px 10px;}
  .value-card .icon-badge{width:44px; height:44px; margin-bottom:8px;}
  .value-title{font-size:13px;}
  .value-desc{font-size:13px; line-height:1.55;}
}

/* --- أوسمة الثقة والاعتماد --- */
.trust-badges-row{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
.trust-badge{
  display:flex; flex-direction:column; align-items:center; gap:4px; min-width:150px;
  border:1.5px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--surface);
}
.trust-badge-seal{color:var(--gold); display:flex; align-items:center; justify-content:center;}
.trust-badge-num{font-size:22px; font-weight:800; color:var(--primary); font-family:var(--font-heading);}
.trust-badge-label{font-size:13px; color:var(--muted); line-height:1.6;}
.trust-badge-label strong{color:var(--text);}

/* --- شهادات المتدربين (آراء حقيقية) --- */
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:16px;}
@media (max-width:720px){
  /* نفس أسلوب "التمرير الأفقي بإطلالة جزئية" المستخدم في قسم التصنيفات،
     مطبَّق هنا على كاروسيل آراء المتدربين بدل شبكة رأسية طويلة على الجوال */
  .testimonial-grid-scroll{
    display:flex; grid-template-columns:unset; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:12px; padding-bottom:4px; margin:0 -18px; padding-inline:18px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .testimonial-grid-scroll::-webkit-scrollbar{display:none;}
  .testimonial-grid-scroll .testimonial-card{flex:0 0 86%; scroll-snap-align:start;}
}
.testimonial-card{
  border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--surface);
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.testimonial-stars{color:var(--secondary-deep); font-size:14px; margin-bottom:8px;}
.testimonial-comment{font-size:13.5px; color:var(--text); line-height:1.8; flex:1; margin:0 0 14px;}
.testimonial-person{display:flex; align-items:center; gap:10px;}
.testimonial-avatar{
  width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.testimonial-avatar-fallback{
  display:flex; align-items:center; justify-content:center; background:var(--primary-solid,var(--primary)); color:#fff;
  font-weight:800; font-size:16px; font-family:var(--font-heading);
}
.testimonial-name{font-weight:800; font-size:13px; color:var(--text);}
.testimonial-course{font-size:13px; color:var(--muted);}

/* --- شريط الإجراء الثابت على الجوال --- */
.sticky-cta-bar{
  display:none; position:fixed; bottom:0; inset-inline:0; z-index:1400;
  background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.08);
  padding:10px 14px; gap:10px;
}
.sticky-cta-btn{
  flex:1; text-align:center; text-decoration:none; font-weight:800; font-size:13.5px;
  padding:12px 10px; border-radius:10px;
}
.sticky-cta-btn-outline{background:transparent; color:var(--primary); border:1.5px solid var(--primary);}
.sticky-cta-btn-filled{background:var(--secondary); color:var(--primary-deep);}
@media (max-width:640px){
  .sticky-cta-bar{display:flex;}
  .dash-body{padding-bottom:86px;}
  /* رفع فقاعة الدردشة ولوحتها فوق الشريط الثابت الجديد بدل التداخل معه فوق
     زر "إنشاء حساب مجاني" */
  .ai-chat-fab{bottom:78px;}
  .chat-widget-panel{bottom:148px;}
}

/* ===================================================================
   الشريط العلوي الموحّد لصفحات الموقع العامة (includes/_public_navbar.php)
   — خلفية بيضاء ثابتة (sticky) بظل خفيف، شعار يمين/روابط وسط/حساب يسار،
   قوائم منسدلة عند التحويم، وشريط بحث مصغّر يُفتح بأيقونة عدسة.
   =================================================================== */
.site-navbar{
  position:sticky; top:0; z-index:1200; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px); -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(18,55,106,0.04);
  transition:box-shadow .2s;
}
.site-navbar.is-scrolled{box-shadow:0 6px 18px rgba(18,55,106,0.10);}
:root[data-theme="dark"] .site-navbar{background:rgba(26,36,46,.94);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-navbar{background:rgba(26,36,46,.94);}
}
.site-navbar-inner{
  max-width:1180px; margin:0 auto; padding:12px 28px; display:flex;
  align-items:center; justify-content:space-between; gap:18px;
}
.brand-link{text-decoration:none; flex-shrink:0;}
.brand-link .name{display:flex; flex-direction:column; line-height:1.15;}
.brand-link .name-en{font-size:13px; font-weight:600; color:var(--muted); font-family:var(--font-en); letter-spacing:.03em;}

.site-nav-links{display:flex; align-items:center; gap:6px; flex:1; justify-content:center;}
.nav-item{position:relative;}
.nav-item > a{
  display:flex; align-items:center; gap:4px; text-decoration:none; color:var(--text);
  font-weight:700; font-size:14px; padding:10px 14px; border-radius:8px; transition:background .15s, color .15s;
}
.nav-item:focus-within > a{background:var(--bg); color:var(--primary-2);}
@media (hover:hover) and (pointer:fine){.nav-item > a:hover,.nav-item:hover > a{background:var(--bg); color:var(--primary-2);}}
.nav-caret{font-size:13px; color:var(--muted); transition:transform .15s;}
.nav-item:focus-within .nav-caret{transform:rotateX(180deg);}
@media (hover:hover) and (pointer:fine){.nav-item:hover .nav-caret{transform:rotateX(180deg);}}
.nav-dropdown{
  position:absolute; top:100%; inset-inline-start:0; margin-top:4px; min-width:210px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 32px rgba(18,55,106,0.16); padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s, transform .15s, visibility .15s;
  z-index:1210; max-height:320px; overflow-y:auto;
}
.nav-item:focus-within .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0);}
@media (hover:hover) and (pointer:fine){.nav-item:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0);}}
.nav-dropdown a{
  text-decoration:none; color:var(--text); font-size:13.5px; font-weight:600;
  padding:9px 12px; border-radius:8px; transition:background .12s;
}
@media (hover:hover) and (pointer:fine){ .nav-dropdown a:hover{background:var(--bg); color:var(--primary-2);} }

.site-nav-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.nav-icon-btn{
  background:none; border:1px solid var(--line); color:var(--text); border-radius:9px;
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, transform .15s;
}
.nav-icon-btn:focus-visible{background:var(--bg); border-color:var(--primary-2); transform:translateY(-1px);}
@media (hover:hover) and (pointer:fine){.nav-icon-btn:hover{background:var(--bg); border-color:var(--primary-2); transform:translateY(-1px);}}
.btn-nav{
  text-decoration:none; font-weight:800; font-size:13.5px; padding:9px 18px; border-radius:9px;
  white-space:nowrap; transition:background .15s, color .15s, transform .15s, border-color .15s;
}
.btn-nav-outline{background:transparent; color:var(--primary); border:1.5px solid var(--primary);}
@media (hover:hover) and (pointer:fine){ .btn-nav-outline:hover{background:rgba(18,55,106,0.06); transform:translateY(-1px);} }
.btn-nav-filled{background:var(--secondary); color:var(--primary-deep); border:1.5px solid var(--secondary);}
.nav-login-compact{
  display:none; text-decoration:none; font-weight:800; font-size:13px; color:var(--primary);
  padding:8px 14px; white-space:nowrap; border:1.5px solid var(--primary); border-radius:9px;
} /* نفس شكل الزر المحدَّد (outline) على سطح مكتب لكن بحجم مضغوط، لتناسق بصري مع زر "إنشاء حساب" المعبّأ بجانبه */
@media (hover:hover) and (pointer:fine){ .btn-nav-filled:hover{background:#C9AB72; border-color:#C9AB72; transform:translateY(-1px);} }

.nav-burger{
  display:none; background:none; border:1px solid var(--line); border-radius:9px;
  width:40px; height:40px; font-size:18px; color:var(--text); cursor:pointer;
}

/* شريط البحث المصغَّر المنسدل — يعيد استخدام includes/_global_search.php لكنه
   يفرض له مظهرًا فاتحًا يناسب خلفية الشريط البيضاء (الملف الأصلي مصمَّم أصلًا
   لخلفية داكنة بستايل داخلي inline، لذا نتجاوزه هنا بأهمية !important) */
.nav-search-panel{
  max-height:0; overflow:hidden; transition:max-height .2s ease, padding .2s ease;
  background:var(--bg); border-bottom:1px solid transparent;
}
.nav-search-panel.is-open{max-height:80px; padding:12px 28px; border-bottom-color:var(--line);}
.nav-search-panel .darbya-search-wrap{max-width:520px !important; width:100%; margin:0 auto;}
.nav-search-panel .darbya-search-wrap input{
  background:var(--input-bg) !important; border:1px solid var(--line) !important;
  color:var(--text) !important; font-size:14px !important; padding:10px 14px !important;
}

.site-nav-mobile{display:none; flex-direction:column; padding:6px 16px 14px; border-top:1px solid var(--line); background:var(--surface);}
.site-nav-mobile.is-open{display:flex;}
.site-nav-mobile a{text-decoration:none; color:var(--text); font-weight:700; font-size:14.5px; padding:11px 6px; border-bottom:1px solid var(--line);}
.site-nav-mobile a:last-child{border-bottom:none;}

@media (max-width:900px){
  .site-nav-links{display:none;}
  .nav-burger{display:inline-flex; align-items:center; justify-content:center;}
  .btn-nav-outline{display:none;}
  .nav-login-compact{display:inline-flex; align-items:center;}
  /* الأيقونات الثانوية (البحث/المفضلة/الوضع الليلي) تنتقل إلى قائمة ☰ على
     الجوال بدل ازدحام الشريط العلوي — تبقى متاحة من القائمة المنسدلة فقط */
  .nav-icon-fav, .nav-icon-theme{display:none;}
}
@media (max-width:560px){
  .site-navbar-inner{padding:10px 12px; gap:6px; flex-wrap:nowrap;}
  /* شبكة احترازية: إن ضاق العرض عن المتوقع تلتف العناصر لسطر ثانٍ بدل أن
     تُقصّ وتخرج عن حدود الشاشة (بدل overflow غير مرئي) */
  .site-navbar-inner{flex-wrap:wrap; row-gap:8px;}
  .brand-link .name{font-size:14px;}
  .brand-link .name-en{display:none;}
  .nav-icon-search{display:none;} /* تُستبدل بالبحث داخل القائمة ☰ على أضيق الشاشات */
  .site-nav-actions{gap:6px;}
  .btn-nav{padding:8px 13px; font-size:13px;}
  .nav-login-compact{padding:7px 10px; font-size:13px;}
  .nav-search-panel.is-open{padding:10px 14px;}
}

/* ===================================================================
   صفحة إنشاء الحساب (register.php) — تصميم شاشة مقسومة (Split Screen):
   لوحة بصرية تحفيزية على اليسار + نموذج على اليمين، بطاقات نوع حساب
   تفاعلية، حقول بأيقونات، مؤشّر خطوتين، وملاحظة خصوصية واضحة.
   =================================================================== */
.auth-split{min-height:100vh; min-height:100dvh; display:flex; background:var(--bg);}
.auth-visual{
  flex:0 0 42%; position:relative; overflow:hidden; display:flex; align-items:center;
  background:var(--primary);
  padding:48px; color:#fff;
}
.auth-visual-blob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.35;}
.auth-visual-blob-1{width:340px; height:340px; background:var(--accent); top:-80px; inset-inline-end:-100px;}
.auth-visual-blob-2{width:280px; height:280px; background:var(--secondary); bottom:-100px; inset-inline-start:-80px;}
.auth-visual-content{position:relative; z-index:1; max-width:420px;}
.auth-visual .brand .logo{background:#fff; color:var(--primary);}
.auth-visual-logo-link{display:inline-block;}
.auth-visual-logo{
  width:118px; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,.15);
}
.auth-visual-title{
  font-family:var(--font-heading); font-size:28px; font-weight:800; line-height:1.4;
  margin:32px 0 14px;
}
.auth-visual-sub{font-size:14.5px; line-height:1.9; color:rgba(255,255,255,.85); margin:0 0 28px;}
.auth-visual-stats{display:flex; flex-direction:column; gap:12px;}
.auth-visual-stat{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:12px 16px;
  font-size:14px; font-weight:700; backdrop-filter:blur(4px);
}
.auth-form-side{flex:1; display:flex; flex-direction:column; align-items:center; padding:40px 24px;}
.auth-form-inner{width:100%; max-width:560px; margin:auto 0;}
@media (max-width:900px){
  .auth-visual{display:none;}
  .auth-form-side{padding:28px 16px;}
}

/* مؤشّر الخطوتين */
.reg-steps-indicator{display:flex; align-items:center; gap:8px; margin-bottom:22px;}
.reg-step-dot{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted);
  flex:1;
}
.reg-step-dot span{
  width:24px; height:24px; border-radius:50%; background:var(--line); color:var(--text);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0;
  transition:background .2s, color .2s;
}
.reg-step-dot.active{color:var(--primary);}
.reg-step-dot.active span{background:var(--primary-solid,var(--primary)); color:#fff;}
.reg-step-line{flex:0 0 40px; height:2px; background:var(--line); margin-top:-16px;}
@media (max-width:480px){
  .reg-step-dot{font-size:0;}
  .reg-step-dot span{font-size:13px;}
}

/* بطاقات اختيار نوع الحساب */
.role-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:8px 0 18px;}
.role-option{
  position:relative; border:1.5px solid var(--line); border-radius:14px; padding:16px 12px;
  text-align:center; cursor:pointer; transition:.15s; display:flex; flex-direction:column;
  align-items:center; gap:2px; background:var(--surface);
}
@media (hover:hover) and (pointer:fine){ .role-option:hover{border-color:var(--primary-2); box-shadow:0 6px 16px rgba(18,55,106,0.08);} }
.role-option input{display:none;}
.role-option-icon{
  width:44px; height:44px; border-radius:50%; background:var(--bg); display:flex;
  align-items:center; justify-content:center; font-size:22px; margin-bottom:6px; transition:background .15s;
}
.role-option-label{font-size:13.5px; font-weight:800; color:var(--text);}
.role-option-desc{font-size:13px; color:var(--muted); margin-top:2px; line-height:1.4;}
.role-option.active{
  border-color:var(--secondary); background:rgba(185,151,91,0.06);
  box-shadow:0 0 0 3px rgba(185,151,91,0.14);
}
.role-option.active .role-option-icon{background:var(--secondary); }
.role-option.active .role-option-label{color:var(--secondary-deep);}

/* حقول بأيقونة داخلية */
.input-icon-wrap{position:relative;}
.input-icon-wrap .input-icon{
  position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:12px;
  font-size:14.5px; pointer-events:none; opacity:.8;
}
.input-icon-wrap input{padding-inline-start:36px;}

/* أزرار الدخول السريع */
.social-login-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:8px; margin-bottom:6px;}
.social-btn{
  display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
  font-weight:700; font-size:13px; margin-top:0; position:relative;
}
.social-btn.is-disabled{opacity:.9; cursor:pointer;}
.soon-badge{
  font-size:9.5px; font-weight:800; background:rgba(0,0,0,.28); padding:1px 6px;
  border-radius:999px; margin-inline-start:4px;
}

/* ملاحظة الخصوصية */
.privacy-note{
  display:flex; align-items:flex-start; gap:10px; background:var(--bg); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; font-size:13px; color:var(--muted); line-height:1.8; margin:14px 0;
}
.privacy-note-icon{font-size:16px; flex-shrink:0;}
.privacy-note strong{color:var(--text);}

/* ===================================================================
   تحديثات بصرية حديثة — CSS صرف بدون أي مكتبة خارجية: زجاجية للعناصر
   العائمة، وتفاعلات دقيقة (micro-interactions) على البطاقات والأزرار.
   كلها تدرّجية (progressive) ولا تغيّر أي تخطيط قائم — @supports تحمي
   المتصفحات القديمة التي لا تدعم backdrop-filter فتبقى بالشكل الحالي.
   =================================================================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chat-widget-panel, .darbya-search-wrap > div[id$="-results"]{
    background:color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
  }
}

/* رفع خفيف وظل أوضح عند المرور على البطاقات التفاعلية — إحساس أكثر حيوية
   دون أي تغيير في الحجم أو المساحة المحجوزة (transform لا يزيح العناصر المجاورة) */
.stat-card, .welcome-card, .cat-card, .value-card, .darbya-badge-card, .darbya-leaderboard-row{
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine){ .stat-card:hover, .cat-card:hover, .value-card:hover, .darbya-badge-card.earned:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
} }

/* انضغاط خفيف عند الضغط الفعلي على أي زر — ملموس على الجوال خصوصًا */
.btn, .btn-nav, .btn-outline, .btn-secondary, .btn-danger{
  transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:active, .btn-nav:active, .btn-outline:active, .btn-secondary:active, .btn-danger:active{
  transform:scale(0.97);
}

/* تمييل ثلاثي الأبعاد خفيف جدًا لصور بطاقات الدورات عند المرور — بديل خفيف
   الوزن عن محركات العرض ثلاثية الأبعاد (Three.js وما شابه)، التي تُستبعد
   عمدًا لأنها تُبطئ التصفح على بيانات الجوال */
.course-card img, .placeholder-icon{
  transition:transform .25s ease;
}
@media (hover:hover) and (pointer:fine){ .course-card:hover img{
  transform:scale(1.04) perspective(600px) rotateX(1deg);
} }

@media (prefers-reduced-motion: reduce){
  .stat-card, .welcome-card, .cat-card, .value-card, .darbya-badge-card, .darbya-leaderboard-row,
  .btn, .btn-nav, .btn-outline, .btn-secondary, .btn-danger, .course-card img, .placeholder-icon{
    transition:none !important;
  }
  .btn:active{
    transform:none !important;
  }
@media (hover:hover) and (pointer:fine){.stat-card:hover,.cat-card:hover,.value-card:hover,.course-card:hover img{
    transform:none !important;
  }}
}

/* شريط "شركاء النجاح" المتحرك (home.php) — تمرير أفقي لا نهائي بـ CSS صافٍ،
   بدون أي مكتبة خارجية. القائمة مكرَّرة مرتين في HTML لإتاحة حلقة سلسة. */
.darbya-ticker-card{overflow:hidden;}
.darbya-logo-ticker{overflow:hidden; -webkit-mask-image:linear-gradient(to left, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);}
.darbya-logo-ticker-track{display:flex; align-items:center; gap:40px; width:max-content; animation:darbya-ticker-scroll 28s linear infinite;}
.darbya-logo-ticker-item{flex-shrink:0; height:48px; display:flex; align-items:center; filter:grayscale(1); opacity:.6; transition:filter .2s, opacity .2s;}
@media (hover:hover) and (pointer:fine){ .darbya-logo-ticker-item:hover{filter:grayscale(0); opacity:1;} }
.darbya-logo-ticker-item img{height:100%; width:auto; max-width:140px; object-fit:contain;}
@keyframes darbya-ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(50%);}
}
@media (prefers-reduced-motion: reduce){
  .darbya-logo-ticker-track{animation:none;}
}

/* صفحة تفاصيل الدورة (courses/view.php): تخطيط عمودين — المحتوى + كارت شراء
   جانبي "عائم" يبقى ثابتًا أثناء التمرير على الشاشات الكبيرة. على الجوال
   يظهر كارت الشراء أولًا (قبل المحتوى الطويل) بدل أن يكون عائمًا فوق الشاشة،
   لإبقاء السعر وزر التسجيل مرئيَين مبكرًا دون حجب المحتوى. */
.course-detail-layout{
  display:grid; grid-template-areas:"sidebar" "main"; gap:20px; align-items:start;
}
.course-detail-main{grid-area:main; min-width:0;}
.course-detail-sidebar{grid-area:sidebar; min-width:0;}
@media (min-width:981px){
  .course-detail-layout{grid-template-areas:"main sidebar"; grid-template-columns:1.6fr 1fr;}
  .course-detail-sidebar{position:sticky; top:20px;}
}
.course-purchase-card{padding:22px;}
.course-purchase-price{font-size:30px; font-weight:800; color:var(--primary); font-family:var(--font-heading);}
.course-purchase-price span{font-size:15px; font-weight:700; color:var(--muted);}
.course-purchase-facts{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; border-top:1px solid var(--line); padding-top:14px;}
.course-purchase-facts li{font-size:13.5px; color:var(--text);}

/* "منهج الدورة" (ماذا ستتعلّم؟) بأسلوب قائمة منسدلة أنيقة بدل عرضها مفتوحة دائمًا */
.course-curriculum-accordion summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; margin:0;
}
.course-curriculum-accordion summary::-webkit-details-marker{display:none;}
.course-curriculum-accordion summary::before{
  content:'›'; display:inline-block; font-size:20px; font-weight:800; color:var(--muted);
  transform:rotate(90deg); transition:transform .18s ease;
}
.course-curriculum-accordion[open] summary::before{transform:rotate(-90deg);}
.course-curriculum-count{
  background:var(--bg); color:var(--muted); font-size:13px; font-weight:800;
  border-radius:999px; padding:2px 9px; margin-inline-start:auto;
}

/* "درج" تصفية قابل للطي لنموذج البحث في صفحة تصفّح الدورات (courses/browse.php) —
   نفس أسلوب <details>/<summary> المستخدَم في .dash-sidebar: يبقى مفتوحًا دومًا
   وبدون زر طيّ على سطح المكتب (حيث توجد مساحة كافية لعرض كل الفلاتر أفقيًا)،
   ويظهر كزر قابل للنقر للطي/الفتح على الجوال فقط لتوفير مساحة الشاشة. */
.filter-drawer summary{
  display:none; cursor:pointer; font-weight:800; color:var(--primary);
  margin-bottom:4px; list-style:none;
}
.filter-drawer summary::-webkit-details-marker{display:none;}
@media (max-width:760px){
  .filter-drawer summary{display:flex; align-items:center;}
}

/* جدول قابل للتحويل لكروت على الجوال — أضيفي class="darbya-rtable" لأي جدول
   (راجعي السكربت في dashboards/_topbar.php الذي يملأ data-label تلقائيًا) */
@media (max-width:760px){
  table.darbya-rtable.rtable-ready thead{display:none;}
  table.darbya-rtable.rtable-ready, table.darbya-rtable.rtable-ready tbody, table.darbya-rtable.rtable-ready tr, table.darbya-rtable.rtable-ready td{display:block; width:100% !important; min-width:0 !important;}
  table.darbya-rtable.rtable-ready{border-collapse:separate !important; border-spacing:0;}
  table.darbya-rtable.rtable-ready tr{
    background:var(--surface); border:1px solid var(--line) !important; border-radius:12px;
    margin-bottom:12px; padding:10px 14px; box-shadow:var(--shadow);
  }
  table.darbya-rtable.rtable-ready td{
    border:none !important; border-bottom:1px solid var(--line) !important; padding:9px 0 !important;
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px; text-align:start !important;
  }
  table.darbya-rtable.rtable-ready tr td:last-child{border-bottom:none !important;}
  table.darbya-rtable.rtable-ready td::before{
    content:attr(data-label); font-weight:700; color:var(--muted); font-size:13px;
    flex-shrink:0; padding-top:1px;
  }
  table.darbya-rtable.rtable-ready td:not([data-label]):empty, table.darbya-rtable.rtable-ready td[data-label=""]:empty{display:none;}
  /* خلية ملاحظة بعرض كامل (مثال: "سبب الرفض: ..." أسفل صف بيانات) تُكتَب عادة
     بـ colspan يغطي كل الأعمدة — هذه الخلية الوحيدة في صفّها، فتُستثنى من قاعدة
     الإخفاء أعلاه (لأنها بلا data-label أصلًا) وتُعرض كسطر نص عادي بعرض كامل
     بدل تسمية عمود مضلِّلة أو اختفاء تام. */
  table.darbya-rtable.rtable-ready td[colspan]{
    display:block !important; text-align:start !important; color:var(--muted); font-size:13px;
  }
  table.darbya-rtable.rtable-ready td[colspan]::before{content:none;}
}

/* شريط التنقّل السفلي (Bottom Navigation) أُزيل نهائيًا (كان يكرّر أيقونات
   الهيدر الموحَّد) — راجعي dashboards/_topbar.php. قواعد .darbya-bottom-nav*
   حُذفت من هنا معه؛ لا شيء يستخدمها بعد الآن. */

/* ===================================================================
   الدفعة 52 — صقل الواجهة (مراجعة better-interface): ترحيب، بطاقات KPI،
   بحث، جوال، تركيز لوحة المفاتيح، أهداف لمس. تُضاف في آخر الملف عمدًا
   لتتغلّب على القواعد السابقة دون المساس بها.
   =================================================================== */

/* رأس الصفحة: عنوان + وصف + إجراء واحد هادئ */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.page-title{margin:0; font-size:26px; line-height:1.25; font-weight:800; letter-spacing:-0.01em; color:var(--text); text-wrap:balance;}
.page-sub{margin:4px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted);}
.page-head-action{display:inline-flex; align-items:center; gap:8px; min-height:40px;}
.section-title{margin:0; font-size:17px; line-height:1.3; font-weight:800; color:var(--text);}
.section-sub{margin:4px 0 0; font-size:13px; line-height:1.6; color:var(--muted);}

/* شبكة KPI: 4 أعمدة على الشاشات الواسعة، 2 للمتوسطة والجوال، 1 للأصغر من 360px.
   minmax(0,1fr) يمنع تمدّد أي بطاقة بمحتواها فلا قصّ ولا تمرير أفقي. */
.darbya-kpi-grid-4{grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;}
@media (max-width:1180px){.darbya-kpi-grid-4{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:359px){.darbya-kpi-grid-4{grid-template-columns:minmax(0,1fr);}}
.darbya-kpi-link{display:block; text-decoration:none; color:inherit; border-radius:14px;}
.darbya-kpi-link .darbya-kpi-card{height:100%; transition:border-color .15s;}
@media (hover:hover){.darbya-kpi-link:hover .darbya-kpi-card{border-color:var(--primary-2);}}
.darbya-kpi-card{height:100%; display:flex; flex-direction:column; border-top-width:1px;}
.darbya-kpi-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.darbya-kpi-head .lbl{margin:0; font-size:13.5px; line-height:1.5; font-weight:600; color:var(--muted);}
.darbya-kpi-icon{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(10,94,190,0.09); color:var(--primary-2);}
.darbya-kpi-card .num{margin-top:10px; font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-0.01em; font-variant-numeric:tabular-nums;}
.darbya-kpi-trend{margin-top:auto; padding-top:12px;}
.darbya-kpi-change.up{background:rgba(42,168,137,0.12); color:#1B7F67;}
@media (max-width:480px){
  .darbya-kpi-card{padding:14px;}
  .darbya-kpi-card .num{font-size:24px;}
  .darbya-kpi-icon{width:32px; height:32px;}
  .darbya-sparkline{max-width:100%;}
}

/* قائمة "بانتظار الإجراء" */
ul.pending-action-list{list-style:none; padding:0; margin:16px 0 0;}
.pending-action-row .btn{flex-shrink:0; min-height:36px;}
.pending-action-label{min-width:0; overflow-wrap:anywhere;}
@media (max-width:480px){.pending-action-row{flex-wrap:wrap; padding:12px 14px;} .pending-action-label{flex-basis:calc(100% - 100px);} .pending-action-row .btn{margin-inline-start:auto;}}

/* بطاقات المحتوى: تباعد متّسق */
.dash-body .welcome-card{margin-bottom:20px; padding:22px 24px;}
@media (max-width:640px){.dash-body{padding:16px;} .dash-body .welcome-card{padding:16px; border-radius:12px;} .page-title{font-size:22px;}}

/* البحث في الشريط العلوي (includes/_global_search.php) */
.darbya-search-wrap{position:relative; flex:1 1 200px; min-width:0; max-width:320px;}
.darbya-search-input{
  width:100%; min-height:40px; padding:8px 38px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font:inherit; font-size:14px; -webkit-appearance:none; appearance:none;
}
.darbya-search-input::placeholder{color:var(--muted); opacity:1;}
.darbya-search-input::-webkit-search-cancel-button{display:none;}
.darbya-search-icon{position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:12px; color:var(--muted); display:inline-flex; pointer-events:none;}
.darbya-search-btn{position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:4px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:8px; color:var(--muted); cursor:pointer;}
.darbya-search-btn[hidden]{display:none;}
.darbya-search-mic{inset-inline-end:36px;}
.darbya-search-clear{inset-inline-end:4px;}
.darbya-search-mic.is-listening{color:var(--danger);}
@media (hover:hover) and (pointer:fine){ .darbya-search-btn:hover{background:var(--line);} }
.darbya-search-results{position:absolute; top:calc(100% + 6px); inset-inline-start:0; width:340px; max-width:calc(100vw - 32px); background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(18,55,106,0.16); max-height:60vh; overflow-y:auto; overscroll-behavior:contain; z-index:1000; text-align:start;}
@media (max-width:640px){.darbya-search-results{position:fixed; inset-inline:16px; top:auto; width:auto; max-width:none;}}

/* الشريط العلوي على الجوال: صف واحد مرتّب بدل صفّين متراكبين */
@media (max-width:860px){
  .dash-top.dash-top-app{display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px; padding:12px 16px;}
  .dash-top-start{flex:1 1 auto;}
  .dash-top.dash-top-app .user-chip{display:flex; flex:1 1 100%; align-items:center; gap:8px; order:3;}
  .dash-top.dash-top-app .user-chip .darbya-search-wrap{flex:1 1 auto; max-width:none;}
}
@media (max-width:480px){
  .dash-top-start .brand .name{font-size:15px;}
}

/* القائمة الجانبية: تركيز واضح على الخلفية الكحلية، شارة بتباين كافٍ، بلا نص ذهبي كامل */
.dash-sidebar a:focus-visible, .dash-sidebar summary:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:10px;}
.sidebar-link.has-alert{color:#fff; font-weight:700;}
@media (hover:hover) and (pointer:fine){ .sidebar-link.has-alert:hover{color:#fff;} }
.sidebar-link.active.has-alert{color:#fff;}
.sidebar-badge{background:var(--secondary); color:var(--primary-deep); font-weight:800;}
.sidebar-link .sidebar-text{min-width:0; flex:1; overflow-wrap:anywhere;}
.dash-sidebar summary{display:none; min-height:44px; align-items:center; gap:8px;}
@media (max-width:860px){
  .dash-sidebar{margin:0 16px 8px; padding:10px 12px; border-radius:14px; box-shadow:none;}
  .dash-sidebar summary{display:flex; margin:0; padding:6px 4px;}
  .dash-sidebar[open] summary{border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:10px;}
}

/* أهداف لمس مريحة لشاشات اللمس (WCAG 2.5.8 كحدّ أدنى، 44px مستهدَفة) */
@media (pointer:coarse){
  .dash-top-icon-btn{width:44px; height:44px;}
  .dash-top-avatar{width:44px; height:44px;}
  .btn{min-height:44px;}
  .sidebar-link{min-height:44px;}
  .darbya-search-input{min-height:44px; font-size:16px;}
}
/* منع تكبير iOS التلقائي عند التركيز على أي حقل إدخال (16px) */
@media (max-width:860px){input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],select,textarea{font-size:16px;}}

/* تركيز لوحة المفاتيح لعناصر الهيدر والقوائم */
.dash-top-icon-btn:focus-visible, .dash-top-avatar:focus-visible, .dash-top-avatar-menu-item:focus-visible{outline:2px solid var(--primary-2); outline-offset:2px;}
.dash-top-avatar-menu-icon{display:inline-flex; align-items:center; justify-content:center; width:20px; flex-shrink:0; color:var(--muted);}
.dash-top-avatar-menu-item{justify-content:flex-start;}
.dash-top-avatar-menu-item .sidebar-badge{margin-inline-start:auto;}
.visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
/* .btn الأصلي مصمَّم لأزرار النماذج (عرض كامل + هامش علوي) — الأزرار المضمَّنة
   في رأس الصفحة وصفوف القوائم تحتاج عرضًا تلقائيًا بلا هامش ولا خطّ سفلي */
a.btn{text-decoration:none;}
.page-head-action, .pending-action-row .btn{width:auto; margin-top:0;}
.page-head-action{padding:10px 18px; font-size:14px;}
.darbya-search-input{padding-inline:38px 76px;}
@media (max-width:860px){
  .dash-top.dash-top-app .user-chip{display:contents;}
  .dash-top.dash-top-app .darbya-search-wrap{order:5; flex:1 1 100%; max-width:none;}
  .dash-top.dash-top-app{justify-content:space-between;}
}

/* ===== الدفعة 52 — الموقع العام: أيقونات خطية بدل الإيموجي ===== */
.stat-pill .icon{display:flex; justify-content:center; color:var(--accent);}
.hero-search-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 14px rgba(18,55,106,0.18);}
.sticky-cta-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;}
.course-card-meta svg{vertical-align:-2px; margin-inline-end:2px; color:var(--muted);}
.testimonial-stars{display:flex; gap:2px; color:var(--secondary-deep);}
.testimonial-stars svg{fill:currentColor;}
.nav-icon-btn svg, .nav-burger svg{display:block;}
.chat-widget-header button, .chat-widget-form button{display:inline-flex; align-items:center; justify-content:center;}
.hero-secondary-cta, .nav-icon-btn, .nav-burger{min-height:44px;}
.nav-icon-btn{min-width:44px;}
@media (hover:none){
  @media (hover:hover) and (pointer:fine){.nav-icon-btn:hover,.btn-nav-filled:hover,.btn-nav-outline:hover,.stat-pill:hover{transform:none;}}
}
@media (prefers-reduced-motion:reduce){
  .nav-icon-btn, .btn-nav, .stat-pill, .hero-secondary-cta{transition:none;}
  @media (hover:hover) and (pointer:fine){.nav-icon-btn:hover,.btn-nav-filled:hover,.btn-nav-outline:hover,.stat-pill:hover{transform:none;}}
}
@media (max-width:600px){
  .hero-search-btn{width:100%; flex:1 1 100%; min-height:48px;}
  .hero-search-filters select{padding-inline:10px; text-overflow:ellipsis;}
}
@media (max-width:360px){
  .site-navbar-inner{padding-inline:8px; gap:4px;}
  .site-nav-actions{gap:4px;}
  .nav-register-mobile{padding:9px 9px; font-size:13px;}
  .nav-login-compact{padding:8px 8px; font-size:13px;}
  .brand-link .name{font-size:13px;}
  .brand-link img{width:32px; height:32px;}
}

/* الدفعة 54 — حقول النماذج لا تتجاوز عرض حاويتها على الشاشات الضيقة (320px) */
.dash-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dash-body select, .dash-body textarea{max-width:100%; box-sizing:border-box;}
.dash-body form[style*="display:grid"], .dash-body form[style*="display: grid"]{grid-template-columns:minmax(0,1fr);}
.dash-body form > *, .dash-body .welcome-card > *{min-width:0;}
.dash-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .dash-body select, .dash-body textarea{width:100%;}

.input-icon-wrap .input-icon{display:flex; font-size:0; color:var(--muted);}
.role-option-icon{color:var(--primary);}
.role-option.active .role-option-icon{color:var(--primary-deep);}
.verify-hero-icon{color:var(--accent);}
/* زر الدردشة العائم لا يغطي آخر المحتوى (روابط الفوتر) على الجوال */
@media (max-width:860px){ body{padding-bottom:84px;} }
.public-footer-links{line-height:2.1; padding-inline:12px;}
@media (max-width:860px){ .public-footer-links{padding-inline-end:72px;} }

/* =========================================================
   الدفعة 55 — إعادة تصميم الرئيسية + أساس تجربة الجوال
   ========================================================= */
html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
button, a.btn, [role="button"], .btn, .nav-burger, .hero-secondary-cta, summary{ touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
button:active, .btn:active, a.btn:active{ transform:scale(.97); }
:where(a,button,input,select,textarea,summary):focus-visible{ outline:2px solid var(--primary-2); outline-offset:2px; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
.num, .stat-num, [data-count-to], .kpi-value{ font-variant-numeric:tabular-nums; }

/* الهيرو: بدون بطاقة إطار، عنوان بحضور أكبر */
.hero-card{ background:transparent; border:0; box-shadow:none; }
.hero-grid{ gap:32px; align-items:center; min-height:0; padding-block:16px 8px; }
.hero-title{ margin:0 0 14px; font-size:clamp(28px, 4.6vw, 46px); line-height:1.2; letter-spacing:-.015em; font-weight:800; color:var(--primary); }
.hero-sub{ margin:0 0 24px; font-size:clamp(15px,1.6vw,18px); line-height:1.8; color:var(--muted); max-width:56ch; }
.hero-search-form{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 8px 24px rgba(18,55,106,.08); }
.hero-search-form .hero-search-main{ border:0; box-shadow:none; background:transparent; }
.hero-search-form .hero-search-main:focus{ outline:none; }
.hero-search-form:focus-within{ border-color:var(--primary-2); box-shadow:0 0 0 3px rgba(10,94,190,.15), 0 8px 24px rgba(18,55,106,.08); }
.hero-search-btn{ border-radius:10px; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:16px; }
.hero-secondary-cta{ background:transparent; border:0; box-shadow:none; padding:8px 0; border-radius:0; color:var(--primary-2); font-weight:600; text-decoration:underline; text-decoration-color:rgba(10,94,190,.3); text-underline-offset:5px; min-height:40px; display:inline-flex; align-items:center; gap:8px; }
.hero-secondary-cta:active{ transform:none; opacity:.7; }

/* الأرقام: صف مضغوط بفواصل رفيعة بدل ثلاث بطاقات */
.stats-row{ display:flex; flex-wrap:wrap; gap:0; max-width:none; margin-top:26px; border-top:1px solid var(--line); padding-top:18px; }
.stats-row .stat-pill{ background:transparent; border:0; box-shadow:none; border-radius:0; padding:0 22px; flex:0 1 auto; text-align:start; }
.stats-row .stat-pill:first-child{ padding-inline-start:0; }
.stats-row .stat-pill + .stat-pill{ border-inline-start:1px solid var(--line); }

/* لماذا دربيا: قسم مفتوح وعناصر بلا إطارات متداخلة */
.section-plain{ background:transparent; border:0; box-shadow:none; padding-inline:0; }
.section-title{ margin:0 0 22px; text-align:center; font-size:clamp(22px,3vw,30px); letter-spacing:-.01em; color:var(--primary); }
.section-plain .value-card{ background:transparent; border:0; box-shadow:none; padding:8px 14px; text-align:start; }
.section-plain .value-card .icon-badge{ margin-inline:0 auto; margin-inline-start:0; }
@media (hover:hover) and (pointer:fine){ .section-plain .value-card:hover{ transform:none; } }
@media (max-width:600px){ .section-plain .value-card{ text-align:center; } .section-plain .value-card .icon-badge{ margin-inline:auto; } }

/* شريط الدعوة للمزوّدين */
.cta-band{ background:var(--primary-solid,var(--primary)); border:0; box-shadow:none; border-radius:14px; text-align:start; padding:clamp(24px,4vw,40px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.cta-band h2{ margin:0; flex:1 1 280px; font-size:clamp(20px,2.6vw,26px); color:#fff; }
.cta-band p{ margin:0; flex:1 1 100%; order:2; color:#EAF0F5; }
.cta-band-btn{ order:3; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 24px; border-radius:10px; background:#fff; color:#12304A; font-weight:700; text-decoration:none; }
@media (min-width:700px){ .cta-band p{ flex:1 1 300px; order:0; } .cta-band-btn{ order:0; } .cta-band h2{ flex-basis:100%; } }
.cta-band-btn:active{ transform:scale(.97); }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .stats-row .stat-pill{ padding:0 14px; }
}
@media (max-width:420px){
  .stats-row .stat-pill{ flex:1 1 24%; padding:0 6px; }
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; } button:active,.btn:active{ transform:none; } }

/* الدفعة 56 — صفحات الهبوط */
.crumbs{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13px; color:var(--muted); margin:4px 0 14px; }
.crumbs a{ color:var(--primary-2); text-decoration:none; min-height:24px; display:inline-flex; align-items:center; }
.topic-head{ margin:6px 0 18px; }
.topic-head h1{ margin:0 0 10px; font-size:clamp(26px,4vw,38px); line-height:1.25; letter-spacing:-.01em; color:var(--primary); }
.topic-head p{ margin:0 0 10px; color:var(--muted); max-width:62ch; line-height:1.9; }
.topic-all{ display:inline-flex; align-items:center; gap:6px; color:var(--primary-2); font-weight:600; text-decoration:none; min-height:40px; }
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin-bottom:6px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text,#1C2833); text-decoration:none; font-size:14px; white-space:nowrap; }
.chip small{ color:var(--muted); }
.chip-on{ background:var(--primary-solid,var(--primary)); color:#fff; border-color:var(--primary); }
.chip-on small{ color:#EAF0F5; }
.chip:active{ transform:scale(.97); }
.topic-more{ text-align:center; margin:22px 0; }
.faq-block{ margin:40px 0 24px; max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; min-height:48px; display:flex; align-items:center; font-weight:700; color:var(--primary); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; margin-inline-start:auto; font-size:20px; color:var(--muted); }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ margin:0 0 14px; color:var(--muted); line-height:1.9; }

/* حالات فارغة موحّدة */
.empty-state{ text-align:center; padding:36px 20px; border:1px dashed var(--line); border-radius:14px; background:var(--surface); color:var(--muted); }
.empty-state-title{ font-weight:800; color:var(--primary); font-size:18px; margin-bottom:6px; }
.empty-state p{ margin:0 0 14px; }
.pw-wrap{ position:relative; }
.pw-toggle{ position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); min-height:36px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--primary-2); font-weight:700; font-size:13px; cursor:pointer; }
.pw-toggle:active{ transform:translateY(-50%) scale(.97); }
.pw-wrap input{ padding-inline-end:70px; }

/* ملخص التسجيل */
.enroll-summary{ border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 14px; background:var(--surface); }
.enroll-summary-title{ font-weight:800; font-size:18px; color:var(--primary); margin-bottom:10px; line-height:1.5; }
.enroll-summary dl{ margin:0; }
.enroll-summary dl > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); }
.enroll-summary dt{ color:var(--muted); }
.enroll-summary dd{ margin:0; font-weight:700; text-align:end; }
.enroll-price{ color:var(--primary); font-size:18px; font-variant-numeric:tabular-nums; }
.enroll-steps{ list-style:none; display:flex; gap:6px; padding:0; margin:0 0 14px; counter-reset:es; font-size:13px; color:var(--muted); }
.enroll-steps li{ flex:1; counter-increment:es; padding:8px 8px; border-top:3px solid var(--line); }
.enroll-steps li::before{ content:counter(es) ". "; font-weight:700; }
.enroll-steps li.on{ border-top-color:var(--primary-2); color:var(--primary); font-weight:700; }
.enroll-note{ font-size:13px; color:var(--muted); line-height:1.9; margin:12px 0 0; }
@media (max-width:480px){ .enroll-steps{ flex-direction:column; } }

/* صفحات تسويقية */
.lp-hero{ padding:12px 0 8px; max-width:760px; }
.lp-hero h1{ margin:0 0 12px; font-size:clamp(28px,4.6vw,44px); line-height:1.2; letter-spacing:-.015em; color:var(--primary); }
.lp-hero p{ margin:0 0 20px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); line-height:1.9; }
.lp-cta-row{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
.lp-cta{ width:auto; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; }
.lp-link{ color:var(--primary-2); font-weight:600; text-decoration:underline; text-underline-offset:5px; min-height:40px; display:inline-flex; align-items:center; }
.lp-facts{ display:flex; flex-wrap:wrap; gap:0; margin:26px 0 6px; padding-block:14px; border-block:1px solid var(--line); }
.lp-facts > div{ padding:0 22px; flex:0 1 auto; }
.lp-facts > div:first-child{ padding-inline-start:0; }
.lp-facts > div + div{ border-inline-start:1px solid var(--line); }
.lp-facts dt{ color:var(--muted); font-size:13px; }
.lp-facts dd{ margin:2px 0 0; font-weight:800; color:var(--primary); }
.lp-section{ margin:38px 0 6px; }
.lp-points{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:22px 34px; }
.lp-point{ display:flex; gap:14px; align-items:flex-start; }
.lp-ico{ flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:#EFEBE2; color:var(--secondary-deep,#93743F); display:inline-flex; align-items:center; justify-content:center; }
.lp-point h3{ margin:0 0 4px; font-size:16px; color:var(--primary); }
.lp-point p{ margin:0; color:var(--muted); line-height:1.8; font-size:14px; }
.lp-steps{ margin:0; padding:0; list-style:none; counter-reset:lp; display:grid; gap:12px; max-width:640px; }
.lp-steps li{ counter-increment:lp; display:flex; gap:14px; align-items:flex-start; line-height:1.8; }
.lp-steps li::before{ content:counter(lp); flex:0 0 32px; height:32px; border-radius:50%; background:var(--primary-solid,var(--primary)); color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
@media (max-width:600px){
  .lp-facts{ flex-direction:column; gap:10px; }
  .lp-facts > div{ padding:0; }
  .lp-facts > div + div{ border-inline-start:0; border-top:1px solid var(--line); padding-top:10px; }
}

/* حالة فارغة مختصرة (تحلّ محل الفقرات الرمادية العارية) */
.empty-note{ text-align:center; margin:14px 0; padding:22px 16px; border:1px dashed var(--line); border-radius:12px; background:var(--surface); color:var(--muted); line-height:1.8; }
td > .empty-note, th > .empty-note{ margin:0; }

/* مؤشر تمرير أفقي: ظل خفيف على الحافة التي يوجد خلفها محتوى */
[style*="overflow-x:auto"], [style*="overflow-x: auto"], .darbya-bar-chart, .table-scroll{
  overscroll-behavior-x:contain;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(18,55,106,.20), rgba(18,55,106,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(18,55,106,.20), rgba(18,55,106,0)) right center / 14px 100% no-repeat scroll;
}
.skeleton{ position:relative; overflow:hidden; background:var(--line); border-radius:8px; min-height:14px; }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:skel 1.4s ease-in-out infinite; }
@keyframes skel{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .skeleton::after{ animation:none; } }

/* شريط التنقل السفلي للجوال (كل الأدوار) */
.tabbar{ display:none; }
@media (max-width:860px){
  .tabbar{ display:flex; position:fixed; inset-inline:0; bottom:0; z-index:1400; background:var(--surface); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -4px 16px rgba(18,55,106,.06); }
  .tabbar-item{ flex:1; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; border-radius:10px; }
  .tabbar-item.on{ color:var(--primary); }
  .tabbar-item.on svg{ color:var(--primary-2); }
  .tabbar-item{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .tabbar-item:active{ transform:scale(.96); }
  body.has-tabbar{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .ai-chat-fab{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.trust-line{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; color:var(--muted); }
.trust-line li{ display:inline-flex; align-items:center; gap:6px; }
.trust-line svg{ color:var(--primary-2); flex:0 0 auto; }
.trust-line a{ color:var(--primary-2); font-weight:600; text-underline-offset:4px; min-height:24px; display:inline-flex; align-items:center; }

/* الدفعة 57 — درج التصفية السفلي على الجوال */
.sheet-head, .sheet-reset{ display:none; }
.sheet-backdrop{ position:fixed; inset:0; background:rgba(18,55,106,.45); z-index:1590; overscroll-behavior:contain; }
.sheet-backdrop[hidden]{ display:none; }
@media (max-width:860px){
  .filter-drawer > summary{ display:flex; align-items:center; gap:8px; min-height:48px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-weight:700; color:var(--primary); cursor:pointer; list-style:none; }
  .filter-drawer > summary::-webkit-details-marker{ display:none; }
  .filter-drawer[open] > .filter-form{ position:fixed; inset-inline:0; bottom:0; margin:0 !important; z-index:1600; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; background:var(--surface); border-radius:18px 18px 0 0; padding:0 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -12px 40px rgba(18,55,106,.25); flex-direction:column; flex-wrap:nowrap !important; gap:12px !important; }
  .filter-drawer[open] > .filter-form > input, .filter-drawer[open] > .filter-form > select{ max-width:none !important; width:100%; min-width:0 !important; flex:none !important; }
  .filter-drawer[open] > .filter-form .sheet-head{ display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface); padding:14px 0 8px; z-index:1; }
  .sheet-close{ width:44px; height:44px; border:0; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; border-radius:10px; cursor:pointer; }
  .filter-drawer[open] > .filter-form .sheet-apply{ width:100% !important; min-height:48px; position:sticky; bottom:0; }
  .filter-drawer[open] > .filter-form .sheet-reset{ display:inline-flex; justify-content:center; min-height:44px; align-items:center; color:var(--primary-2); font-weight:600; }
  body.sheet-open{ overflow:hidden; }
}

/* شريط التسجيل الثابت في صفحة الدورة (جوال) */
.course-sticky-bar{ display:none; }
@media (max-width:860px){
  .course-sticky-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; inset-inline:0; bottom:0; z-index:1450; background:var(--surface); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -4px 16px rgba(18,55,106,.08); }
  .csb-price{ display:flex; flex-direction:column; line-height:1.3; }
  .csb-label{ font-size:13px; color:var(--muted); }
  .csb-price strong{ font-size:18px; color:var(--primary); font-variant-numeric:tabular-nums; }
  .csb-cta{ width:auto !important; margin:0 !important; min-height:48px; padding:0 28px; display:inline-flex !important; align-items:center; justify-content:center; text-decoration:none; }
  body:has(.course-sticky-bar){ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(.course-sticky-bar) .ai-chat-fab{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* قائمة بدء الاستخدام */
.onboard-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.onboard-count{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.onboard-bar{ height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:12px; }
.onboard-bar span{ display:block; height:100%; background:var(--kpi-up,#2AA889); border-radius:99px; }
.onboard-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.onboard-list li{ display:flex; align-items:center; gap:12px; min-height:48px; border-top:1px solid var(--line); }
.onboard-list li:first-child{ border-top:0; }
.onboard-tick{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.onboard-list li.done .onboard-tick{ background:var(--kpi-up,#2AA889); border-color:var(--kpi-up,#2AA889); }
.onboard-list li.done .onboard-text{ color:var(--muted); text-decoration:line-through; }
.onboard-text{ flex:1; }
.onboard-cta{ color:var(--primary-2); font-weight:700; text-decoration:none; min-height:40px; display:inline-flex; align-items:center; white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* نافذة التأكيد الموحّدة */
dialog.dconfirm{ border:0; border-radius:16px; padding:0; width:min(420px, calc(100vw - 32px)); box-shadow:0 20px 60px rgba(18,55,106,.35); color:var(--text,#1C2833); overscroll-behavior:contain; }
dialog.dconfirm::backdrop{ background:rgba(18,55,106,.5); }
.dconfirm form{ padding:22px 22px 18px; }
.dconfirm-title{ margin:0 0 8px; font-size:18px; line-height:1.5; color:var(--primary); }
.dconfirm-body{ margin:0 0 6px; color:var(--muted); line-height:1.8; font-size:14px; }
.dconfirm-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.dconfirm-actions button{ min-height:46px; padding:0 22px; border-radius:10px; font-weight:700; cursor:pointer; font-size:15px; }
.dconfirm-cancel{ background:var(--surface); color:var(--primary); border:1px solid var(--line); }
.dconfirm-ok{ background:var(--primary-solid,var(--primary)); color:#fff; border:1px solid var(--primary); }
.dconfirm-ok.danger{ background:var(--danger,#AD4038); border-color:var(--danger,#AD4038); }
@media (max-width:480px){ .dconfirm-actions{ flex-direction:column-reverse; } .dconfirm-actions button{ width:100%; } }

/* الدفعة 57 — تحمّل البيانات القصوى (نتائج اختبار break-ui) */
.stat-card .num, .darbya-kpi .num{ overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
@media (max-width:480px){ .stat-card .num{ font-size:clamp(20px, 6.4vw, 26px); } }
.course-card-price, .course-card-price-chip{ white-space:nowrap; }
.course-card-footer{ flex-wrap:wrap; gap:8px 12px; }
.btn, button{ overflow-wrap:normal; }
@media (max-width:760px){
  table.darbya-rtable.rtable-ready td{ flex-wrap:wrap; overflow-wrap:anywhere; }
  table.darbya-rtable.rtable-ready td > *{ min-width:0; max-width:100%; }
  table.darbya-rtable.rtable-ready td input:not([type=checkbox]):not([type=radio]), table.darbya-rtable.rtable-ready td select{ flex:1 1 140px; width:auto !important; }
  table.darbya-rtable.rtable-ready td .btn, table.darbya-rtable.rtable-ready td button{ white-space:nowrap; flex:0 0 auto; }
  table.darbya-rtable.rtable-ready td form{ display:flex; flex-wrap:wrap; gap:6px; width:100%; }
}

/* ===== الدفعة 57 — دعوة تثبيت التطبيق ===== */
.pwa-install{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:900;max-width:440px;margin-inline:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface,#fff);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 6px 24px rgba(18,55,106,.16)}
.pwa-install p{margin:0;flex:1 1 180px;font-size:14px;line-height:1.6}
.pwa-install button{font:inherit;font-weight:700;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation}
.pwa-install .pwa-yes{background:var(--primary-solid,var(--primary));border-color:transparent;color:#fff}
body:has(.course-sticky-bar) .pwa-install{bottom:calc(76px + env(safe-area-inset-bottom,0px))}

/* ===== الدفعة 57 — رسوم لوحة الإدارة ===== */
.dchart{margin:8px 0 0}
.dchart-plot{position:relative;height:190px;padding:18px 0 0;padding-inline-start:44px}
.dchart-axis{position:absolute;inset-inline-start:0;top:10px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dchart-gl{position:absolute;inset-inline:44px 0;height:1px;background:var(--line)}
.dchart-gl-1{top:18px}.dchart-gl-2{top:calc(18px + (100% - 18px - 24px)/2)}.dchart-gl-3{top:calc(100% - 24px)}
.dchart-cols{position:relative;display:flex;align-items:stretch;gap:4px;height:100%}
.dchart-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;padding-bottom:24px}
.dchart-bar{display:block;width:100%;max-width:26px;border-radius:4px 4px 0 0;background:var(--primary-2);opacity:.55}
.dchart-gold .dchart-bar{background:var(--secondary-deep)}
.dchart-col.is-peak .dchart-bar{opacity:1}
.dchart-x{position:absolute;bottom:2px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dchart-cap{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dchart-cap strong{color:var(--text)}
@media (hover:hover) and (pointer:fine){.dchart-col:hover .dchart-bar{opacity:1}}
.dchart-x{white-space:nowrap}
@media (max-width:480px){.dchart-plot{padding-inline-start:36px}.dchart-gl{inset-inline-start:36px}.dchart-col:nth-child(even) .dchart-x{visibility:hidden}.dchart-x{font-size:13px}}

/* ===== الدفعة 57 — دورات مشابهة + الأدلة ===== */
.related-title{margin:0 0 10px;font-size:17px}
.related-list,.guides-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.related-list a,.guides-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);color:var(--text);text-decoration:none;min-height:44px;overflow-wrap:anywhere}
.related-list em{font-style:normal;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.related-all,.guides-more a{display:inline-block;margin-top:12px;font-weight:700;color:var(--primary)}
.guides-wrap{max-width:760px;margin:0 auto}
.guides-title{margin:0 0 14px;font-size:22px}
.guides-list a{flex-direction:column;align-items:flex-start;gap:4px}
.guides-list a span{color:var(--muted);font-size:14px;line-height:1.7}
@media (hover:hover) and (pointer:fine){.related-list a:hover,.guides-list a:hover{border-color:var(--primary)}}

/* ===== ترقيم الصفحات (التوثيق) ===== */
.vp-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px}
.vp-pager-info{color:var(--muted)}
.vp-pager-links{display:flex;gap:6px;flex-wrap:wrap}
.vp-pager-links a,.vp-pager-links .is-cur{min-width:40px;min-height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;color:var(--text);text-decoration:none;font-weight:700;background:var(--surface,#fff)}
.vp-pager-links .is-cur{background:var(--primary-solid,var(--primary));border-color:transparent;color:#fff}

/* ===== الدفعة 57 — لوحة البطل بدل الرسمة الزخرفية ===== */
.hero-grid{ align-items:start; }
.hero-panel{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 8px 24px rgba(18,55,106,.08); align-self:center; }
.hero-panel-title{ margin:0 0 4px; font-size:20px; color:var(--primary); }
.hero-panel-sub{ margin:0 0 12px; font-size:14px; color:var(--muted); }
.hero-chips,.hero-modes{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-chip,.hero-modes a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--text); font-weight:600; font-size:14px; text-decoration:none; overflow-wrap:anywhere; }
.hero-modes a{ flex:1 1 0; justify-content:center; border-radius:10px; }
.hero-panel-divider{ height:1px; background:var(--line); margin:18px 0; }
.hero-panel-all{ display:inline-block; margin-top:16px; font-weight:700; color:var(--primary); }
@media (hover:hover) and (pointer:fine){ .hero-chip:hover,.hero-modes a:hover{ border-color:var(--primary); color:var(--primary); } }
.hero-chip:active,.hero-modes a:active{ opacity:.7; }
.hero-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; padding-block:8px; }
.hero-text{ padding:8px 0; justify-content:flex-start; }
.hero-panel{ align-self:start; margin-top:6px; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:minmax(0,1fr); gap:20px; } .hero-panel{ margin-top:0; padding:18px; } }
.hero-search-form .hero-search-main{ flex:1 1 100%; }
.hero-search-filters{ flex:1 1 0; min-width:0; }
.hero-search-btn{ flex:0 0 auto; }
.hero-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); }
.hero-foot .stats-row{ margin:0; flex:0 1 auto; }
.hero-foot .trust-line{ margin:0; flex:1 1 320px; }
.hero-foot{ border-top:0; padding-top:0; margin-top:8px; }
.hero-foot .stats-row{ border-top:0; padding-top:0; }
.hero-panel{ align-self:stretch; margin-top:0; display:flex; flex-direction:column; }
.hero-panel-all{ margin-top:auto; padding-top:16px; }
@media (max-width:860px){ .hero-panel{ align-self:auto; } }
.hero-panel{ align-self:start; }
.hero-panel-all{ margin-top:0; }

/* ===== الدفعة 57 — لوحة التخصصات + زخرفة هندسية خفيفة ===== */
.hero-card{ position:relative; isolation:isolate; }
.hero-card::before,.hero-card::after{ content:""; position:absolute; z-index:-1; width:360px; height:360px; background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20400%22%20fill=%22none%22%20stroke=%22%2312304A%22%20stroke-width=%221.2%22%20stroke-opacity=%220.09%22%3E%3Cg%20transform=%22translate%28200%20200%29%22%3E%3Cpath%20id=%22o%22%20d=%22M0-190%20134-134%20190%200%20134%20134%200%20190-134%20134-190%200-134-134Z%22/%3E%3Cpath%20d=%22M0-150%20106-106%20150%200%20106%20106%200%20150-106%20106-150%200-106-106Z%22/%3E%3Cpath%20d=%22M0-110%2078-78%20110%200%2078%2078%200%20110-78%2078-110%200-78-78Z%22/%3E%3Cpath%20d=%22M0-70%2050-50%2070%200%2050%2050%200%2070-50%2050-70%200-50-50Z%22/%3E%3Cpath%20d=%22M0-190V190M-190%200H190M-134-134%20134%20134M134-134-134%20134%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; }
.hero-card::before{ inset-inline-start:-140px; top:-60px; }
.hero-card::after{ inset-inline-start:-90px; bottom:-120px; }
:root[data-theme="dark"] .hero-card::before,:root[data-theme="dark"] .hero-card::after{ filter:invert(1); opacity:.7; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero-card::before,:root:not([data-theme="light"]) .hero-card::after{ filter:invert(1); opacity:.7; } }
.hero-panel{ padding:26px 24px; border-radius:16px; }
.hero-panel-title{ font-size:22px; }
.hero-chips{ flex-direction:column; align-items:flex-start; gap:10px; }
.hero-chip{ gap:10px; padding:0 14px 0 16px; min-height:44px; background:var(--surface); box-shadow:0 1px 2px rgba(18,55,106,.05); }
.hero-chip-ico{ display:inline-flex; color:var(--primary-2); order:-1; }
.hero-panel-all{ margin-top:18px; text-decoration:underline; text-underline-offset:5px; }
@media (max-width:860px){ .hero-card::before,.hero-card::after{ width:240px; height:240px; opacity:.8 } .hero-chips{ flex-direction:row; flex-wrap:wrap; } }
.hero-card::before{ inset-inline-start:auto; left:calc(50% - 50vw); top:-40px; }
.hero-card::after{ inset-inline-start:auto; left:auto; right:calc(50% - 50vw + 16px); bottom:-140px; }
@media (max-width:860px){ .hero-card::before{ left:-80px; } .hero-card::after{ right:-80px; } }
.hero-card{ overflow:visible; }
html,body{ overflow-x:clip; }

/* ===== Batch 58: إدارة دروس الدورة المسجلة ===== */
.lsn-ref{margin:0 0 10px;font-size:13px;color:var(--muted)}
.lsn-chip{display:inline-block;margin-inline-start:6px;padding:2px 10px;border-radius:999px;background:#EAF1F6;color:#1C5878;font-size:13px;font-weight:700}
.lsn-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.lsn-total{font-size:13px;color:var(--muted)}
.lsn-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.lsn-item{background:#F5F7F9;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lsn-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lsn-num{flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:#E3EDF3;color:#1C5878;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.lsn-main{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;overflow-wrap:anywhere}
.lsn-meta{font-size:13px;color:var(--muted)}
.lsn-actions{display:flex;gap:14px;align-items:center}
.lsn-link{background:none;border:none;padding:6px 2px;margin:0;width:auto;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:#1C5878;min-height:32px;touch-action:manipulation}
.lsn-danger{color:var(--danger-solid,#B3261E)}
.lsn-edit{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.lsn-publish{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);margin-bottom:6px}
:root[data-theme="dark"] .lsn-item{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .lsn-num,:root[data-theme="dark"] .lsn-chip{background:rgba(255,255,255,.1);color:#cfe3ef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lsn-item{background:rgba(255,255,255,.04)}:root:not([data-theme="light"]) .lsn-num,:root:not([data-theme="light"]) .lsn-chip{background:rgba(255,255,255,.1);color:#cfe3ef}}
/* ===== Batch 59: أداء الدورة ===== */
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.ins-card{background:#F5F7F9;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ins-card span{font-size:13px;color:var(--muted)}
.ins-card strong{font-size:24px;color:#12304A}
.ins-card small{font-size:13px;color:var(--muted)}
.ins-bar{height:8px;border-radius:999px;background:#DFE6EB;margin-top:10px;overflow:hidden}
.ins-bar span{display:block;height:100%;background:#2AA889;border-radius:999px}
:root[data-theme="dark"] .ins-card{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .ins-card strong{color:#e6eef4}
:root[data-theme="dark"] .ins-bar{background:rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ins-card{background:rgba(255,255,255,.04)}:root:not([data-theme="light"]) .ins-card strong{color:#e6eef4}:root:not([data-theme="light"]) .ins-bar{background:rgba(255,255,255,.12)}}

/* ===== Batch 61: UI/UX polish ===== */
:root{ --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --r-sm:10px; --r-md:14px; --focus-ring:#1C5878; }
:root[data-theme="dark"]{ --focus-ring:#7FB8D6; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --focus-ring:#7FB8D6; } }

/* أيقونات SVG بدل الإيموجي */
.ico{display:inline-flex; vertical-align:-3px; margin-inline-end:4px; line-height:0;}
.ico svg{display:block;}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; background:var(--muted);}
.dot-green{background:#2AA889;} .dot-red{background:#C0392B;} .dot-gold{background:#E2BA5B;}

/* حدّ أدنى للخط */
body{font-size:15px;}
.hint,.lbl,small,.muted-sm{font-size:13px;}

/* حلقة تركيز موحّدة */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-sm);
}

/* أهداف لمس 44px على الشاشات اللمسية */
@media (pointer:coarse){
  .btn,button,.btn-nav,.tabbar-item,select,input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],input[type="search"]{min-height:44px;}
  input,textarea,select{font-size:16px;}
}

/* بطاقة الدورة الموحّدة */
.darbya-courses-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-3);}
.course-card-wrap{position:relative; display:flex; flex-direction:column;}
.course-card-wrap>.course-card{flex:1;}
.course-card-wrap.is-featured .course-card{border-color:var(--gold, #E2BA5B);}
.cc-tools{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-1); padding:0 2px 6px; font-size:13px;}
.cc-compare{display:inline-flex; align-items:center; gap:6px; min-height:32px; cursor:pointer; color:var(--muted);}
.course-card-img{background:var(--primary-2);}
.course-card-media{position:relative; overflow:hidden;}
.course-card-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.course-card-rating-chip{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700;}

/* حالات فارغة */
.empty-note::before{
  content:""; display:block; width:40px; height:40px; margin:0 auto 10px; background:var(--muted); opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 12l9 4 9-4M3 17l9 4 9-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 12l9 4 9-4M3 17l9 4 9-4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .skeleton::after{display:none;}
}


/* زر واتساب العائم: يمين الصفحة دائمًا (الدردشة المباشرة تبقى يسارًا). يستخدم left/right
   الفيزيائيين لا inset-inline حتى لا ينقلب مع اتجاه الصفحة. */
.wa-fab{
  position:fixed; z-index:1500; bottom:22px; right:22px; left:auto;
  display:inline-flex; align-items:center; gap:8px;
  background:#1faa59; color:#fff; text-decoration:none;
  padding:13px 18px; border-radius:999px; box-shadow:0 10px 28px rgba(31,170,89,0.4);
  font-weight:800; font-size:14px; transition:transform .15s, box-shadow .15s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.wa-fab:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px #1faa59;}
@media (hover:hover) and (pointer:fine){
  .wa-fab:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(31,170,89,0.5); color:#fff;}
}
.wa-fab:active{transform:scale(.96);}
@media (max-width:520px){
  .wa-fab{bottom:16px; right:16px; padding:13px;}
  .wa-fab-text{display:none;}
}
@media (max-width:900px){ .sticky-cta-bar ~ .wa-fab{bottom:78px;} }
body.has-tabbar .wa-fab{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
body:has(.course-sticky-bar) .wa-fab{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
/* الدردشة تثبت على اليسار صراحةً */
.ai-chat-fab{ left:22px; right:auto; inset-inline-end:auto; }
.chat-widget-panel{ left:22px; right:auto; inset-inline-end:auto; }
@media (max-width:520px){ .ai-chat-fab{left:16px;} .chat-widget-panel{left:16px; right:16px;} }
.public-footer-contact a{direction:ltr; unicode-bidi:isolate; font-weight:700;}

/* رسائل الفوائد التسويقية (batch133) */
.mk-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0}
.mk-role-card{background:var(--surface,#fff);border:1px solid var(--line,#e3e8ee);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.mk-role-card .mk-tag{font-size:12px;font-weight:700;color:var(--primary-2,#12376A)}
.mk-role-card h3{margin:0;font-size:16px;line-height:1.6}
.mk-role-card p{margin:0;color:var(--muted,#6B7C87);font-size:13.5px;line-height:1.9;flex:1}
.mk-role-card .btn{width:auto;align-self:flex-start;text-decoration:none;padding:8px 18px;margin:0}
.mk-free-strip{display:inline-flex;gap:8px;align-items:center;margin:10px 0 0;padding:8px 14px;border-radius:12px;background:#FFF4E0;color:#A35209;font-weight:700;font-size:14px;text-decoration:none}
.mk-tip{border-inline-start:4px solid var(--accent,#F28C28)}
.mk-tip p{margin:6px 0 10px;font-size:13.5px;line-height:1.9}
.mk-tip .btn{width:auto;display:inline-block;text-decoration:none;padding:7px 16px;margin:0}
.mk-next{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bg,#f4f6f8);font-size:14px;line-height:1.9}
.mk-role-box{margin:12px 0;padding:12px 14px;border-radius:12px;background:var(--bg,#f4f6f8);border:1px solid var(--line,#e3e8ee)}
.mk-role-box strong{display:block;margin-bottom:4px}
.mk-role-box p{margin:0;font-size:13.5px;line-height:1.9;color:var(--muted,#6B7C87)}

/* صفحات الدخول/التسجيل: مساحة سفلية كي لا تغطي أزرار الدردشة والواتساب وإشعار الكوكيز زرَّ الإرسال والرجوع */
.auth-form-side{ padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:640px){ .auth-form-side{ padding-bottom:calc(190px + env(safe-area-inset-bottom, 0px)); } }

/* شريط اكتمال الملف */
.pc-widget{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--gold,#B9975B);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.pc-widget-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pc-widget-link{color:var(--primary-2);font-weight:700;text-decoration:none}
.pc-bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 8px}
.pc-bar span{display:block;height:100%;background:var(--primary-2,#12376A);border-radius:99px}
.pc-widget-miss{margin:0;font-size:13px;color:var(--muted)}
/* جداول بلا darbya-rtable: تمرير أفقي بدل القص على الجوال */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){.dash-body table:not(.darbya-rtable){display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}}

/* قائمة بدء الشريك الدولي */
.ob-bar{ height:8px; background:var(--border,#e1e6ec); border-radius:99px; overflow:hidden; margin:8px 0 12px; }
.ob-bar span{ display:block; height:100%; background:var(--primary,#12304a); border-radius:99px; }
.ob-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ob-list li{ display:flex; gap:8px; align-items:center; min-height:32px; }
.ob-list .ob-done{ color:var(--muted); }
.lp-note{ background:var(--surface-2,#eef2f6); border-radius:10px; padding:10px 14px; font-size:14px; }

/* حالات الواجهة الموحدة (includes/ui_states.php) */
.ui-state{ text-align:center; padding:20px 16px; border-radius:12px; background:var(--surface-2,#f1f4f7); }
.ui-state-title{ margin:0 0 4px; font-weight:700; }
.ui-state-hint{ margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.8; }
.ui-state-action{ width:auto; display:inline-block; text-decoration:none; }
.ui-error{ background:#fdecea; color:#7a1f17; }
.ui-error .ui-state-hint{ color:inherit; }
.ui-skeleton{ display:grid; gap:10px; padding:12px 0; }
.ui-skel-line{ display:block; height:14px; border-radius:7px; background:var(--border,#e1e6ec); }
@media (prefers-reduced-motion:no-preference){ .ui-skel-line{ animation:uiSkel 1.4s ease-in-out infinite; } }
@keyframes uiSkel{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ===== batch154: شارة «جديد»، منع تداخل الأزرار العائمة على الجوال ===== */
.darbya-kpi-change.new{background:var(--bg); color:var(--primary-2); border:1px solid var(--line);}
.darbya-kpi-card .num{margin-bottom:2px;}
@media (max-width:640px){
  /* سبب التداخل: القاعدة القديمة (.sticky-cta-bar ~ .wa-fab) لا تنطبق لأن الشريط يأتي بعد الزر في الصفحة */
  body:has(.sticky-cta-bar) .wa-fab{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); right:14px; padding:12px; }
  /* زر واحد للدعم على الجوال في صفحات الزوار: واتساب. الدردشة تبقى على سطح المكتب وللمسجّلين */
  body:has(.sticky-cta-bar) .ai-chat-fab, body:has(.sticky-cta-bar) .chat-widget-panel{ display:none; }
}
/* مركز التحكم */
.cc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
@media (max-width:860px){.cc-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:480px){.cc-grid{grid-template-columns:minmax(0,1fr);}}
.cc-tile{display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--text); min-height:64px; touch-action:manipulation;}
.cc-tile strong{font-size:15px;}
.cc-tile span{font-size:13px; color:var(--muted);}
@media (hover:hover) and (pointer:fine){.cc-tile:hover{border-color:var(--primary-2);}}
.cc-tile:focus-visible{outline:3px solid var(--primary-2); outline-offset:2px;}
.cc-health{margin:0; font-weight:700;}
.cc-ok{color:var(--kpi-up-text);} .cc-warn{color:var(--muted);} .cc-bad,.cc-never{color:var(--kpi-down);}

/* ===== batch154: الصفحة الرئيسية ===== */
.hero-modes-start{ margin:10px 0 14px; }
.hero-modes-start a{ flex:1 1 140px; justify-content:center; font-weight:700; }
/* بطاقة «ابدأ من هنا»: شبكة من عمودين بدل قائمة طويلة تنافس العنوان وتقطعها حافة الشاشة */
@media (min-width:861px){
  .hero-panel .hero-chips{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .hero-panel .hero-chip{ min-height:44px; padding:6px 12px; font-size:14px; line-height:1.35; border-radius:12px; align-items:center; }
  .hero-panel{ padding:20px; }
}
@media (max-width:640px){
  /* الشريط العلوي في سطر واحد: العنوان + الزر، والتفاصيل في صفحة الوجهة */
  .sb-top .sb-msg{ flex-wrap:nowrap; justify-content:space-between; gap:8px; padding:6px 44px 6px 12px; font-size:13px; text-align:start; }
  .sb-top .sb-msg > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-top .sb-sub{ display:none; }
  .sb-top a.sb-cta{ flex:0 0 auto; padding:2px 10px; font-size:12.5px; min-height:28px; line-height:24px; }
  .sb-x{ width:40px; height:40px; inset-inline-end:2px; }
  /* «إنشاء حساب» موجود في الشريط السفلي؛ لا نكرره في الترويسة */
  body:has(.sticky-cta-bar) .nav-register-mobile{ display:none; }
}

/* إجراءات جدول المستخدمين: أزرار صغيرة + قائمة «المزيد» */
.ua-wrap{display:flex; flex-wrap:wrap; gap:6px; align-items:center; position:relative;}
.ua-btn{display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface,#fff); color:var(--primary-2); font:inherit; font-size:12.5px; cursor:pointer; text-decoration:none; list-style:none; white-space:nowrap;}
.ua-btn::-webkit-details-marker{display:none;}
.ua-btn:active{transform:scale(.97);}
.ua-wrap form{margin:0;}
.ua-ok{color:#178080; border-color:#178080;}
.ua-danger{color:var(--danger); border-color:var(--danger);}
.ua-more{position:relative;}
.ua-menu{position:absolute; inset-inline-start:0; top:calc(100% + 4px); z-index:30; min-width:230px; display:flex; flex-direction:column; gap:2px; padding:6px; background:var(--surface,#fff); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(15,30,50,.14);}
.ua-menu form{width:100%;}
.ua-item{display:block; width:100%; text-align:right; padding:9px 10px; border:0; border-radius:6px; background:none; color:var(--primary-2); font:inherit; font-size:13px; cursor:pointer; list-style:none;}
.ua-item::-webkit-details-marker{display:none;}
.ua-item-danger{color:var(--danger);}
.ua-menu .ua-item:focus-visible, .ua-btn:focus-visible{outline:2px solid var(--primary-2); outline-offset:1px;}
@media (hover:hover) and (pointer:fine){.ua-item:hover{background:rgba(0,0,0,.05);} .ua-btn:hover{background:rgba(0,0,0,.04);}}
@media (max-width:760px){.ua-menu{position:static; box-shadow:none; margin-top:6px;}}