/* ═══════════════════════════════════════════════════════════════════════
   ربط — طبقة نظام التصميم. تُحمَّل بعد styles.css فتغلبه.

   مصدرها الوحيد: design/README.md (حزمة التسليم من التصميم). القيم هنا
   منقولة حرفياً من جدول الرموز هناك، ولا تُخترع قيمة جديدة في هذا الملف.

   طبقتان بقصد:
     ١. لوحة ربط ‎--r-*‎ — أسماء التصميم كما هي، مصدر الحقيقة.
     ٢. مطابقة على رموز styles.css الموروثة، فتنقلب الواجهة كلها دفعة
        واحدة بدل مطاردة كل مكوّن على حدة.

   قرار المالك (٢٠٢٦-٠٩-٠٥): الأساسي هو ‎#0E7A47‎ لا ‎#17A05F‎. الأبيض على
   الزاهي يعطي 3.37:1 وهو راسب بـWCAG AA، والأغمق يعطي 5.4:1. الزاهي يبقى
   موجوداً باسم ‎--r-primary-vivid‎ للتعبئات غير النصّية وحدها (المفاتيح،
   أشرطة التقدّم، النقاط) حيث لا نص أبيض فوقه.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة ربط: منقولة من جدول الرموز في التسليم ───────────────── */
  --r-primary:        #0E7A47;   /* الأساسي بعد قرار التباين */
  --r-primary-vivid:  #17A05F;   /* تعبئة غير نصّية فقط */
  --r-primary-deeper: #0B5F37;   /* الضغط، ونهاية التدرّج */
  --r-primary-wash:   #E1FBD6;
  --r-primary-wash-2: #F4FFF0;
  --r-lime:           #75B94E;   /* على الأسطح الغامقة وحدها */

  --r-ink:            #262626;
  --r-ink-2:          #3D403B;
  --r-ink-3:          #4E5A48;
  --r-muted:          #6B6E69;   /* أخفت رمادي مقروء — لا تنزل تحته لنص */
  --r-muted-2:        #A7ACA5;

  --r-line-faint:     #F7F8F6;
  --r-line:           #EFF0ED;
  --r-line-2:         #E7E4DE;
  --r-line-3:         #DFE1DD;

  --r-surface:        #FFFFFF;
  --r-surface-alt:    #FCFDFB;
  --r-bg:             #F6F5F2;
  --r-bg-2:           #F2F3F1;

  --r-danger:         #C2452F;
  --r-danger-wash:    #FDE8E4;
  --r-warn:           #B8862B;
  --r-warn-text:      #7A5E1E;
  --r-warn-wash:      #FFF9E8;
  --r-warn-line:      #EFDFC2;
  --r-chart-blue:     #3E63C8;

  /* ── الخطوط: العناوين Cairo، الأرقام IBM Plex Mono، الشعار Quicksand،
        والمتن خط النظام العربي. مستضافة محلياً في /fonts. ────────── */
  --font-display: "Cairo", "SF Arabic", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-brand:   "Quicksand", system-ui, sans-serif;

  /* ── المطابقة على رموز styles.css ─────────────────────────────── */
  --brand:        var(--r-primary);
  --brand-mid:    var(--r-primary-vivid);
  --brand-deep:   var(--r-primary);
  --brand-ink:    var(--r-primary);
  --brand-soft:   var(--r-primary-wash);
  --brand-tint:   var(--r-primary-wash-2);
  --badge-fill:   var(--r-primary);
  --brand-grad-end: var(--r-primary-deeper);
  --brand-glow:   14,122,71;

  --ok:           var(--r-primary-vivid);
  --ok-ink:       var(--r-primary);
  --danger:       var(--r-danger);
  --danger-ink:   var(--r-danger);
  --tick-read:    var(--r-chart-blue);

  --ink:          var(--r-ink);
  --grey:         var(--r-muted-2);
  --white:        #FFFFFF;

  --bg:           var(--r-bg);
  --surface:      var(--r-surface);
  --surface-2:    var(--r-bg-2);
  --border:       var(--r-line);
  --text:         var(--r-ink);
  --text-soft:    var(--r-muted);

  --radius:       18px;   /* بطاقة الويب في التسليم */
  --radius-sm:    12px;

  --viz-a:        var(--r-primary);
  --viz-b:        var(--r-chart-blue);
  --viz-grid:     var(--r-line);

  /* نظام العلامة يسمّي خط المتن صراحةً: IBM Plex Sans Arabic وزن 400
     وتباعد أسطر 1.9، وCairo للعناوين الكبيرة وحدها. مستضاف محلياً. */
  --font: "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", system-ui,
          -apple-system, Tahoma, sans-serif;
}

