/* responsive.css — لایهٔ واکنش‌گرای موبایل و تبلت.
 *
 * چرا یک فایل جدا و چرا این‌همه !important:
 * مارک‌آپ صفحهٔ SPA عیناً از فایل مبدأ «ATP Export Docs.dc (1).html» آمده و قرار
 * است بایت‌به‌بایت دست‌نخورده بماند؛ یعنی تمام استایل‌ها inline هستند و هیچ کلاسی
 * برای هدف‌گیری وجود ندارد. تنها راهِ واکنش‌گرا کردن بدون دست‌زدن به قالب، بازنویسی
 * همان اعلان‌های inline از بیرون است — و بازنویسی inline فقط با !important ممکن است.
 * به همین دلیل برای هدف‌گیری از سلکتورهای [style*="…"] استفاده شده: رشتهٔ style در
 * قالب ثابت و فریزشده است، پس این سلکتورها به‌اندازهٔ یک کلاس پایدارند.
 *
 * همهٔ قاعده‌ها با «screen and» محدود شده‌اند تا چاپ (@media print در app.css) و
 * خروجی PDF اسناد صادراتی هیچ تغییری نکنند.
 *
 * نقاط شکست:
 *   ≤ 900px  سایدبار به کشوی کناری تبدیل می‌شود (mobile.js دکمه و پس‌زمینه را می‌سازد)
 *   ≤ 768px  گریدها تک‌ستونی، فاصله‌ها کم، جدول‌ها اسکرول افقی، ورودی‌ها ۱۶px
 *   ≤ 480px  فشرده‌سازی نهایی برای گوشی‌های کوچک
 */

/* ================================================================== *
 * ۰. پایه
 * ================================================================== */

/* 100vh روی موبایل ارتفاع نوار آدرس را حساب نمی‌کند و صفحه می‌پرد. */
@supports (height: 100dvh) {
  .shell[style] { min-height: 100dvh !important; }
  .login-wrap, .err-wrap { min-height: 100dvh; }
}

/* حذف تأخیر ۳۰۰ms و هایلایت آبی iOS روی عناصر لمسی. */
button, a, select, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ================================================================== *
 * ۱. دکمهٔ منو و پس‌زمینهٔ کشو
 *    هر دو را mobile.js می‌سازد؛ بالای ۹۰۰px کاملاً پنهان‌اند.
 * ================================================================== */

