/* ==========================================================================
   ra-ds.css — نظام تصميم «مدرج» (Madraj Design System)
   شركة مطارات الرياض · مطار الملك خالد الدولي
   --------------------------------------------------------------------------
   هذا الملف مقفل. كل تخصيص للهوية يمر عبر shared/ra-brand.css
   ترتيب التحميل الإلزامي: ra-ds.css ← ra-brand.css ← shared.css ← app.css
   هذا هو المكان الوحيد المسموح فيه بقيم لونية صريحة (طبقة الرموز).
   ========================================================================== */

/* ---------- 1. الرموز الأساسية ---------- */
:root {
  color-scheme: light dark;

  /* المحايدات */
  --ra-neutral-0:   #ffffff;
  --ra-neutral-25:  #fbfcfc;
  --ra-neutral-50:  #f4f7f7;
  --ra-neutral-100: #e8eded;
  --ra-neutral-200: #d5dcdc;
  --ra-neutral-300: #b6c0c0;
  --ra-neutral-400: #8a9695;
  --ra-neutral-500: #667171;
  --ra-neutral-600: #4c4e51;
  --ra-neutral-700: #383a3d;
  --ra-neutral-800: #24262a;
  --ra-neutral-900: #16181b;
  --ra-neutral-950: #0d0f11;

  /* العلامة — تُعاد تعريفها في ra-brand.css */
  --ra-brand-50:  #e6f2f1;
  --ra-brand-100: #c2e0dd;
  --ra-brand-300: #5fb3ad;
  --ra-brand-500: #00807a;
  --ra-brand-600: #006e68;
  --ra-brand-700: #005a54;
  --ra-brand-800: #00443f;

  --ra-accent-100: #d8f3f2;
  --ra-accent-300: #7fd6d2;
  --ra-accent-500: #3cbfb9;
  --ra-accent-600: #2ba49e;
  --ra-accent-700: #1f827d;

  /* الحالات */
  --ra-success-50:  #e7f5ec;
  --ra-success-500: #1a8a4b;
  --ra-success-600: #14713c;
  --ra-warning-50:  #fdf3e2;
  --ra-warning-500: #a86a00;
  --ra-warning-600: #8a5700;
  --ra-danger-50:   #fdeceb;
  --ra-danger-500:  #c0392b;
  --ra-danger-600:  #9c2c20;
  --ra-info-50:     #e8f1fb;
  --ra-info-500:    #1c6bb8;
  --ra-info-600:    #155594;

  /* سلاسل الرسوم — الترتيب متحقَّق منه آلياً لعمى الألوان. لا تغيّره. */
  --ra-viz-1: #005a54;
  --ra-viz-2: #3cbfb9;
  --ra-viz-3: #b5741f;
  --ra-viz-4: #1c6bb8;
  --ra-viz-5: #8a4a95;
  --ra-viz-6: #667171;

  /* ---------- 2. الرموز الدلالية — الوضع الفاتح ---------- */
  --ra-bg:            var(--ra-neutral-50);
  --ra-surface:       var(--ra-neutral-0);
  --ra-surface-alt:   var(--ra-neutral-25);
  --ra-surface-sunk:  var(--ra-neutral-100);
  --ra-border:        var(--ra-neutral-200);
  --ra-border-strong: var(--ra-neutral-300);

  --ra-text:      var(--ra-neutral-900);
  --ra-text-soft: var(--ra-neutral-600);
  --ra-text-mute: var(--ra-neutral-500);
  --ra-text-inv:  var(--ra-neutral-0);

  --ra-brand:      var(--ra-brand-700);
  --ra-brand-hov:  var(--ra-brand-800);
  --ra-brand-soft: var(--ra-brand-50);
  --ra-on-brand:   var(--ra-neutral-0);

  --ra-accent:      var(--ra-accent-700);
  --ra-accent-soft: var(--ra-accent-100);
  --ra-on-accent:   var(--ra-neutral-0);

  --ra-success:      var(--ra-success-600);
  --ra-success-soft: var(--ra-success-50);
  --ra-warning:      var(--ra-warning-600);
  --ra-warning-soft: var(--ra-warning-50);
  --ra-danger:       var(--ra-danger-600);
  --ra-danger-soft:  var(--ra-danger-50);
  --ra-info:         var(--ra-info-600);
  --ra-info-soft:    var(--ra-info-50);

  --ra-focus:   var(--ra-accent-700);
  --ra-overlay: rgb(13 15 17 / 55%);
  /* حجاب أبيض شفّاف يُستخدم فوق أسطح العلامة الداكنة (تدرّج شاشة الدخول).
     ثابت في الوضعين لأنه يعلو لون العلامة لا خلفية النظام. */
  --ra-veil:        rgb(255 255 255 / 16%);
  --ra-veil-border: rgb(255 255 255 / 22%);

  /* ---------- 3. المقاسات ---------- */
  --ra-r-sm: 8px;
  --ra-r-md: 14px;
  --ra-r-lg: 20px;
  --ra-r-xl: 28px;
  --ra-r-pill: 999px;

  --ra-s-1: 4px;
  --ra-s-2: 8px;
  --ra-s-3: 12px;
  --ra-s-4: 16px;
  --ra-s-5: 24px;
  --ra-s-6: 32px;
  --ra-s-7: 48px;
  --ra-s-8: 64px;

  --ra-font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --ra-font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ra-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ra-fs-xs: 0.75rem;
  --ra-fs-sm: 0.85rem;
  --ra-fs-md: 0.95rem;
  --ra-fs-lg: 1.1rem;
  --ra-fs-xl: 1.35rem;
  --ra-fs-2xl: 1.75rem;
  --ra-fs-3xl: 2.4rem;
  --ra-fs-4xl: 3.2rem;

  --ra-sh-1: 0 1px 2px rgb(13 15 17 / 6%), 0 1px 3px rgb(13 15 17 / 4%);
  --ra-sh-2: 0 2px 6px rgb(13 15 17 / 7%), 0 8px 20px rgb(13 15 17 / 6%);
  --ra-sh-3: 0 8px 24px rgb(13 15 17 / 12%), 0 20px 48px rgb(13 15 17 / 10%);

  --ra-maxw: 1180px;
  --ra-tap: 44px;
}

