/* ==========================================================================
   المجلس الأردني الطبي — مكتبة المكوّنات (UI Kit)
   الأزرار · البطاقات · الجداول · النماذج · الحوارات · الشارات · الرسوم
   ========================================================================== */

/* ==========================================================================
   الأزرار
   ========================================================================== */

.jmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jmc-space-2);
  /* هدف لمس ≥ 44px على الشاشات اللمسية — WCAG 2.5.5 */
  min-height: 2.5rem;
  padding: var(--jmc-space-2) var(--jmc-space-4);
  border: 1px solid transparent;
  border-radius: var(--jmc-radius);
  background: transparent;
  color: var(--jmc-text);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease),
              border-color var(--jmc-dur-fast) var(--jmc-ease),
              color var(--jmc-dur-fast) var(--jmc-ease),
              box-shadow var(--jmc-dur-fast) var(--jmc-ease),
              transform var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-btn:hover { text-decoration: none; }

/* الضغط: انخفاض بسيط يعطي إحساساً مادياً بالاستجابة */
.jmc-btn:active:not(:disabled) { transform: scale(.98); }

.jmc-btn:disabled,
.jmc-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

@media (pointer: coarse) {
  .jmc-btn { min-height: 2.75rem; }
}

/* ── الأنواع ────────────────────────────────────────────────────────────── */

.jmc-btn--primary {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-600);
  color: #fff;
}

.jmc-btn--primary:hover:not(:disabled) {
  background: var(--jmc-primary-700);
  border-color: var(--jmc-primary-700);
  color: #fff;
  box-shadow: var(--jmc-shadow-sm);
  transform: translateY(-1px);
}

.jmc-btn--primary:active:not(:disabled) {
  background: var(--jmc-primary-800);
  border-color: var(--jmc-primary-800);
  transform: scale(.98);
}

.jmc-btn--secondary {
  background: var(--jmc-surface);
  border-color: var(--jmc-border-strong);
  color: var(--jmc-text);
}

.jmc-btn--secondary:hover:not(:disabled) {
  background: var(--jmc-surface-3);
  color: var(--jmc-text);
}

.jmc-btn--outline {
  background: transparent;
  border-color: var(--jmc-primary-600);
  color: var(--jmc-primary-700);
}

.jmc-btn--outline:hover:not(:disabled) {
  background: var(--jmc-primary-50);
  color: var(--jmc-primary-800);
}

[data-theme="dark"] .jmc-btn--outline {
  color: var(--jmc-primary-300);
}

[data-theme="dark"] .jmc-btn--outline:hover:not(:disabled) {
  background: rgba(14, 124, 102, .18);
  color: var(--jmc-primary-200);
}

.jmc-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--jmc-text-secondary);
}

.jmc-btn--ghost:hover:not(:disabled) {
  background: var(--jmc-surface-3);
  color: var(--jmc-text);
}

.jmc-btn--danger {
  background: var(--jmc-danger);
  border-color: var(--jmc-danger);
  color: #fff;
}

.jmc-btn--danger:hover:not(:disabled) {
  background: var(--jmc-danger-dark);
  border-color: var(--jmc-danger-dark);
  color: #fff;
  box-shadow: var(--jmc-shadow-sm);
}

.jmc-btn--danger-ghost {
  background: transparent;
  border-color: transparent;
  /* رمز النص لا اللون الأساسي (F-19): الزر الشفّاف نصّه على سطح الصفحة */
  color: var(--jmc-text-danger-on);
}

.jmc-btn--danger-ghost:hover:not(:disabled) {
  background: var(--jmc-danger-soft);
  color: var(--jmc-danger-dark);
}

[data-theme="dark"] .jmc-btn--danger-ghost:hover:not(:disabled) {
  background: rgba(206, 17, 38, .18);
  color: #F87171;
}

.jmc-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--jmc-link);
  padding-inline: var(--jmc-space-1);
}

.jmc-btn--link:hover:not(:disabled) {
  text-decoration: underline;
  color: var(--jmc-link-hover);
}

/* ── المقاسات ───────────────────────────────────────────────────────────── */

.jmc-btn--sm {
  min-height: 2rem;
  padding: var(--jmc-space-1) var(--jmc-space-3);
  font-size: var(--jmc-fs-xs);
}

.jmc-btn--lg {
  min-height: 3rem;
  padding: var(--jmc-space-3) var(--jmc-space-6);
  font-size: var(--jmc-fs-body);
}

.jmc-btn--block {
  display: flex;
  width: 100%;
}

/* زر أيقونة فقط — يجب أن يحمل aria-label دائماً */
.jmc-btn--icon {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
}

.jmc-btn--icon.jmc-btn--sm {
  width: 2rem;
  min-height: 2rem;
}

@media (pointer: coarse) {
  .jmc-btn--icon,
  .jmc-btn--icon.jmc-btn--sm {
    width: 2.75rem;
    min-height: 2.75rem;
  }

  /*
    الزر الصغير النصّي على اللمس — عيب قِيس فعلياً (F-38).
    كتلة `pointer: coarse` العامة أعلى الملف تضبط `.jmc-btn` على 2.75rem،
    لكن `.jmc-btn--sm` مُعرَّف **بعدها** بنفس الأولوية فيتغلّب عليها بترتيب
    المصدر ويعيد الارتفاع إلى 2rem = 32px. فكان زرّ الإجراء الصغير في الجداول
    32px على الأجهزة اللمسية، وقاعدة التصميم في هذا النظام ≥44px.
    والإصلاح هنا لا هناك: القاعدة يجب أن تأتي بعد التعريف الذي يتغلّب عليها.
  */
  .jmc-btn--sm { min-height: 2.75rem; }
}

/* ── حالة التحميل ───────────────────────────────────────────────────────── */

.jmc-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.jmc-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: jmc-spin var(--jmc-dur-slower) linear infinite;
  /* اللون يُوَرَّث من نوع الزر فيبقى الدوّار مرئياً على كل الخلفيات */
  color: #fff;
}

.jmc-btn--secondary.is-loading::after,
.jmc-btn--outline.is-loading::after,
.jmc-btn--ghost.is-loading::after {
  color: var(--jmc-primary-600);
}

@keyframes jmc-spin {
  to { transform: rotate(360deg); }
}

/* مجموعة أزرار */
.jmc-btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   البطاقات
   ========================================================================== */

.jmc-card {
  display: flex;
  flex-direction: column;
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  box-shadow: var(--jmc-shadow-sm);
  transition: box-shadow var(--jmc-dur) var(--jmc-ease),
              transform var(--jmc-dur) var(--jmc-ease),
              background-color var(--jmc-dur) var(--jmc-ease),
              border-color var(--jmc-dur) var(--jmc-ease);
  overflow: hidden;
}

/* رفع عند التحويم للبطاقات القابلة للنقر فقط — لا لكل بطاقة */
.jmc-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--jmc-shadow-md);
}

.jmc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-4) var(--jmc-space-5);
  border-bottom: 1px solid var(--jmc-border);
}

.jmc-card__title {
  margin: 0;
  font-size: var(--jmc-fs-h4);
  font-weight: var(--jmc-fw-semibold);
}

.jmc-card__subtitle {
  margin: var(--jmc-space-1) 0 0;
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-regular);
  color: var(--jmc-text-muted);
}

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

.jmc-card__body {
  flex: 1 1 auto;
  padding: var(--jmc-space-4);
}

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

.jmc-card__body--flush { padding: 0; }

.jmc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-3) var(--jmc-space-5);
  border-top: 1px solid var(--jmc-border);
  background: var(--jmc-surface-2);
}

/* ── بطاقة المؤشّر (KPI) ────────────────────────────────────────────────── */

.jmc-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-4);
  padding: var(--jmc-space-5);
  background: var(--jmc-surface);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  box-shadow: var(--jmc-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--jmc-dur) var(--jmc-ease),
              transform var(--jmc-dur) var(--jmc-ease);
}

a.jmc-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--jmc-shadow-md);
  text-decoration: none;
}

/* شريط لون علوي: يميّز البطاقات دون الاعتماد على لون الخلفية */
.jmc-kpi::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--jmc-kpi-color, var(--jmc-primary-600));
}

.jmc-kpi__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--jmc-radius);
  background: var(--jmc-kpi-bg, var(--jmc-primary-50));
  color: var(--jmc-kpi-color, var(--jmc-primary-700));
  font-size: 1.5rem;
}

.jmc-kpi__content {
  min-width: 0;
  flex: 1 1 auto;
}

.jmc-kpi__label {
  display: block;
  margin: 0 0 var(--jmc-space-1);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text-secondary);
  letter-spacing: 0;
}

.jmc-kpi__value {
  display: block;
  font-size: var(--jmc-fs-kpi);
  font-weight: var(--jmc-fw-bold);
  line-height: 1.1;
  color: var(--jmc-text);
  /* أرقام أحادية العرض: يمنع «رقص» الرقم أثناء العدّ التصاعدي */
  font-variant-numeric: tabular-nums;
}

.jmc-kpi__hint {
  display: block;
  margin-top: var(--jmc-space-1);
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
}

/* أطقم ألوان البطاقات — تُختار بسمة data-color من قاعدة البيانات */
.jmc-kpi[data-color="primary"] { --jmc-kpi-color: var(--jmc-primary-700); --jmc-kpi-bg: var(--jmc-primary-50); }
.jmc-kpi[data-color="info"]    { --jmc-kpi-color: var(--jmc-info);        --jmc-kpi-bg: var(--jmc-info-soft); }
.jmc-kpi[data-color="success"] { --jmc-kpi-color: var(--jmc-success);     --jmc-kpi-bg: var(--jmc-success-soft); }
.jmc-kpi[data-color="warning"] { --jmc-kpi-color: var(--jmc-warning);     --jmc-kpi-bg: var(--jmc-warning-soft); }
.jmc-kpi[data-color="danger"]  { --jmc-kpi-color: var(--jmc-danger);      --jmc-kpi-bg: var(--jmc-danger-soft); }
.jmc-kpi[data-color="teal"]    { --jmc-kpi-color: var(--jmc-teal);        --jmc-kpi-bg: var(--jmc-teal-soft); }
.jmc-kpi[data-color="accent"]  { --jmc-kpi-color: var(--jmc-accent);      --jmc-kpi-bg: var(--jmc-accent-soft); }

