/* ═══════════════════════════════════════════════════════════════════════
   📱 پوسته‌ی اپ‌مانندِ موبایل — سامانه یکپارچه GTA  (۲۰۲۶-۰۹-۱۵)
   ═══════════════════════════════════════════════════════════════════════
   هدف: روی گوشی سامانه حسِ اپِ نصب‌شده بدهد، و روی دسکتاپ *هیچ‌چیز* عوض نشود.
   پس هر قاعده‌ی این فایل داخلِ `@media (max-width: 960px)` است (به‌جز دو توکن و
   بلوکِ pointer:coarse که خودشان روی دسکتاپِ بی‌لمس بی‌اثرند).

   ⚠️ چرا ۹۶۰ و نه ۹۰۰: نوارِ منوی بالا (`.gta-topnav`) و کارتِ برند دقیقاً زیرِ
   ۹۶۰px مخفی می‌شوند و همبرگر جایشان می‌آید. اگر نوارِ پایین را ۹۰۰ می‌گذاشتیم،
   بینِ ۹۰۱ تا ۹۶۰ نه منوی بالا بود نه نوارِ پایین — یک نوارِ مرده‌ی ۶۰پیکسلی.

   رنگ‌ها فقط از توکن‌های `gta-theme.css` می‌آیند ⇒ حالتِ شب خودکار درست است.
   فاصله‌ها از نردبانِ ۴·۸·۱۲·۱۶·۲۴·۳۲·۴۸.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ارتفاعِ خالصِ نوارِ پایین (بدونِ حاشیه‌ی امنِ گوشیِ چانه‌دار) */
  /* ۸ اکتبر: جزیره‌ی شناور = ۶۴px نوار + ۱۲px فاصله از لبه‌ی پایین */
  --gta-appnav-h: 76px;
  /* اندازه‌ی گلیفِ آیکونِ نوار. توکن است و نه عددِ خام، چون این یک اندازه‌ی *آیکون*
     است نه اندازه‌ی *متن* — با عددِ خام، گاردِ آرامش آن را به‌عنوانِ یک اندازه‌ی
     متنِ تازه در صفحه می‌شمارد و بی‌دلیل قرمز می‌شود. */
  --gta-appnav-icon: 22px;
  /* ارتفاعِ واقعیِ اشغال‌شده‌ی پایینِ صفحه = نوار + حاشیه‌ی امن.
     روی دسکتاپ صفر می‌ماند (نوار اصلاً رندر نمی‌شود). */
  --gta-appnav-total: 0px;
}