/* ---------- 4. الوضع الداكن — تلقائي ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ra-bg:            var(--ra-neutral-950);
    --ra-surface:       var(--ra-neutral-900);
    --ra-surface-alt:   var(--ra-neutral-800);
    --ra-surface-sunk:  var(--ra-neutral-800);
    --ra-border:        #2c3033;
    --ra-border-strong: #3d4245;

    --ra-text:      var(--ra-neutral-50);
    --ra-text-soft: var(--ra-neutral-300);
    --ra-text-mute: var(--ra-neutral-400);
    --ra-text-inv:  var(--ra-neutral-950);

    --ra-brand:      var(--ra-accent-500);
    --ra-brand-hov:  var(--ra-accent-300);
    --ra-brand-soft: #0d2b2a;
    --ra-on-brand:   var(--ra-neutral-950);

    --ra-accent:      var(--ra-accent-300);
    --ra-accent-soft: #0d2b2a;
    --ra-on-accent:   var(--ra-neutral-950);

    --ra-success:      #4ec27d;
    --ra-success-soft: #0f2a1a;
    --ra-warning:      #e0a33c;
    --ra-warning-soft: #2e2312;
    --ra-danger:       #f0776a;
    --ra-danger-soft:  #2e1613;
    --ra-info:         #6bb0f0;
    --ra-info-soft:    #10222e;

    --ra-focus:   var(--ra-accent-300);
    --ra-overlay: rgb(0 0 0 / 70%);

    --ra-viz-1: #4fd4ce;
    --ra-viz-2: #0e8f88;
    --ra-viz-3: #e0a33c;
    --ra-viz-4: #6bb0f0;
    --ra-viz-5: #c08fcb;
    --ra-viz-6: #9aa5a5;

    --ra-sh-1: 0 1px 2px rgb(0 0 0 / 40%);
    --ra-sh-2: 0 2px 8px rgb(0 0 0 / 45%);
    --ra-sh-3: 0 10px 30px rgb(0 0 0 / 55%);
  }
}

/* ---------- 5. إعادة الضبط ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--ra-font);
  font-size: var(--ra-fs-md);
  line-height: 1.65;
  color: var(--ra-text);
  background: var(--ra-bg);
  min-block-size: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--ra-font-display); line-height: 1.3; font-weight: 600; }
h1 { font-size: var(--ra-fs-2xl); }
h2 { font-size: var(--ra-fs-xl); }
h3 { font-size: var(--ra-fs-lg); }
a { color: var(--ra-brand); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--ra-focus);
  outline-offset: 2px;
  border-radius: var(--ra-r-sm);
}

/* ---------- 6. التخطيط ---------- */
.ra-wrap { inline-size: 100%; max-inline-size: var(--ra-maxw); margin-inline: auto; padding-inline: var(--ra-s-4); }
.ra-stack { display: flex; flex-direction: column; gap: var(--ra-s-4); }
/* عنصر flex قيمته min-inline-size:auto لا ينكمش دون عرض محتواه الأدنى، فيدفع
   جدولاً عريضاً داخل .ra-scroll-x ليمدّد الصفحة بدل أن يتمرّر هو وحده. */
