/* ============================================================
   responsive.css — لایه اصلاح ریسپانسیو سراسری یار
   
   مسئله‌هایی که این فایل حل می‌کند:
     ۱) نوار کناری در موبایل مخفی نمی‌شد → تمام صفحه را می‌گرفت
        (۱۱ صفحه با admin-panel.css که breakpoint درست نداشت)
     ۲) ۱۵ صفحه عرض ثابت پیکسلی داشتند → سرریز افقی
     ۳) جدول‌های عریض صفحه را می‌شکستند
     ۴) نوار پایین موبایل زیر home indicator می‌افتاد
   
   این فایل آخرین stylesheet بار می‌شود تا بر بقیه غلبه کند.
   ============================================================ */

/* ==================== ۱. نوار کناری — مخفی در موبایل ==================== */

@media (max-width: 1100px) {

  /* پوسته به تک‌ستونه تبدیل می‌شود */
  .ya-shell,
  .db-shell,
  .sc-shell,
  .lw-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* نوار کناری به drawer تبدیل می‌شود */
  .ya-side,
  .db-side,
  .sc-side,
  .lw-side {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: min(86vw, 300px) !important;
    max-width: 300px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 400 !important;
    transform: translateX(-102%) !important;
    transition: transform .26s cubic-bezier(.2,.8,.3,1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    background: #fff !important;
    z-index: 1000 !important;
  }

  /* در RTL، منو به لبه راست چسبیده و به راست (بیرون صفحه) می‌رود */
  [dir="rtl"] .ya-side,
  [dir="rtl"] .db-side,
  [dir="rtl"] .sc-side,
  [dir="rtl"] .lw-side {
    left: auto !important;
    right: 0 !important;
    transform: translateX(102%) !important;
  }

  /* حالت باز */
  .ya-side.is-open,
  .db-side.is-open,
  .sc-side.is-open,
  .lw-side.is-open,
  body.nav-open .ya-side,
  body.nav-open .db-side,
  body.nav-open .sc-side,
  body.nav-open .lw-side {
    transform: translateX(0) !important;
    box-shadow: 0 0 60px -10px rgba(20,33,27,.35) !important;
  }

  /* بدنه اصلی تمام عرض را می‌گیرد */
  .ya-main,
  .db-main,
  .sc-main,
  .lw-main {
    /* width:100% + padding سرریز می‌داد؛ auto + border-box دقیقاً عرض والد */
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
  }

  /* پرده پشت منو */
  .ya-overlay,
  .db-overlay,
  .sc-overlay,
  .lw-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    background: rgba(20,33,27,.4);
    backdrop-filter: blur(3px);
  }
  .ya-overlay[hidden],
  .db-overlay[hidden],
  .sc-overlay[hidden],
  .lw-overlay[hidden] {
    display: none !important;
  }

  /* نوار بالا — تمام عرض */
  .db-top,
  .sc-top,
  .lw-top {
    width: auto !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
  }
}

/* ==================== ۲. رفع عرض ثابت ==================== */

