/* ═══════════════════════════════════════════════════════════════════════════
   مِداد — نظام التصميم
   Midad — Design System

   طبقة واحدة فوق Bootstrap 5.3. كل ما يخصّ الهوية يمرّ من متغيّرات هذا
   الملف، ثم يُجسَّر إلى متغيّرات ‎--bs-*‎ حتى ترث مئةُ صفحةٍ قائمةٍ المظهرَ
   الجديد بلا لمس سطرٍ في تلك الصفحات.

   الاتجاه: خصائص منطقية (inline-start / inline-end) لا يمين ويسار، فالعربي
   والإنجليزي يقلبان الصفحة كلّها بلا نسخة ثانية من التنسيق.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الخطوط ────────────────────────────────────────────────────────────────
   الخطّ الخارجي رفاهية لا شرط: إن لم يصل، تعمل الحزمة الاحتياطية بلا
   انزياح في التخطيط لأن المقاييس متقاربة. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   1 — الرموز (Design tokens)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── النبض: فيروزي إلى سماوي ── */
    --t-50:  #ecfdf9;
    --t-100: #d0faf0;
    --t-200: #a5f3e3;
    --t-300: #5eead4;
    --t-400: #2dd4bf;
    --t-500: #14b8a6;
    --t-600: #0d9488;
    --t-700: #0f766e;
    --t-800: #115e59;
    --t-900: #134e4a;

    --c-400: #22d3ee;
    --c-500: #06b6d4;
    --c-600: #0891b2;

    --e-400: #34d399;
    --e-500: #10b981;
    --e-600: #059669;

    /* ── الحبر: الأزرق الداكن المحايد ── */
    --n-0:   #ffffff;
    --n-25:  #fbfcfe;
    --n-50:  #f6f8fb;
    --n-100: #eef2f7;
    --n-200: #e2e8f0;
    --n-300: #cbd5e1;
    --n-400: #94a3b8;
    --n-500: #64748b;
    --n-600: #475569;
    --n-700: #334155;
    --n-800: #1e293b;
    --n-900: #0f1b2d;
    --n-950: #070d18;

    /* ── التدرّجات ── */
    --grad-brand:  linear-gradient(135deg, var(--e-500) 0%, var(--t-500) 48%, var(--c-500) 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(16,185,129,.14), rgba(6,182,212,.14));
    --grad-text:   linear-gradient(100deg, var(--t-600), var(--c-500));
    --grad-sheen:  linear-gradient(120deg, transparent 20%, rgba(255,255,255,.34) 50%, transparent 80%);

    /* ── الأسطح (فاتح) ── */
    --bg:          var(--n-50);
    --bg-sunken:   var(--n-100);
    --surface:     var(--n-0);
    --surface-2:   var(--n-25);
    --surface-3:   var(--n-100);
    --surface-inv: var(--n-900);
    --glass:       rgba(255, 255, 255, .72);
    --glass-strong:rgba(255, 255, 255, .88);

    --line:        rgba(15, 27, 45, .09);
    --line-2:      rgba(15, 27, 45, .14);
    --line-strong: rgba(15, 27, 45, .22);

    --text:        var(--n-900);
    --text-2:      var(--n-600);
    --text-3:      var(--n-500);
    --text-inv:    var(--n-0);

    --accent:      var(--t-600);
    --accent-hover:var(--t-700);
    --accent-fg:   #ffffff;
    --accent-soft: rgba(20, 184, 166, .11);
    --accent-line: rgba(20, 184, 166, .30);

    /* ── الحالات ── */
    --ok: #059669;   --ok-soft: rgba(5, 150, 105, .12);
    --warn: #d97706; --warn-soft: rgba(217, 119, 6, .13);
    --danger: #dc2626; --danger-soft: rgba(220, 38, 38, .11);
    --info: #2563eb; --info-soft: rgba(37, 99, 235, .11);

    /* ── الشكل ── */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-pill: 999px;

    /* ── الظلال: ملوّنة بالحبر لا بالأسود الميّت ── */
    --sh-xs: 0 1px 2px rgba(15, 27, 45, .05);
    --sh-sm: 0 1px 3px rgba(15, 27, 45, .07), 0 1px 2px rgba(15, 27, 45, .04);
    --sh-md: 0 4px 16px rgba(15, 27, 45, .07), 0 1px 3px rgba(15, 27, 45, .05);
    --sh-lg: 0 12px 34px rgba(15, 27, 45, .10), 0 3px 8px rgba(15, 27, 45, .05);
    --sh-xl: 0 28px 64px rgba(15, 27, 45, .14), 0 8px 20px rgba(15, 27, 45, .06);
    --sh-glow: 0 10px 30px -8px rgba(13, 148, 136, .45);
    --ring: 0 0 0 3px var(--accent-soft);

    /* ── الحركة: منحنى واحد لكل شيء ── */
    --ease:     cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --t-fast: .14s;
    --t-base: .22s;
    --t-slow: .42s;

    /* ── القياسات ── */
    --sidebar-w: 268px;
    --topbar-h: 64px;
    --container: 1200px;
    --container-narrow: 780px;

    /* ── الخطوط ── */
    --font-ar: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
    --font-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    --font: var(--font-ar);
}

