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

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

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

:root {
  /* ارتفاعِ خالصِ نوارِ پایین (بدونِ حاشیه‌ی امنِ گوشیِ چانه‌دار) */
  --gta-appnav-h: 58px;
  /* اندازه‌ی گلیفِ آیکونِ نوار. توکن است و نه عددِ خام، چون این یک اندازه‌ی *آیکون*
     است نه اندازه‌ی *متن* — با عددِ خام، گاردِ آرامش آن را به‌عنوانِ یک اندازه‌ی
     متنِ تازه در صفحه می‌شمارد و بی‌دلیل قرمز می‌شود. */
  --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: 0; bottom: 0; z-index: 1250;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    /* همان توکنِ نوارهای چسبانِ سامانه — در شب خودش تیره می‌شود */
    /* ۳۰ سپ: مات‌تر (۹۴٪) تا محتوای پشتش از زیرِ نوار شبح نزند */
    background: color-mix(in srgb, var(--gta-card) 94%, transparent);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border-top: 1px solid var(--gta-line);
    box-shadow: 0 -6px 22px rgba(0,84,50,.12);
    /* حاشیه‌ی امن: پایین برای گوشیِ چانه‌دار، کناره‌ها برای حالتِ افقی */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
  html.gta-dark .gta-appnav { box-shadow: 0 -6px 22px rgba(0,0,0,.34); }

  /* یک آیتم = آیکونِ تک‌رنگ + برچسبِ فارسی. هدفِ لمس ۵۸px (> ۴۸ خواسته‌شده). */
  .gta-appnav-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--gta-space-1);
    min-height: var(--gta-appnav-h);
    padding: var(--gta-space-2) var(--gta-space-1);
    border: 0; background: transparent;
    font-family: inherit;
    color: var(--gta-muted);
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
  }
  .gta-appnav-item .mud-icon-root {
    font-size: var(--gta-appnav-icon) !important;
    width: var(--gta-appnav-icon); height: var(--gta-appnav-icon);
    color: inherit !important;
    transition: transform .18s cubic-bezier(.2,.8,.25,1);
  }
  /* تنها اندازه‌ی متنِ این نوار، و از نردبانِ متنِ تم (۱۲·۱۳·۱۴·۱۶·۲۰·۲۴·۳۲).
     ⚠️ اول ۱۱px بود؛ عمداً عوض شد: عددِ خارج از نردبان یعنی یک اندازه‌ی *تازه* در
     صفحه، و صفحه‌ی خانه از پیش ۵ اندازه داشت. با ۱۲px هیچ اندازه‌ای اضافه نمی‌شود. */
  .gta-appnav-l {
    font-size: var(--gta-fs-xs); font-weight: 600; line-height: 1.15;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* آیتمِ فعال: جوهرِ برند + قرصِ کم‌رنگ پشتِ آیکون.
     عمداً دکمه‌ی «پُرِ برند» نیست — در هر نما فقط یک دکمه‌ی پُرِ برند مجاز است و
     آن سهم مالِ کارِ اصلیِ خودِ صفحه (مثلاً «مشتری جدید») است. */
  .gta-appnav-item.on { color: var(--gta-on-glass-title); }
  .gta-appnav-item.on .mud-icon-root { transform: translateY(-1px); }
  .gta-appnav-item.on::before {
    content: ''; position: absolute; top: 6px;
    width: 40px; height: 26px; border-radius: 999px;
    background: var(--gta-glass-sel);
  }
  /* بازخوردِ لمسی: کمی فرو می‌رود */
  .gta-appnav-item:active .mud-icon-root { transform: scale(.88); }
  .gta-appnav-item:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -3px; border-radius: var(--gta-radius-ctl); }

  /* شمارِ کارِ منتظر — تنها رنگِ معناییِ این نوار، و فقط وقتی واقعاً کاری هست */
  /* ۳۰ سپ: شمارنده گوشه‌ی بالای آیکون می‌نشیند (نه وسطِ برچسب)؛ حلقه‌ی هم‌رنگِ نوار جداکننده است. */
  .gta-appnav-badge {
    position: absolute; top: 4px; left: calc(50% + 3px);
    min-width: 17px; height: 17px; padding: 0 4px; box-sizing: content-box;
    background: var(--gta-neg-bg); color: var(--gta-neg-text);
    border: 2px solid var(--gta-card);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  }

  /* فضای پایینِ محتوا تا آخرین ردیف زیرِ نوار گم نشود */
  .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)); }

  /* ⌨️ کیبوردِ گوشی باز است (کلاسِ `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; }
}

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

@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; }
}