.ra-stack > * { min-inline-size: 0; }
.ra-stack--sm { gap: var(--ra-s-2); }
.ra-stack--lg { gap: var(--ra-s-6); }
.ra-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ra-s-3); }
.ra-row--between { justify-content: space-between; }
.ra-row--end { justify-content: flex-end; }
.ra-row--top { align-items: flex-start; }
.ra-grid { display: grid; gap: var(--ra-s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ra-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ra-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ra-spacer { flex: 1 1 auto; }
.ra-scroll-x {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  /* min-inline-size:auto الافتراضي على عنصر flex يمنعه من الانكماش دون عرض محتواه،
     فيدفع الجدول العريض الصفحةَ كلها للتمرير الأفقي بدل أن يتمرّر هو وحده. */
  min-inline-size: 0; max-inline-size: 100%;
}

.ra-skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--ra-s-4);
  z-index: 999; padding: var(--ra-s-3) var(--ra-s-4);
  background: var(--ra-brand); color: var(--ra-on-brand);
  border-radius: var(--ra-r-sm); text-decoration: none; font-weight: 600;
}
.ra-skip:focus { inset-block-start: var(--ra-s-3); }

/* ---------- 7. البطاقات ---------- */
.ra-card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-r-lg);
  padding: var(--ra-s-5);
  box-shadow: var(--ra-sh-1);
}
.ra-card--flat { box-shadow: none; }
.ra-card--sunk { background: var(--ra-surface-sunk); box-shadow: none; }
.ra-card--brand {
  background: linear-gradient(135deg, var(--ra-brand) 0%, var(--ra-brand-hov) 100%);
  color: var(--ra-on-brand); border-color: transparent;
}
.ra-card--brand h1, .ra-card--brand h2, .ra-card--brand h3 { color: var(--ra-on-brand); }
.ra-card--pad-sm { padding: var(--ra-s-4); }
.ra-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ra-s-3); margin-block-end: var(--ra-s-4); }
.ra-card__title { font-family: var(--ra-font-display); font-size: var(--ra-fs-lg); font-weight: 600; }

