/* ══════════════════════════════════════════════════════════
   TECHGATE v7.1.1 — Responsive Fixes
   يُحمَّل أخيراً ليعلو على الطبقات السابقة.

   المشكلة المُبلَّغة: عرض الموقع أكبر من عرض شاشة الجوال.
   الأسباب التي عولجت هنا:
     ١) جداول بعرض أدنى 560px بلا حاوية تمرير → تدفع عرض الصفحة كلها
     ٢) أبناء flex/grid بلا min-width:0 → يرفضون الانكماش دون محتواهم
     ٣) نصوص طويلة بلا فواصل (روابط، معرّفات، أكواد) → تمدّد الحاوية
     ٤) حقول إدخال أصغر من 16px → iOS يكبّر الصفحة تلقائياً عند اللمس
        فتبدو أعرض من الشاشة (وهذا أشيع سبب للشكوى)
     ٥) عناصر بعرض 100vw → أعرض من المساحة المرئية عند وجود شريط تمرير
   ══════════════════════════════════════════════════════════ */

/* ── ١) حارس عام ضد التمدد الأفقي ─────────────────────────
   كان هنا overflow-x:hidden على html وbody معاً. وهو يخفي الفائض
   بلا أن يجعله قابلاً للوصول: العنصر الخارج عن الشاشة يُقصّ ولا
   يمكن التمرير إليه بأي وسيلة. هذا بالضبط ما جعل زر «إنشاء حساب»
   يختفي بلا أثر بدلاً من أن يظهر بوضوح أن الشريط يفيض.
   الآن: الفائض يبقى قابلاً للتمرير (السلوك الافتراضي للمتصفح)،
   ومنع التمدد يتم عند مصدره — كل مُتَّهم معروف له حاوية تمرير
   خاصة به في الفقرات ٢–٥ أدناه (الجداول، الصور، الشبكات،
   التنبيهات) وشريط التنقّل صار لا يفيض أصلاً (components.css).  */
html {
  max-width: 100%;
}
body {
  max-width: 100%;
  position: relative;
}

/* أي عنصر لا يتجاوز حاويته */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ── ٢) السماح لأبناء flex/grid بالانكماش ───────────────── */
/* بلا هذا يبقى العنصر بعرض محتواه مهما ضاقت الشاشة */
.card, .stat-card, .api-card, .form-group,
.dash-content > *, .modal, .modal__body {
  min-width: 0;
}

/* ── ٣) كسر النصوص الطويلة ──────────────────────────────── */
.mono, .member-id-chip, code, pre,
.api-card__desc, .table td, .empty__desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre { white-space: pre-wrap; }

/* ── ٤) الجداول: تمرير أفقي داخل حاويتها لا خارج الصفحة ── */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* شبكة أمان: جدول موضوع مباشرة داخل بطاقة (بلا حاوية تمرير)
   يُعامَل كحاوية تمرير بنفسه بدل دفع عرض الصفحة */
.card > .table,
.card-p > .table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── ٥) عناصر بعرض النافذة ─────────────────────────────── */
#tg-toasts { max-width: calc(100% - 24px); }

@media (max-width: 768px) {
  /* منع تكبير iOS التلقائي: أي حقل تحت 16px يُجبَر على 16px */
  input, select, textarea, .form-input, .otp-box {
    font-size: 16px !important;
  }

  /* الجداول الواسعة تُقرأ بالتمرير لا بتمدد الصفحة */
  .table { min-width: 520px; }

  /* الشبكات تنهار لعمود واحد بدل إجبار عرض أدنى */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* هوامش أضيق تعطي مساحة فعلية للمحتوى */
  .dash-content { padding: var(--sp4) var(--sp3); }
  .section { padding: clamp(36px, 8vw, 56px) 0; }
  .card-p, .card-p-lg { padding: var(--sp4); }

  /* الأزرار المتجاورة تنزل تحت بعضها بدل الخروج عن الشاشة */
  .api-card__footer,
  .hero-b2b__actions,
  .hero-b2c__actions { flex-wrap: wrap; }

  /* مساحة لمس مريحة (إرشاد إمكانية الوصول: 44px) */
  .btn, .btn-sm, .navbar__burger, .topbar__menu {
    min-height: 44px;
  }
  .btn-xs { min-height: 36px; }
}

@media (max-width: 480px) {
  /* الشاشات الضيقة: صف الإحصائيات والفلاتر يمرّر أفقياً بدل التمدد */
  .stats-row, .api-active-sel, .hero-b2c__cats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stats-row::-webkit-scrollbar,
  .api-active-sel::-webkit-scrollbar { display: none; }

  .modal { max-width: 100%; border-radius: var(--r16) var(--r16) 0 0; }
  .otp-grid { gap: 6px; }
  .otp-box { width: 42px; height: 52px; }
}

/* ── ٦) المنطقة الآمنة في أجهزة iPhone ذات الحافة ──────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .navbar__inner, .topbar {
    padding-top: env(safe-area-inset-top);
  }
  .mobile-nav__drawer {
    padding-bottom: max(var(--sp4), env(safe-area-inset-bottom));
  }
}

/* ── ٧) القائمة الجانبية للجوال ────────────────────────── */
@media (max-width: 768px) {
  .sidebar { max-width: 85vw; }
  .mobile-nav__drawer { max-width: 88vw; overflow-y: auto; }
}

/* ── ٨) احترام تقليل الحركة ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ جدول التكلفة (v4.15) ═══════════════════════════════
   الرقم يميناً والكتابة يساراً — كما في المستندات المالية
   حيث تُعتمد الكتابة عند اختلافها مع الرقم. */
.price-table td { vertical-align: middle; }
.price-table tr.price-total td {
  border-top: 2px solid var(--border);
  background: var(--brand-25);
}
.price-table tr.price-total td:nth-child(2) { color: var(--brand-700); }
@media (max-width: 560px) {
  /* على الجوال: الكتابة تنزل سطراً كاملاً بدل ضغط ثلاثة أعمدة */
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .price-table td { text-align: right !important; padding: 2px 10px; }
  .price-table td:nth-child(2) { font-size: 1.05rem; }
}