/* ══════════════════════════════════════════════════════════
   TECHGATE v7.1.1 — Design System
   بوابة العالم التقنية | RTL-first | Professional SaaS
   ══════════════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
  height:100%;
  scroll-behavior:smooth;
}
/* الاتجاه يأتي من سمة dir على <html> (يضبطها I18N عند تبديل اللغة)
   ولا يُفرض على body. كان body{direction:rtl} ثابتاً، فعند التحويل
   إلى الإنجليزية يصير <html dir="ltr"> بينما يبقى المحتوى RTL —
   إنجليزية محاذاة لليمين بخطّ عربي. الاتجاه خاصية موروثة، فحذفه
   من body كافٍ ليتبع html. والسطر التالي احتياط لو غابت السمة. */
html:not([dir]){direction:rtl}
body{
  /* الخط الافتراضي لاتيني؛ العربية تُضاف فوقه بالقاعدة التالية */
  font-family:'Inter',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  /* حُذف overflow-x:hidden (كان هنا وفي responsive.css معاً).
     هو لا يمنع التمدد بل يُخفيه: العنصر الخارج عن الشاشة يُقصّ ولا
     يمكن الوصول إليه بالتمرير ولا بلوحة المفاتيح ولا بقارئ الشاشة
     — فيبدو كأنه غير موجود. وهذا ما جعل زر «إنشاء حساب» يختفي
     بلا أثر بدل أن يظهر أن الشريط يفيض.
     منع التمدد يتم عند مصدره: كل حالة معروفة لها حاوية تمرير
     خاصة بها في responsive.css، وشريط التنقّل صار لا يفيض
     أصلاً (components.css → .navbar__links). */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* الخط العربي يُقدَّم فقط عندما تكون واجهة الصفحة عربية.
   html:not([lang]) احتياط لو حُذفت السمة — الافتراض عربي. */
html[lang="ar"] body,
html[lang^="ar-"] body,
html:not([lang]) body{
  font-family:'Noto Kufi Arabic','Inter',-apple-system,'Segoe UI',Tahoma,sans-serif;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;line-height:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}
::selection{background:var(--brand-100);color:var(--brand-800)}
:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px;border-radius:4px}

/* ── SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-s);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--border-ss)}

/* ── LIGHT TOKENS ─────────────────────────────── */
:root{
  /* ── B2B Brand Blue ── */
  --brand-800:#042C53;
  --brand-700:#0C447C;
  --brand-600:#185FA5;
  --brand-500:#2272BE;
  --brand-400:#378ADD;
  --brand-300:#64A8E8;
  --brand-200:#8DC4F2;
  --brand-100:#B5D4F4;
  --brand-50:#E6F1FB;
  --brand-25:#F3F8FD;

  /* ── B2C Green ── */
  --green-800:#064E3B;
  --green-700:#047857;
  --green-600:#059669;
  --green-500:#10B981;
  --green-400:#34D399;--green-300:#6EE7B7;
  --green-200:#A7F3D0;
  --green-100:#D1FAE5;
  --green-50:#ECFDF5;
  --green-25:#F5FEFA;

  /* ── Status ── */
  --ok-600:#059669;--ok-200:#6EE7B7;--ok-100:#D1FAE5;--ok-50:#ECFDF5;
  --warn-600:#D97706;--warn-200:#FCD34D;--warn-100:#FEF3C7;--warn-50:#FFFBEB;
  --err-600:#DC2626;--err-200:#FCA5A5;--err-100:#FEE2E2;--err-50:#FEF2F2;
  --pur-600:#7C3AED;--pur-200:#C4B5FD;--pur-100:#EDE9FE;--pur-50:#F5F3FF;

  /* ── Neutral ── */
  --gray-900:#0F172A;
  --gray-800:#1E293B;
  --gray-700:#334155;
  --gray-600:#475569;
  --gray-500:#64748B;
  --gray-400:#94A3B8;
  --gray-300:#CBD5E1;
  --gray-200:#E2E8F0;
  --gray-100:#F1F5F9;
  --gray-50:#F8FAFC;

  /* ── Surfaces ── */
  --bg:#EEF2F7;
  --s0:#FFFFFF;
  --s1:#F8FAFC;
  --s2:#F0F4F8;
  --s3:#E8EDF4;

  /* ── Text ── */
  /* --text-m كان #64748B فيسقط في WCAG AA للنص العادي:
     4.23 على --bg و4.31 على --s2 و4.05 على --s3 (المطلوب 4.5).
     وهو مستخدم في ٣٦١ موضعاً، فالإصلاح في الرمز لا في مواضع
     الاستعمال. القيمة الجديدة #5A6474 تعطي:
       --bg 5.32 · --s0 5.98 · --s1 5.72 · --s2 5.41 · --s3 5.09
       --brand-50 5.23 — كلّها فوق 4.5 */
  --text:#0F172A;
  --text-2:#334155;
  --text-m:#5A6474;
  --text-d:#94A3B8;   /* زخرفي/معطَّل فقط — لا يُستعمل لنصّ يُقرأ */
  --text-ph:#CBD5E1;

  /* ── Border ── */
  --border:#E2E8F0;
  --border-s:#CBD5E1;
  --border-ss:#94A3B8;

  /* ── Sidebar ── */
  --sb-bg:#042C53;
  --logo-shield:#185FA5;
  /* v7.1.1 — بوّابة الشعار كانت خضراء (#059669) وهي آخر أثر للون
     الأفراد: تظهر في الشريط والتذييل وشاشات المصادقة في النمطين. */
  --logo-gate:#2272BE;
  --sb-border:rgba(255,255,255,.07);
  --sb-text:rgba(255,255,255,.55);
  --sb-hover:rgba(255,255,255,.90);
  --sb-active:#fff;
  --sb-hover-bg:rgba(255,255,255,.06);
  --sb-active-bg:rgba(55,138,221,.18);
  --sb-bar:#378ADD;
  --sb-section:rgba(255,255,255,.22);
  --sb-w:260px;

  /* ── Shadows ── */
  --sh-xs:0 1px 2px rgba(0,0,0,.05);
  --sh-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 4px 12px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --sh-lg:0 10px 24px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.05);
  --sh-xl:0 20px 48px rgba(0,0,0,.10),0 8px 16px rgba(0,0,0,.06);
  --sh-2xl:0 32px 64px rgba(0,0,0,.14);
  --sh-brand:0 4px 20px rgba(24,95,165,.30);
  --sh-green:0 4px 20px rgba(5,150,105,.26);

  /* ── Spacing ── */
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;
  --sp5:1.25rem;--sp6:1.5rem;--sp7:1.75rem;--sp8:2rem;--sp10:2.5rem;
  --sp12:3rem;--sp16:4rem;--sp20:5rem;

  /* ── Radius ── */
  --r4:4px;--r:6px;--r8:8px;--r10:10px;--r12:12px;
  --r16:16px;--r20:20px;--r24:24px;--rf:9999px;

  /* ── Transitions ── */
  --tf:.12s ease;--t:.20s ease;--ts:.30s ease;

  /* ── Z-Index ── */
  --z1:100;--z2:200;--z3:300;--z4:400;--z5:500;--z6:600;

  /* ── Typography Scale ── */
  --t2xs:.6875rem;   /* 11px */
  --txs:.75rem;      /* 12px */
  --tsm:.875rem;     /* 14px */
  --tbase:1rem;      /* 16px */
  --tmd:1.0625rem;   /* 17px */
  --tlg:1.125rem;    /* 18px */
  --txl:1.25rem;     /* 20px */
  --t2xl:1.375rem;   /* 22px */
  --t3xl:1.625rem;   /* 26px */
  --t4xl:2rem;       /* 32px */
  --t5xl:2.5rem;     /* 40px */
  --thero:clamp(2rem,4.5vw,3.25rem);

  /* ── Layout ── */
  --topbar:64px;      /* شريط اللوحات الداخلية */
  --navbar:82px;      /* v7.1.1 — الهيدر العام: أعلى ليتنفّس الشعار */
  /* ⚠️ V7.1.1 — رُفع من 46 إلى 60.
     شعار المالك يحمل اسماً وسطراً تحته («Governing Technology…»)،
     وعند 46 بكسل يصير السطر الثاني غير مقروء — فيبدو الشعار «صغيراً»
     وكأنه لم يُرفع صحيحاً. والقيمة المخصّصة من اللوحة تتجاوز هذه. */
  --logo-h:60px;      /* ارتفاع الشعار داخل الهيدر */
  --maxw:1320px;
}