html[lang="en"] { --font: var(--font-en); }

/* ── الوضع الداكن ──────────────────────────────────────────────────────────
   ليس قلباً للخلفية: الأسطح تُبنى من جديد بارتفاعات متدرّجة، والحدود تُضاء
   بدل أن تُظلم، والنبض يُرفع درجةً لأن الفيروزي الداكن يذوب في الحبر. */
[data-bs-theme="dark"] {
    --bg:          var(--n-950);
    --bg-sunken:   #04080f;
    --surface:     #0d1420;
    --surface-2:   #111a28;
    --surface-3:   #172233;
    --surface-inv: var(--n-0);
    --glass:       rgba(13, 20, 32, .72);
    --glass-strong:rgba(13, 20, 32, .90);

    --line:        rgba(255, 255, 255, .08);
    --line-2:      rgba(255, 255, 255, .13);
    --line-strong: rgba(255, 255, 255, .22);

    --text:        #e8eef8;
    --text-2:      #9fb0c6;
    --text-3:      #7d8fa8;
    --text-inv:    var(--n-950);

    --accent:      var(--t-400);
    --accent-hover:var(--t-300);
    --accent-fg:   #04231f;
    --accent-soft: rgba(45, 212, 191, .14);
    --accent-line: rgba(45, 212, 191, .32);

    --ok: #34d399;   --ok-soft: rgba(52, 211, 153, .14);
    --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .14);
    --danger: #f87171; --danger-soft: rgba(248, 113, 113, .14);
    --info: #60a5fa; --info-soft: rgba(96, 165, 250, .14);

    --grad-brand: linear-gradient(135deg, var(--e-400) 0%, var(--t-400) 48%, var(--c-400) 100%);
    --grad-text:  linear-gradient(100deg, var(--t-300), var(--c-400));
    --grad-brand-soft: linear-gradient(135deg, rgba(45,212,191,.16), rgba(34,211,238,.12));

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --sh-md: 0 6px 20px rgba(0, 0, 0, .45);
    --sh-lg: 0 16px 40px rgba(0, 0, 0, .55);
    --sh-xl: 0 32px 70px rgba(0, 0, 0, .65);
    --sh-glow: 0 10px 34px -8px rgba(45, 212, 191, .38);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 — الجسر إلى Bootstrap

   كل صفحة قديمة تستعمل ‎.btn‎ و‎.card‎ و‎.table‎ ترث الهوية من هنا وحدها.
   ═══════════════════════════════════════════════════════════════════════════ */

:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-font-sans-serif: var(--font);
    --bs-body-font-family: var(--font);
    --bs-body-font-size: .925rem;
    --bs-body-line-height: 1.65;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-2);
    --bs-tertiary-color: var(--text-3);
    --bs-emphasis-color: var(--text);

    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);
    --bs-border-radius-pill: var(--r-pill);

    --bs-primary: var(--accent);
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: 13, 148, 136;
    --bs-link-hover-color: var(--accent-hover);

    --bs-success: var(--ok);
    --bs-warning: var(--warn);
    --bs-danger: var(--danger);
    --bs-info: var(--info);

    --bs-secondary-bg: var(--surface-3);
    --bs-tertiary-bg: var(--surface-2);
    --bs-body-bg-rgb: 246, 248, 251;
}

