/* ==========================================================================
   المجلس الأردني الطبي — التخطيط والتنقّل
   --------------------------------------------------------------------------
   منهج Mobile-First: القواعد الأساسية للشاشة الصغيرة، والتوسيع بـ min-width.
   نقاط الكسر: 480px (موبايل) · 768px (تابلت) · 1024px (لابتوب) · 1280px+
   ========================================================================== */

/* ── هيكل الصفحة ────────────────────────────────────────────────────────── */

.jmc-app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh; /* يعالج شريط عنوان المتصفح المتحرّك على الموبايل */
}

.jmc-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0; /* حرج: بدونه يتمدّد المحتوى العريض ويكسر التخطيط */
  width: 100%;
}

.jmc-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--jmc-content-max);
  margin-inline: auto;
  padding: var(--jmc-space-4);
}

@media (min-width: 768px) {
  .jmc-content { padding: var(--jmc-space-6); }
}

@media (min-width: 1280px) {
  .jmc-content { padding: var(--jmc-space-8) var(--jmc-space-8) var(--jmc-space-10); }
}

/* ==========================================================================
   الشريط الجانبي
   ثلاث حالات: كامل (ديسكتوب) · مطويّ لأيقونات (تابلت أفقي) · درج (موبايل)
   ========================================================================== */

.jmc-sidebar {
  position: fixed;
  inset-block: 0;
  /*
    في RTL: inline-start = اليمين، و inline-end = اليسار.
    الشريط الجانبي في التصميم على **اليمين**، إذاً يُثبَّت على inline-start.
    (خطأ اكتُشف باختبار فعلي: inset-inline-end كان يضعه على اليسار،
     ولم يكن يختفي كاملاً على الموبايل لأن translateX يحرّكه يميناً دائماً.)
  */
  inset-inline-start: 0;
  z-index: var(--jmc-z-sidebar);
  display: flex;
  flex-direction: column;
  width: var(--jmc-sidebar-width);
  max-width: 85vw;
  background: var(--jmc-sidebar-bg);
  /* الحدّ على الوجه المقابل للمحتوى (اليسار في RTL) لا على حدّ الشاشة */
  border-inline-end: 1px solid var(--jmc-sidebar-border);
  /*
    الحالة الافتراضية على الموبايل: مُخفى خارج الشاشة.
    translateX ليس واعياً بالاتجاه — القيمة الموجبة تحرّك يميناً دائماً،
    وهو الصحيح هنا لأن الشريط مثبّت على الحدّ الأيمن.
  */
  transform: translateX(100%);
  transition: transform var(--jmc-dur-slow) var(--jmc-ease);
  overflow: hidden;
}

.jmc-sidebar.is-open {
  transform: translateX(0);
  box-shadow: var(--jmc-shadow-lg);
}

.jmc-sidebar__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--jmc-z-backdrop);
  background: var(--jmc-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--jmc-dur) var(--jmc-ease),
              visibility var(--jmc-dur) var(--jmc-ease);
}

.jmc-sidebar__backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── ترويسة الشريط: الشعار ──────────────────────────────────────────────── */

.jmc-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-3);
  flex-shrink: 0;
  height: var(--jmc-topbar-height);
  padding-inline: var(--jmc-space-4);
  border-bottom: 1px solid var(--jmc-sidebar-border);
  /* الترويسة رابط للرئيسية — سلوك متوقّع من الشعار في أي نظام إداري */
  text-decoration: none;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-sidebar__header:hover {
  background: var(--jmc-sidebar-hover);
  text-decoration: none;
}

/*
  الشعار الرسمي.
  الرمز والكلمة أصلان منفصلان: في حالة طيّ الشريط تُخفى الكلمة ويبقى الرمز
  وحده مركزياً — فلا يُقصّ شعار عريض قصّاً عشوائياً.
*/
.jmc-sidebar__mark {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  /* الرمز دائري بقرص أبيض: الاستدارة الكاملة تُظهره كشارة نظيفة */
  border-radius: 50%;
  display: none; /* يظهر في حالة الطيّ فقط */
}