/* هر ظرف با عرض ثابت پیکسلی → عرض انعطاف‌پذیر */
@media (max-width: 900px) {

  /* الگوی رایج: ظرف محتوای مرکزی با عرض ثابت */
  .container, .wrap, .wrapper, .content, .main-content,
  .form-card, .login-card, .register-card, .auth-card,
  .page-head, .hero-inner, .section-inner,
  [class*="-wrap"], [class*="-inner"], [class*="-container"] {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* فرزندان grid بدون min-width:0 به اندازه محتوای عریض کش می‌آیند */
  .dash-wrap > * { min-width: 0; }

  /* ظرف‌های فرم ورود/ثبت‌نام */
  .auth-box, .login-box, .register-box, .fp-card {
    width: 100% !important;
    max-width: 440px !important;
    margin-inline: auto !important;
  }
}

/* رفع مستقیم صفحاتی که عرض ثابت داشتند */
@media (max-width: 900px) {
  /* الگوی inline style — با !important بر آن غلبه می‌کنیم */
  /* فقط main/section — div ها را نمی‌گیریم چون آواتارهای ۷۰px و نوارهای پیشرفت (width:75%) را خراب می‌کرد */
  main[style*="width"],
  section[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ==================== ۳. جدول‌های عریض ==================== */

@media (max-width: 900px) {
  .ya-tablewrap,
  .sc-tablewrap,
  .db-tablewrap,
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .ya-table, .sc-table, .db-table {
    min-width: 560px;
  }

  /* جدول‌های کوچک‌تر در موبایل به کارت تبدیل شوند */
  .ya-table--cards thead { display: none; }
  .ya-table--cards tr {
    display: block;
    border: 1px solid var(--yar-line);
    border-radius: 10px;
    margin-block-end: 10px;
    padding: 10px;
  }
  .ya-table--cards td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
  }
  .ya-table--cards td::before {
    content: attr(data-label);
    font-size: 11.5px;
    color: var(--yar-subtle);
    font-weight: 600;
  }
}

/* ==================== ۴. شبکه‌ها → تک‌ستونه ==================== */

@media (max-width: 640px) {
  .ya-grid, .db-metrics, .db-panelgrid, .sc-fields,
  [class*="grid-2"], [class*="grid-3"], [class*="grid-4"],
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  .sc-maprow,
  .db-metric,
  .ya-kpi {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==================== ۵. تایپوگرافی موبایل ==================== */

@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }

  body { font-size: 14px; }

  h1, .db-top__title, .sc-top__title {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.5 !important;
  }

  h2 { font-size: clamp(15px, 4.4vw, 19px) !important; }

  /* جلوگیری از شکستن کلمات انگلیسی طولانی */
  code, pre, [dir="ltr"] {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* کلیدهای بزرگ‌تر برای لمس */
  button, .ya-btn, .sc-nav__item, .db-nav__item, .lw-btn {
    min-height: 42px;
  }
}

/* ==================== ۶. جلوگیری از سرریز افقی ==================== */

html, body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 900px) {
  /* هر عنصری که از عرض بیشتر است */
  img, svg, video, iframe, table, pre {
    max-width: 100% !important;
  }
  img, video, iframe {
    height: auto;
  }
  pre { overflow-x: auto; }

  /* دکمه‌های تمام‌عرض saas (width:100% + padding) */
  .sx-btn { box-sizing: border-box; }
}

/* ==================== ۷. نوار پایین موبایل ==================== */

@media (max-width: 640px) {
  /* فاصله امن برای home indicator آیفون */
  .sx-bottomnav,
  .db-bottom {
    padding-block-end: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* محتوا زیر نوار پایین نرود */
  body.sx,
  body.has-bottomnav {
    padding-block-end: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* دکمه منو — بزرگ و در دسترس */
  .sx-burger, .db-top__burger, .sc-burger, .lw-burger {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==================== ۸. دکمه همبرگری — نمایان در موبایل ==================== */

/* دکمه تزریق‌شده توسط responsive-nav.js — در دسکتاپ پنهان */
.ya-burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--yar-line, var(--color-border, #E9EDF0));
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 1100px) {
  /* اگر دکمه منو وجود دارد، حتماً نمایان شود */
  /* db/sc/lw خودشان از 1024px نمایان می‌شدند؛ drawer از 1100px است — هم‌ترازشان می‌کنیم */
  .ya-burger, .ya-menu-btn, [data-toggle="sidebar"],
  .db-top__burger, .sc-burger, .lw-burger {
    display: inline-flex !important;
  }
}

/* منوی موبایل صفحه اصلی: display:flex در saas.css ویژگی hidden را خنثی می‌کرد */
.sx-mobile[hidden] { display: none !important; }

/* ==================== ۹. حالت افقی موبایل ==================== */

@media (max-width: 900px) and (orientation: landscape) {
  .ya-side, .db-side, .sc-side, .lw-side {
    width: min(50vw, 300px) !important;
  }
}

/* ==================== ۱۰. اصلاح فاصله‌های داخلی ==================== */

@media (max-width: 640px) {
  .ya-main, .db-body, .sc-body, .lw-main {
    padding-block: 16px 80px !important;
  }

  .ya-topbar, .db-top, .sc-top {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* عنوان‌های بلند نوار بالا */
  .db-top__sub, .sc-top__sub, .ya-side__sub {
    display: none !important;
  }

  .db-status, .ya-count {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }
}

/* ==================== ۱۱. اصلاح تبلت ==================== */

@media (min-width: 641px) and (max-width: 1100px) {
  .ya-main, .db-body, .sc-body, .lw-main {
    padding-inline: 22px !important;
  }

  .ya-grid, .db-metrics {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  }
}

/* ==================== ۱۲. کاهش حرکت ==================== */

@media (prefers-reduced-motion: reduce) {
  .ya-side, .db-side, .sc-side, .lw-side {
    transition: none !important;
  }
}