[data-bs-theme="dark"] {
    --bs-primary-rgb: 45, 212, 191;
    --bs-link-color-rgb: 45, 212, 191;
    --bs-body-bg-rgb: 7, 13, 24;
    --bs-heading-color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 — الأساس
   ═══════════════════════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
    min-height: 100vh;
}

/* الأرقام بعرض ثابت: بلا هذا ترقص أعمدة الجدول مع كل تحديث لحظي. */
.num, .stat-value, .metric-value, .balance-chip, .mono, code, kbd, table td, table th {
    font-variant-numeric: tabular-nums;
}

.mono, code, kbd, pre, .font-mono { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--text);
    line-height: 1.25;
}

h1, .h1 { letter-spacing: -.03em; }

a { text-decoration: none; color: var(--accent); transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

hr { border-color: var(--line); opacity: 1; }

::selection { background: var(--accent-soft); color: var(--text); }

img, svg, video { max-width: 100%; }

/* شريط تمرير رفيع يذوب في الخلفية. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* ── الوصول: مؤشّر تركيز واحد لكل الواجهة ── */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.sr-only, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* رابط التخطّي: أوّل ما يصله زرّ Tab، ومخفيّ حتى ذلك. */
.skip-link {
    position: fixed;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    z-index: 2000;
    padding: .7rem 1.1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
    font-weight: 600;
    transition: inset-block-start var(--t-base) var(--ease-out);
}
.skip-link:focus-visible { inset-block-start: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   4 — الحركة

   حركاتٌ قليلة ومقصودة. كلها تختفي عند تفعيل «تقليل الحركة» في النظام،
   وكلها تحرّك ‎transform‎ و‎opacity‎ وحدهما فلا تُعيد المتصفّح إلى التخطيط.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes ds-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ds-slide-down { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ds-pulse-ring {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: .5; }
    70%  { box-shadow: 0 0 0 8px currentColor; opacity: 0; }
    100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}
@keyframes ds-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@keyframes ds-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-6px) rotate(.6deg); }
}
@keyframes ds-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes ds-orb {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(3%, -4%, 0) scale(1.06); }
    66%      { transform: translate3d(-3%, 3%, 0) scale(.96); }
}
@keyframes ds-flow-dash { to { stroke-dashoffset: -22; } }

/* ── الظهور عند التمرير ──
   العنصر مخفيّ فقط بعد أن يعلن الجافاسكربت أنه يعمل (‎.js-on‎ على الجذر)،
   فمن أطفأ الجافاسكربت يرى المحتوى كاملاً لا صفحة فارغة. */
.js-on .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--t-slow) var(--ease-out),
        transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.js-on .reveal.in { opacity: 1; transform: none; }

.js-on .reveal-blur { filter: blur(8px); transition-property: opacity, transform, filter; }
.js-on .reveal-blur.in { filter: none; }

.js-on .reveal-scale { transform: scale(.95) translateY(10px); }
.js-on .reveal-scale.in { transform: none; }

/* تعاقبٌ تلقائي لأبناء الحاوية: البطاقة تتأخّر عن أختها فتبدو الصفحة تُبنى. */
.stagger > *  { --reveal-delay: 0ms; }
.stagger > *:nth-child(2) { --reveal-delay: 60ms; }
.stagger > *:nth-child(3) { --reveal-delay: 120ms; }
.stagger > *:nth-child(4) { --reveal-delay: 180ms; }
.stagger > *:nth-child(5) { --reveal-delay: 240ms; }
.stagger > *:nth-child(6) { --reveal-delay: 300ms; }
.stagger > *:nth-child(7) { --reveal-delay: 340ms; }
.stagger > *:nth-child(8) { --reveal-delay: 380ms; }
.stagger > *:nth-child(n+9) { --reveal-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js-on .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 — الأزرار
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
    --bs-btn-border-radius: var(--r-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .52rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .875rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
    transition:
        background-color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        box-shadow var(--t-base) var(--ease),
        transform var(--t-fast) var(--ease);
}

.btn:active { transform: translateY(.5px) scale(.994); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }

.btn-lg  { --bs-btn-padding-y: .78rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; border-radius: var(--r-md); }
.btn-sm  { --bs-btn-padding-y: .34rem; --bs-btn-padding-x: .72rem; --bs-btn-font-size: .8rem; border-radius: var(--r-xs); }

/* الزرّ الأساسي: تدرّج + توهّج خفيف. هو نقطة الجاذبية الوحيدة في الشاشة. */
.btn-primary, .btn-success {
    background: var(--grad-brand);
    border: 0;
    color: #fff;
    box-shadow: var(--sh-glow);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active,
.btn-check:checked + .btn-primary {
    background: var(--grad-brand);
    color: #fff;
    filter: saturate(1.12) brightness(1.06);
    box-shadow: 0 14px 34px -8px rgba(13, 148, 136, .58);
}
.btn-primary:disabled, .btn-success:disabled { box-shadow: none; filter: grayscale(.35); opacity: .6; }

/* لمعةٌ تعبر الزرّ عند المرور — تفصيلة واحدة تكفي، وأكثر منها ضجيج. */
.btn-primary::after, .btn-success::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-sheen);
    background-size: 220% 100%;
    background-position: 200% 0;
    opacity: 0;
    pointer-events: none;
}
.btn-primary:hover::after, .btn-success:hover::after {
    opacity: 1;
    animation: ds-shimmer .85s var(--ease-out);
}