/* في الوضع الليلي تُستبدل الخلفيات الفاتحة بشفافية من نفس اللون */
[data-theme="dark"] .jmc-kpi__icon {
  background: rgba(255, 255, 255, .06);
}

/* ==========================================================================
   الجداول
   ========================================================================== */

.jmc-table-wrap {
  width: 100%;
  /* التمرير الأفقي يحدث هنا — لا على الصفحة (شرط «بلا كسر في التصميم») */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jmc-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--jmc-fs-sm);
  line-height: var(--jmc-lh-table);
}

.jmc-table th,
.jmc-table td {
  padding: var(--jmc-space-3) var(--jmc-space-4);
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--jmc-border);
}

.jmc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--jmc-surface-2);
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-semibold);
  white-space: nowrap;
  border-bottom: 2px solid var(--jmc-border-strong);
}

.jmc-table tbody tr {
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-table tbody tr:hover {
  background: var(--jmc-surface-3);
}

.jmc-table tbody tr.is-selected {
  background: var(--jmc-primary-50);
}

[data-theme="dark"] .jmc-table tbody tr.is-selected {
  background: rgba(14, 124, 102, .18);
}

/* تمييز مؤقّت للصف المضاف أو المعدّل حديثاً */
.jmc-table tbody tr.is-highlighted {
  animation: jmc-row-flash 2s var(--jmc-ease);
}

@keyframes jmc-row-flash {
  0%, 30% { background: var(--jmc-primary-100); }
  100%    { background: transparent; }
}

.jmc-table tfoot td {
  background: var(--jmc-surface-2);
  font-weight: var(--jmc-fw-semibold);
  border-top: 2px solid var(--jmc-border-strong);
}

.jmc-table__num {
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.jmc-table__actions {
  white-space: nowrap;
  width: 1%;
}

.jmc-table__drag {
  width: 1%;
  cursor: grab;
  color: var(--jmc-text-muted);
  text-align: center;
}

.jmc-table__drag:active { cursor: grabbing; }

/* عمود قابل للترتيب */
.jmc-sortable {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-1);
  color: inherit;
  font: inherit;
}

.jmc-sortable:hover { color: var(--jmc-primary-700); text-decoration: none; }

.jmc-sortable__icon { font-size: .75rem; opacity: .5; }
.jmc-sortable.is-active .jmc-sortable__icon { opacity: 1; }

/* ── تحوّل الجدول إلى بطاقات على الشاشات الصغيرة ─────────────────────────── */
/* الجدول العريض على شاشة 400px غير قابل للاستخدام مهما مُرِّر أفقياً،
   فنعيد بناء كل صف كبطاقة عمودية تحمل تسمية كل خلية. */

@media (max-width: 767.98px) {
  .jmc-table--stack thead {
    /* clip لا display:none — يبقى الجدول مقروءاً لقارئات الشاشة */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .jmc-table--stack,
  .jmc-table--stack tbody,
  .jmc-table--stack tr,
  .jmc-table--stack td {
    display: block;
    width: 100%;
  }

  .jmc-table--stack tr {
    margin-bottom: var(--jmc-space-3);
    padding: var(--jmc-space-3);
    border: 1px solid var(--jmc-border);
    border-radius: var(--jmc-radius);
    background: var(--jmc-surface);
    box-shadow: var(--jmc-shadow-xs);
  }

  .jmc-table--stack tr:hover { background: var(--jmc-surface); }

  .jmc-table--stack td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--jmc-space-3);
    padding: var(--jmc-space-2) 0;
    border-bottom: 1px dashed var(--jmc-border);
  }

  .jmc-table--stack td:last-child { border-bottom: 0; padding-bottom: 0; }

  .jmc-table--stack td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--jmc-fs-2xs);
    font-weight: var(--jmc-fw-semibold);
    color: var(--jmc-text-muted);
  }

  .jmc-table--stack td:not([data-label])::before { content: none; }
}

/* ── تذييل الجدول: العدّاد والترقيم ──────────────────────────────────────── */

.jmc-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-3) var(--jmc-space-4);
  border-top: 1px solid var(--jmc-border);
  background: var(--jmc-surface-2);
  font-size: var(--jmc-fs-xs);
  color: var(--jmc-text-secondary);
}

.jmc-pager {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.jmc-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding-inline: var(--jmc-space-2);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-sm);
  background: var(--jmc-surface);
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-xs);
  font-variant-numeric: tabular-nums;
  transition: all var(--jmc-dur-fast) var(--jmc-ease);
}

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

.jmc-pager__link.is-active {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-600);
  color: #fff;
  font-weight: var(--jmc-fw-semibold);
}

.jmc-pager__link.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.jmc-pager__ellipsis {
  padding-inline: var(--jmc-space-1);
  color: var(--jmc-text-muted);
}

/* ==========================================================================
   الحالات: فارغ · تحميل · خطأ
   ========================================================================== */

.jmc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--jmc-space-12) var(--jmc-space-6);
}

.jmc-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--jmc-space-4);
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-surface-3);
  color: var(--jmc-text-muted);
  font-size: 2rem;
}

.jmc-empty__title {
  margin: 0 0 var(--jmc-space-2);
  font-size: var(--jmc-fs-h3);
  font-weight: var(--jmc-fw-semibold);
}

.jmc-empty__text {
  max-width: 32rem;
  margin: 0 0 var(--jmc-space-5);
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-sm);
}

/* هياكل التحميل (Skeleton) — أفضل من دوّار وسط الشاشة لأنها تُبقي
   شكل المحتوى فتمنع قفزة التخطيط عند وصول البيانات (CLS). */

.jmc-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--jmc-surface-3);
  border-radius: var(--jmc-radius-sm);
}

.jmc-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, .35),
              transparent);
  animation: jmc-shimmer 1.4s infinite;
}

[data-theme="dark"] .jmc-skeleton::after {
  background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, .08),
              transparent);
}

@keyframes jmc-shimmer {
  100% { transform: translateX(100%); }
}

.jmc-skeleton--text { height: .875rem; margin-bottom: var(--jmc-space-2); }
.jmc-skeleton--title { height: 1.25rem; width: 40%; margin-bottom: var(--jmc-space-3); }
.jmc-skeleton--kpi  { height: 6.5rem; border-radius: var(--jmc-radius-md); }
.jmc-skeleton--chart { height: 16rem; border-radius: var(--jmc-radius-md); }

/* ==========================================================================
   النماذج
   ========================================================================== */

.jmc-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jmc-space-5);
}

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

/* طبقة التابلت: الشبكات الثلاثية والرباعية تصير عمودين لا عموداً واحداً.
   بلا هذه الطبقة يعرض نموذج الكادر على 768px حقلاً واحداً في السطر ويُهدر
   نصف العرض، فيطول النموذج ذو الاثنين والعشرين حقلاً بلا سبب. */
@media (min-width: 768px) {
  .jmc-form-grid--3,
  .jmc-form-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

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

.jmc-form-grid__full { grid-column: 1 / -1; }

/* حقل يشغل عمودين — للاسم بالإنجليزية داخل شبكة رباعية */
@media (min-width: 768px) {
  .jmc-form-grid__span-2 { grid-column: span 2; }
}

.jmc-field {
  display: flex;
  flex-direction: column;
  gap: var(--jmc-space-2);
  min-width: 0;
}

/* تسمية فوق الحقل لا عائمة: أوضح للعربية وأصحّ لقارئات الشاشة */
.jmc-label {
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text-secondary);
}

.jmc-label__required {
  color: var(--jmc-text-danger-on);
  margin-inline-start: 2px;
}

.jmc-input,
.jmc-select,
.jmc-textarea {
  width: 100%;
  min-height: 2.625rem;
  padding: var(--jmc-space-2) var(--jmc-space-3);
  border: 1px solid var(--jmc-border-strong);
  border-radius: var(--jmc-radius);
  background: var(--jmc-surface);
  color: var(--jmc-text);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  line-height: 1.6;
  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-textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: var(--jmc-lh-normal);
}

.jmc-input::placeholder,
.jmc-textarea::placeholder {
  color: var(--jmc-text-muted);
}

.jmc-input:focus,
.jmc-select:focus,
.jmc-textarea:focus {
  outline: none;
  border-color: var(--jmc-primary-600);
  box-shadow: 0 0 0 3px var(--jmc-focus-ring);
}

.jmc-input:disabled,
.jmc-select:disabled,
.jmc-textarea:disabled,
.jmc-input[readonly],
.jmc-textarea[readonly] {
  background: var(--jmc-surface-3);
  color: var(--jmc-text-secondary);
  cursor: not-allowed;
}

/* حقل محسوب تلقائياً: يبدو مختلفاً بوضوح فلا يحاول المستخدم تعديله */
.jmc-input--computed {
  background: var(--jmc-primary-50);
  border-color: var(--jmc-primary-200);
  color: var(--jmc-primary-800);
  font-weight: var(--jmc-fw-semibold);
}

[data-theme="dark"] .jmc-input--computed {
  background: rgba(14, 124, 102, .15);
  border-color: var(--jmc-primary-700);
  color: var(--jmc-primary-200);
}

.jmc-select {
  /* سهم مخصّص: السهم الأصلي يظهر يساراً في RTL في بعض المتصفحات */
  appearance: none;
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M8 11.5 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--jmc-space-3) center;
  background-size: .875rem;
}