button.ra-card, a.ra-card { text-align: start; cursor: pointer; color: inherit; text-decoration: none; inline-size: 100%; display: block;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
button.ra-card:hover, a.ra-card:hover { box-shadow: var(--ra-sh-2); transform: translateY(-2px); border-color: var(--ra-brand); }

/* ---------- 8. الأزرار ---------- */
.ra-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ra-s-2);
  min-block-size: var(--ra-tap); padding: var(--ra-s-2) var(--ra-s-5);
  border: 1px solid transparent; border-radius: var(--ra-r-pill);
  background: var(--ra-brand); color: var(--ra-on-brand);
  font-weight: 600; font-size: var(--ra-fs-md); cursor: pointer; text-decoration: none;
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease;
}
.ra-btn:hover { background: var(--ra-brand-hov); }
.ra-btn:active { transform: scale(.98); }
.ra-btn[disabled], .ra-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ra-btn--secondary { background: var(--ra-surface); color: var(--ra-text); border-color: var(--ra-border-strong); }
.ra-btn--secondary:hover { background: var(--ra-surface-sunk); }
.ra-btn--ghost { background: transparent; color: var(--ra-brand); border-color: var(--ra-border); }
.ra-btn--ghost:hover { background: var(--ra-brand-soft); border-color: var(--ra-brand); }
.ra-btn--accent { background: var(--ra-accent); color: var(--ra-on-accent); }
.ra-btn--danger { background: var(--ra-danger); color: var(--ra-text-inv); }
.ra-btn--sm { min-block-size: 36px; padding: var(--ra-s-1) var(--ra-s-4); font-size: var(--ra-fs-sm); }
/* قاعدة أهداف اللمس ≥ 44px: المقاس الصغير 36px يخدم كثافة سطح المكتب،
   لكنه دون الحد على اللمس — فيُرفع لكامل هدف اللمس على المؤشّرات الخشنة. */
@media (pointer: coarse) {
  .ra-btn--sm, .ra-tabs button, .rq-langtoggle button, .ra-switch {
    min-block-size: var(--ra-tap);
  }
}
.ra-btn--lg { min-block-size: 56px; padding: var(--ra-s-3) var(--ra-s-6); font-size: var(--ra-fs-lg); }
.ra-btn--block { inline-size: 100%; }
.ra-btn--icon { padding-inline: var(--ra-s-3); }
.ra-btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* ---------- 9. الشارات والوسوم ---------- */
.ra-badge {
  display: inline-flex; align-items: center; gap: var(--ra-s-1);
  padding: 2px var(--ra-s-3); border-radius: var(--ra-r-pill);
  font-size: var(--ra-fs-xs); font-weight: 600; line-height: 1.8;
  background: var(--ra-surface-sunk); color: var(--ra-text-soft);
  border: 1px solid var(--ra-border);
}
.ra-badge--success { background: var(--ra-success-soft); color: var(--ra-success); border-color: transparent; }
.ra-badge--warning { background: var(--ra-warning-soft); color: var(--ra-warning); border-color: transparent; }
.ra-badge--danger  { background: var(--ra-danger-soft);  color: var(--ra-danger);  border-color: transparent; }
.ra-badge--info    { background: var(--ra-info-soft);    color: var(--ra-info);    border-color: transparent; }
.ra-badge--brand   { background: var(--ra-brand-soft);   color: var(--ra-brand);   border-color: transparent; }
.ra-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- 10. التنبيهات ---------- */
.ra-alert {
  display: flex; gap: var(--ra-s-3); align-items: flex-start;
  padding: var(--ra-s-4); border-radius: var(--ra-r-md);
  border: 1px solid var(--ra-border);
  border-inline-start: 4px solid var(--ra-text-mute);
  background: var(--ra-surface-alt); font-size: var(--ra-fs-sm);
}
.ra-alert--success { background: var(--ra-success-soft); border-inline-start-color: var(--ra-success); border-color: transparent; }
.ra-alert--warning { background: var(--ra-warning-soft); border-inline-start-color: var(--ra-warning); border-color: transparent; }
.ra-alert--danger  { background: var(--ra-danger-soft);  border-inline-start-color: var(--ra-danger);  border-color: transparent; }
.ra-alert--info    { background: var(--ra-info-soft);    border-inline-start-color: var(--ra-info);    border-color: transparent; }
.ra-alert__icon { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 2px; }
.ra-alert strong { display: block; margin-block-end: 2px; }