@media (max-width: 960px) {
  :root { --gta-appnav-total: calc(var(--gta-appnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════ ۱) نوارِ پایینِ سراسری ═══════════════ */

.gta-appnav { display: none; }

@media (max-width: 960px) {
  /* ۸ اکتبر (بازطراحی، طرحِ «الف»): جزیره‌ی شیشه‌ایِ شناور و کپسولی؛ آیتمِ فعال باز می‌شود
     (آیکون + نام روی کپسولِ برند) و بقیه فقط آیکون‌اند. نام‌ها برای صفحه‌خوان می‌مانند. */
  .gta-appnav {
    position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1250;
    height: 64px; padding: 0 8px; gap: 2px;
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--gta-card) 82%, transparent);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border-radius: 32px;
    box-shadow: 0 8px 28px rgba(0,84,50,.18);
  }
  html.gta-dark .gta-appnav { box-shadow: 0 8px 28px rgba(0,0,0,.6); }

  .gta-appnav-item {
    position: relative;
    flex: 1 1 0; min-width: 0; height: 48px;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 7px; padding: 0 6px;
    border: 0; border-radius: 24px; background: transparent;
    font-family: inherit;
    color: var(--gta-muted);
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: flex-grow .32s cubic-bezier(.34,1.4,.5,1), background-color .2s ease, color .2s ease;
  }
  .gta-appnav-item .mud-icon-root {
    font-size: var(--gta-appnav-icon) !important;
    width: var(--gta-appnav-icon); height: var(--gta-appnav-icon);
    flex: none;
    color: inherit !important;
    transition: transform .18s cubic-bezier(.2,.8,.25,1);
  }
  /* نامِ آیتمِ غیرفعال: دیده نمی‌شود ولی برای صفحه‌خوان می‌ماند (نه display:none) */
  .gta-appnav-l {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
    font-size: var(--gta-fs-xs); font-weight: 600;
  }
  /* آیتمِ فعال: کپسولِ سبزِ برند + آیکون و نام */
  .gta-appnav-item.on {
    flex-grow: 2.3;
    background: var(--mud-palette-primary);
    color: #fff;
  }
  .gta-appnav-item.on .gta-appnav-l {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
  }
  .gta-appnav-item:active .mud-icon-root { transform: scale(.88); }
  .gta-appnav-item:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

  /* شمارِ کارِ منتظر: حبابِ کوچکِ روی آیکونِ غیرفعال؛ روی آیتمِ فعال کنارِ نام می‌نشیند */
  .gta-appnav-badge {
    position: absolute; top: 2px; left: calc(50% + 4px);
    min-width: 17px; height: 17px; padding: 0 4px; box-sizing: content-box;
    background: #C2606A; color: #fff; /* brand-check-ignore: قرمزِ رسمیِ هشدار */
    border: 2px solid var(--gta-card);
    border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  }
  .gta-appnav-item.on .gta-appnav-badge {
    position: static; border: 0; background: rgba(255,255,255,.26); color: #fff;
    min-width: 18px; height: 18px; line-height: 18px;
  }

  /* فضای پایینِ محتوا تا آخرین ردیف زیرِ نوار گم نشود */
  .mud-main-content {
    padding-bottom: calc(var(--gta-appnav-total) + 18px) !important;
  }

  /* المان‌های شناورِ ته‌صفحه باید بالای نوار بنشینند، نه پشتش */
  .gta-fab-mobile { bottom: calc(var(--gta-appnav-total) + var(--gta-space-3)) !important; }
  .gta-pwa-banner { bottom: calc(var(--gta-appnav-total) + var(--gta-space-2)); }
  /* بنرِ نصب و دکمه‌ی شناور هر دو همین‌جا می‌نشستند ⇒ دکمه زیرِ بنر گم می‌شد (#218). تا بنر باز است دکمه بالای آن. */
  html:has(#gta-pwa-banner):not(:has(.ld-dock, .cg-search, .kala-search, .hs-veil, .mud-dialog, .gp-sheet)) .gta-fab-mobile { bottom: calc(var(--gta-appnav-h) + env(safe-area-inset-bottom, 0px) + 92px) !important; }
  /* ۳ اکتبر ۲۰۲۶: بقیه‌ی شناورهای صفحه (جستجوی کالاها، «رسید/تراکنش جدید»، برگه‌ی ماشین‌حساب) هم زیرِ بنر می‌رفتند.
     تا بنر باز است «ارتفاعِ اشغال‌شده‌ی پایین» برای محتوای صفحه به اندازه‌ی بنر بیشتر است ⇒ همه خودکار بالای آن. */
  html:has(#gta-pwa-banner):not(.gta-kbd):not(:has(.ld-dock, .cg-search, .kala-search, .hs-veil, .mud-dialog, .gp-sheet)) .mud-main-content {
    --gta-appnav-total: calc(var(--gta-appnav-h) + env(safe-area-inset-bottom, 0px) + 84px);
  }

  /* ⌨️ کیبوردِ گوشی باز است (کلاسِ `gta-kbd` را index.html می‌گذارد): نوارِ پایین و بنرِ نصب
     کنار می‌روند تا فیلد درست بالای کیبورد بنشیند و جای محتوا را نگیرند (مثلِ اپِ واقعی). */
  html.gta-kbd { --gta-appnav-total: 0px; }
  html.gta-kbd .gta-appnav,
  html.gta-kbd .gta-pwa-banner { display: none !important; }

  /* بنرِ نصبِ آیفون (z=1360، بیرونِ ظرف) دقیقاً روی کادرِ جستجوی شناورِ سرنخ/کالا/امانت و برگه‌ها
     می‌افتاد و همه‌ی تپ‌هایشان را می‌گرفت (ممیزیِ r2، ۳ اکتبر ۲۰۲۶). در صفحه‌ای که پایینش کنترلِ
     شناور یا برگه/دیالوگِ باز دارد بنر نشان داده نمی‌شود؛ در بقیه‌ی صفحه‌ها (خانه و…) سرِ جایش است. */
  /* .mv-act = نوارِ پایینِ صفحه‌ی قالب (جستجو + دوربین + «نو»)؛ ۶ اکتبر زیرِ بنر رفت (گزارش‌های ۲۶۴ تا ۲۶۷). */
  html:has(.ld-dock, .cg-search, .kala-search, .hs-veil, .mud-dialog, .gp-sheet, .mv-act) #gta-pwa-banner { display: none !important; }
  /* دکمه‌ی شناورِ کارِ اصلی هم: هنگامِ تایپ بالای کیبورد می‌نشست و روی فیلترِ تاریخ/دکمه‌ها می‌افتاد
     (فهرستِ فاکتورها، گشتِ ۲ اکتبر ۲۰۲۶). با بسته‌شدنِ کیبورد برمی‌گردد. */
  html.gta-kbd .gta-fab-mobile { display: none !important; }
}

/* ═══════════════ ۲) حاشیه‌ی امن (بالا و کناره‌ها) ═══════════════ */

@media (max-width: 960px) {
  /* نوارِ بالا زیرِ ناچ/ساعتِ گوشی نرود (در حالتِ اپِ نصب‌شده، صفحه تا لبه بالا می‌آید) */
  .mud-appbar {
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    inset-inline-start: calc(18px + env(safe-area-inset-left, 0px)) !important;
    inset-inline-end: calc(18px + env(safe-area-inset-right, 0px)) !important;
  }
  .mud-main-content { padding-top: calc(92px + env(safe-area-inset-top, 0px)) !important; }

  /* کناره‌های محتوا: هرچه بیشتر است — گاترِ معمول یا حاشیه‌ی امنِ حالتِ افقی */
  .mud-main-content > .mud-container {
    padding-inline-start: max(var(--gta-space-3), env(safe-area-inset-left, 0px)) !important;
    padding-inline-end: max(var(--gta-space-3), env(safe-area-inset-right, 0px)) !important;
  }

  /* منوی کشویی هم تا لبه‌ی امن بیاید (بالای آیفون، پایینِ گوشیِ بی‌دکمه) */
  .mud-drawer.mud-drawer-mini .mud-drawer-content {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gta-space-4));
  }
}

