/* ==========================================================================
   المجلس الأردني الطبي — رموز التصميم (Design Tokens)
   --------------------------------------------------------------------------
   قاعدة صارمة: لا يُكتب أي لون أو مقاس أو مدة حركة مباشرة في أي ملف آخر.
   كل شيء يمرّ من هنا. تغيير هوية النظام البصرية = تعديل هذا الملف وحده.

   ── مصدر الألوان: ملف الهوية الرسمي (logo.svg) ─────────────────────────────
   ألوان الهوية المستخرجة من الشعار: أخضر #00a557 · أحمر #db2d27 · أسود #151616
   اللوحة أدناه **مشتقّة من أخضر الهوية** لا مُبتكَرة، مع تعميق الدرجات
   المستخدمة للنصوص والأزرار حتى تحقّق تباين WCAG:
     أخضر الهوية #00a557 على أبيض = 3.22:1 ✖  ⇒ لا يصلح لنص ولا لزر بنص أبيض
     لذلك يُستخدم كما هو للتمييز غير النصي فقط (الشعار، الرسوم، الأشرطة).

   نسب التباين أدناه محسوبة فعلياً بمعادلة WCAG 2.1 (لا مُقدَّرة):
     الأساسي   #05803F على أبيض = 5.04:1  ✔ AA
     Hover     #046833 على أبيض = 6.92:1  ✔ AAA
     الخطر     #DB2D27 على أبيض = 4.75:1  ✔ AA   (أحمر الهوية نفسه)
     النص      #0F172A على أبيض = 16.9:1  ✔ AAA
     الثانوي   #475569 على أبيض = 7.58:1  ✔ AAA
   ========================================================================== */