/* ---------- 11. الحقول ---------- */
.ra-field { display: flex; flex-direction: column; gap: var(--ra-s-2); }
.ra-field label, .ra-label { font-size: var(--ra-fs-sm); font-weight: 600; color: var(--ra-text-soft); }
.ra-field input, .ra-field select, .ra-field textarea, .ra-input {
  min-block-size: var(--ra-tap);
  padding: var(--ra-s-2) var(--ra-s-4);
  border: 1px solid var(--ra-border-strong);
  border-radius: var(--ra-r-md);
  background: var(--ra-surface);
  color: var(--ra-text);
  inline-size: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ra-field textarea { min-block-size: 90px; resize: vertical; line-height: 1.6; }
.ra-field input:focus, .ra-field select:focus, .ra-field textarea:focus, .ra-input:focus {
  outline: none; border-color: var(--ra-brand); box-shadow: 0 0 0 3px var(--ra-brand-soft);
}
.ra-field input::placeholder, .ra-field textarea::placeholder { color: var(--ra-text-mute); }
.ra-fine { font-size: var(--ra-fs-xs); color: var(--ra-text-mute); line-height: 1.6; }
.ra-muted { color: var(--ra-text-soft); }

.ra-switch { display: inline-flex; align-items: center; gap: var(--ra-s-2); cursor: pointer; min-block-size: var(--ra-tap); }
.ra-switch input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.ra-switch__track {
  inline-size: 44px; block-size: 24px; border-radius: var(--ra-r-pill);
  background: var(--ra-border-strong); position: relative; transition: background .2s ease; flex: none;
}
.ra-switch__track::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--ra-surface); transition: transform .2s ease;
}
.ra-switch input:checked + .ra-switch__track { background: var(--ra-brand); }
.ra-switch input:checked + .ra-switch__track::after { transform: translateX(-20px); }
.ra-switch input:focus-visible + .ra-switch__track { outline: 3px solid var(--ra-focus); outline-offset: 2px; }

/* ---------- 12. التبويبات ---------- */
.ra-tabs { display: flex; gap: var(--ra-s-2); border-block-end: 2px solid var(--ra-border); overflow-x: auto; }
.ra-tabs button {
  min-block-size: var(--ra-tap); padding: var(--ra-s-2) var(--ra-s-4);
  border: none; background: none; cursor: pointer; white-space: nowrap;
  color: var(--ra-text-soft); font-weight: 600; font-size: var(--ra-fs-sm);
  border-block-end: 3px solid transparent; margin-block-end: -2px;
  transition: color .16s ease, border-color .16s ease;
}
.ra-tabs button:hover { color: var(--ra-text); }
.ra-tabs button[aria-selected="true"] { color: var(--ra-brand); border-block-end-color: var(--ra-brand); }