/* ═══════════════ ۳) نوارِ بالای جمع‌شونده — ❌ ساخته نشد، عمداً ═══════════════
   ۱۵ سپتامبر ۲۰۲۶ ساخته و با اندازه‌گیریِ زنده رد شد. دو ایرادِ واقعی داشت:

   ۱) نوارِ بالا `backdrop-filter: blur(22px)` دارد. وقتی با `transform` از قاب
      بیرون می‌رفت، کرومیوم **روحِ همان بلور** را سرِ جای قبلی‌اش نگه می‌داشت:
      یک نوارِ مه‌آلودِ ۷۶پیکسلی بالای صفحه که محتوای زیرش را می‌پوشاند.
   ۲) هر سرستونِ چسبان (`position: sticky`) که با جمع‌شدنِ نوار جایش عوض می‌شد،
      از حالتِ چسبان درمی‌آمد و به مکانِ اسکرول‌شده‌ی خودش می‌پرید (یعنی از قاب
      بیرون). نوارِ تبِ داشبوردِ مدیر دقیقاً همین‌طور ناپدید می‌شد.

   سودش ۷۶ پیکسل بود؛ هزینه‌اش دو باگِ دیدنی. پس نوارِ بالا همیشه سرِ جایش می‌ماند.
   اگر روزی برگشت: اول `backdrop-filter` را موقعِ رفتن خاموش کنید و هیچ `top`ِ
   چسبانی را با آن گره نزنید. */