/* الأرقام والهوية والهاتف: خط أحادي العرض واتجاه LTR داخل حقل RTL */
.jmc-input--numeric {
  font-family: var(--jmc-font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
}

.jmc-field__hint {
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
}

/* ── حالات التحقق ───────────────────────────────────────────────────────── */

.jmc-input.input-validation-error,
.jmc-select.input-validation-error,
.jmc-textarea.input-validation-error,
.jmc-field.has-error .jmc-input,
.jmc-field.has-error .jmc-select,
.jmc-field.has-error .jmc-textarea {
  border-color: var(--jmc-danger);
  background: var(--jmc-danger-soft);
}

[data-theme="dark"] .jmc-field.has-error .jmc-input,
[data-theme="dark"] .jmc-input.input-validation-error {
  background: rgba(206, 17, 38, .12);
}

.jmc-input.input-validation-error:focus,
.jmc-select.input-validation-error:focus,
.jmc-textarea.input-validation-error:focus {
  box-shadow: 0 0 0 3px rgba(206, 17, 38, .25);
}

/* رسالة الخطأ: أيقونة + نص — لا اعتماد على اللون وحده (WCAG 1.4.1) */
.jmc-field__error,
.field-validation-error {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-1);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-medium);
  /* رسالة الخطأ نصّ على سطح النموذج — يجب أن تتكيّف مع المظهر (F-19) */
  color: var(--jmc-text-danger-on);
}

.jmc-field__error::before,
.field-validation-error::before {
  content: "\F33A"; /* bi-exclamation-circle-fill */
  font-family: "bootstrap-icons";
  flex-shrink: 0;
  line-height: 1.4;
}

.field-validation-valid { display: none; }

.jmc-input--valid {
  border-color: var(--jmc-success);
}

.jmc-field__success {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-1);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-medium);
  color: var(--jmc-text-success-on);
}

/* ── ملخّص التحقق ───────────────────────────────────────────────────────── */

.jmc-validation-summary {
  padding: var(--jmc-space-4) var(--jmc-space-5);
  margin-bottom: var(--jmc-space-5);
  border: 1px solid var(--jmc-danger);
  border-inline-start-width: 4px;
  border-radius: var(--jmc-radius);
  background: var(--jmc-danger-soft);
  color: var(--jmc-danger-dark);
}

[data-theme="dark"] .jmc-validation-summary {
  background: rgba(206, 17, 38, .12);
  color: #FCA5A5;
}

.jmc-validation-summary__title {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  margin: 0 0 var(--jmc-space-2);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-semibold);
}

.jmc-validation-summary ul {
  margin: 0;
  padding-inline-start: var(--jmc-space-5);
  font-size: var(--jmc-fs-xs);
}

.jmc-validation-summary ul:empty { display: none; }

.validation-summary-valid { display: none; }

/* ── مفتاح تبديل (Switch) ───────────────────────────────────────────────── */

.jmc-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-3);
  cursor: pointer;
  user-select: none;
}

.jmc-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.jmc-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-border-strong);
  transition: background-color var(--jmc-dur) var(--jmc-ease);
}

.jmc-switch__track::after {
  content: "";
  position: absolute;
  top: .1875rem;
  inset-inline-start: .1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--jmc-shadow-xs);
  transition: transform var(--jmc-dur) var(--jmc-ease-spring);
}

.jmc-switch input:checked + .jmc-switch__track {
  background: var(--jmc-primary-600);
}

/* في RTL يتحرّك المقبض إلى اليسار */
.jmc-switch input:checked + .jmc-switch__track::after {
  transform: translateX(-1.25rem);
}

.jmc-switch input:focus-visible + .jmc-switch__track {
  outline: 2px solid var(--jmc-primary-600);
  outline-offset: 2px;
}

.jmc-switch__label {
  font-size: var(--jmc-fs-sm);
  color: var(--jmc-text);
}

/*
  حقول الإدخال على الأجهزة اللمسية — نفس عيب F-38 في موضع آخر.
  الأزرار تكبر إلى 2.75rem على `pointer: coarse`، بينما بقيت الحقول على
  2.625rem = 42px. والحقل هدف لمسٍ كالزرّ: يُنقر ليُركَّز عليه. فالقاعدة
  «≥44px على اللمس» تسري عليه أيضاً، وإلا صار في الشاشة الواحدة معيارَان.

  وموضع الكتلة هنا — بعد كل تعريفات الحقول وحالاتها — لا قبلها: نفس درس F-38،
  إذ القاعدة اللاحقة بنفس الأولوية هي التي تغلب.

  و`.jmc-textarea` مُستثناة عن قصد: ارتفاعها الأدنى 5.5rem أصلاً، وإدراجها
  هنا كان سيُقصّرها إلى 44px على الأجهزة اللمسية — أي إصلاحٌ يُنتج عيباً أكبر.
*/
@media (pointer: coarse) {
  .jmc-input,
  .jmc-select {
    min-height: 2.75rem;
  }
}

/* ── مربّع اختيار ───────────────────────────────────────────────────────── */

.jmc-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--jmc-space-2);
  cursor: pointer;
  font-size: var(--jmc-fs-sm);
}

.jmc-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .25rem;
  accent-color: var(--jmc-primary-600);
  cursor: pointer;
}

/* ── حقل كلمة المرور مع زر الإظهار ──────────────────────────────────────── */

.jmc-password {
  position: relative;
}

/*
  ⚠ الجهات هنا **فيزيائية عن قصد** — والخصائص المنطقية هي التي أنتجت العيب.

  السبب أن العنصرين يعيشان في اتجاهَين مختلفين:
    • الحاوية `.jmc-password` تتبع اتجاه الصفحة (RTL دائماً)، فـ
      `inset-inline-end` عليها = **اليسار**؛
    • والحقل نفسه يحمل `dir="ltr"` (وهو صحيح: كلمة المرور محارف لاتينية
      وموضع المؤشّر يجب أن يقرأ من اليسار)، فـ`padding-inline-end` عليه
      = **اليمين**.

  فكانت المساحة تُحجَز يميناً والزرّ يقف يساراً، والنقاط تبدأ من اليسار —
  أي أن الزرّ يجلس **فوق أول 28 بكسل من كلمة المرور** (مقيس: الحقل يبدأ عند
  775، والنصّ عند 788، والزرّ يمتدّ إلى 815). ولا يظهر العيب في أي فحص
  تلقائي: العنصران سليمان كلٌّ على حِدة، والتعارض في تلاقيهما.

  والحلّ: الجهة الفيزيائية نفسها للاثنين. لا تُعِدهما إلى `inline` إلا إن
  صار للنظام اتجاهان — وهو مستبعد: عربي RTL فقط بقرار صريح.
*/
.jmc-password .jmc-input {
  padding-left: 2.75rem;
  padding-right: var(--jmc-space-3);
}

.jmc-password__toggle {
  position: absolute;
  left: var(--jmc-space-1);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--jmc-radius-sm);
  background: transparent;
  color: var(--jmc-text-muted);
  cursor: pointer;
  transition: color var(--jmc-dur-fast) var(--jmc-ease),
              background-color var(--jmc-dur-fast) var(--jmc-ease);
}

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

/*
  هدف اللمس ≥44px — الزرّ ليس `.jmc-btn` فلم تشمله كتلة `coarse` العامة
  (نفس ثغرة F-38 وF-44 في مكوّن ثالث). ومعه تكبر حشوة الحقل لتبقى المساحة
  محفوظة: زرٌّ أكبر بحشوةٍ ثابتة يعود ليجلس فوق النصّ.
*/
@media (pointer: coarse) {
  .jmc-password__toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .jmc-password .jmc-input {
    padding-left: 3.25rem;
  }
}

/* ── تبويبات النموذج (خطوات) ────────────────────────────────────────────── */

.jmc-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* padding/list-style مُصفَّران ليعمل الشريط كـ<ul> أيضاً في العرض الساكن
     (نظام التصميم) لا كـ<div role="tablist"> فقط — F-40. */
  margin: 0 0 var(--jmc-space-6);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--jmc-border);
  overflow-x: auto;
}

.jmc-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--jmc-space-3);
  flex: 1 1 auto;
  min-width: 11rem;
  padding: var(--jmc-space-3) var(--jmc-space-4);
  border: 0;
  background: transparent;
  color: var(--jmc-text-muted);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  text-align: start;
  cursor: pointer;
  transition: color var(--jmc-dur) var(--jmc-ease);
}

/* مؤشّر منزلق للتبويب النشط */
.jmc-step::after {
  content: "";
  position: absolute;
  inset-inline: var(--jmc-space-2);
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color var(--jmc-dur) var(--jmc-ease);
}

/* الحالة النشطة تُقرأ من aria-selected في التبويبات الحقيقية، ومن
   .is-active في العرض الساكن (نظام التصميم) — فلا يحتاج العرض الساكن
   إلى انتحال دور تبويب لا لوحة له (F-40). */
.jmc-step[aria-selected="true"],
.jmc-step.is-active {
  color: var(--jmc-primary-700);
}

.jmc-step[aria-selected="true"]::after,
.jmc-step.is-active::after {
  background: var(--jmc-primary-600);
}

[data-theme="dark"] .jmc-step[aria-selected="true"],
[data-theme="dark"] .jmc-step.is-active {
  color: var(--jmc-primary-300);
}

.jmc-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--jmc-border-strong);
  border-radius: 50%;
  background: var(--jmc-surface);
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: all var(--jmc-dur) var(--jmc-ease);
}

.jmc-step[aria-selected="true"] .jmc-step__number,
.jmc-step.is-active .jmc-step__number {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-600);
  color: #fff;
}

/* خطوة مكتملة: علامة صح — تأكيد بصري للتقدّم */
.jmc-step.is-complete .jmc-step__number {
  background: var(--jmc-success);
  border-color: var(--jmc-success);
  color: #fff;
}