/* ── الوضع الليلي ────────────────────────────────────────────────
   ⚠ مشتقّ لا مُصمَّم: حزمة التسليم لوحتها فاتحة فقط ولا تذكر وضعاً ليلياً
   إطلاقاً، والتطبيق عنده مفتاح ليلي شغّال يتبع الجهاز. فاشتُقّت اللوحة
   هنا من ألوان التسليم نفسها لا من خارجها: السطح هو ‎--r-ink‎ الذي يستعمله
   التصميم للشريط الجانبي والبطاقات الغامقة، ولهجة النص الخضراء هي
   ‎--r-lime‎ الذي ينصّ التسليم أنه «للأسطح الغامقة وحدها».
   التعبئة تبقى ‎#0E7A47‎ بالوضعين: الأبيض فوقها 5.4:1، وهي على سطح
   ‎#262626‎ تعطي 3.2:1 لشكل الزر — كلاهما ناجح. ───────────────────── */
:root[data-theme="dark"], html.dark, body.dark {
  --r-surface:     #262626;
  --r-surface-alt: #2B2C2A;
  --r-bg:          #1B1D1A;
  --r-bg-2:        #32332F;
  --r-line:        #3D403B;
  --r-line-faint:  #32332F;

  --brand-ink:    var(--r-lime);
  --brand-soft:   #12301F;
  --brand-tint:   #0E241A;
  --brand-glow:   23,160,95;

  --ok-ink:       var(--r-lime);
  --danger:       #E5715C;
  --danger-ink:   #E5715C;

  --ink:          #F7F8F6;
  --text:         #F7F8F6;
  --text-soft:    var(--r-muted-2);
  --grey:         var(--r-muted);

  --viz-a:        #3FBF7F;
  --viz-b:        #6E90E0;
  --viz-grid:     #3D403B;

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}

/* ── قواعد خاصة بالتطبيق ─────────────────────────────────────────── */
.badge.confirm, .badge.late { background: var(--brand-soft); }

/* الأرقام والأوقات والعملات والمعرّفات: مونو ولاتيني الاتجاه دائماً.
   التسليم يعدّها شرطاً لا تحسيناً — رقم عربي داخل نص RTL بلا هذا
   الغلاف ينعكس ترتيبه على الشاشة. */
.mono, .num, [data-mono] {
  font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

#screen-login .login-card .brand h1 {
  font-family: var(--font-display); letter-spacing: -.01em;
}

body.demo #screen-login .login-card::before {
  content: "نسخة تجريبية · بيانات وهمية";
  display: block; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--r-primary); background: var(--r-primary-wash);
  border-radius: 999px; padding: 4px 12px; margin: 0 auto 14px; width: max-content;
}
.demo-creds {
  margin-top: 14px; font-size: 13px; color: var(--text-soft);
  background: var(--surface-2); border-radius: 12px; padding: 10px 12px; line-height: 1.8;
}
.demo-creds b { color: var(--text); font-family: var(--font-mono); direction: ltr;
  unicode-bidi: isolate; }

/* ── بداية الطريق لشركة جديدة ─────────────────────────── */
.hub-start {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.hub-start-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; }
.hub-start-head small { color: var(--text-soft); font-size: 12px; }
.hub-start-step { display: flex; gap: 12px; align-items: center; padding: 9px 0;
  border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.hub-start-step:first-of-type { border-top: 0; }
.hub-start-step .n { flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--brand-soft); color: var(--brand-deep); }
.hub-start-step.done .n { background: var(--r-primary); color: #fff; }
.hub-start-step.done b { color: var(--text-soft); font-weight: 500; }
.hub-start-step .t { display: flex; flex-direction: column; }
.hub-start-step small { color: var(--text-soft); font-size: 12px; }

/* ── تحذير الاشتراك ─────────────────────────────────────── */
.plan-warn {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  color: var(--r-warn-text); border-radius: 14px; padding: 12px 16px;
  margin-bottom: 14px; font-size: 14px; font-weight: 500;
}
.plan-warn.hot { background: var(--r-danger-wash); border-color: #F3C4BA;
  color: var(--r-danger); }
.plan-warn .btn { padding: 7px 16px; font-size: 13px; }