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

/* --- تبلت: کاهش تراکم شبکه‌ها --- */
@media (max-width: 1080px) {
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

/* =========================================================================
   موبایل و تبلت کوچک (تا ۹۰۰ پیکسل)
   ========================================================================= */
@media (max-width: 900px) {

  /* --- حذف کامل چیدمان دو ستونه؛ نوار کناری از جریان صفحه خارج می‌شود --- */
  #app-shell {
    display: block;
  }
  #app-shell.is-collapsed { grid-template-columns: unset; }

  /* --- نوار کناری => منوی همبرگری کشویی از سمت راست ---
     نکته مهم: در RTL باید از موقعیت فیزیکی «right» استفاده شود، نه
     inset-inline-end (که در RTL معادل چپ صفحه است و باعث می‌شد منو از
     چپ باز شود؛ اینجا اصلاح شده تا هم‌راستا با سایدبار دسکتاپ از راست
     باز و بسته شود). */
  .sidebar {
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    left: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(85vw, 300px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    box-shadow: var(--shadow);
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .sidebar.is-open { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    position: fixed; inset: 0;
    background: rgba(5, 6, 10, .55);
    z-index: 55;
    backdrop-filter: blur(1px);
  }
  .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .menu-btn { display: inline-flex; }
  .sidebar-collapse-btn { display: none !important; }

  /* --- نوار بالا و ناحیه محتوا --- */
  .topbar {
    padding: 0 14px;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  .view {
    padding: 16px 14px calc(90px + env(safe-area-inset-bottom));
    max-width: 100%;
  }
  .grid-stats { grid-template-columns: repeat(2, 1fr); }

  /* --- نوار پایین (Bottom Navigation) --- */
  .bottom-nav {
    display: flex;
    position: fixed; bottom: 0; inset-inline: 0; z-index: 40;
    background: rgba(16, 19, 26, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-soft);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  :root[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, .92); }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; color: var(--text-faint); padding: 6px 12px; border-radius: 12px;
    transition: transform .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav__item:active { transform: scale(.9); }
  .bottom-nav__item.is-active { color: var(--accent-2); }
  .bottom-nav__item.is-active .icon { transform: translateY(-1px); }

  /* --- دکمه شناور (FAB) به‌جای دکمه‌های «افزودن» بالای صفحه --- */
  .fab {
    display: flex; position: fixed; z-index: 45;
    inset-inline-end: 16px; bottom: calc(76px + env(safe-area-inset-bottom));
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--accent); color: #fff; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px -8px rgba(124, 108, 240, .7); border: none; cursor: pointer;
    transition: transform .15s ease;
  }
  .fab:active { transform: scale(.92); }
  .page-head .page-add-btn { display: none; }

  /* --- مودال‌ها به‌صورت شیت پایین‌آمده (bottom sheet) --- */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; max-height: 90dvh;
    animation: sheet-up .22s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 3px;
    background: var(--border); margin: 10px auto 0;
  }
  .modal--wide { max-width: 100%; }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* =======================================================================
     رفع کامل اسکرول افقی جدول‌ها: تبدیل به کارت‌های عمودی
     ======================================================================= */
  .table-wrap {
    border: none; background: transparent; overflow: visible;
  }
  .table-wrap table {
    display: block; width: 100%;
    min-width: 0 !important; /* رفع اسکرول افقی صفحه که به‌خاطر min-width پایه جدول رخ می‌داد */
  }
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block; width: 100%;
  }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    margin-bottom: 10px; padding: 6px 4px;
  }
  .table-wrap tr:hover { background: var(--surface); }
  .table-wrap td {
    border: none; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; word-break: break-word;
  }
  .table-wrap td[data-label]:before {
    content: attr(data-label) ': '; color: var(--text-faint); font-size: 11.5px; flex-shrink: 0;
  }
  .table-wrap td.cell-nolabel:before { content: ''; }
  .table-wrap .row-actions { justify-content: flex-end; width: 100%; }

  /* ستون اول (عنوان/خلاصه ردیف) و ستون آخر (عملیات) نباید برچسب/چیدمان
     دوطرفه بگیرند؛ آن الگو فقط برای ستون‌های میانیِ «برچسب: مقدار» است. */
  .table-wrap tr td:first-child,
  .table-wrap tr td:last-child {
    display: block;
    text-align: right;
  }
  .table-wrap tr td:first-child:before,
  .table-wrap tr td:last-child:before {
    content: none;
  }
  .table-wrap tr td:last-child .row-actions {
    display: flex;
  }

  /* هر جدول دیگری خارج از table-wrap هم (مثلاً داخل مودال جزئیات سفارش) از این قانون پیروی کند */
  .modal table {
    min-width: 0 !important;
  }
  .modal .table-wrap table, .modal table { display: block; }
  .modal .table-wrap thead, .modal table thead { display: none; }
  .modal .table-wrap tr, .modal table tr {
    display: block; background: var(--surface-2); border-radius: 10px; margin-bottom: 8px; padding: 4px;
  }
  .modal .table-wrap td, .modal table td {
    display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border: none; font-size: 12.5px;
  }
  .modal .table-wrap td[data-label]:before, .modal table td[data-label]:before {
    content: attr(data-label) ': '; color: var(--text-faint); font-size: 11px; flex-shrink: 0;
  }
  /* رفع مشکل چسبیدن برچسب به مقدار (بدون فاصله) داخل جدول‌های درون مودال:
     قانون کلی صفحات لیست (پایین‌تر) ستون اول/آخر هر ردیف را به‌عمد block و
     بدون برچسب می‌کند تا آکاردئون درست کار کند؛ اما آن قانون اشتباهاً روی
     جدول‌های داخل مودال (مثل ریز اقلام سفارش) هم اثر می‌گذاشت، و چون این‌جا با
     رنگ دیگری دوباره برچسب فعال می‌شد ولی چیدمان flex نبود، برچسب و مقدار به
     هم می‌چسبیدند. این‌جا با اولویت (specificity) بالاتر، رفتار flex استاندارد
     را برای همه سلول‌های جدول‌های داخل مودال (حتی اولین/آخرین ستون) برمی‌گردانیم. */
  .modal .table-wrap tr td:first-child,
  .modal .table-wrap tr td:last-child,
  .modal table tr td:first-child,
  .modal table tr td:last-child {
    display: flex;
    text-align: unset;
  }
  .modal .table-wrap tr td:first-child:before,
  .modal .table-wrap tr td:last-child:before,
  .modal table tr td:first-child:before,
  .modal table tr td:last-child:before {
    content: attr(data-label) ': ';
  }

  /* =======================================================================
     تبدیل جدول‌ها به آکاردئون: ستون اول = عنوان همیشه‌نمایان (با فلش باز/بسته)،
     ستون آخر (عملیات) نیز همیشه نمایان است، بقیه ستون‌ها با لمس ردیف باز می‌شوند.
     برای عدم اعمال این رفتار (مثلاً جدول‌های کوچک بدون عملیات) کلاس
     table-compact را به .table-wrap اضافه کنید.
     ======================================================================= */
  .table-wrap:not(.table-compact) tr td:not(:first-child):not(:last-child) {
    display: none;
  }
  .table-wrap:not(.table-compact) tr.is-expanded td:not(:first-child):not(:last-child) {
    display: flex;
  }
  .table-wrap:not(.table-compact) tr {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .table-wrap:not(.table-compact) tr td:first-child {
    position: relative;
    padding-inline-end: 34px;
  }
  .accordion-caret {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    transition: transform .2s ease;
    display: flex;
  }
  .table-wrap:not(.table-compact) tr.is-expanded .accordion-caret {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent-2);
  }
  .table-wrap:not(.table-compact) tr > td:last-child {
    border-top: 1px solid var(--border-soft);
    margin-top: 2px;
    padding-top: 10px;
  }
  .table-wrap.table-compact tr { cursor: default; }
  .table-wrap.table-compact .accordion-caret { display: none; }
  .table-wrap.table-compact tr td:first-child,
  .table-wrap.table-compact tr td:last-child {
    display: flex;
    text-align: unset;
  }

  /* --- نمودارها: در موبایل هرگز اسکرول افقی نداشته باشند، با عرض صفحه هماهنگ شوند --- */
  .chart-scroll { overflow-x: hidden; }
  .chart-svg { width: 100% !important; height: auto !important; }
  .chart-axis-label { font-size: 7.5px; }

  /* --- نوار بالا: جلوگیری از سرریز متن سایت فعال در صفحات باریک --- */
  .topbar__title { min-width: 0; overflow: hidden; }
  .topbar__title h1 { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar__title span { display: none; }
  .connection-pill { max-width: 130px; }
  .connection-pill span:not(.connection-pill__dot) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; display: inline-block;
  }

  /* --- لمس نرم‌تر و بدون هایلایت آبی پیش‌فرض مرورگر --- */
  button, a, .nav-link, .site-chip, .bottom-nav__item, .fab {
    -webkit-tap-highlight-color: transparent;
  }
  .view, .modal__body, .sidebar, .rich-editor__area {
    -webkit-overflow-scrolling: touch;
  }

  /* --- جلوگیری از سرریز افقی در سایر بخش‌ها --- */
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-box { min-width: 0; width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .image-picker { flex-wrap: wrap; }
  .variation-row { padding: 10px; }
  .variation-row input[type="number"], .variation-row select { width: 100px; }
}