/* ═══════════════ ۴) کشیدن-برای-تازه‌سازی (سراسری) ═══════════════ */

.gta-appptr {
  position: fixed; top: 0; inset-inline: 0; margin-top: -56px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; z-index: 1260;
  color: var(--gta-on-glass-title);
  font-family: inherit; font-size: var(--gta-fs-sm); font-weight: 600;
}
/* قرصِ پس‌زمینه تا متن روی هر محتوایی خوانا بماند (روز و شب) */
.gta-appptr > .gta-appptr-pill {
  display: inline-flex; align-items: center; gap: var(--gta-space-2);
  padding: var(--gta-space-2) var(--gta-space-3);
  background: var(--gta-surface); border: 1px solid var(--gta-edge);
  border-radius: 999px; box-shadow: var(--gta-shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-top: env(safe-area-inset-top, 0px);
}
.gta-appptr-ic {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  transition: transform .2s ease;
}
.gta-appptr.armed .gta-appptr-ic { transform: rotate(180deg); }
.gta-appptr.busy .gta-appptr-ic { animation: gtaAppPtrSpin .8s linear infinite; }
@keyframes gtaAppPtrSpin { to { transform: rotate(360deg); } }

/* ═══════════════ ۵) حسِ اپ: گذرِ صفحه و بازخوردِ لمسی ═══════════════ */

@media (max-width: 960px) {
  /* گذرِ صفحه: محتوا ۶px از پایین با یک فیدِ کوتاه می‌آید — تنها نشانه‌ی
     «صفحه عوض شد». کلاس را AdminLayout سرِ هر ناوبری ۲۴۰ms روی <html> می‌گذارد. */
  html.gta-page-in .mud-main-content > .mud-container {
    animation: gtaPageIn .2s cubic-bezier(.2,.8,.25,1);
  }
  @keyframes gtaPageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* بازخوردِ لمسی فقط روی دستگاهِ واقعاً لمسی.
   ⚠️ گاردِ درست `pointer: coarse` است نه `hover: none` — لپ‌تاپِ لمسی هر دو ورودی
   را دارد و با گاردِ اشتباه از این بازخورد محروم می‌شد (درسِ گلکسی اس۲۱). */
@media (pointer: coarse) {
  .mud-button-root:active,
  .gta-appnav-item:active,
  .mud-icon-button:active { transform: scale(.97); }
  .mud-button-root, .mud-icon-button { transition: transform .12s ease; }
  /* هایلایتِ آبیِ پیش‌فرضِ اندروید روی هر چیزِ قابلِ لمس */
  a, button, .mud-button-root, .mud-icon-button, .mud-list-item, .gta-appnav-item {
    -webkit-tap-highlight-color: transparent;
  }
}

/* هیچ‌کدامِ این حرکت‌ها برای کسی که حرکت را خاموش کرده اجرا نمی‌شود */
@media (prefers-reduced-motion: reduce) {
  .gta-appnav-item .mud-icon-root { transition: none !important; }
  html.gta-page-in .mud-main-content > .mud-container { animation: none !important; }
  .gta-appptr.busy .gta-appptr-ic { animation: none; }
}

/* Shell touch targets: only user, notification, drawer and navigation controls. */
@media (max-width: 960px) {
  .gta-tools-isl .gta-user-btn,
  .gta-tools-isl .gta-bell-btn,
  .gta-burger-bar .mud-icon-button {
    min-height: 44px;
    min-width: 44px;
  }
  .gta-topnav a.gta-top-link,
  .gta-topnav .gta-top-link[role="link"],
  .gta-topnav .gta-top-parent,
  .gta-topnav a.gta-fly-item,
  .gta-topnav .gta-fly-item[role="link"],
  .mud-drawer .gta-rail-sq,
  .mud-drawer a.gta-fly-item,
  .mud-drawer .gta-fly-item[role="link"] {
    min-height: 44px !important;
  }
}