.jmc-step.is-complete .jmc-step__number::before {
  content: "\F26E"; /* bi-check */
  font-family: "bootstrap-icons";
}

.jmc-step.is-complete .jmc-step__number-text { display: none; }

/* خطوة بها أخطاء: تُميَّز بأيقونة ولون معاً */
.jmc-step.has-error .jmc-step__number {
  background: var(--jmc-danger);
  border-color: var(--jmc-danger);
  color: #fff;
}

.jmc-step.has-error .jmc-step__number::before {
  content: "\F33A";
  font-family: "bootstrap-icons";
}

.jmc-step.has-error .jmc-step__number-text { display: none; }

.jmc-step__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jmc-step-panel { display: none; }
.jmc-step-panel.is-active { display: block; animation: jmc-fade-in var(--jmc-dur) var(--jmc-ease-out); }

@keyframes jmc-fade-in {
  from { opacity: 0; transform: translateY(.375rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── شريط أزرار النموذج ─────────────────────────────────────────────────── */

.jmc-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jmc-space-3);
  padding-top: var(--jmc-space-5);
  margin-top: var(--jmc-space-5);
  border-top: 1px solid var(--jmc-border);
}

/* حقل يظهر ويختفي ديناميكياً (حقل التخصص — BR-16) */
.jmc-conditional {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--jmc-dur-slow) var(--jmc-ease),
              opacity var(--jmc-dur) var(--jmc-ease);
  opacity: 1;
}

.jmc-conditional.is-hidden {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.jmc-conditional > * {
  overflow: hidden;
  min-height: 0;
}

/* ==========================================================================
   الشارات والشرائح
   ========================================================================== */

.jmc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-1);
  padding: .15rem .5rem;
  border-radius: var(--jmc-radius-pill);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);
  white-space: nowrap;
  line-height: 1.5;
}

.jmc-badge--success { background: var(--jmc-success-soft); color: var(--jmc-success-dark); }
.jmc-badge--danger  { background: var(--jmc-danger-soft);  color: var(--jmc-danger-dark); }
.jmc-badge--warning { background: var(--jmc-warning-soft); color: var(--jmc-warning-dark); }
.jmc-badge--info    { background: var(--jmc-info-soft);    color: var(--jmc-info-dark); }
.jmc-badge--neutral { background: var(--jmc-surface-3);    color: var(--jmc-text-secondary); }
.jmc-badge--primary { background: var(--jmc-primary-50);   color: var(--jmc-primary-800); }

[data-theme="dark"] .jmc-badge--success { background: rgba(21, 128, 61, .22);  color: #86EFAC; }
[data-theme="dark"] .jmc-badge--danger  { background: rgba(206, 17, 38, .22);  color: #FCA5A5; }
[data-theme="dark"] .jmc-badge--warning { background: rgba(180, 83, 9, .22);   color: #FCD34D; }
[data-theme="dark"] .jmc-badge--info    { background: rgba(3, 105, 161, .22);  color: #93C5FD; }
[data-theme="dark"] .jmc-badge--primary { background: rgba(14, 124, 102, .22); color: var(--jmc-primary-200); }

/* شريحة فلتر مطبَّق */
.jmc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-2);
  padding: .25rem .5rem .25rem .75rem;
  border: 1px solid var(--jmc-primary-200);
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-primary-50);
  color: var(--jmc-primary-800);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-medium);
}

[data-theme="dark"] .jmc-chip {
  background: rgba(14, 124, 102, .18);
  border-color: var(--jmc-primary-700);
  color: var(--jmc-primary-200);
}

.jmc-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .75rem;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-chip__remove:hover { background: rgba(0, 0, 0, .1); }

.jmc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jmc-space-2);
  margin-bottom: var(--jmc-space-4);
}

/* ==========================================================================
   التنبيهات
   ========================================================================== */

.jmc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-4);
  border: 1px solid;
  border-inline-start-width: 4px;
  border-radius: var(--jmc-radius);
  font-size: var(--jmc-fs-sm);
}

.jmc-alert__icon { flex-shrink: 0; font-size: 1.125rem; line-height: 1.4; }
.jmc-alert__content { min-width: 0; flex: 1 1 auto; }
.jmc-alert__title { margin: 0 0 var(--jmc-space-1); font-size: var(--jmc-fs-sm); font-weight: var(--jmc-fw-semibold); }
.jmc-alert__text { margin: 0; }

.jmc-alert--info    { background: var(--jmc-info-soft);    border-color: var(--jmc-info);    color: var(--jmc-info-dark); }
.jmc-alert--success { background: var(--jmc-success-soft); border-color: var(--jmc-success); color: var(--jmc-success-dark); }
.jmc-alert--warning { background: var(--jmc-warning-soft); border-color: var(--jmc-warning); color: var(--jmc-warning-dark); }
.jmc-alert--danger  { background: var(--jmc-danger-soft);  border-color: var(--jmc-danger);  color: var(--jmc-danger-dark); }

[data-theme="dark"] .jmc-alert--info    { background: rgba(3, 105, 161, .14);  color: #93C5FD; }
[data-theme="dark"] .jmc-alert--success { background: rgba(21, 128, 61, .14);  color: #86EFAC; }
[data-theme="dark"] .jmc-alert--warning { background: rgba(180, 83, 9, .14);   color: #FCD34D; }
[data-theme="dark"] .jmc-alert--danger  { background: rgba(206, 17, 38, .14);  color: #FCA5A5; }

/* ==========================================================================
   الإشعارات (Toasts)
   ========================================================================== */

.jmc-toasts {
  position: fixed;
  top: calc(var(--jmc-topbar-height) + var(--jmc-space-3));
  /*
    الإشعارات في الجهة المقابلة للشريط الجانبي (اليسار في RTL = inline-end)
    فلا تغطّيه ولا تُحجَب به.
  */
  inset-inline-end: var(--jmc-space-4);
  z-index: var(--jmc-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--jmc-space-2);
  width: min(24rem, calc(100vw - var(--jmc-space-8)));
  pointer-events: none;
}

.jmc-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-3) var(--jmc-space-4);
  border: 1px solid var(--jmc-border);
  border-inline-start: 4px solid var(--jmc-primary-600);
  border-radius: var(--jmc-radius);
  background: var(--jmc-surface);
  box-shadow: var(--jmc-shadow-md);
  font-size: var(--jmc-fs-sm);
  pointer-events: auto;
  animation: jmc-toast-in var(--jmc-dur-slow) var(--jmc-ease-out);
}

.jmc-toast.is-leaving {
  animation: jmc-toast-out var(--jmc-dur) var(--jmc-ease-in) forwards;
}

.jmc-toast--success { border-inline-start-color: var(--jmc-success); }
.jmc-toast--danger  { border-inline-start-color: var(--jmc-danger); }
.jmc-toast--warning { border-inline-start-color: var(--jmc-warning); }
.jmc-toast--info    { border-inline-start-color: var(--jmc-info); }

.jmc-toast__icon { flex-shrink: 0; font-size: 1.125rem; line-height: 1.4; }
.jmc-toast--success .jmc-toast__icon { color: var(--jmc-text-success-on); }
.jmc-toast--danger  .jmc-toast__icon { color: var(--jmc-text-danger-on); }
.jmc-toast--warning .jmc-toast__icon { color: var(--jmc-text-warning-on); }
.jmc-toast--info    .jmc-toast__icon { color: var(--jmc-text-info-on); }

.jmc-toast__body { flex: 1 1 auto; min-width: 0; }
.jmc-toast__title { margin: 0 0 2px; font-weight: var(--jmc-fw-semibold); font-size: var(--jmc-fs-sm); }
.jmc-toast__text { margin: 0; color: var(--jmc-text-secondary); font-size: var(--jmc-fs-xs); }

.jmc-toast__close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--jmc-radius-sm);
  background: transparent;
  color: var(--jmc-text-muted);
  cursor: pointer;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

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

@keyframes jmc-toast-in {
  from { opacity: 0; transform: translateY(-.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes jmc-toast-out {
  to { opacity: 0; transform: translateY(-.5rem); }
}

/* ==========================================================================
   الحوارات (Modals)
   ========================================================================== */

.jmc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--jmc-z-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--jmc-space-4);
  background: var(--jmc-overlay);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--jmc-dur) var(--jmc-ease),
              visibility var(--jmc-dur) var(--jmc-ease);
}

.jmc-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.jmc-modal {
  width: min(90vw, 32rem);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--jmc-radius-lg);
  background: var(--jmc-surface);
  box-shadow: var(--jmc-shadow-lg);
  transform: scale(.96);
  transition: transform var(--jmc-dur) var(--jmc-ease-out);
  overflow: hidden;
}

.jmc-modal--lg { width: min(92vw, 46rem); }

.jmc-modal-backdrop.is-open .jmc-modal { transform: scale(1); }

.jmc-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-5) var(--jmc-space-5) var(--jmc-space-3);
}

.jmc-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--jmc-radius-pill);
  font-size: 1.375rem;
}

.jmc-modal__icon--danger  { background: var(--jmc-danger-soft);  color: var(--jmc-danger); }
.jmc-modal__icon--warning { background: var(--jmc-warning-soft); color: var(--jmc-warning); }
.jmc-modal__icon--info    { background: var(--jmc-info-soft);    color: var(--jmc-info); }

.jmc-modal__title { margin: 0; font-size: var(--jmc-fs-h3); font-weight: var(--jmc-fw-semibold); }
.jmc-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--jmc-space-5) var(--jmc-space-5); color: var(--jmc-text-secondary); font-size: var(--jmc-fs-sm); }

.jmc-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--jmc-space-2);
  padding: var(--jmc-space-4) var(--jmc-space-5);
  border-top: 1px solid var(--jmc-border);
  background: var(--jmc-surface-2);
}