/*
  الشعار الكامل: عرض مرن وارتفاع محدود.
  height ثابت مع width:auto يحافظ على نسبة الأبعاد الأصلية (357.983×118.663)
  فلا يتشوّه الشعار مهما تغيّر عرض الشريط.
*/
.jmc-sidebar__wordmark {
  display: block;
  width: auto;
  height: 2.5rem;
  max-width: 100%;
}

/* ── قائمة التنقّل ──────────────────────────────────────────────────────── */

.jmc-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--jmc-space-3) var(--jmc-space-2);
}

.jmc-nav-section {
  margin-bottom: var(--jmc-space-5);
}

.jmc-nav-section__title {
  padding: var(--jmc-space-2) var(--jmc-space-3);
  margin: 0;
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);

  /*
    عنوان قسم التنقّل — F-45.
    كان .45 فأعطى **4.08:1** على خلفية الشريط الفاتحة (#043020) و4.52 على
    الليلية، والمطلوب 4.5 لنصٍّ 12px. و.55 يُعطي 5.37 و6.22 — هامشٌ يحتمل أي
    تعديل لاحق على لون الشريط بلا أن يسقط تحت الحدّ.

    ولماذا لم يُكشَف في V-11؟ لأن ذلك المسح قرأ `rgba` **بلا إذابة شفافيتها**
    على الخلفية، فحُسِب اللون أبيض صافياً (12.6:1) فمرّ. والدرس مُسجَّل في
    طرق التحقق: الشفافية تُذاب قبل الحساب دائماً.
  */
  color: rgba(255, 255, 255, .55);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
}

.jmc-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jmc-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--jmc-space-3);
  /* هدف لمس ≥ 44px — WCAG 2.5.5 */
  min-height: 2.75rem;
  padding: var(--jmc-space-2) var(--jmc-space-3);
  margin-bottom: 2px;
  border-radius: var(--jmc-radius);
  color: var(--jmc-sidebar-text);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  white-space: nowrap;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease),
              color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-nav-link:hover {
  background: var(--jmc-sidebar-hover);
  color: #fff;
  text-decoration: none;
}

.jmc-nav-link.active {
  background: var(--jmc-sidebar-active);
  color: #fff;
  font-weight: var(--jmc-fw-semibold);
}

/*
  مؤشّر بصري ثانٍ للعنصر النشط: لا اعتماد على اللون وحده — WCAG 1.4.1.
  يوضَع على حدّ الشاشة (اليمين في RTL) = inline-start، ليقرأ كشريط تحديد جانبي.
*/
.jmc-nav-link.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 20%;
  width: 3px;
  border-radius: var(--jmc-radius-pill);
  background: #fff;
}

.jmc-nav-link__icon {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 1.125rem;
  text-align: center;
}

.jmc-nav-link__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jmc-nav-link__badge {
  margin-inline-start: auto;
  padding: .1rem .45rem;
  border-radius: var(--jmc-radius-pill);
  background: rgba(255, 255, 255, .18);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* قائمة فرعية */
.jmc-nav-sublist {
  list-style: none;
  margin: 0 0 var(--jmc-space-2);
  padding-inline-start: var(--jmc-space-6);
}

.jmc-nav-sublist .jmc-nav-link {
  min-height: 2.25rem;
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-regular);
}

/* ── تذييل الشريط ───────────────────────────────────────────────────────── */

.jmc-sidebar__footer {
  flex-shrink: 0;
  padding: var(--jmc-space-3) var(--jmc-space-4);
  border-top: 1px solid var(--jmc-sidebar-border);
  font-size: var(--jmc-fs-2xs);
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  overflow: hidden;
}

/* ==========================================================================
   الشريط العلوي
   ========================================================================== */