.btn-outline-primary, .btn-outline-success {
    color: var(--accent);
    border: 1px solid var(--accent-line);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-primary:active, .btn-outline-success:active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-dark {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-2);
    box-shadow: var(--sh-xs);
}
.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-light:hover, .btn-outline-dark:hover, .btn-dark:hover,
.btn-secondary:active, .btn-outline-secondary:active,
.btn-light:active, .btn-outline-dark:active, .btn-dark:active {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--line-strong);
}

.btn-danger, .btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; filter: brightness(1.08); }
.btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

.btn-warning, .btn-outline-warning {
    background: transparent;
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.btn-outline-warning:hover { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

.btn-link { color: var(--text-2); text-decoration: none; box-shadow: none; border: 0; }
.btn-link:hover { color: var(--text); background: var(--surface-3); }

/* زرّ أيقونة مربّع — للشريط العلوي والأشرطة الجانبية. */
.btn-icon {
    inline-size: 2.3rem;
    block-size: 2.3rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-icon:hover { background: var(--surface-3); color: var(--text); }
.btn-icon svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* زرّ جوجل: أبيض بحدّ رمادي في الوضعين، فهذا شكله المعروف. */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    inline-size: 100%;
    padding: .72rem 1rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-2);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: var(--sh-xs);
    transition: background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn-google:hover { background: var(--surface-3); color: var(--text); box-shadow: var(--sh-sm); }

/* السهم يتحرّك مع الاتجاه: يميناً في الإنجليزي ويساراً في العربي. */
.btn .arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(var(--arrow-shift, .18rem)); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(calc(-1 * var(--arrow-shift, .18rem))); }

/* ═══════════════════════════════════════════════════════════════════════════
   6 — النماذج
   ═══════════════════════════════════════════════════════════════════════════ */

.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--text-2);
    margin-block-end: .38rem;
    letter-spacing: .005em;
}

.form-control, .form-select {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: .62rem .85rem;
    font-size: .9rem;
    box-shadow: var(--sh-xs);
    transition:
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-base) var(--ease),
        background-color var(--t-fast) var(--ease);
}
.form-control::placeholder { color: var(--text-3); opacity: 1; }
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: var(--line-strong); }
.form-control:focus, .form-select:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: var(--ring);
    color: var(--text);
    outline: none;
}
.form-control:disabled, .form-select:disabled {
    background: var(--surface-3);
    color: var(--text-3);
    cursor: not-allowed;
}
.form-control-sm, .form-select-sm { padding: .38rem .6rem; font-size: .82rem; border-radius: var(--r-xs); }
.form-control-lg, .form-select-lg { padding: .8rem 1rem; font-size: 1rem; border-radius: var(--r-md); }

textarea.form-control { line-height: 1.7; resize: vertical; min-block-size: 5rem; }

.form-text { color: var(--text-3); font-size: .78rem; margin-block-start: .35rem; }

.input-group > .form-control, .input-group > .form-select { box-shadow: none; }
.input-group .btn { border: 1px solid var(--line-2); box-shadow: none; }
.input-group-text {
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    color: var(--text-2);
    font-size: .85rem;
}
.input-group:focus-within { border-radius: var(--r-sm); box-shadow: var(--ring); }
.input-group:focus-within .form-control:focus,
.input-group:focus-within .btn:focus-visible { box-shadow: none; }

