/* ====================================================================
   سازگاری با موبایل و تبلت (نسخه ۳۲)
   این فایل بعد از style.css بارگذاری میشه و فقط روی صفحه‌های کوچک اثر داره؛
   نمایش دسکتاپ هیچ تغییری نکرده.
   ==================================================================== */

/* نوار بالای موبایل (روی دسکتاپ مخفیه) */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  .app-shell { flex-direction: column; }

  /* ---------- نوار بالا ---------- */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 120;
    background: var(--navy);
    color: #fff;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }
  .mobile-topbar h2 { margin: 0; font-size: 16px; flex: 1; }
  .mobile-menu-btn {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 44px;
    height: 44px;
  }

  /* ---------- منوی کشویی (از سمت راست باز میشه) ---------- */
  .sidebar {
    position: fixed !important;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(82vw, 300px) !important;
    z-index: 150;
    transform: translateX(105%);
    transition: transform 0.22s ease;
    box-shadow: none;
  }
  body.nav-open .sidebar {
    transform: none;
    box-shadow: -10px 0 40px rgba(0,0,0,0.35);
  }
  .sidebar-nav { flex-direction: column !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .nav-btn { padding: 14px 20px; font-size: 15px; }
  .sidebar-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 140;
  }
  body.nav-open .sidebar-backdrop { display: block; }
  body.nav-open { overflow: hidden; }

  /* ---------- محتوای اصلی ---------- */
  .main-content { padding: 14px 12px 28px; overflow-x: hidden; }
  .page-header h1 { font-size: 18px; }
  .page-header { gap: 8px; }
  .search-box { max-width: none; width: 100%; }

  /* جدول‌ها: به‌جای بیرون زدن از صفحه، داخل خودشون اسکرول افقی می‌شن */
  .main-content table,
  .modal-box table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { padding: 10px 10px; font-size: 13px; }

  /* ---------- فرم‌ها و دکمه‌ها (۱۶px تا iOS موقع تایپ زوم نکنه) ---------- */
  input, select, textarea { font-size: 16px; min-height: 42px; }
  textarea { min-height: 80px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: auto; }
  .btn-primary, .btn-secondary, .btn-danger { min-height: 42px; }
  .btn-small { min-height: 36px; }

  /* ---------- مودال تمام‌عرض ---------- */
  .modal-overlay { padding: 8px; }
  .modal-box {
    max-width: 100% !important;
    padding: 16px;
    border-radius: 12px;
    overflow-x: hidden;
  }
  .modal-box h2 { font-size: 16px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions button { flex: 1 1 auto; min-height: 44px; }

  /* فرم‌های چندستونه (از جمله ردیف اقلام پیش‌فاکتور/فاکتور) روی موبایل دو‌ستونه میشن */
  .two-col,
  .two-col[style*="grid-template-columns"],
  .modal-box [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* سطر عنوان ستون‌های اقلام لازم نیست چون هر فیلد برچسب خودش رو داره */
  #items-header { display: none !important; }
  .two-col[data-row-id] {
    padding: 10px;
    margin-bottom: 12px !important;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fafbfc;
  }

  /* ---------- داشبورد ---------- */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px; }
  .stat-card.modern { gap: 10px; }
  .stat-icon { width: 36px; height: 36px; font-size: 17px; }
  .stat-card .value { font-size: 17px; }
  .chart-card { padding: 12px; }

  /* ---------- پایپ‌لاین: هر ستون تقریباً یه صفحه، با اسکرول افقی نرم ---------- */
  .pipeline-board { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .pipeline-column { min-width: 78vw; max-width: 78vw; scroll-snap-align: center; }

  /* ---------- زنگوله اعلان ایمیل ---------- */
  #email-dropdown {
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* متن‌های طولانی بدون فاصله، صفحه رو عریض نکنن */
  .main-content, .modal-box { overflow-wrap: anywhere; }
}

@media (max-width: 520px) {
  /* گوشی‌های کوچک: ردیف‌های دو‌ستونه تک‌ستونه */
  .two-col,
  .two-col[style*="grid-template-columns"],
  .modal-box [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* صفحه ورود */
  .login-box { width: min(340px, 92vw); padding: 28px 20px; }
}