.jmc-topbar {
  position: sticky;
  top: 0;
  z-index: var(--jmc-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--jmc-space-3);
  flex-shrink: 0;
  height: var(--jmc-topbar-height);
  padding-inline: var(--jmc-space-4);
  background: var(--jmc-surface);
  border-bottom: 1px solid var(--jmc-border);
  transition: box-shadow var(--jmc-dur) var(--jmc-ease),
              background-color var(--jmc-dur) var(--jmc-ease);
}

/* ظل يظهر عند التمرير فقط: يفصل الشريط عن المحتوى بصرياً حين يلزم */
.jmc-topbar.is-scrolled {
  box-shadow: var(--jmc-shadow-sm);
}

.jmc-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--jmc-radius);
  background: transparent;
  color: var(--jmc-text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease),
              color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-topbar__toggle:hover {
  background: var(--jmc-surface-3);
  color: var(--jmc-text);
}

.jmc-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-bold);
  color: var(--jmc-text);
  white-space: nowrap;
  text-decoration: none;
}

.jmc-topbar__brand:hover {
  color: var(--jmc-text);
  text-decoration: none;
}

.jmc-topbar__brand img {
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
}

.jmc-topbar__spacer {
  flex: 1 1 auto;
}

.jmc-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-1);
  flex-shrink: 0;
}

/* ── البحث السريع ───────────────────────────────────────────────────────── */

.jmc-quick-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 28rem;
  /* مُخفى على الموبايل — يظهر بزر مخصّص لتوفير المساحة */
  display: none;
}

@media (min-width: 768px) {
  .jmc-quick-search { display: block; }
}

/* رابط البحث البديل: يظهر حيث يُخفى الحقل، ويختفي حيث يظهر — فلا يوجد
   مسارَان للبحث في الشريط في وقت واحد. */
.jmc-topbar__search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (min-width: 768px) {
  .jmc-topbar__search-link { display: none; }
}

.jmc-quick-search__input {
  width: 100%;
  height: 2.5rem;
  padding-inline: 2.5rem var(--jmc-space-3);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius);
  background: var(--jmc-surface-2);
  color: var(--jmc-text);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  transition: border-color var(--jmc-dur-fast) var(--jmc-ease),
              box-shadow var(--jmc-dur-fast) var(--jmc-ease),
              background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-quick-search__input::placeholder {
  color: var(--jmc-text-muted);
}

.jmc-quick-search__input:focus {
  outline: none;
  background: var(--jmc-surface);
  border-color: var(--jmc-primary-600);
  box-shadow: 0 0 0 3px var(--jmc-focus-ring);
}

.jmc-quick-search__icon {
  position: absolute;
  inset-inline-start: var(--jmc-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--jmc-text-muted);
  pointer-events: none;
  font-size: 1rem;
}

.jmc-quick-search__hint {
  position: absolute;
  inset-inline-end: var(--jmc-space-2);
  top: 50%;
  transform: translateY(-50%);
  padding: .1rem .35rem;
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-sm);
  background: var(--jmc-surface);
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-2xs);
  font-family: var(--jmc-font-mono);
  pointer-events: none;
}

.jmc-quick-search__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--jmc-space-2));
  z-index: var(--jmc-z-dropdown);
  max-height: 24rem;
  overflow-y: auto;
  padding: var(--jmc-space-2);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  background: var(--jmc-surface);
  box-shadow: var(--jmc-shadow-md);
  display: none;
}

.jmc-quick-search__results.is-open {
  display: block;
}

/* ── قائمة المستخدم ─────────────────────────────────────────────────────── */

.jmc-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  min-height: 2.5rem;
  padding: var(--jmc-space-1) var(--jmc-space-2);
  border: 1px solid transparent;
  border-radius: var(--jmc-radius);
  background: transparent;
  color: var(--jmc-text);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  cursor: pointer;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-user-menu__trigger:hover {
  background: var(--jmc-surface-3);
}

.jmc-user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-primary-100);
  color: var(--jmc-primary-700);
  font-weight: var(--jmc-fw-semibold);
  font-size: var(--jmc-fs-xs);
}