/* ==========================================================================
   الرسوم البيانية
   ========================================================================== */

.jmc-chart {
  /* نسبة أبعاد محفوظة: تمنع قفزة التخطيط عند رسم Chart.js (CLS) */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 15rem;
}

.jmc-chart--tall { aspect-ratio: 4 / 5; }
.jmc-chart--donut { aspect-ratio: 1 / 1; max-height: 20rem; margin-inline: auto; }

.jmc-chart canvas { max-width: 100%; }

/* الجدول المكافئ للرسم — شرط WCAG 1.1.1 لكل محتوى غير نصي */
.jmc-chart-data {
  margin-top: var(--jmc-space-4);
  border-top: 1px solid var(--jmc-border);
  padding-top: var(--jmc-space-3);
}

.jmc-chart-data > summary {
  cursor: pointer;
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-medium);
  color: var(--jmc-link);
  list-style: none;
}

.jmc-chart-data > summary::-webkit-details-marker { display: none; }

.jmc-chart-data > summary::before {
  content: "\F282"; /* bi-chevron-left */
  font-family: "bootstrap-icons";
  display: inline-block;
  margin-inline-end: var(--jmc-space-2);
  font-size: .75rem;
  transition: transform var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-chart-data[open] > summary::before { transform: rotate(-90deg); }

.jmc-chart-data table {
  width: 100%;
  margin-top: var(--jmc-space-3);
  font-size: var(--jmc-fs-xs);
  border-collapse: collapse;
}

.jmc-chart-data th,
.jmc-chart-data td {
  padding: var(--jmc-space-2);
  text-align: start;
  border-bottom: 1px solid var(--jmc-border);
}

.jmc-chart-data td:last-child { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   قائمة منسدلة
   ========================================================================== */

.jmc-dropdown { position: relative; }

.jmc-dropdown__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--jmc-space-2));
  z-index: var(--jmc-z-dropdown);
  min-width: 12rem;
  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);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.375rem);
  transition: opacity var(--jmc-dur-fast) var(--jmc-ease),
              visibility var(--jmc-dur-fast) var(--jmc-ease),
              transform var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.jmc-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-3);
  width: 100%;
  min-height: 2.25rem;
  padding: var(--jmc-space-2) var(--jmc-space-3);
  border: 0;
  border-radius: var(--jmc-radius-sm);
  background: transparent;
  color: var(--jmc-text);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

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

.jmc-dropdown__item--danger { color: var(--jmc-text-danger-on); }
.jmc-dropdown__item--danger:hover { background: var(--jmc-danger-soft); }

.jmc-dropdown__divider {
  height: 1px;
  margin: var(--jmc-space-2) 0;
  background: var(--jmc-border);
}

.jmc-dropdown__header {
  padding: var(--jmc-space-2) var(--jmc-space-3);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text-muted);
}

/* ==========================================================================
   لوحة الفلاتر
   ========================================================================== */

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

.jmc-filters__toggle {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  width: 100%;
  padding: var(--jmc-space-3) var(--jmc-space-4);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  background: var(--jmc-surface);
  color: var(--jmc-text);
  font-family: inherit;
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  cursor: pointer;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-filters__toggle:hover { background: var(--jmc-surface-2); }

.jmc-filters__count {
  margin-inline-start: auto;
  padding: .1rem .45rem;
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-primary-600);
  color: #fff;
  font-size: var(--jmc-fs-2xs);
  font-variant-numeric: tabular-nums;
}

.jmc-filters__panel {
  padding: var(--jmc-space-5);
  margin-top: var(--jmc-space-2);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  background: var(--jmc-surface);
}

/* ==========================================================================
   شريط التنقّل بين القوائم المرجعية
   --------------------------------------------------------------------------
   عشر قوائم في شاشة واحدة تحتاج تنقّلاً بضغطة. شريط قابل للتمرير أفقياً
   على الشاشات الصغيرة بدل التفافه إلى أربعة أسطر.
   ========================================================================== */

.jmc-lookup-tabs {
  display: flex;
  gap: var(--jmc-space-2);
  margin-bottom: var(--jmc-space-5);
  padding-bottom: var(--jmc-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.jmc-lookup-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-2);
  flex-shrink: 0;
  min-height: 2.25rem;
  padding: var(--jmc-space-2) var(--jmc-space-3);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-pill);
  background: var(--jmc-surface);
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-medium);
  white-space: nowrap;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease),
              border-color var(--jmc-dur-fast) var(--jmc-ease),
              color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-lookup-tab:hover {
  background: var(--jmc-surface-3);
  color: var(--jmc-text);
  text-decoration: none;
}

.jmc-lookup-tab.is-active {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-600);
  color: #fff;
  font-weight: var(--jmc-fw-semibold);
}

.jmc-lookup-tab.is-active:hover {
  background: var(--jmc-primary-700);
  color: #fff;
}

/* ==========================================================================
   قائمة تفاصيل (مصطلح ← قيمة)
   --------------------------------------------------------------------------
   <dl> دلالي لا جدول: علاقة المصطلح بقيمته يُعلنها قارئ الشاشة، وعلى الشاشات
   الضيقة يتحوّل إلى سطرين بدل عمودين مضغوطين.
   ========================================================================== */

.jmc-detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jmc-space-1) var(--jmc-space-4);
  margin: 0;
}

@media (min-width: 480px) {
  .jmc-detail-list {
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: var(--jmc-space-3) var(--jmc-space-4);
    align-items: baseline;
  }
}

.jmc-detail-list dt {
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text-secondary);
}

.jmc-detail-list dd {
  margin: 0 0 var(--jmc-space-3);
  font-size: var(--jmc-fs-sm);
  color: var(--jmc-text);
}

@media (min-width: 480px) {
  .jmc-detail-list dd { margin-bottom: 0; }
}

/* ==========================================================================
   شاشة التخصصات: عمودان + شجرة بمستويين
   ========================================================================== */

.jmc-specialty-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jmc-space-5);
  align-items: start;
}

@media (min-width: 992px) {
  .jmc-specialty-layout {
    /* عمود الفئات ثابت العرض والشجرة تأخذ الباقي */
    grid-template-columns: 20rem 1fr;
  }

  .jmc-specialty-categories {
    /* يبقى ظاهراً أثناء تمرير شجرة طويلة */
    position: sticky;
    top: calc(var(--jmc-topbar-height) + var(--jmc-space-4));
    max-height: calc(100vh - var(--jmc-topbar-height) - var(--jmc-space-8));
    display: flex;
    flex-direction: column;
  }

  .jmc-specialty-categories .jmc-card__body {
    overflow-y: auto;
  }
}

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

.jmc-specialty-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jmc-space-3);
  min-height: 2.75rem;
  padding: var(--jmc-space-2) var(--jmc-space-4);
  border-inline-start: 3px solid transparent;
  color: var(--jmc-text);
  font-size: var(--jmc-fs-sm);
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease),
              border-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-specialty-category:hover {
  background: var(--jmc-surface-3);
  color: var(--jmc-text);
  text-decoration: none;
}

.jmc-specialty-category.is-selected {
  background: var(--jmc-primary-50);
  border-inline-start-color: var(--jmc-primary-600);
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-primary-800);
}

[data-theme="dark"] .jmc-specialty-category.is-selected {
  background: rgba(5, 128, 63, .18);
  color: var(--jmc-primary-200);
}

.jmc-specialty-category__name {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.jmc-specialty-category__counts {
  display: inline-flex;
  gap: var(--jmc-space-1);
  flex-shrink: 0;
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-secondary);
}

/* ── الشجرة ─────────────────────────────────────────────────────────────── */

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

.jmc-tree__item {
  border-bottom: 1px solid var(--jmc-border);
}

.jmc-tree__item:last-child {
  border-bottom: 0;
}

.jmc-tree__row {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-2);
  padding: var(--jmc-space-3) var(--jmc-space-4);
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease);
}

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

/* العنصر المعطّل: باهت **مع** شارة نصية — لا اعتماد على الشفافية وحدها */
.jmc-tree__row.is-inactive .jmc-tree__name {
  color: var(--jmc-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.jmc-tree__drag {
  flex-shrink: 0;
  color: var(--jmc-text-muted);
  cursor: grab;
  line-height: 1.6;
}

.jmc-tree__item:active > .jmc-tree__row .jmc-tree__drag {
  cursor: grabbing;
}

.jmc-tree__order {
  flex-shrink: 0;
  min-width: 2rem;
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
  line-height: 1.7;
}

.jmc-tree__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--jmc-space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.jmc-tree__name {
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
}

.jmc-tree__code {
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
}

.jmc-tree__desc {
  flex-basis: 100%;
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
}

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

/* ── المستوى الثاني: تخصصات دقيقة ───────────────────────────────────────── */

.jmc-tree--sub {
  /* الإزاحة من جهة البداية (اليمين في RTL) — منطقية لا فيزيائية */
  padding-inline-start: var(--jmc-space-8);
  background: var(--jmc-surface-2);
  border-top: 1px solid var(--jmc-border);
}

/*
  خط تفريع مرئي: يُظهر العلاقة بصرياً لمن لا يستخدم قارئ شاشة،
  ويكمّل role="group" الذي يُعلنها برمجياً.
*/
.jmc-tree--sub > .jmc-tree__item {
  position: relative;
  border-bottom: 1px dashed var(--jmc-border);
}

.jmc-tree--sub > .jmc-tree__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--jmc-space-4) * -1);
  top: 0;
  bottom: 50%;
  width: 1px;
  background: var(--jmc-border-strong);
}

.jmc-tree--sub > .jmc-tree__item::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--jmc-space-4) * -1);
  top: 50%;
  width: var(--jmc-space-4);
  height: 1px;
  background: var(--jmc-border-strong);
}

.jmc-tree--sub .jmc-tree__row {
  padding-block: var(--jmc-space-2);
}