:root {
  /* ── لون الهوية الخام — للتمييز غير النصي فقط (شعار، رسوم، أشرطة) ──────── */
  --jmc-brand-green: #00A557;
  --jmc-brand-red:   #DB2D27;
  --jmc-brand-ink:   #151616;

  /* ── اللوحة الأساسية: مشتقّة من أخضر الهوية ───────────────────────────── */
  --jmc-primary-50:  #E9F9F1;
  --jmc-primary-100: #C9F2DE;
  --jmc-primary-200: #94E5BE;
  --jmc-primary-300: #5AD39B;   /* روابط وأيقونات في الوضع الليلي */
  --jmc-primary-400: #22BC7B;
  --jmc-primary-500: #00A557;   /* أخضر الهوية بالضبط — للتمييز لا للنص */
  --jmc-primary-600: #05803F;   /* اللون الأساسي — أزرار وعناصر نشطة (5.04:1) */
  --jmc-primary-700: #046833;   /* Hover والروابط على خلفية فاتحة (6.92:1) */
  --jmc-primary-800: #03532A;   /* Active / Pressed */
  --jmc-primary-900: #043020;   /* خلفية الشريط الجانبي */
  --jmc-primary-950: #021D13;

  /* ── الألوان الدلالية ─────────────────────────────────────────────────── */
  --jmc-danger:       #DB2D27;  /* أحمر الهوية — 4.75:1 على أبيض ✔ */
  --jmc-danger-dark:  #B02020;
  --jmc-danger-soft:  #FDECEC;

  --jmc-success:      #15803D;
  --jmc-success-dark: #14532D;
  --jmc-success-soft: #ECFDF3;

  --jmc-warning:      #B45309;
  --jmc-warning-dark: #92400E;
  --jmc-warning-soft: #FFF8EB;

  --jmc-info:         #0369A1;
  --jmc-info-dark:    #075985;
  --jmc-info-soft:    #EFF8FF;

  --jmc-teal:         #0F766E;
  --jmc-teal-soft:    #EAF7F6;

  /*
    الذهبي لم يعُد لون تمييز أساسياً بعد مواءمة اللوحة مع الشعار
    (لا وجود له في ملف الهوية) — يبقى مُعرَّفاً للرسوم البيانية فقط.
  */
  --jmc-accent:       #B4881F;
  --jmc-accent-soft:  #FDF6E3;

  /* ── الرماديات ────────────────────────────────────────────────────────── */
  --jmc-gray-50:  #F8FAFC;
  --jmc-gray-100: #F1F5F9;
  --jmc-gray-200: #E2E8F0;
  --jmc-gray-300: #CBD5E1;
  --jmc-gray-400: #94A3B8;
  --jmc-gray-500: #64748B;
  --jmc-gray-600: #475569;
  --jmc-gray-700: #334155;
  --jmc-gray-800: #1E293B;
  --jmc-gray-900: #0F172A;
  --jmc-gray-950: #060B16;

  /* ── رموز الأسطح: الوضع النهاري ───────────────────────────────────────── */
  --jmc-bg:             var(--jmc-gray-100);
  --jmc-surface:        #FFFFFF;
  --jmc-surface-2:      var(--jmc-gray-50);
  --jmc-surface-3:      var(--jmc-gray-100);
  --jmc-border:         var(--jmc-gray-200);
  --jmc-border-strong:  var(--jmc-gray-300);

  /* سطح العنصر المُختار (بطاقة اختيار، صف محدَّد).
     عيب اكتُشف بقياس فعلي (F-34): كان يُستخدَم --jmc-primary-50 مباشرةً،
     وهو لون لوحةٍ **لا يُعاد تعريفه في الوضع الليلي** — فبقي نعناعياً فاتحاً
     تحت نصّ فاتح، ونزل التباين إلى 1.13:1. أي أن السطح المُختار يحتاج رمز
     سطح خاصاً به يتبع المظهر، لا لوناً من اللوحة الأساسية. */
  --jmc-surface-selected: var(--jmc-primary-50);

  --jmc-text:           var(--jmc-gray-900);
  --jmc-text-secondary: var(--jmc-gray-600);
  /* النص الثانوي — <b>معاير على أدنى سطح يُستخدَم عليه لا على الأبيض</b>.
     عيب اكتُشف بقياس فعلي (F-17): gray-500 (#64748B) يحقّق 4.76:1 على البطاقة
     البيضاء لكنه يهبط إلى 4.34:1 على خلفية الصفحة (#F1F5F9) — أي أنه يخرق
     AA في كل تلميح خارج البطاقات. المعايرة الصحيحة تكون على الأدنى تبايناً. */
  --jmc-text-muted:     #5F6E82;
  --jmc-text-inverse:   #FFFFFF;

  --jmc-link:           var(--jmc-primary-700);

  /*
    ── ألوان النص الدلالية ─────────────────────────────────────────────────
    عيب اكتُشف بقياس فعلي (F-19): أدوات .jmc-text-danger/success/warning/info
    و.jmc-text-primary كانت تستخدم الألوان الدلالية الأساسية <b>نفسها في
    المظهرين</b>. تلك الألوان معايرة كخلفيات لا كنصوص، فتحقّق في الليلي
    2.07–3.01:1 فقط — أي نصّ شبه غير مقروء في كل تحذير وحالة نجاح في النظام.
    وفي النهاري يهبط الأحمر إلى 4.34:1 على خلفية الصفحة.

    الحل: رموز مخصّصة <b>للنص</b> تُعاد تعريفها في الليلي، معايرة على أدنى
    سطح تُستخدَم عليه (surface-3). الألوان الأساسية تبقى للخلفيات والحدود.
  */
  /*
    ⚠ معنى اللاحقة `-on` هنا: «لونُ نصٍّ دلاليٍّ **على أسطح الصفحة**» — لا
    «لون نصٍّ فوق اللون الدلالي نفسه». استُعمِلت مرّتين بالمعنى الثاني فأنتجت
    نصّاً بلون خلفيته تقريباً (F-46). النصّ فوق `--jmc-primary-600` أبيض
    صريح (5.04:1) كما في `.jmc-btn--primary`.
  */
  --jmc-text-primary-on: var(--jmc-primary-700);   /* 6.32:1 */
  --jmc-text-danger-on:  var(--jmc-danger-dark);   /* 6.24:1 */
  --jmc-text-success-on: var(--jmc-success-dark);  /* 8.32:1 */
  --jmc-text-warning-on: var(--jmc-warning-dark);  /* 6.47:1 */
  --jmc-text-info-on:    var(--jmc-info-dark);     /* 6.90:1 */
  --jmc-link-hover:     var(--jmc-primary-800);

  --jmc-sidebar-bg:      var(--jmc-primary-900);
  --jmc-sidebar-text:    rgba(255, 255, 255, .82);
  --jmc-sidebar-hover:   rgba(255, 255, 255, .10);
  --jmc-sidebar-active:  var(--jmc-primary-600);
  --jmc-sidebar-border:  rgba(255, 255, 255, .10);

  --jmc-focus-ring:      rgba(5, 128, 63, .35);
  --jmc-overlay:         rgba(15, 23, 42, .55);

  /* ── الخطوط ───────────────────────────────────────────────────────────── */
  --jmc-font-sans: "IBM Plex Sans Arabic", "Segoe UI", "Tahoma", "Arial", sans-serif;
  --jmc-font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;

  /* مقياس سائل: يتكيّف مع عرض الشاشة بلا نقاط كسر إضافية */
  --jmc-fs-display: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --jmc-fs-h1:      clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  --jmc-fs-h2:      clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --jmc-fs-h3:      1.125rem;
  --jmc-fs-h4:      1rem;
  --jmc-fs-body:    1rem;
  --jmc-fs-sm:      .875rem;
  --jmc-fs-xs:      .8125rem;
  --jmc-fs-2xs:     .75rem;
  --jmc-fs-kpi:     clamp(1.75rem, 1.5rem + 1vw, 2.25rem);

  /* العربية تحتاج تباعد أسطر أوسع من اللاتينية لوضوح النقاط والحركات */
  --jmc-lh-tight:  1.3;
  --jmc-lh-snug:   1.5;
  --jmc-lh-normal: 1.75;
  --jmc-lh-table:  1.7;

  --jmc-fw-regular:  400;
  --jmc-fw-medium:   500;
  --jmc-fw-semibold: 600;
  --jmc-fw-bold:     700;

  /* ── المسافات (قاعدة 4px) ─────────────────────────────────────────────── */
  --jmc-space-1:  .25rem;
  --jmc-space-2:  .5rem;
  --jmc-space-3:  .75rem;
  --jmc-space-4:  1rem;
  --jmc-space-5:  1.25rem;
  --jmc-space-6:  1.5rem;
  --jmc-space-7:  1.75rem;
  --jmc-space-8:  2rem;
  --jmc-space-10: 2.5rem;
  --jmc-space-12: 3rem;
  --jmc-space-16: 4rem;
  --jmc-space-20: 5rem;
  --jmc-space-24: 6rem;

  /* ── الاستدارة ────────────────────────────────────────────────────────── */
  --jmc-radius-sm:   .375rem;
  --jmc-radius:      .5rem;
  --jmc-radius-md:   .75rem;
  --jmc-radius-lg:   1rem;
  --jmc-radius-xl:   1.25rem;
  --jmc-radius-pill: 999px;

  /* ── الظلال ───────────────────────────────────────────────────────────── */
  --jmc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --jmc-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --jmc-shadow:    0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --jmc-shadow-md: 0 8px 24px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .05);
  --jmc-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

  /* ── الحركة ───────────────────────────────────────────────────────────── */
  --jmc-dur-fast:   150ms;
  --jmc-dur:        250ms;
  --jmc-dur-slow:   400ms;
  --jmc-dur-slower: 600ms;

  --jmc-ease:        cubic-bezier(.4, 0, .2, 1);
  --jmc-ease-out:    cubic-bezier(0, 0, .2, 1);
  --jmc-ease-in:     cubic-bezier(.4, 0, 1, 1);
  --jmc-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── طبقات العمق ──────────────────────────────────────────────────────── */
  --jmc-z-dropdown: 1000;
  --jmc-z-sticky:   1020;
  --jmc-z-sidebar:  1030;
  --jmc-z-backdrop: 1040;
  --jmc-z-modal:    1050;
  --jmc-z-popover:  1060;
  --jmc-z-tooltip:  1070;
  --jmc-z-toast:    1080;

  /* ── أبعاد التخطيط ────────────────────────────────────────────────────── */
  --jmc-sidebar-width:           17.5rem;   /* 280px */
  --jmc-sidebar-width-collapsed: 4.75rem;   /* 76px  */
  --jmc-topbar-height:           4rem;      /* 64px  */
  --jmc-content-max:             87.5rem;   /* 1400px */

  /* ── ألوان الرسوم البيانية: 8 ألوان متمايزة ومحسوبة التباين ───────────── */
  --jmc-chart-1: #00A557;   /* أخضر الهوية */
  --jmc-chart-2: #0369A1;
  --jmc-chart-3: #B4881F;
  --jmc-chart-4: #7C3AED;
  --jmc-chart-5: #DB2D27;   /* أحمر الهوية */
  --jmc-chart-6: #0F766E;
  --jmc-chart-7: #C2410C;
  --jmc-chart-8: #4F46E5;
  --jmc-chart-grid: rgba(15, 23, 42, .08);
  --jmc-chart-text: #475569;
}