[data-theme="dark"] .jmc-user-menu__avatar {
  background: var(--jmc-primary-800);
  color: var(--jmc-primary-200);
}

.jmc-user-menu__name {
  display: none;
  max-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--jmc-fw-medium);
}

@media (min-width: 480px) {
  .jmc-user-menu__name { display: block; }
}

/* ==========================================================================
   ترويسة الصفحة ومسار التنقّل
   ========================================================================== */

.jmc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--jmc-space-2);
  margin-bottom: var(--jmc-space-3);
  font-size: var(--jmc-fs-xs);
  color: var(--jmc-text-muted);
  list-style: none;
  padding: 0;
}

.jmc-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
}

.jmc-breadcrumb li:not(:last-child)::after {
  content: "\203A"; /* › */
  color: var(--jmc-border-strong);
}

.jmc-breadcrumb a {
  color: var(--jmc-text-secondary);
}

.jmc-breadcrumb [aria-current="page"] {
  color: var(--jmc-text);
  font-weight: var(--jmc-fw-medium);
}

.jmc-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--jmc-space-4);
  margin-bottom: var(--jmc-space-6);
}

.jmc-page-header__text {
  min-width: 0;
}

.jmc-page-header__title {
  margin: 0;
  font-size: var(--jmc-fs-h1);
  font-weight: var(--jmc-fw-bold);
}

.jmc-page-header__subtitle {
  margin: var(--jmc-space-1) 0 0;
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-sm);
}

.jmc-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jmc-space-2);
}

/* ==========================================================================
   التذييل
   ========================================================================== */

.jmc-footer {
  flex-shrink: 0;
  padding: var(--jmc-space-5) var(--jmc-space-6);
  border-top: 1px solid var(--jmc-border);
  background: var(--jmc-surface);
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-xs);
  text-align: center;
}

/* ==========================================================================
   شبكات جاهزة
   auto-fit + minmax تُعطي تجاوباً بلا نقاط كسر — الصف يقرّر عدد الأعمدة
   حسب المساحة المتاحة فعلاً لا حسب عرض الشاشة.
   ========================================================================== */

.jmc-grid {
  display: grid;
  gap: var(--jmc-space-4);
}

.jmc-grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.jmc-grid--charts {
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

.jmc-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.jmc-grid--2 { grid-template-columns: 1fr; }
.jmc-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .jmc-grid { gap: var(--jmc-space-5); }
  .jmc-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .jmc-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* عمود يمتدّ على كل العرض داخل الشبكة */
.jmc-grid__full {
  grid-column: 1 / -1;
}

/* ==========================================================================
   الشاشات الكبيرة: الشريط الجانبي ثابت والمحتوى يفسح له
   ========================================================================== */

@media (min-width: 992px) {
  .jmc-sidebar {
    transform: translateX(0);
    box-shadow: none;
  }

  .jmc-sidebar__backdrop {
    display: none;
  }

  .jmc-main {
    margin-inline-start: var(--jmc-sidebar-width);
    transition: margin-inline-start var(--jmc-dur-slow) var(--jmc-ease);
  }

  .jmc-topbar__toggle {
    /* على الديسكتوب يتحوّل الزر من «فتح الدرج» إلى «طيّ الشريط» */
    color: var(--jmc-text-secondary);
  }

  /* حالة الطيّ: أيقونات فقط */
  .jmc-app.is-collapsed .jmc-sidebar {
    width: var(--jmc-sidebar-width-collapsed);
  }

  .jmc-app.is-collapsed .jmc-main {
    margin-inline-start: var(--jmc-sidebar-width-collapsed);
  }

  /* حالة الطيّ: يظهر الرمز وحده وتُخفى الكلمة */
  .jmc-app.is-collapsed .jmc-sidebar__mark {
    display: block;
  }

  /*
    الكلمة تُخفى في حالة الطيّ ويبقى الرمز وحده.
    ملاحظة: كانت القاعدة تستهدف .jmc-sidebar__brand وهو عنصر أُزيل عند إدخال
    الشعار الرسمي، فبقيت الكلمة ظاهرة مقصوصة داخل شريط 76px —
    عيب اكتُشف بقياس display فعلياً في حالة الطيّ لا بالنظر.
  */
  .jmc-app.is-collapsed .jmc-sidebar__wordmark,
  .jmc-app.is-collapsed .jmc-nav-link__text,
  .jmc-app.is-collapsed .jmc-nav-link__badge,
  .jmc-app.is-collapsed .jmc-nav-section__title,
  .jmc-app.is-collapsed .jmc-sidebar__footer,
  .jmc-app.is-collapsed .jmc-nav-sublist {
    display: none;
  }

  .jmc-app.is-collapsed .jmc-sidebar__header,
  .jmc-app.is-collapsed .jmc-nav-link {
    justify-content: center;
    padding-inline: var(--jmc-space-2);
  }
}

/* ==========================================================================
   تخطيط شاشة الدخول
   ========================================================================== */

.jmc-auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.jmc-auth__form-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--jmc-space-6);
  background: var(--jmc-surface);
}