.jmc-tree--sub .jmc-tree__name {
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-regular);
}

/* ==========================================================================
   السحب والإفلات لإعادة الترتيب
   ========================================================================== */

.jmc-tree__item.is-dragging {
  opacity: .45;
}

.jmc-tree__item.is-drop-target > .jmc-tree__row {
  box-shadow: inset 0 2px 0 0 var(--jmc-primary-600);
}

.jmc-table tbody tr.is-dragging {
  opacity: .45;
  /* لا نحرّك العنصر: المتصفح يرسم صورة السحب بنفسه */
  background: var(--jmc-primary-50);
}

[data-theme="dark"] .jmc-table tbody tr.is-dragging {
  background: rgba(5, 128, 63, .18);
}

/* خط إفلات واضح: المستخدم يحتاج أن يرى أين سيهبط الصف */
.jmc-table tbody tr.is-drop-target {
  box-shadow: inset 0 2px 0 0 var(--jmc-primary-600);
}

.jmc-table tbody tr[draggable="true"] .jmc-table__drag {
  cursor: grab;
}

.jmc-table tbody tr[draggable="true"]:active .jmc-table__drag {
  cursor: grabbing;
}

/* ==========================================================================
   شريط تنبيه انقطاع الشبكة
   ========================================================================== */

.jmc-offline-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--jmc-z-toast);
  padding: var(--jmc-space-2) var(--jmc-space-4);
  background: var(--jmc-warning);
  color: #fff;
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-medium);
  text-align: center;
  transform: translateY(-100%);
  transition: transform var(--jmc-dur) var(--jmc-ease);
}

.jmc-offline-bar.is-visible { transform: translateY(0); }

/* ==========================================================================
   تبويبات النموذج الطويل (نموذج الكادر — ثلاث خطوات)
   --------------------------------------------------------------------------
   لماذا تبويبات لا صفحة واحدة طويلة؟ نموذج الكادر 22 حقلاً موزّعة على ثلاث
   مجموعات دلالية مختلفة. الصفحة الواحدة تجعل المستخدم يمرّر بحثاً عن حقل،
   والتبويب يجعل كل خطوة قصيرة ومفهومة.

   ولماذا شريط تقدّم لا تبويبات عادية؟ لأن الترتيب هنا ذو معنى: لا تُختار
   المنشأة قبل معرفة من الكادر. الشريط يوصّل هذا الترتيب بصرياً بلا منعه —
   الحفظ متاح من أي تبويب.
   ========================================================================== */

.jmc-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-block-end: var(--jmc-space-6);
  padding: 0;
  list-style: none;
}

.jmc-steps__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--jmc-space-2);
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--jmc-text-muted);
  cursor: pointer;
  text-align: center;
}

/* الخط الواصل بين الخطوات — يُرسم قبل الدائرة لا فوقها.
   في RTL يمتدّ من يسار العنصر إلى منتصفه، فيصل بالخطوة التالية. */
.jmc-steps__item::before,
.jmc-steps__item::after {
  content: '';
  position: absolute;
  top: 17px;
  height: 2px;
  background: var(--jmc-border);
  transition: background var(--jmc-dur) var(--jmc-ease);
}

.jmc-steps__item::before { inset-inline-start: 0; width: calc(50% - 22px); }
.jmc-steps__item::after { inset-inline-end: 0; width: calc(50% - 22px); }

.jmc-steps__item:first-child::after,
.jmc-steps__item:last-child::before { display: none; }

.jmc-steps__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--jmc-border);
  border-radius: 50%;
  background: var(--jmc-surface);
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-semibold);
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--jmc-dur) var(--jmc-ease),
    background var(--jmc-dur) var(--jmc-ease),
    color var(--jmc-dur) var(--jmc-ease);
}

.jmc-steps__label {
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-medium);
  line-height: 1.3;
}

.jmc-steps__hint {
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
}

/* ── الخطوة النشطة ─────────────────────────────────────────────────────── */
.jmc-steps__item[aria-selected="true"] .jmc-steps__marker {
  border-color: var(--jmc-primary-600);
  background: var(--jmc-primary-600);
  color: #fff;
}

.jmc-steps__item[aria-selected="true"] {
  color: var(--jmc-text);
}

.jmc-steps__item[aria-selected="true"] .jmc-steps__label {
  font-weight: var(--jmc-fw-semibold);
}

/* ── خطوة مكتملة ───────────────────────────────────────────────────────── */
.jmc-steps__item.is-complete .jmc-steps__marker {
  border-color: var(--jmc-primary-600);
  background: var(--jmc-surface);
  color: var(--jmc-primary-700);
}

.jmc-steps__item.is-complete::before,
.jmc-steps__item.is-complete::after {
  background: var(--jmc-primary-600);
}

/* ── خطوة فيها أخطاء ───────────────────────────────────────────────────── */
/* الحالة تُعلَن نصّياً كذلك في .jmc-steps__hint، فلا يُعتمد على اللون وحده
   (معيار 1.4.1: اللون ليس الوسيلة الوحيدة لنقل المعلومة). */
.jmc-steps__item.has-error .jmc-steps__marker {
  border-color: var(--jmc-danger);
  background: var(--jmc-surface);
  color: var(--jmc-text-danger-on);
}

.jmc-steps__item.has-error .jmc-steps__hint {
  color: var(--jmc-text-danger-on);
  font-weight: var(--jmc-fw-medium);
}

.jmc-steps__item:focus-visible {
  outline: none;
}

.jmc-steps__item:focus-visible .jmc-steps__marker {
  box-shadow: 0 0 0 3px var(--jmc-focus-ring);
}

/* ── لوحة التبويب ──────────────────────────────────────────────────────── */
.jmc-tabpanel[hidden] { display: none; }

.jmc-tabpanel {
  animation: jmc-tabpanel-in var(--jmc-dur) var(--jmc-ease);
}

@keyframes jmc-tabpanel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .jmc-tabpanel { animation: none; }
}

/* على الموبايل: التسميات تحت الدوائر تضيق جداً، فنُخفي التلميح ونُصغّر النص */
@media (max-width: 575.98px) {
  .jmc-steps__hint { display: none; }
  .jmc-steps__label { font-size: var(--jmc-fs-2xs); }
  .jmc-steps__marker { width: 30px; height: 30px; font-size: var(--jmc-fs-2xs); }
  .jmc-steps__item::before,
  .jmc-steps__item::after { top: 14px; width: calc(50% - 19px); }
}

/* ==========================================================================
   مؤشّر التحقق الفوري (حقل رقم الهوية)
   -------------------------------------------------------------------------- */

.jmc-input-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
}

.jmc-input-status .jmc-input { flex: 1 1 auto; }

.jmc-input-status__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jmc-space-1);
  padding: var(--jmc-space-1) var(--jmc-space-2);
  border-radius: var(--jmc-radius-sm);
  font-size: var(--jmc-fs-2xs);
  font-weight: var(--jmc-fw-medium);
  white-space: nowrap;
}

.jmc-input-status__badge[hidden] { display: none; }

.jmc-input-status__badge--checking {
  background: var(--jmc-surface-2);
  color: var(--jmc-text-muted);
}

.jmc-input-status__badge--ok {
  background: var(--jmc-success-soft);
  color: var(--jmc-success-dark);
}

.jmc-input-status__badge--error {
  background: var(--jmc-danger-soft);
  color: var(--jmc-danger-dark);
}

/* ==========================================================================
   قيمة مشتقّة للقراءة فقط (القطاع، المحافظة، العمر، سنوات الخدمة)
   --------------------------------------------------------------------------
   ليست <input readonly>: القيمة ليست مُدخَلاً بل نتيجة. عرضها كحقل معطّل
   يدعو المستخدم لمحاولة تعديلها، وقارئ الشاشة يُعلنها كحقل إدخال غير قابل
   للتحرير — وكلاهما تضليل.
   ========================================================================== */

.jmc-derived {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  min-height: 42px;
  padding: var(--jmc-space-2) var(--jmc-space-3);
  border: 1px dashed var(--jmc-border);
  border-radius: var(--jmc-radius);
  background: var(--jmc-surface-2);
  color: var(--jmc-text);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
}

.jmc-derived__icon {
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-xs);
}

.jmc-derived--empty { color: var(--jmc-text-muted); font-weight: var(--jmc-fw-regular); }

/* المظهر الليلي لمؤشّر التحقق — بنفس منطق الشارات: خلفية شفّافة من نفس
   اللون الدلالي ونص فاتح، لا حبّة فاتحة على سطح داكن. */
[data-theme="dark"] .jmc-input-status__badge--ok {
  background: rgba(21, 128, 61, .22);
  color: #86EFAC;
}

[data-theme="dark"] .jmc-input-status__badge--error {
  background: rgba(206, 17, 38, .22);
  color: #FCA5A5;
}

/* ==========================================================================
   لاحقة عنوان الصفحة (سياق مثبّت: «إضافة كادر — مستشفى البشير»)
   -------------------------------------------------------------------------- */

.jmc-page-header__title-suffix {
  color: var(--jmc-text-secondary);
  font-size: var(--jmc-fs-base);
  font-weight: var(--jmc-fw-regular);
}

/* ==========================================================================
   حقل تاريخ — أيقونة تقويم داخل الحقل
   --------------------------------------------------------------------------
   الأيقونة خلفية لا عنصر: عنصر إضافي داخل الحقل يحتاج موضعاً مطلقاً وحساب
   حشوة، ويظهر في شجرة الوصولية بلا معنى. والخلفية تكفي لأنها تزيين بحت —
   فتح التقويم يحدث بالتركيز على الحقل نفسه.
   ========================================================================== */

.jmc-input--date {
  padding-inline-end: calc(var(--jmc-space-3) + 20px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h1V.5a.5.5 0 0 1 .5-.5zM2 5v9h12V5H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--jmc-space-3) center;
  background-size: 16px 16px;
}