/* ── DARK MODE ────────────────────────────────── */
[data-theme=dark]{
  --bg:#0D1117;
  --s0:#161B22;
  --s1:#1C2128;
  --s2:#22272E;
  --s3:#2D333B;
  --sb-bg:#010409;
  --logo-shield:#8DC4F2;
  --logo-gate:#64A8E8;   /* v7.1.1 — الوضع الداكن */
  /* الداكن: --text-m كان #6E7681 → 4.12 على --bg و3.77 على --s0
     و3.27 على --s2. القيمة الجديدة #939CA5 تعطي:
       --bg 6.79 · --s0 6.21 · --s1 5.81 · --s2 5.39 · --s3 4.57
     ولمّا صارت أفتح من --text-2 القديم (#8B949E) رُفع --text-2
     أيضاً إلى #B1BAC4 حتى يبقى التدرّج text > text-2 > text-m
     قائماً (وقيمته القديمة كانت هي نفسها تسقط: 4.14 على --s3):
       #B1BAC4 → --bg 9.63 · --s0 8.81 · --s2 7.65 · --s3 6.49 */
  --text:#E6EDF3;
  --text-2:#B1BAC4;
  --text-m:#939CA5;
  --text-d:#484F58;   /* زخرفي فقط */
  --border:#30363D;
  --border-s:#3C444D;
  --border-ss:#4A5058;
  --brand-50:rgba(55,138,221,.10);
  --brand-25:rgba(55,138,221,.05);
  --green-50:rgba(16,185,129,.10);
  --green-25:rgba(16,185,129,.05);
  --ok-100:rgba(16,185,129,.12);--ok-50:rgba(16,185,129,.06);
  --warn-100:rgba(245,158,11,.12);--warn-50:rgba(245,158,11,.06);
  --err-100:rgba(239,68,68,.12);--err-50:rgba(239,68,68,.06);
  --pur-100:rgba(139,92,246,.12);--pur-50:rgba(139,92,246,.06);
  --sh-sm:0 1px 3px rgba(0,0,0,.40);
  --sh-md:0 4px 12px rgba(0,0,0,.35);
  --sh-lg:0 10px 24px rgba(0,0,0,.40);
  --sh-xl:0 20px 48px rgba(0,0,0,.45);

  /* ⚠️ v7.1.1 — الطرف الداكن من سُلّم العلامة لم يكن يُعاد تعريفه في
     النمط الداكن، فكل نصّ يلبس لون العلامة يسقط تحت الحدّ المقروء.
     قياسات فعلية قبل الإصلاح:
       نصّ #/rfq بـ --brand-800 ......... 1.34:1
       شارة «طلب عرض سعر» ............... 1.76:1
       روابط --brand-600 (نسيت كلمة المرور؟ · سجّل مجاناً ·
       بريد التواصل · الأسعار) .......... 2.48 – 2.90:1
     والحدّ المطلوب 4.5:1 للنصّ العادي.

     القيم الجديدة على --bg (#0D1117):
       --brand-600 #5FA5E8 → 7.2:1   ·  على --s1 → 6.2:1
       --brand-700 #3E8AD4 → 4.9:1
     ولأن --brand-600 يُستعمل أيضاً خلفيةً صلبة لزرّ الإجراء الأساسي،
     ثُبِّتت خلفيته على درجة أغمق أدناه حتى يبقى الأبيض عليها 5.1:1. */
  --brand-600:#5FA5E8;
  --brand-700:#3E8AD4;
}
/* الخلفيات الصلبة تُثبَّت: تفتيح الرمز وحده كان سيُسقط تباين الأبيض عليها */
[data-theme=dark] .btn-primary{background:#1B6FC0;border-color:#1B6FC0;color:#fff}
[data-theme=dark] .topbar__dash-link:hover{background:#1B6FC0;border-color:#1B6FC0;color:#fff}
/* والنصّ الذي كان يلبس --brand-800 (أغمق درجة) يلبس أفتحها في الداكن */
[data-theme=dark] .info-box-info,
[data-theme=dark] .info-box-b2c,
[data-theme=dark] .auth-brand-name,
[data-theme=dark] .deal-room__msg.own .deal-room__bubble{color:var(--brand-200)}

/* ── FONT SIZE CONTROL ────────────────────────── */
html[data-font=sm]{font-size:14px}
html[data-font=md]{font-size:16px}
html[data-font=lg]{font-size:18px}
html[data-font=xl]{font-size:20px}

/* ── PAGE ROUTING ─────────────────────────────── */
.page{display:none;min-height:100vh}
.page.active{display:block;animation:pgIn .18s ease both}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── UTILITY CLASSES ──────────────────────────── */
.flex{display:flex}
.flex-c{display:flex;align-items:center}
.flex-cc{display:flex;align-items:center;justify-content:center}
.flex-sb{display:flex;align-items:center;justify-content:space-between}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.gap2{gap:var(--sp2)}.gap3{gap:var(--sp3)}.gap4{gap:var(--sp4)}
.gap5{gap:var(--sp5)}.gap6{gap:var(--sp6)}
.w-full{width:100%}
.text-center{text-align:center}
.text-muted{color:var(--text-m)}
.text-sm{font-size:var(--tsm)}
.fw-bold{font-weight:700}
.fw-semi{font-weight:600}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.divider{border:none;border-top:1px solid var(--border);margin:var(--sp5) 0}
.mono{font-family:'Courier New',monospace;font-size:.9em}

/* ── SKELETON LOADING ─────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease infinite;
  border-radius:var(--r);
}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes fadeOut{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.spin{animation:spin .75s linear infinite}