/* ---------- 13. الجداول ---------- */
.ra-table { inline-size: 100%; border-collapse: collapse; font-size: var(--ra-fs-sm); min-inline-size: 560px; }
.ra-table th, .ra-table td { padding: var(--ra-s-3) var(--ra-s-4); text-align: start; border-block-end: 1px solid var(--ra-border); }
.ra-table thead th { background: var(--ra-surface-sunk); font-weight: 600; color: var(--ra-text-soft); font-size: var(--ra-fs-xs); white-space: nowrap; }
.ra-table tbody tr:hover { background: var(--ra-surface-alt); }
.ra-table td.ra-num, .ra-num { font-family: var(--ra-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 14. الخطوات ---------- */
.ra-steps { display: flex; flex-direction: column; gap: 0; }
.ra-steps__item { display: grid; grid-template-columns: 32px 1fr; gap: var(--ra-s-4); position: relative; padding-block-end: var(--ra-s-5); }
.ra-steps__item:last-child { padding-block-end: 0; }
.ra-steps__item::before {
  content: ""; position: absolute; inset-inline-start: 15px; inset-block: 32px 0;
  inline-size: 2px; background: var(--ra-border);
}
.ra-steps__item:last-child::before { display: none; }
.ra-steps__dot {
  inline-size: 32px; block-size: 32px; border-radius: 50%;
  display: grid; place-items: center; flex: none; z-index: 1;
  background: var(--ra-surface); border: 2px solid var(--ra-border);
  color: var(--ra-text-mute); font-size: var(--ra-fs-xs); font-weight: 700;
}
.ra-steps__item[data-state="done"] .ra-steps__dot { background: var(--ra-success); border-color: var(--ra-success); color: var(--ra-text-inv); }
.ra-steps__item[data-state="done"]::before { background: var(--ra-success); }
.ra-steps__item[data-state="current"] .ra-steps__dot { background: var(--ra-brand); border-color: var(--ra-brand); color: var(--ra-on-brand); box-shadow: 0 0 0 5px var(--ra-brand-soft); }
.ra-steps__label { font-weight: 600; }
.ra-steps__item[data-state="todo"] .ra-steps__label { color: var(--ra-text-soft); }

/* ---------- 15. حالة فارغة ---------- */
.ra-empty { text-align: center; padding: var(--ra-s-8) var(--ra-s-4); color: var(--ra-text-soft); }
.ra-empty svg { inline-size: 56px; block-size: 56px; margin-inline: auto; margin-block-end: var(--ra-s-4); color: var(--ra-text-mute); opacity: .6; }
.ra-empty h3 { margin-block-end: var(--ra-s-2); color: var(--ra-text); }

/* ---------- 16. الأرقام الكبيرة ---------- */
.ra-stat { display: flex; flex-direction: column; gap: var(--ra-s-1); }
.ra-stat__value { font-family: var(--ra-font-display); font-size: var(--ra-fs-3xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ra-stat__label { font-size: var(--ra-fs-sm); color: var(--ra-text-soft); }

/* ---------- 17. الحركة ---------- */
@keyframes ra-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ra-fade { animation: ra-fade-in .45s ease both; }
@keyframes ra-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ra-pulse { animation: ra-pulse 1.4s ease-in-out infinite; }

.ra-sr {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 18. الرسوم ---------- */
.ra-chart { inline-size: 100%; }
.ra-chart svg { inline-size: 100%; block-size: auto; overflow: visible; }
.ra-chart__grid line { stroke: var(--ra-border); stroke-width: 1; }
.ra-chart__axis text { fill: var(--ra-text-mute); font-size: 11px; font-family: var(--ra-font); }
.ra-chart__bar { transition: opacity .15s ease; cursor: pointer; }
.ra-chart__bar:hover { opacity: .78; }
.ra-chart__tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--ra-neutral-900); color: var(--ra-neutral-0);
  padding: var(--ra-s-2) var(--ra-s-3); border-radius: var(--ra-r-sm);
  font-size: var(--ra-fs-xs); box-shadow: var(--ra-sh-2); white-space: nowrap;
}
.ra-legend { display: flex; flex-wrap: wrap; gap: var(--ra-s-4); font-size: var(--ra-fs-xs); color: var(--ra-text-soft); }
.ra-legend span { display: inline-flex; align-items: center; gap: var(--ra-s-2); }
.ra-legend i { inline-size: 12px; block-size: 12px; border-radius: 3px; display: inline-block; }

/* ---------- 19. النافذة المنبثقة ---------- */
.ra-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--ra-s-4); }
.ra-modal__backdrop { position: absolute; inset: 0; background: var(--ra-overlay); }
.ra-modal__panel {
  position: relative; inline-size: min(560px, 100%); max-block-size: 88vh; overflow-y: auto;
  background: var(--ra-surface); border-radius: var(--ra-r-xl);
  padding: var(--ra-s-6); box-shadow: var(--ra-sh-3);
  animation: ra-fade-in .25s ease both;
}