[data-theme="dark"] .jmc-input--date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237A899E'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h1V.5a.5.5 0 0 1 .5-.5zM2 5v9h12V5H2z'/%3E%3C/svg%3E");
}

/* منتقي flatpickr — مواءمة مع رموز التصميم بدل مظهره الافتراضي */
.flatpickr-calendar {
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-lg);
  background: var(--jmc-surface);
  box-shadow: var(--jmc-shadow-md);
  font-family: inherit;
}

.flatpickr-months,
.flatpickr-weekdays {
  background: var(--jmc-surface);
}

.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
  color: var(--jmc-text) !important;
  fill: var(--jmc-text) !important;
}

.flatpickr-day {
  color: var(--jmc-text);
  border-radius: var(--jmc-radius-sm);
}

.flatpickr-day:hover {
  background: var(--jmc-surface-2);
  border-color: var(--jmc-border);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-600);
  color: #fff;
}

.flatpickr-day.today {
  border-color: var(--jmc-primary-600);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--jmc-text-muted);
}

/* ==========================================================================
   تسمية مجموعة الرقائق
   -------------------------------------------------------------------------- */

.jmc-chips__label {
  font-size: var(--jmc-fs-xs);
  font-weight: var(--jmc-fw-medium);
  color: var(--jmc-text-secondary);
}

/* ==========================================================================
   قسم قابل للطيّ (الفلاتر المتقدّمة)
   --------------------------------------------------------------------------
   يعتمد <details>/<summary> الأصليين لا زرّاً وجافاسكربت: الطيّ والفتح
   والوصولية وحفظ الحالة عند الطباعة كلها مجّانية من المتصفح، ويعمل بلا
   جافاسكربت إطلاقاً. أي بديل مبني بأيدينا سيكون أضعف.
   ========================================================================== */

.jmc-details {
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius);
  background: var(--jmc-surface-2);
}

.jmc-details__summary {
  display: flex;
  align-items: center;
  gap: var(--jmc-space-2);
  padding: var(--jmc-space-3) var(--jmc-space-4);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-medium);
  color: var(--jmc-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* إخفاء المثلّث الافتراضي في كل المحرّكات، واستبداله بسهم موجّه بالاتجاه */
.jmc-details__summary::-webkit-details-marker { display: none; }
.jmc-details__summary::marker { content: ''; }

.jmc-details__summary::after {
  content: '\F282'; /* bi-chevron-down */
  margin-inline-start: auto;
  font-family: 'bootstrap-icons';
  font-size: var(--jmc-fs-xs);
  color: var(--jmc-text-muted);
  transition: transform var(--jmc-dur) var(--jmc-ease);
}

.jmc-details[open] > .jmc-details__summary::after {
  transform: rotate(180deg);
}

.jmc-details__summary:focus-visible {
  outline: 2px solid var(--jmc-primary-600);
  outline-offset: -2px;
  border-radius: var(--jmc-radius);
}

.jmc-details__summary:hover {
  background: var(--jmc-surface-3);
  border-radius: var(--jmc-radius);
}

.jmc-details__content {
  padding: 0 var(--jmc-space-4) var(--jmc-space-4);
  border-top: 1px solid var(--jmc-border);
  padding-top: var(--jmc-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .jmc-details__summary::after { transition: none; }
}

/* ==========================================================================
   قائمة التغييرات (الحركات الوظيفية)
   --------------------------------------------------------------------------
   تستخدم <del>/<ins> الدلاليين لا لونين: قارئ الشاشة يُعلن «محذوف» و«مُدرَج»
   فعلياً، فيفهم المستخدم غير المُبصِر أيّ القيمتين القديمة — وهو ما لا ينقله
   لون ولا سهم.
   ========================================================================== */

.jmc-change-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--jmc-space-1);
  font-size: var(--jmc-fs-xs);
}

.jmc-change-list__label {
  color: var(--jmc-text-muted);
}

.jmc-change-list del {
  color: var(--jmc-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.jmc-change-list ins {
  color: var(--jmc-primary-700);
  font-weight: var(--jmc-fw-medium);
  text-decoration: none;
}

[data-theme="dark"] .jmc-change-list ins {
  color: var(--jmc-primary-300);
}

/* نص يحفظ أسطر المستخدم (الملاحظات) */
.jmc-prewrap { white-space: pre-wrap; }

/* ==========================================================================
   بطاقة تقرير (شاشة قائمة التقارير)
   ========================================================================== */

.jmc-report-card {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-4);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  background: var(--jmc-surface);
  box-shadow: var(--jmc-shadow-xs);
  color: var(--jmc-text);
  text-decoration: none;
  transition:
    border-color var(--jmc-dur) var(--jmc-ease),
    box-shadow var(--jmc-dur) var(--jmc-ease),
    transform var(--jmc-dur) var(--jmc-ease);
}

.jmc-report-card:hover {
  border-color: var(--jmc-primary-600);
  box-shadow: var(--jmc-shadow-sm);
  text-decoration: none;
  transform: translateY(-1px);
}

.jmc-report-card:focus-visible {
  outline: 2px solid var(--jmc-primary-600);
  outline-offset: 2px;
}

.jmc-report-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--jmc-radius);
  background: var(--jmc-primary-50);
  color: var(--jmc-primary-700);
  font-size: var(--jmc-fs-h4);
}

[data-theme="dark"] .jmc-report-card__icon {
  background: rgba(5, 128, 63, .18);
  color: var(--jmc-primary-300);
}

.jmc-report-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--jmc-space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.jmc-report-card__title {
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-semibold);
  line-height: var(--jmc-lh-snug);
}

.jmc-report-card__text {
  font-size: var(--jmc-fs-2xs);
  color: var(--jmc-text-muted);
  line-height: var(--jmc-lh-snug);
}

.jmc-report-card__go {
  flex-shrink: 0;
  align-self: center;
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-xs);
}

/* ==========================================================================
   الجدول المحوري: تمرير أفقي مع تثبيت عمود البُعد (REV-10)
   --------------------------------------------------------------------------
   جدول بثلاثين عموداً يفقد معناه لو غاب اسم المحافظة عند التمرير: القارئ يرى
   أرقاماً بلا صفّ ينتمي إليها. التثبيت يحلّ ذلك بلا جافاسكربت.
   ========================================================================== */

.jmc-table-wrap--sticky {
  position: relative;
  overflow-x: auto;
}

.jmc-table--pivot {
  border-collapse: separate;
  border-spacing: 0;
}

.jmc-table--pivot th,
.jmc-table--pivot td {
  white-space: nowrap;
}

.jmc-table__sticky-col {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--jmc-surface);
  /* حدّ على الحافة الداخلية يفصل العمود المُثبَّت عن المُمرَّر بصرياً */
  box-shadow: inset -1px 0 0 var(--jmc-border);
}

.jmc-table--pivot thead .jmc-table__sticky-col {
  z-index: 3;
  background: var(--jmc-surface-2);
}

.jmc-table--pivot tfoot .jmc-table__sticky-col {
  z-index: 3;
  background: var(--jmc-surface-2);
}

.jmc-table--pivot tbody tr:hover .jmc-table__sticky-col {
  background: var(--jmc-surface-2);
}

/* عمود الإجمالي مُميَّز: هو ما تُقرأ منه الخلاصة */
.jmc-table__total-col {
  background: var(--jmc-surface-2);
  box-shadow: inset 1px 0 0 var(--jmc-border);
}

.jmc-table--pivot tfoot td,
.jmc-table--pivot tfoot th {
  border-top: 2px solid var(--jmc-primary-600);
  background: var(--jmc-surface-2);
}

/* ==========================================================================
   صفوف الشجرة في تقرير التخصصات
   --------------------------------------------------------------------------
   الإزاحة بصرية فقط، والمستوى مُعلَن نصّياً في .jmc-sr-only داخل الخلية —
   لأن الإزاحة لا تُنقَل صوتياً لقارئ الشاشة.
   ========================================================================== */

.jmc-tree-row__indent {
  display: inline-block;
  width: 0;
}

.jmc-tree-row--level-1 .jmc-tree-row__indent { width: 1.25rem; }
.jmc-tree-row--level-2 .jmc-tree-row__indent { width: 2.5rem; }

.jmc-tree-row--level-0 > th {
  background: var(--jmc-surface-2);
}

.jmc-tree-row--level-2 > th {
  color: var(--jmc-text-secondary);
}

/* ==========================================================================
   شاشة الاستيراد من Excel
   --------------------------------------------------------------------------
   الحالة هنا ليست تزييناً: صفٌّ مرفوض يجب أن يُميَّز عن صفٍّ محذّر عن صفٍّ
   صالح بلا قراءة نصّ. ولذلك لكل حالة لون وأيقونة وحدّ جانبي — ثلاث قنوات
   لا لون وحده، لأن نحو 8% من الذكور لا يميّزون الأحمر من الأخضر.
   ========================================================================== */

/* ── مؤشّر المراحل الثلاث ───────────────────────────────────────────────── */
.jmc-import-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jmc-space-2);
  margin: 0 0 var(--jmc-space-5);
  padding: 0;
  list-style: none;
}

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

.jmc-import-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  padding: var(--jmc-space-3) var(--jmc-space-4);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  background: var(--jmc-surface);
}

.jmc-import-steps__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--jmc-surface-2);
  color: var(--jmc-text-muted);
  font-size: var(--jmc-fs-sm);
  font-weight: var(--jmc-fw-bold);
}

.jmc-import-steps__body { display: flex; flex-direction: column; min-width: 0; }

.jmc-import-steps__label {
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text);
}

.jmc-import-steps__hint {
  font-size: var(--jmc-fs-xs);
  color: var(--jmc-text-muted);
}