/* ==========================================================================
   الوضع الليلي
   --------------------------------------------------------------------------
   تُعاد تعريف رموز الأسطح فقط — لا تُلمس اللوحة الأساسية ولا المسافات
   ولا الخطوط. هذا ما يجعل الوضع الليلي تعديلاً في مكان واحد لا إعادة بناء.
   ========================================================================== */

[data-theme="dark"] {
  --jmc-bg:             #0B1220;
  --jmc-surface:        #111A2B;
  --jmc-surface-2:      #16223A;
  --jmc-surface-3:      #1C2A45;
  --jmc-border:         #22304D;
  --jmc-border-strong:  #334765;

  /* أخضر داكن جداً: يقرأ «مُختار» ويُبقي النص العادي على 12.36:1 والنص
     الثانوي على 5.08:1 — محسوبَين بالصيغة لا مقدَّرَين (F-34). */
  --jmc-surface-selected: #122A21;

  --jmc-text:           #E2E8F0;
  --jmc-text-secondary: #94A3B8;
  /* نفس السبب في الليلي: #7A899E يمرّ على السطح الأول ويهبط إلى 4.02:1 على
     السطح الثالث (#1C2A45). القيمة أدناه تحقّق 4.77:1 على أدنى الأسطح (F-17). */
  --jmc-text-muted:     #8896AB;
  --jmc-text-inverse:   #0B1220;

  --jmc-link:           var(--jmc-primary-300);

  /* ألوان النص الدلالية في الليلي — درجات فاتحة، أدناها 7.54:1 على surface-3 */
  --jmc-text-primary-on: var(--jmc-primary-300);
  --jmc-text-danger-on:  #FCA5A5;
  --jmc-text-success-on: #86EFAC;
  --jmc-text-warning-on: #FCD34D;
  --jmc-text-info-on:    #93C5FD;
  --jmc-link-hover:     var(--jmc-primary-200);

  --jmc-sidebar-bg:     #08120F;
  --jmc-sidebar-text:   rgba(226, 232, 240, .80);
  --jmc-sidebar-hover:  rgba(255, 255, 255, .07);
  --jmc-sidebar-active: var(--jmc-primary-600);
  --jmc-sidebar-border: rgba(255, 255, 255, .07);

  --jmc-focus-ring:     rgba(90, 211, 155, .45);
  --jmc-overlay:        rgba(0, 0, 0, .68);

  /* في الوضع الليلي، الظل وحده لا يفصل الأسطح — نُعمّقه ونعتمد الحدود أيضاً */
  --jmc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --jmc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
  --jmc-shadow:    0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .30);
  --jmc-shadow-md: 0 8px 24px rgba(0, 0, 0, .50), 0 4px 8px rgba(0, 0, 0, .35);
  --jmc-shadow-lg: 0 16px 40px rgba(0, 0, 0, .60);

  /* ألوان رسوم أفتح: الألوان الغامقة تختفي على خلفية داكنة */
  --jmc-chart-1: #22BC7B;
  --jmc-chart-2: #38A3E1;
  --jmc-chart-3: #D9B04A;
  --jmc-chart-4: #A78BFA;
  --jmc-chart-5: #F87171;
  --jmc-chart-6: #4FB3AB;
  --jmc-chart-7: #FB923C;
  --jmc-chart-8: #818CF8;
  --jmc-chart-grid: rgba(226, 232, 240, .10);
  --jmc-chart-text: #94A3B8;
}