.jmc-auth__form-wrap {
  width: 100%;
  max-width: 25rem;
  margin-inline: auto;
}

.jmc-auth__brand {
  margin-bottom: var(--jmc-space-8);
}

/*
  شعار شاشة الدخول.
  نسختان جاهزتان بدل currentColor: عند تحميل SVG عبر <img> يكون مستنداً
  معزولاً لا يرث لون الصفحة، فـ currentColor يعود إلى الأسود دائماً.
  لذلك نُدرج النسختين ونُظهر المناسبة حسب المظهر — بلا جافاسكربت.
*/
.jmc-auth__logo {
  display: block;
  width: auto;
  height: 4rem;
  max-width: 100%;
  margin-bottom: var(--jmc-space-5);
}

.jmc-auth__logo--dark { display: block; }   /* على الخلفية الفاتحة */
.jmc-auth__logo--light { display: none; }   /* على الخلفية الداكنة */

[data-theme="dark"] .jmc-auth__logo--dark { display: none; }
[data-theme="dark"] .jmc-auth__logo--light { display: block; }

.jmc-auth__title {
  margin: 0;
  font-size: var(--jmc-fs-h2);
  font-weight: var(--jmc-fw-bold);
}

.jmc-auth__subtitle {
  margin: var(--jmc-space-1) 0 0;
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-sm);
}

.jmc-auth__footer {
  margin-top: var(--jmc-space-8);
  padding-top: var(--jmc-space-5);
  border-top: 1px solid var(--jmc-border);
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-2xs);
  text-align: center;
}

/* اللوحة التعريفية: تُخفى على الشاشات الصغيرة فيتوسّط النموذج */
.jmc-auth__hero {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: var(--jmc-space-12);
  background: linear-gradient(150deg,
              var(--jmc-primary-900) 0%,
              var(--jmc-primary-700) 55%,
              var(--jmc-primary-600) 100%);
  color: #fff;
  overflow: hidden;
}

@media (min-width: 992px) {
  .jmc-auth { grid-template-columns: 1fr 1.1fr; }
  .jmc-auth__hero { display: flex; }
}

.jmc-auth__hero-content {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.jmc-auth__hero-title {
  font-size: var(--jmc-fs-display);
  font-weight: var(--jmc-fw-bold);
  line-height: 1.35;
  color: #fff;
  margin-bottom: var(--jmc-space-6);
}

.jmc-auth__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--jmc-space-4);
}

.jmc-auth__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  font-size: var(--jmc-fs-body);
  color: rgba(255, 255, 255, .92);
}

.jmc-auth__features i {
  flex-shrink: 0;
  margin-top: .3rem;
  color: var(--jmc-primary-200);
}

/* نقش خفيف: يُضيف عمقاً بلا صورة نقطية وبلا أي طلب شبكة إضافي */
.jmc-auth__hero::before,
.jmc-auth__hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
              rgba(255, 255, 255, .10),
              rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.jmc-auth__hero::before {
  width: 32rem;
  height: 32rem;
  top: -10rem;
  inset-inline-start: -10rem;
}