/* =========================================================================
   موبایل کوچک (تا ۵۶۰ پیکسل)
   ========================================================================= */
@media (max-width: 560px) {
  .grid-stats { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .stat-card__value { font-size: 20px; }
  .rich-editor__area { min-height: 130px; max-height: 260px; }

    /* استایل هایی که اضافه شدن */
  #o-body .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 10px;
      border: 1px solid #7c6cf029;
      font-size: 13.5px;
      cursor: pointer;
      font-weight: 500;
      white-space: nowrap;
      transition: transform .12s ease, background .15s ease, border-color .15s ease;
      width: 100%;
      justify-content: center;
      background: #7c6cf00a;
  }

.product-lable div div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.variation-row__label {
    font-size: 14.5px;
    min-width: 100%;
    flex: 1;
}


#pf-attrs-list select {
  padding: 5px 8px;
  font-size: 14px;
  border-radius: 8px;
}

span.accordion-caret {
    display: block;
}


.topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 42px;
    justify-content: flex-end;
}


.table-wrap:not(.table-compact) tr td:first-child {
        position: relative;
        padding-inline-end: 10px;
    }

    .welcome-card-item {
      display: flex;
      justify-content: center;
    }

    .welcome-card-item div {
      display: flex;
      flex-direction: column;
      align-items: center;

    }
}

/* =========================================================================
   موبایل خیلی کوچک (تا ۳۸۰ پیکسل)
   ========================================================================= */
@media (max-width: 380px) {
  .grid-stats { grid-template-columns: 1fr; }
  .brand__text strong { font-size: 13.5px; }
  .fab { width: 50px; height: 50px; }
  .bottom-nav__item span { display: none; }
}

/* --- دسکتاپ: مطمئن شویم FAB و منوی موبایل هرگز نمایش داده نمی‌شوند --- */
@media (min-width: 901px) {
  .fab { display: none !important; }
  .sidebar-backdrop { display: none !important; }
  .bottom-nav { display: none !important; }
}