/* ==========================================================================
   الخطوط المحليّة (بلا CDN — القرار AD-10)
   خط عربي واحد بأربعة أوزان، وحروف لاتينية مدمجة فيه فلا نحتاج خطاً ثانياً.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   التطبيع والأساسيات
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* لا نضبط font-size بالبكسل: التقييد يمنع تكبير المستخدم (WCAG 1.4.4) */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--jmc-font-sans);
  font-size: var(--jmc-fs-body);
  font-weight: var(--jmc-fw-regular);
  line-height: var(--jmc-lh-normal);
  color: var(--jmc-text);
  background-color: var(--jmc-bg);
  /* العربية لا تُتبَّع (letter-spacing) — التتبّع يفصل الحروف المتصلة */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* منع أي تمرير أفقي للصفحة: الجداول العريضة تُمرَّر داخل حاوياتها فقط */
  overflow-x: hidden;
  transition: background-color var(--jmc-dur) var(--jmc-ease),
              color var(--jmc-dur) var(--jmc-ease);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--jmc-space-3);
  font-weight: var(--jmc-fw-semibold);
  line-height: var(--jmc-lh-tight);
  color: var(--jmc-text);
}

h1 { font-size: var(--jmc-fs-h1); font-weight: var(--jmc-fw-bold); }
h2 { font-size: var(--jmc-fs-h2); }
h3 { font-size: var(--jmc-fs-h3); }
h4 { font-size: var(--jmc-fs-h4); }