.jmc-auth__hero::after {
  width: 24rem;
  height: 24rem;
  bottom: -8rem;
  inset-inline-end: -6rem;
}

/* ==========================================================================
   عناصر نتائج البحث السريع
   --------------------------------------------------------------------------
   القائمة تعرض نوعين من الكيانات (كوادر ومنشآت) بشكل موحّد، ورأساً يُعلن
   كيف فهم النظام المُدخَل — لأن المستخدم لا يعرف أن «0791234567» فُسِّر
   هاتفاً، فإن لم تظهر نتائج ظنّ النظام معطّلاً لا مُدخَله مختلفاً.
   ========================================================================== */

.jmc-qs-kind {
  margin: 0 0 var(--jmc-space-2);
  padding: 0 var(--jmc-space-2);
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
}

.jmc-qs-kind__count { font-weight: var(--jmc-fw-medium); }

.jmc-qs-group {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  margin: var(--jmc-space-2) 0 var(--jmc-space-1);
  padding: 0 var(--jmc-space-2);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text-secondary);
}

.jmc-qs-group__count {
  margin-inline-start: auto;
  font-weight: var(--jmc-fw-regular);
  color: var(--jmc-text-muted);
  font-variant-numeric: tabular-nums;
}

.jmc-qs-option {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-2) var(--jmc-space-2);
  border-radius: var(--jmc-radius);
  color: var(--jmc-text);
  text-decoration: none;
}

.jmc-qs-option:hover,
.jmc-qs-option.is-active {
  background: var(--jmc-surface-2);
  text-decoration: none;
}

/* الإبراز بالكيبورد يحتاج علامة لا تعتمد على الخلفية وحدها (1.4.1) */
.jmc-qs-option.is-active {
  box-shadow: inset 3px 0 0 var(--jmc-primary-600);
}

.jmc-qs-option__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-surface-3);
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-xs);
}

.jmc-qs-option__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.jmc-qs-option__title {
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jmc-qs-option__subtitle {
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jmc-qs-option__matched {
  flex-shrink: 0;
  font-family: var(--jmc-font-mono);
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-secondary);
}

.jmc-qs-more,
.jmc-qs-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jmc-space-2);
  margin-top: var(--jmc-space-1);
  padding: var(--jmc-space-2);
  border-radius: var(--jmc-radius);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-medium);
  color: var(--jmc-link);
  text-decoration: none;
}

.jmc-qs-more:hover,
.jmc-qs-full:hover {
  background: var(--jmc-surface-2);
  text-decoration: none;
}

.jmc-qs-full {
  margin-top: var(--jmc-space-2);
  padding-top: var(--jmc-space-3);
  border-top: 1px solid var(--jmc-border);
  border-radius: 0;
}

.jmc-qs-empty {
  padding: var(--jmc-space-5) var(--jmc-space-3);
  text-align: center;
  color: var(--jmc-text-muted);
}

.jmc-qs-empty i {
  font-size: 1.5rem;
  opacity: .7;
}

.jmc-qs-empty__title {
  margin: var(--jmc-space-2) 0 var(--jmc-space-1);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  color: var(--jmc-text);
}

.jmc-qs-empty__text {
  margin: 0;
  font-size: var(--jmc-fs-2xs);
  line-height: var(--jmc-lh-snug);
}

/* مؤشّر التحميل: شريط رقيق أعلى القائمة — أهدأ من دوّار يقفز في المنتصف */
.jmc-quick-search__results.is-loading::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  border-radius: var(--jmc-radius-pill);
  background: linear-gradient(90deg,
    transparent, var(--jmc-primary-600), transparent);
  animation: jmc-qs-loading 1s linear infinite;
}

@keyframes jmc-qs-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .jmc-quick-search__results.is-loading::before { animation: none; opacity: .6; }
}