/* حقل بأيقونة داخله. */
.field { position: relative; }
.field-icon {
    position: absolute;
    inset-inline-start: .8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
    display: grid;
    place-items: center;
}
.field-icon svg { inline-size: 1.05rem; block-size: 1.05rem; }
.field-icon ~ .form-control { padding-inline-start: 2.5rem; }
.field .field-action {
    position: absolute;
    inset-inline-end: .35rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-3);
    padding: .4rem;
    border-radius: var(--r-xs);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.field .field-action:hover { color: var(--text); background: var(--surface-3); }

.form-check-input {
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: none;
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form-check-label { cursor: pointer; color: var(--text-2); font-size: .875rem; }
.form-switch .form-check-input { inline-size: 2.3rem; block-size: 1.25rem; }

/* رسائل التحقّق. */
.text-danger, .field-validation-error, .validation-summary-errors ul li { color: var(--danger) !important; }
.input-validation-error { border-color: var(--danger) !important; }
.input-validation-error:focus { box-shadow: 0 0 0 3px var(--danger-soft) !important; }

/* الملخّص الفارغ يترك مساحة بيضاء غامضة أعلى النموذج — نخفيه. */
.validation-summary-valid, .d-none-empty:empty { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7 — البطاقات والأسطح
   ═══════════════════════════════════════════════════════════════════════════ */

.card, .surface {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-color: var(--text);
}

.card-header {
    background: transparent;
    border-block-end: 1px solid var(--line);
    font-weight: 650;
    font-size: .9rem;
    padding: .9rem 1.1rem;
    color: var(--text);
}

.card-body { padding: 1.1rem; }
.card-footer { background: transparent; border-block-start: 1px solid var(--line); padding: .9rem 1.1rem; }

/* بطاقة ترتفع قليلاً عند المرور — للبطاقات القابلة للنقر وحدها. */
.card-hover {
    transition:
        transform var(--t-base) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease);
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
    border-color: var(--line-2);
}

/* لوح زجاجي. */
.glass {
    background: var(--glass);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--line-2);
}

/* شبكةٌ باهتة تعطي الخلفية عمقاً بلا صورة. */
.grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, var(--line) 1px, transparent 1px),
        linear-gradient(to inline-start, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

/* كرة ضوء خلف الأقسام المهمّة. */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
    animation: ds-orb 18s var(--ease) infinite;
}
[data-bs-theme="dark"] .orb { opacity: .34; }
.orb-teal { background: radial-gradient(circle, rgba(20,184,166,.62), transparent 70%); }
.orb-cyan { background: radial-gradient(circle, rgba(6,182,212,.52), transparent 70%); animation-delay: -6s; }
.orb-emerald { background: radial-gradient(circle, rgba(16,185,129,.45), transparent 70%); animation-delay: -12s; }

/* ═══════════════════════════════════════════════════════════════════════════
   8 — الشارات والرقاقات
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .34em .68em;
    border-radius: var(--r-xs);
    letter-spacing: .002em;
}

.text-bg-primary, .bg-primary { background: var(--accent-soft) !important; color: var(--accent) !important; }
.text-bg-success, .bg-success { background: var(--ok-soft) !important; color: var(--ok) !important; }
.text-bg-warning, .bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; }
.text-bg-danger,  .bg-danger  { background: var(--danger-soft) !important; color: var(--danger) !important; }
.text-bg-info,    .bg-info    { background: var(--info-soft) !important; color: var(--info) !important; }
.text-bg-secondary, .text-bg-dark, .text-bg-light, .bg-secondary {
    background: var(--surface-3) !important;
    color: var(--text-2) !important;
}

.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }
.text-primary { color: var(--accent) !important; }
.text-secondary, .text-muted { color: var(--text-2) !important; }
.bg-body, .bg-white { background: var(--surface) !important; }
.bg-body-tertiary, .bg-light { background: var(--surface-2) !important; }
.bg-body-secondary { background: var(--surface-3) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }

/* رقاقة: شارة أكبر بأيقونة، تُستعمل في الشريط العلوي والبطل. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .8rem;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.chip-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip-ok     { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.chip-warn   { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

/* نقطة حالة تنبض حين تكون حيّة. */
.status-dot {
    inline-size: .5rem;
    block-size: .5rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--text-3);
    flex: none;
    position: relative;
}
.status-dot.on { background: var(--ok); color: var(--ok); }
.status-dot.on::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: ds-pulse-ring 2.4s var(--ease-out) infinite;
}
.status-dot.off { background: var(--text-3); }
.status-dot.warn { background: var(--warn); }
.status-dot.danger { background: var(--danger); }