.jmc-import-steps__item.is-current {
  border-color: var(--jmc-primary-600);
  box-shadow: inset 2px 0 0 var(--jmc-primary-600);
}

/*
  علامة الخطوة الحالية — F-46.
  كانت `color: var(--jmc-text-primary-on)` وهو **سوء فهم لمعنى الرمز**: رموز
  `--jmc-text-*-on` معايرة للنصّ على **أسطح الصفحة** (surface-3) لا للنصّ فوق
  اللون الدلالي نفسه. فكان الناتج رقماً أخضر غامقاً على دائرة خضراء:
  **1.37:1** في الفاتح و2.69:1 في الليلي — رقمُ الخطوة الحالية أقلّ قراءةً من
  أرقام الخطوات غير الحالية (4.97:1).
  والأبيض على `--jmc-primary-600` يُحقّق 5.04:1 وهو ما تفعله `.jmc-btn--primary`
  أصلاً — فالتوحيد معها لا اختراع قيمة.
*/
.jmc-import-steps__item.is-current .jmc-import-steps__marker {
  background: var(--jmc-primary-600);
  color: #fff;
}

.jmc-import-steps__item.is-done .jmc-import-steps__marker {
  background: var(--jmc-success);
  color: var(--jmc-text-success-on);
}

/* ── حقائق القالب ──────────────────────────────────────────────────────── */
.jmc-import-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jmc-space-3);
  margin: var(--jmc-space-5) 0 0;
}

@media (min-width: 992px) {
  .jmc-import-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.jmc-import-facts dt {
  margin: 0;
  font-size: var(--jmc-fs-xs);
  color: var(--jmc-text-muted);
}

.jmc-import-facts dd {
  margin: 0;
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text);
}

/* ── اسم الملف المُختار ────────────────────────────────────────────────── */
.jmc-import-filename {
  margin: var(--jmc-space-2) 0 0;
  font-size: var(--jmc-fs-sm);
  color: var(--jmc-text-muted);
  overflow-wrap: anywhere;
}

.jmc-import-filename.is-error { color: var(--jmc-text-danger-on); }

/* ── بطاقات اختيار سياسة التثبيت ───────────────────────────────────────── */
.jmc-fieldset {
  margin: 0 0 var(--jmc-space-4);
  padding: 0;
  border: 0;
}

.jmc-fieldset > legend { margin-bottom: var(--jmc-space-3); padding: 0; }

.jmc-radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-3);
  margin-bottom: var(--jmc-space-3);
  padding: var(--jmc-space-4);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-md);
  background: var(--jmc-surface);
  cursor: pointer;
  transition: border-color var(--jmc-dur-fast) var(--jmc-ease),
              background-color var(--jmc-dur-fast) var(--jmc-ease);
}

.jmc-radio-card:hover { border-color: var(--jmc-primary-400); }

/* :has مدعوم في كل المتصفحات الهدف؛ وبدونه يبقى الاختيار واضحاً من الزر
   الأصلي نفسه — فالتمييز إضافة لا شرط. */
.jmc-radio-card:has(input:checked) {
  border-color: var(--jmc-primary-600);
  background: var(--jmc-surface-selected);
}

.jmc-radio-card:has(input:focus-visible) {
  outline: 2px solid var(--jmc-primary-600);
  outline-offset: 2px;
}

.jmc-radio-card input { margin-top: 0.25rem; flex-shrink: 0; }

.jmc-radio-card__body { display: flex; flex-direction: column; min-width: 0; }

.jmc-radio-card__title {
  font-weight: var(--jmc-fw-semibold);
  color: var(--jmc-text);
}

.jmc-radio-card__text {
  font-size: var(--jmc-fs-sm);
  color: var(--jmc-text-muted);
}

/* ── حالة الصف في جدول المعاينة ────────────────────────────────────────── */
.jmc-import-row--error > td:first-child {
  box-shadow: inset 3px 0 0 var(--jmc-danger);
}

.jmc-import-row--warning > td:first-child {
  box-shadow: inset 3px 0 0 var(--jmc-warning);
}

.jmc-import-row--valid > td:first-child {
  box-shadow: inset 3px 0 0 var(--jmc-success);
}

/* الجدول المُكدَّس على الجوّال يفقد الأعمدة، فالحدّ يُنقَل إلى الصف كله */
@media (max-width: 767.98px) {
  .jmc-table--stack .jmc-import-row--error > td:first-child,
  .jmc-table--stack .jmc-import-row--warning > td:first-child,
  .jmc-table--stack .jmc-import-row--valid > td:first-child { box-shadow: none; }

  .jmc-table--stack tr.jmc-import-row--error { box-shadow: inset 3px 0 0 var(--jmc-danger); }
  .jmc-table--stack tr.jmc-import-row--warning { box-shadow: inset 3px 0 0 var(--jmc-warning); }
  .jmc-table--stack tr.jmc-import-row--valid { box-shadow: inset 3px 0 0 var(--jmc-success); }
}

/* ── قائمة ملاحظات الصف ────────────────────────────────────────────────── */
.jmc-import-issues {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--jmc-space-1);
}

.jmc-import-issues__item {
  display: flex;
  align-items: flex-start;
  gap: var(--jmc-space-2);
  font-size: var(--jmc-fs-sm);
  line-height: 1.5;
}

.jmc-import-issues__item > i { flex-shrink: 0; margin-top: 0.15rem; }

.jmc-import-issues__item--error { color: var(--jmc-text-danger-on); }

.jmc-import-issues__item--warning { color: var(--jmc-text-warning-on); }

/* بطاقة عدّاد رمادية — «تُجوهلت» ليست نجاحاً ولا خطأً */
.jmc-kpi[data-color="neutral"] {
  --jmc-kpi-color: var(--jmc-text-muted);
  --jmc-kpi-bg: var(--jmc-surface-2);
}

/* ==========================================================================
   الطباعة
   --------------------------------------------------------------------------
   التقرير يُطبَع فعلياً في جهات رسمية، فالطباعة ليست ترفاً: تُخفى عناصر
   التنقّل والفلترة، ويبقى بيان الفلاتر ظاهراً — ورقة أرقام بلا بيان فلاترها
   لا يمكن التحقّق منها.
   ========================================================================== */

.jmc-no-print { }

@media print {
  .jmc-no-print,
  .jmc-sidebar,
  .jmc-topbar,
  .jmc-breadcrumb,
  .jmc-page-header__actions,
  .jmc-table-footer,
  .jmc-pager,
  .jmc-toast-host,
  .jmc-offline-bar {
    display: none !important;
  }

  .jmc-main,
  .jmc-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .jmc-card {
    border: 1px solid #CBD5E1 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .jmc-print-block { break-inside: avoid; }

  /* الجدول المُثبَّت يُطبَع عادياً: التثبيت مفهوم شاشة لا ورقة */
  .jmc-table-wrap--sticky { overflow: visible !important; }

  .jmc-table__sticky-col,
  .jmc-table__total-col {
    position: static !important;
    box-shadow: none !important;
  }

  /* تكرار ترويسة الجدول على كل صفحة مطبوعة */
  .jmc-table thead { display: table-header-group; }
  .jmc-table tfoot { display: table-footer-group; }
  .jmc-table tr { break-inside: avoid; }

  a[href]::after { content: none !important; }
}

/* ==========================================================================
   بلوك نصّ خام (JSON التدقيق)
   --------------------------------------------------------------------------
   يُعرَض إلى جانب النسخة المفكوكة لا بدلاً منها: إن ظهر حقل لا يعرفه قاموس
   الترجمة يبقى الدليل الكامل متاحاً. ويُمرَّر أفقياً داخل حاويته لا بالصفحة.
   ========================================================================== */

.jmc-code-block {
  margin: 0;
  padding: var(--jmc-space-3);
  border: 1px solid var(--jmc-border);
  border-radius: var(--jmc-radius-sm);
  background: var(--jmc-surface-2);
  color: var(--jmc-text);
  font-family: var(--jmc-font-mono, ui-monospace, monospace);
  font-size: var(--jmc-fs-xs);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   شريحة قابلة للنقر (تصفية بالنوع في سلة الاسترجاع)
   --------------------------------------------------------------------------
   الشريحة الأصلية عرضٌ فقط. هنا تصبح رابطاً له حالة «مُختار» — والحالة تُميَّز
   بالخلفية والحدّ والوزن معاً لا باللون وحده (WCAG 1.4.1).
   ========================================================================== */

a.jmc-chip {
  text-decoration: none;
  transition: background-color var(--jmc-dur-fast) var(--jmc-ease),
              border-color var(--jmc-dur-fast) var(--jmc-ease);
}

/* الشريحة العارضة 31px ارتفاعاً وهو كافٍ لعنصر لا يُنقَر. أما الشريحة
   الرابطة فهدف لمس.
   والاستعلام هنا `pointer: coarse` لا عرض الشاشة — اتّباعاً لنفس اصطلاح
   النظام في الأزرار: نافذة سطح مكتب بعرض 375px ليست جهازاً لمسياً، وتكبير
   الأهداف فيها يُهدر مساحةً بلا سبب. */
@media (pointer: coarse) {
  a.jmc-chip {
    min-height: 2.75rem;
    padding-inline: var(--jmc-space-3);
  }
}

a.jmc-chip:hover { border-color: var(--jmc-primary-600); }

a.jmc-chip:focus-visible {
  outline: 2px solid var(--jmc-primary-600);
  outline-offset: 2px;
}

a.jmc-chip.is-active {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-700);
  /* الأساسي #05803F يحقّق 5.04:1 مع الأبيض — محسوب في رموز التصميم */
  color: #FFFFFF;
  font-weight: var(--jmc-fw-bold);
}

[data-theme="dark"] a.jmc-chip.is-active {
  background: var(--jmc-primary-600);
  border-color: var(--jmc-primary-400);
  color: #FFFFFF;
}