/*
 * ══════════════════════════════════════════════════
 *  mobile-fix.css  — TradeFlow Pro
 *  أضف هذا الملف في كل صفحة HTML قبل إغلاق </head>
 *  <link rel="stylesheet" href="mobile-fix.css">
 * ══════════════════════════════════════════════════
 *
 *  يعالج المشاكل التالية على الجوال:
 *  1. Horizontal overflow (كل شي يطلع برا الشاشة)
 *  2. الجداول تمتد وتكسر الـ layout
 *  3. body display:flex بدون overflow protection
 *  4. عناصر ثابتة العرض تتجاوز حجم الشاشة
 *  5. Sidebar/nav على الجوال
 * ══════════════════════════════════════════════════
 */

/* ─── 1. أساس: امنع أي تجاوز أفقي ─── */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── 2. أي عنصر مرن (flex) لا يتجاوز العرض ─── */
* {
  min-width: 0; /* يسمح لعناصر flex/grid بالانكماش */
}

/* ─── 3. إصلاح body display:flex (admin + payment) ─── */
body {
  width: 100%;
  max-width: 100%;
}

/* ─── 4. الجداول: لف بـ wrapper قابل للتمرير الأفقي ─── */
@media (max-width: 768px) {
  /* أي جدول داخل .tsc أو .table-scroll أو .table-wrap */
  .tsc,
  .table-scroll,
  .table-wrap,
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100vw;
  }

  /* الجداول نفسها: لا تكسر الـ layout */
  table {
    min-width: max-content; /* بدلاً من min-width ثابت */
  }
}

/* ─── 5. الشاشات الصغيرة جداً (≤480px) ─── */
@media (max-width: 480px) {

  /* الصفحة الرئيسية index.html */
  .hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-h {
    font-size: clamp(26px, 8.5vw, 40px) !important;
  }

  .hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-h,
  .btn-h2 {
    width: 100% !important;
    text-align: center;
  }

  /* pricing cards لا تتجاوز الشاشة */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    padding: 0 8px;
  }

  .price-card,
  .pcard {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* feature tabs: لا تنكسر */
  .tabs-wrap,
  .tab-row,
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .tabs-wrap::-webkit-scrollbar,
  .tab-row::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  /* section padding */
  .sec,
  .vid-sec,
  .cta-sec {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─── 6. إصلاح Dashboard (dashboard.html + dashboard.css) ─── */
@media (max-width: 900px) {

  /* تأكد .main ليس أوسع من الشاشة */
  .main {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* الـ sidebar في الموبايل يكون navbar سفلي */
  .sidebar {
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* KPI cards: صفين */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Chart containers لا تتجاوز */
  .chart-wrap,
  .chart-box,
  .chart-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  /* content padding */
  .content,
  .cnt {
    padding: 10px 10px !important;
  }

  .topbar {
    padding: 8px 12px !important;
  }

  .topbar-title {
    font-size: 13px !important;
  }

  /* trade form */
  .trade-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* KPI values */
  .kpi-val,
  .kval {
    font-size: 16px !important;
  }
}

/* ─── 7. إصلاح Admin (admin.html) ─── */
@media (max-width: 900px) {

  /* منع body flex من كسر الـ layout */
  body {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }

  /* .main لا يرث margin خاطئ */
  .main {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 60px !important;
    flex: 1;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* الجداول في admin */
  table {
    font-size: 11px;
  }

  thead th {
    font-size: 9px;
    padding: 6px 7px;
  }

  td {
    padding: 6px 7px;
  }

  /* grid بعمود واحد */
  .g2 {
    grid-template-columns: 1fr !important;
  }

  .kg {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* messages layout */
  .msg-lay {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .msg-lst {
    max-height: 250px !important;
  }

  .msg-det {
    min-height: 300px;
  }
}

/* ─── 8. إصلاح Login (login.html) ─── */
@media (max-width: 480px) {

  /* بطاقة الـ login لا تتجاوز */
  .auth-card,
  .login-card,
  [class*="card"] {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto;
  }

  /* الـ form inputs */
  input,
  select,
  textarea {
    font-size: 16px !important; /* يمنع iOS zoom */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ─── 9. إصلاح Payment (payment.html) ─── */
@media (max-width: 480px) {

  /* بطاقة الدفع */
  .payment-card,
  .pay-card,
  [class*="pay"] > div {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    padding: 18px 14px !important;
  }

  /* أزرار الدفع */
  .pay-btn,
  [class*="btn"] {
    width: 100% !important;
    text-align: center;
  }
}

/* ─── 10. Toast notifications على الجوال ─── */
@media (max-width: 480px) {
  .toast-wrap {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    max-width: none !important;
  }

  .toast {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ─── 11. RTL على الجوال (للغة العربية) ─── */
@media (max-width: 900px) {

  /* sidebar RTL في الموبايل: bottom bar يكون نفسه بغض النظر عن الاتجاه */
  [dir=rtl] .sidebar,
  [dir=ltr] .sidebar {
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  /* admin sidebar RTL */
  [dir=rtl] .sb,
  [dir=ltr] .sb {
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* nav items في RTL */
  [dir=rtl] .sb-item,
  [dir=rtl] .sb-i {
    text-align: center !important; /* وسّط في bottom bar */
  }
}

/* ─── 12. عناصر عامة: منع التجاوز ─── */
img,
video,
iframe,
embed,
object {
  max-width: 100% !important;
  height: auto;
}

/* أي عنصر له width ثابت قد يسبب مشكلة */
@media (max-width: 480px) {
  [style*="width: "] {
    /* لا نلغيها كلياً لكن نضمن عدم التجاوز */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ─── WIN / LOSS toggle: يظهر فقط على الجوال ─── */
.pnl-toggle {
  display: none; /* مخفي افتراضياً على الكمبيوتر */
}

@media (max-width: 900px) {
  .pnl-toggle {
    display: grid; /* يظهر فقط على الجوال */
  }
}