/* نصّ بتدرّج لوني — للكلمة الواحدة المهمّة في العنوان، لا للفقرة. */
.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 — الجداول
   ═══════════════════════════════════════════════════════════════════════════ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    margin-block-end: 0;
    font-size: .865rem;
}

.table > thead th {
    background: var(--surface-2);
    color: var(--text-3);
    font-weight: 650;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .055em;
    border-block-end: 1px solid var(--line);
    padding: .7rem .9rem;
    white-space: nowrap;
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
}

.table > tbody > tr > td { padding: .72rem .9rem; border-block-end: 1px solid var(--line); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-block-end: 0; }
.table > tbody > tr { transition: background var(--t-fast) var(--ease); }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }

.table-responsive {
    border-radius: var(--r-lg);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.card > .table-responsive { border-start-start-radius: 0; border-start-end-radius: 0; }

/* على الهاتف: كل صف يصير بطاقة، وعناوين الأعمدة تنتقل إلى جانب القيمة.
   الجدول الذي يحتاج تمريراً أفقياً على شاشة 6 بوصات جدولٌ لا يُقرأ. */
@media (max-width: 640px) {
    .table-cards, .table-cards > thead, .table-cards > tbody,
    .table-cards > tbody > tr, .table-cards th, .table-cards td { display: block; inline-size: 100%; }

    .table-cards > thead { position: absolute; inset-inline-start: -9999px; }

    .table-cards > tbody > tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        margin-block-end: .7rem;
        padding: .3rem .2rem;
        box-shadow: var(--sh-xs);
    }
    .table-cards > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        border-block-end: 1px dashed var(--line);
        padding: .55rem .8rem;
        text-align: start;
    }
    .table-cards > tbody > tr > td:last-child { border-block-end: 0; }
    .table-cards > tbody > tr > td::before {
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-3);
        flex: none;
    }
    .table-cards > tbody > tr > td:empty { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 — القوائم المنسدلة والنوافذ والتلميحات
   ═══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--line-2);
    --bs-dropdown-link-color: var(--text-2);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-active-bg: var(--accent-soft);
    --bs-dropdown-link-active-color: var(--accent);
    --bs-dropdown-header-color: var(--text-3);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: .35rem;
    border: 1px solid var(--line-2);
    min-inline-size: 12rem;
    animation: ds-slide-down var(--t-base) var(--ease-out);
}
.dropdown-item {
    border-radius: var(--r-xs);
    padding: .5rem .7rem;
    font-size: .865rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.dropdown-item svg { inline-size: 1rem; block-size: 1rem; opacity: .75; flex: none; }
.dropdown-divider { border-color: var(--line); margin: .3rem 0; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

.modal-content {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
}
.modal-header, .modal-footer { border-color: var(--line); padding: 1.1rem 1.3rem; }
.modal-body { padding: 1.3rem; }
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(3px); }
.modal-title { font-size: 1.05rem; }

.offcanvas {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

.tooltip-inner {
    background: var(--surface-inv);
    color: var(--text-inv);
    border-radius: var(--r-xs);
    font-size: .78rem;
    padding: .4rem .65rem;
    box-shadow: var(--sh-md);
}
.tooltip .tooltip-arrow::before { border-block-start-color: var(--surface-inv); }

.popover {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
}
.popover-header { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.popover-body { color: var(--text-2); }

.btn-close {
    filter: none;
    opacity: .5;
    border-radius: var(--r-xs);
}
.btn-close:hover { opacity: 1; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2.2); }

/* ═══════════════════════════════════════════════════════════════════════════
   11 — التبويبات
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-tabs {
    border-block-end: 1px solid var(--line);
    gap: .15rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-block-end: 1px;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs .nav-link {
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    color: var(--text-3);
    font-weight: 600;
    font-size: .865rem;
    padding: .65rem .95rem;
    white-space: nowrap;
    background: transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-tabs .nav-link:hover { color: var(--text); border-block-end-color: var(--line-strong); }
.nav-tabs .nav-link.active {
    color: var(--accent);
    background: transparent;
    border-block-end-color: var(--accent);
}

.nav-pills .nav-link { border-radius: var(--r-sm); color: var(--text-2); font-weight: 600; font-size: .865rem; }
.nav-pills .nav-link.active { background: var(--accent-soft); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   12 — التنبيهات والإشعارات
   ═══════════════════════════════════════════════════════════════════════════ */

.alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: .85rem 1.05rem;
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    box-shadow: none;
    color: var(--text);
    animation: ds-rise var(--t-base) var(--ease-out);
}
.alert::before {
    content: "";
    inline-size: 3px;
    align-self: stretch;
    border-radius: var(--r-pill);
    background: currentColor;
    opacity: .5;
    flex: none;
}
.alert-success { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert-danger  { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.alert-info    { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert-light, .alert-secondary { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
.alert strong { color: inherit; }
.alert .btn-close { margin-inline-start: auto; }

.toast {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    color: var(--text);
    animation: ds-rise var(--t-base) var(--ease-out);
}
.toast .toast-body { padding: .8rem .95rem; font-size: .86rem; }
.toast-accent { inline-size: 3px; align-self: stretch; border-radius: var(--r-pill); flex: none; }
.toast-accent.ok { background: var(--ok); }
.toast-accent.danger { background: var(--danger); }
.toast-accent.warn { background: var(--warn); }
.toast-accent.info { background: var(--info); }

/* ═══════════════════════════════════════════════════════════════════════════
   13 — التحميل والحالات الفارغة
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(
        100deg,
        var(--surface-3) 25%,
        color-mix(in srgb, var(--surface-3) 55%, var(--surface)) 42%,
        var(--surface-3) 60%
    );
    background-size: 220% 100%;
    animation: ds-shimmer 1.5s linear infinite;
    border-radius: var(--r-xs);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.skeleton-text { block-size: .78rem; margin-block: .35rem; }
.skeleton-title { block-size: 1.3rem; inline-size: 45%; margin-block-end: .8rem; }
.skeleton-line-70 { inline-size: 70%; }
.skeleton-line-50 { inline-size: 50%; }
.skeleton-avatar { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; }
.skeleton-card { block-size: 6.5rem; border-radius: var(--r-lg); }

.spinner {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid var(--line-strong);
    border-block-start-color: var(--accent);
    border-radius: 50%;
    display: inline-block;
    animation: ds-spin .7s linear infinite;
    vertical-align: -.15em;
}
.spinner-lg { inline-size: 1.75rem; block-size: 1.75rem; border-width: 3px; }

/* حالة فارغة / حالة خطأ — نفس الهيكل، لون مختلف. */
.empty-state {
    display: grid;
    place-items: center;
    gap: .35rem;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-3);
}
.empty-state-icon {
    inline-size: 3.4rem;
    block-size: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--surface-3);
    color: var(--text-3);
    margin-block-end: .5rem;
}
.empty-state-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
.empty-state h3, .empty-state .h3 { font-size: 1rem; color: var(--text); margin: 0; }
.empty-state p { font-size: .865rem; margin: 0; max-inline-size: 34ch; }
.empty-state .btn { margin-block-start: .9rem; }
.empty-state.is-error .empty-state-icon { background: var(--danger-soft); color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   14 — أشرطة التقدّم
   ═══════════════════════════════════════════════════════════════════════════ */

.progress, .progress-stacked {
    background: var(--surface-3);
    border-radius: var(--r-pill);
    block-size: .5rem;
    overflow: hidden;
}
.progress-bar { background: var(--grad-brand); transition: inline-size var(--t-slow) var(--ease-out); }
.progress-bar.bg-danger { background: var(--danger); }
.progress-bar.bg-warning { background: var(--warn); }
.progress-bar.bg-success { background: var(--grad-brand); }

/* ═══════════════════════════════════════════════════════════════════════════
   15 — المفتاح المقسّم (المظهر واللغة والدورة السعرية)
   ═══════════════════════════════════════════════════════════════════════════ */

.segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    position: relative;
}
.segmented button, .segmented .seg {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    padding: .32rem .72rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color var(--t-fast) var(--ease), background var(--t-base) var(--ease);
    white-space: nowrap;
}
.segmented button:hover, .segmented .seg:hover { color: var(--text); }
.segmented button[aria-pressed="true"],
.segmented button.is-active,
.segmented .seg.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--sh-xs);
}
.segmented svg { inline-size: .95rem; block-size: .95rem; }

/* النسخة الأيقونية وحدها — في الشريط العلوي حيث المساحة ضيّقة. */
.segmented-icons button { padding: .34rem .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   16 — الحاويات والأقسام
   ═══════════════════════════════════════════════════════════════════════════ */

.wrap {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}
.wrap-narrow { max-inline-size: var(--container-narrow); }
.wrap-wide { max-inline-size: 1380px; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-alt { background: var(--bg-sunken); }

.section-head {
    max-inline-size: 46rem;
    margin-inline: auto;
    text-align: center;
    margin-block-end: clamp(2rem, 4vw, 3.25rem);
    position: relative;
    z-index: 1;
}
.section-head.start { text-align: start; margin-inline: 0; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    margin-block-end: 1rem;
}

.section-head h2 {
    font-size: clamp(1.75rem, 4vw, 2.7rem);
    margin: 0 0 .85rem;
    line-height: 1.15;
}
.section-head p {
    color: var(--text-2);
    font-size: clamp(.95rem, 1.6vw, 1.075rem);
    margin: 0;
    line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17 — بطاقة مقياس (تُستعمل في اللوحة وفي معاينتها بالصفحة الأولى)
   ═══════════════════════════════════════════════════════════════════════════ */

.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.05rem 1.15rem;
    box-shadow: var(--sh-sm);
    position: relative;
    overflow: hidden;
    block-size: 100%;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.metric:hover { border-color: var(--line-2); box-shadow: var(--sh-md); }

/* خيط ملوّن رفيع على الحافّة العليا — يميّز البطاقات بلا تلوين خلفياتها. */
.metric::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--metric-tint, var(--grad-brand));
    opacity: .85;
}

.metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-block-end: .5rem;
}
.metric-label {
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--text-3);
}
.metric-icon {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--accent-soft);
    color: var(--accent);
    flex: none;
}
.metric-icon svg { inline-size: 1rem; block-size: 1rem; }
.metric-value {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--text);
}
.metric-hint { font-size: .78rem; color: var(--text-3); margin-block-start: .3rem; }
.metric-delta { font-size: .76rem; font-weight: 650; display: inline-flex; align-items: center; gap: .2rem; }
.metric-delta.up { color: var(--ok); }
.metric-delta.down { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   18 — رسوم بيانية خفيفة (بلا مكتبة)
   ═══════════════════════════════════════════════════════════════════════════ */

/* أعمدة: عناصر ‎span‎ بارتفاع نسبي — أرخص من أي مكتبة رسم لهذه الحاجة. */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    block-size: 5.5rem;
}
.bars > span {
    flex: 1;
    min-inline-size: 3px;
    background: var(--grad-brand);
    border-radius: 3px 3px 2px 2px;
    opacity: .82;
    transform-origin: bottom;
    animation: bar-grow .55s var(--ease-out) backwards;
    transition: opacity var(--t-fast) var(--ease);
}
.bars > span:hover { opacity: 1; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* خطّ: مسار SVG يُرسم عند الظهور. */
.spark-line path.line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.spark-line path.area { fill: url(#sparkFill); stroke: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   19 — أدوات مساعدة
   ═══════════════════════════════════════════════════════════════════════════ */

.stack { display: grid; gap: var(--stack-gap, 1rem); }
.row-center { display: flex; align-items: center; gap: .5rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wrap-gap { flex-wrap: wrap; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.fs-tiny { font-size: .75rem; }
.fw-650 { font-weight: 650; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.divider { block-size: 1px; background: var(--line); border: 0; margin-block: 1rem; }

/* الاتجاه: أيقونات السهم تنقلب مع اللغة بلا نسخة ثانية منها. */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   20 — الطباعة
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .app-sidebar, .app-topbar, .site-header, .site-footer, .mobile-nav,
    .no-print, .btn, .toast-stack { display: none !important; }
    .app-main, .app-content { margin: 0 !important; padding: 0 !important; }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}