p {
  margin: 0 0 var(--jmc-space-4);
}

a {
  color: var(--jmc-link);
  text-decoration: none;
  transition: color var(--jmc-dur-fast) var(--jmc-ease);
}

a:hover {
  color: var(--jmc-link-hover);
  text-decoration: underline;
}

/* الصور والوسائط لا تتجاوز حاوياتها أبداً */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

hr {
  margin: var(--jmc-space-6) 0;
  border: 0;
  border-top: 1px solid var(--jmc-border);
}

code,
kbd,
samp,
.jmc-mono {
  font-family: var(--jmc-font-mono);
  font-size: .9em;
  /* الأرقام أحادية العرض: تجعل أعمدة أرقام الهوية والتواريخ تتراصف عمودياً */
  font-variant-numeric: tabular-nums;
}

/*
  اللون كان ناقصاً من القاعدة أعلاه — عيب اكتُشف بقياس فعلي (F-18):
  الوسم يرث لون Bootstrap الوردي (#D63384) فيحقّق 4.19:1 نهاراً و3.46:1 ليلاً،
  وهو مخالف لـAA. والوسم ليس تزييناً في هذا النظام: <code> يحمل
  <b>أرقام الهوية الوطنية وأرقام المنشآت والرموز الفنية</b> في شاشات الإنتاج،
  أي أهمّ الأرقام التي يجب أن تُقرأ بلا لبس.

  الحل: لون النص العادي نفسه مع خلفية خفيفة تُميّزه — فالتمييز يأتي من الخط
  الأحادي والخلفية لا من لون منخفض التباين.
*/
code,
kbd,
samp {
  padding: .1em .35em;
  border-radius: var(--jmc-radius-sm);
  background: var(--jmc-surface-2);
  color: var(--jmc-text);
}

/* داخل جدول أو بطاقة سطحها هو surface-2 أصلاً، تُلغى الخلفية لئلا تختفي الحدود */
.jmc-table code,
.jmc-table kbd,
.jmc-table samp {
  background: transparent;
  padding-inline: 0;
}

/* ==========================================================================
   التركيز — WCAG 2.4.7
   قاعدة صارمة: outline:none ممنوع بلا بديل مرئي. هذه هي الوسيلة الوحيدة
   لمستخدم الكيبورد لمعرفة موضعه في الصفحة.
   ========================================================================== */

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

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

/* رابط تجاوز المحتوى — WCAG 2.4.1 */
.jmc-skip-link {
  position: absolute;
  top: -100%;
  right: var(--jmc-space-4);
  z-index: calc(var(--jmc-z-toast) + 1);
  padding: var(--jmc-space-3) var(--jmc-space-5);
  background: var(--jmc-primary-600);
  color: #fff;
  border-radius: 0 0 var(--jmc-radius) var(--jmc-radius);
  font-weight: var(--jmc-fw-semibold);
  transition: top var(--jmc-dur) var(--jmc-ease);
}

.jmc-skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

/* نص مخصّص لقارئات الشاشة فقط */
.jmc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   تقليل الحركة — WCAG 2.3.3
   يُحترَم إعداد نظام المستخدم بالكامل: كل الحركات تُلغى فعلياً لا تُبطّأ.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* شرائط التمرير — تتبع المظهر ولا تبقى فاتحة في الوضع الليلي */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--jmc-border-strong) transparent;
}

*::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--jmc-border-strong);
  border-radius: var(--jmc-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--jmc-gray-400);
}