.m-nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.m-nav-toggle:hover { background: #f9fafb; }
.m-nav-toggle:focus-visible { outline: 2px solid var(--a, #4f46e5); outline-offset: 2px; }
.m-nav-toggle span {
  display: block;
  position: relative;
  width: 17px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
}
.m-nav-toggle span::before,
.m-nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
}
.m-nav-toggle span::before { top: -5.5px; }
.m-nav-toggle span::after  { top:  5.5px; }

.m-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(17, 24, 39, .45);
  opacity: 0;
  transition: opacity .2s ease;
}

/* ================================================================== *
 * ۲. ≤ 900px — «دستگاه لمسی»
 *    سایدبار به کشوی کنارهٔ راست تبدیل می‌شود (چون dir=rtl)، جدول‌ها
 *    اسکرول افقی می‌گیرند و اندازهٔ عناصر لمسی درست می‌شود.
 * ================================================================== */

@media screen and (max-width: 900px) {

  .m-nav-toggle  { display: inline-flex; }
  .m-nav-backdrop { display: block; pointer-events: none; }

  body.nav-open .m-nav-backdrop { opacity: 1; pointer-events: auto; }
  /* قفل اسکرول پس‌زمینه تا وقتی کشو باز است. */
  body.nav-open { overflow: hidden; }

  .shell > aside.app-chrome {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 80;
    width: min(84vw, 288px) !important;
    flex: 0 0 auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(101%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.nav-open .shell > aside.app-chrome {
    transform: translateX(0);
    box-shadow: -14px 0 40px rgba(17, 24, 39, .28);
  }
  /* mobile.js هنگام باز شدن، فوکوس را روی خود کشو می‌گذارد (tabindex=-1). */
  .shell > aside.app-chrome:focus { outline: none; }

  /* گوشی در حالت افقی: ارتفاع ۳۹۰px است و پنج آیتم منو با فاصله‌های
     پیش‌فرض جا نمی‌شدند و آخری زیر خط تا می‌شد. */
  @media (max-height: 480px) {
    .shell > aside.app-chrome > div:first-child { padding: 12px 16px 10px !important; }
    .shell > aside.app-chrome > nav { padding: 8px 10px !important; }
    .shell > aside.app-chrome > nav button { padding: 8px 12px !important; min-height: 38px !important; }
    .shell > aside.app-chrome > div:last-child { padding: 10px 16px !important; }
  }
  /* کاربرِ «حرکت کمتر» نباید اسلاید ببیند. */
  @media (prefers-reduced-motion: reduce) {
    .shell > aside.app-chrome,
    .m-nav-backdrop { transition: none; }
  }

  /* نوار خلاصهٔ سفارش، جای ۲۳۶px سایدبار را پر می‌کند. */
  .shell > .no-print[style*="right:236px"] {
    right: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ------------------------------------------------------------------ *
   * از این‌جا به پایین: قاعده‌هایی که به «دستگاه لمسی» مربوط‌اند نه به
   * عرض کم. تبلت ۸۲۰px هم لمسی است، پس همین نقطهٔ شکست ۹۰۰px را دارند و
   * نه ۷۶۸px که برای چیدمان است.
   * ------------------------------------------------------------------ */

  /* ---- جدول‌ها: اسکرول افقی به‌جای فشرده‌شدن ------------------------ */

  /* هر کارتی که جدول دارد اسکرول‌خور می‌شود (بعضی <section> ها در قالب
     مبدأ overflow ندارند — مثل «آخرین محموله‌ها» در داشبورد). */
  .shell section, .shell .doc-sheet {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* جدول به‌جای فشرده‌شدن تا عرض محتوا باز می‌شود. */
  .shell table { width: auto !important; min-width: 100% !important; }

  /* سایهٔ لبه به کاربر می‌گوید جدول اسکرول افقی دارد.
     لایهٔ سفید با attachment:local روی محتوا حرکت می‌کند و وقتی سرریزی
     نیست دقیقاً روی سایه می‌نشیند، پس خودبه‌خود پنهان می‌شود. */
  .shell section:has(table), .shell .doc-sheet:has(table) {
    background-image:
      linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, rgba(17, 24, 39, .13), rgba(17, 24, 39, 0)) !important;
    background-position: left center, left center;
    background-repeat: no-repeat;
    background-size: 30px 100%, 13px 100%;
    background-attachment: local, scroll;
  }

  /* ---- اندازهٔ لمس -------------------------------------------------- */

  /* هدف ۴۰–۴۴px؛ دکمه‌های داخل جدول کمی کوتاه‌تر تا ردیف‌ها بلند نشوند. */
  .shell button, .shell select { min-height: 42px !important; }
  .shell table button { min-height: 38px !important; padding-inline: 14px !important; }
  /* دکمه‌های حذف «×» مربع ۲۷px بودند. */
  .shell button[style*="width:27px"] { width: 40px !important; height: 40px !important; }
  /* دکمهٔ انتخاب تصویر محصول ابعاد معنادار دارد؛ دست نخورَد. */
  .shell table button[style*="width:46px"] { min-height: 46px !important; }
  /* تراشه‌های فیلتر دسته (۶px padding) و دکمه‌های ریز کنارشان. */
  .shell button[style*="padding:6px 12px"],
  .shell button[style*="padding:7px 13px"] { min-height: 40px !important; }

  /* ---- ورودی‌ها ------------------------------------------------------ */

  /* زیر ۱۶px، سافاری iOS/iPadOS هنگام فوکوس صفحه را زوم می‌کند و برنمی‌گردد. */
  .shell input, .shell select, .shell textarea { font-size: 16px !important; }
  .shell input { min-height: 42px !important; }
  /* ورودی‌های عددی باریکِ داخل جدول‌ها (۵۸ تا ۱۰۰px). */
  .shell input[type="number"] { min-width: 68px !important; }
  .shell table input[type="number"] { min-height: 38px !important; }
}

/* ================================================================== *
 * ۳. ≤ 768px — چیدمان گوشی
 * ================================================================== */

@media screen and (max-width: 768px) {

  /* ---- ۳٫۱ هدر چسبان ---------------------------------------------- */

  .shell .main-col > header.app-chrome {
    padding: 11px 14px !important;
    gap: 10px !important;
  }
  .shell .main-col > header.app-chrome h1 { font-size: 16px !important; }

  /* بلوک فیلترها به خط دوم می‌رود و تمام عرض را می‌گیرد. */
  .shell .main-col > header > div[style*="margin-inline-start:auto"] {
    width: 100% !important;
    margin-inline-start: 0 !important;
  }
  .shell .main-col > header > div[style*="margin-inline-start:auto"] > div { width: 100%; }
  .shell .main-col > header select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ---- ۳٫۲ فاصله‌های صفحه ------------------------------------------ */

  .shell .main-col > div[style*="padding:24px 26px 60px"] {
    padding: 14px 12px 44px !important;
  }
  .shell section[style*="padding:20px 22px"] { padding: 16px 14px !important; }
  .shell section[style*="padding:22px 24px"] { padding: 16px 14px !important; }
  /* حاشیهٔ زیرِ کارت آخرِ صفحهٔ سفارش، به‌اندازهٔ نوار خلاصهٔ چندخطی. */
  .shell section[style*="margin-bottom:90px"] { margin-bottom: 128px !important; }

  /* ---- ۳٫۳ گریدها --------------------------------------------------- */

  /* گریدهای auto-fit/auto-fill با minmax کوچک (۱۷۰ تا ۱۹۰px) خودشان درست
     جمع می‌شوند و دست‌کاری نمی‌خواهند — جز minmax(320/340px) که حداقلشان از
     عرض گوشی بیشتر است و باعث سرریز افقی می‌شد. */
  .shell [style*="auto-fit,minmax(320px"],
  .shell [style*="auto-fit,minmax(340px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* گریدهای ستون‌ثابت خودشان جمع نمی‌شوند: نمودارها، جفت‌کارت‌ها،
     فرم‌های دوستونی و سربرگ اسناد. */
  .shell [style*="grid-template-columns:1.55fr 1fr"],
  .shell [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* کارت‌های KPI: دو ستونه بمانند تا داشبورد بی‌دلیل بلند نشود. */
  .shell [style*="auto-fit,minmax(190px"],
  .shell [style*="auto-fit,minmax(170px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .shell [style*="auto-fit,minmax(190px"] > div { padding: 13px 12px !important; }
  .shell [style*="auto-fit,minmax(190px"] [style*="font-size:25px"] { font-size: 20px !important; }
  .shell [style*="auto-fit,minmax(170px"] [style*="font-size:22px"] { font-size: 19px !important; }

  /* ردیف اقلام تبلیغاتی: ستون‌ها بمانند ولی لمس‌پذیر شوند. */
  .shell [style*="grid-template-columns:1fr 68px 27px"] {
    grid-template-columns: 1fr 76px 40px !important;
  }

  /* ---- ۳٫۴ اسناد صادراتی (پروفرما / اینویس / پکینگ‌لیست) ---------- */

  .shell .doc-sheet {
    padding: 16px 14px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .shell .doc-sheet [style*="justify-content:space-between"] { gap: 10px; }

  /* ---- ۳٫۵ ورودی‌های تمام‌عرض ---------------------------------------- */

  /* جستجوها min-width ثابت داشتند و ردیف را از عرض بیرون می‌بردند. */
  .shell input[style*="min-width:2"],
  .shell select[style*="min-width:2"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .shell div:has(> input[style*="min-width:2"]),
  .shell div:has(> select[style*="min-width:2"]) {
    flex-wrap: wrap !important;
    width: 100%;
  }

  /* ---- ۳٫۶ نمودار میله‌ای ماهانه ------------------------------------ */

  /* ده میله در ۳۳۰px یعنی ۲۷px برای هر میله، و برچسب «Mar 25» جا نمی‌شد. */
  .shell [style*="height:196px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 9px !important;
    padding-bottom: 6px !important;
  }
  .shell [style*="height:196px"] > div {
    flex: 0 0 auto !important;
    min-width: 44px !important;
  }

  /* ---- ۳٫۷ نمودار دایره‌ای ------------------------------------------- */

  .shell [style*="width:132px"] { width: 108px !important; height: 108px !important; }

  /* ---- ۳٫۸ نوار چسبان خلاصهٔ سفارش ---------------------------------- */

  /* شش بلوک آماری در چند خط، نصف صفحه را می‌گرفت. حالا یک نوار تک‌خطی
     با اسکرول افقی است. */
  .shell > .no-print[style*="right:236px"] > div {
    padding: 9px 12px !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shell > .no-print[style*="right:236px"] > div::-webkit-scrollbar { display: none; }
  .shell > .no-print[style*="right:236px"] > div > div { flex: 0 0 auto !important; }
  /* «مجموع نهایی» در قالب مبدأ آخرین بلوک است و با margin:auto به انتها
     رانده می‌شود؛ در نوار اسکرول‌شونده یعنی بیرون از دید. مهم‌ترین عدد
     صفحه است، پس اول می‌آید و بقیه بعد از آن اسکرول می‌شوند. */
  .shell > .no-print[style*="right:236px"] div[style*="margin-inline-start:auto"] {
    order: -1;
    margin-inline-start: 0 !important;
    text-align: start !important;
    padding-inline-end: 14px;
    border-inline-end: 1px solid rgba(255, 255, 255, .14);
  }
  .shell > .no-print[style*="right:236px"] span[style*="font-size:16px"] { font-size: 14px !important; }
  .shell > .no-print[style*="right:236px"] span[style*="font-size:21px"] { font-size: 17px !important; }

  /* ---- ۳٫۹ مودال ویرایش محصول --------------------------------------- */

  .shell > .no-print[style*="z-index:60"] { padding: 10px !important; align-items: flex-end !important; }
  .shell > .no-print[style*="z-index:60"] > div {
    padding: 18px 16px !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 16px !important;
  }
  /* دکمه‌های ذخیره/انصراف تمام‌عرض و راحت‌تر برای شست. */
  .shell > .no-print[style*="z-index:60"] > div > div[style*="margin-top:20px"] > button { flex: 1 1 0; }
}

/* ================================================================== *
 * ۴. ≤ 480px — گوشی‌های کوچک
 * ================================================================== */

@media screen and (max-width: 480px) {

  .shell .main-col > div[style*="padding:24px 26px 60px"] { padding: 12px 10px 40px !important; }
  .shell section[style*="padding:20px 22px"],
  .shell section[style*="padding:22px 24px"] { padding: 14px 12px !important; }

  .shell .main-col > header.app-chrome h1 { font-size: 15px !important; }

  /* دکمه‌های تب (گزارش‌ها / مدیریت / اسناد) در دو خط جا شوند. */
  .shell [style*="gap:7px"][style*="flex-wrap:wrap"] > button { flex: 1 1 auto; }
  /* دکمهٔ «دانلود Excel» با margin:auto در خط خودش می‌ماند. */
  .shell button[style*="margin-inline-start:auto"] { margin-inline-start: 0 !important; width: 100%; }
}

/* ≤ 360px (iPhone SE و مشابه): دو ستون KPI دیگر جا نمی‌شود. */
@media screen and (max-width: 360px) {
  .shell [style*="auto-fit,minmax(190px"],
  .shell [style*="auto-fit,minmax(170px"] { grid-template-columns: 1fr !important; }
}

/* ================================================================== *
 * ۵. صفحه‌های سرورساخت: ورود، مدیریت کاربران، خطا
 * ================================================================== */

@media screen and (max-width: 768px) {

  /* ورود */
  .login-wrap { padding: 16px !important; align-items: flex-start; padding-top: 8vh !important; }
  .login-card { padding: 20px 18px 18px !important; }

  /* مدیریت کاربران */
  .adm-wrap { padding: 16px 12px 44px !important; }
  .adm-card { padding: 16px 14px !important; }
  .adm-grid { grid-template-columns: 1fr !important; }
  .adm-table-wrap { -webkit-overflow-scrolling: touch; }
  .adm-table-wrap .tbl { white-space: nowrap; }
  /* ستون «عملیات»: دو فرم زیر هم به‌جای کنار هم. */
  .adm-actions { flex-direction: column; align-items: stretch; }
  .adm-actions form { width: 100%; }
  .adm-actions .field-input { width: 100% !important; }

  /* مشترک: ۱۶px برای جلوگیری از زوم iOS + هدف لمسی ۴۴px */
  .field-input { font-size: 16px !important; min-height: 44px; }
  .btn-primary, .btn-secondary, .btn-danger { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* خطا */
  .err-wrap { padding: 16px !important; }
}

/* ================================================================== *
 * ۶. چاپ — لایهٔ موبایل نباید در PDF اسناد دیده شود
 * ================================================================== */

@media print {
  .m-nav-toggle, .m-nav-backdrop { display: none !important; }
  body.nav-open { overflow: visible !important; }
}