/* ==========================================================================
   پوستهٔ محیط کار — موبایل‌اول

   ساختار:
     موبایل  (< ۹۰۰px) : نوار بالای فشرده + محتوا + نوار پایین + دکمهٔ صدا
     تبلت    (۹۰۰–۱۲۰۰): سایدبار باریک آیکونی + محتوا
     دسکتاپ  (> ۱۲۰۰px): سایدبار کامل + محتوا

   کشوی سایدبار در موبایل از سمت **راست** باز می‌شود (سمت شروع در RTL).
   چون کل محصول RTL است، برای کشو از خصوصیت فیزیکی (right/translateX)
   استفاده می‌شود تا جهت قطعی و بی‌ابهام باشد.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
}

/* ==========================================================================
   سایدبار
   ========================================================================== */
.app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;                       /* سمت راست — عمداً فیزیکی */
  width: min(19rem, 86vw);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-start: var(--bw) solid var(--line);
  box-shadow: var(--e-4);
  transform: translateX(100%);    /* بیرون از صفحه، سمت راست */
  visibility: hidden;
  transition: transform var(--d-slow) var(--ease-out),
              visibility var(--d-slow) var(--ease-out);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-sidebar.is-open {
  transform: translateX(0);
  visibility: visible;
}

.app-sidebar__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line-2);
  min-height: var(--h-topbar);
  flex: none;
}

.app-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-3);
  scrollbar-width: thin;
}

.app-sidebar__foot {
  flex: none;
  padding: var(--s-3);
  border-top: var(--bw) solid var(--line-2);
  background: var(--surface-2);
}

/* روپوش کشو */
.scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--ease), visibility var(--d-base) var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ---------------------------- آیتم منو ---------------------------- */
.nav-group + .nav-group { margin-top: var(--s-4); }

.nav-group__title {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-4);
  padding: 0 var(--s-3) var(--s-2);
  letter-spacing: 0.02em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.5rem;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  position: relative;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.nav-item .icon { color: var(--ink-4); flex: none; }
.nav-item__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__end { margin-inline-start: auto; flex: none; }

.nav-item:active { background: var(--paper-2); }
@media (hover: hover) {
  .nav-item:hover { background: var(--paper-2); color: var(--ink); }
  .nav-item:hover .icon { color: var(--ink-2); }
}

.nav-item.is-on {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: var(--w-semi);
}
.nav-item.is-on .icon { color: var(--red); }
/* نشانگر فعال — نوار نازک در سمت شروع */
.nav-item.is-on::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 20%;
  bottom: 20%;
  width: 2.5px;
  border-radius: var(--r-full);
  background: var(--red);
}

/* کارت پلن در پای سایدبار */
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.plan__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.plan__row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--w-semi); }

/* ==========================================================================
   محتوای اصلی
   ========================================================================== */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
}

/* ---------------------------- نوار بالا ---------------------------- */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--h-topbar);
  padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: var(--bw) solid var(--line);
  padding-top: calc(var(--s-2) + env(safe-area-inset-top, 0px));
}
@supports (backdrop-filter: blur(10px)) {
  .app-topbar { backdrop-filter: saturate(180%) blur(12px); }
}
@supports not (color-mix(in srgb, red, blue)) {
  .app-topbar { background: var(--paper); }
}

.app-topbar__title { min-width: 0; flex: 1; }
.app-topbar__title h1 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--t-caption);
  color: var(--ink-4);
  flex-wrap: wrap;
}
.crumbs .icon { width: 0.75rem; height: 0.75rem; }
@media (hover: hover) { .crumbs a:hover { color: var(--red); } }

/* موبایل: جستجو یک دکمهٔ آیکونی است که شیت را باز می‌کند؛ منوی کاربر در سایدبار */
.app-topbar__search { display: none; }
.topbar-search { display: grid; }
.topbar-user { display: none; }

.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: none;
  margin-inline-start: auto;
}

/* ---------------------------- ناحیهٔ محتوا ---------------------------- */
.app-content {
  --pad-x: var(--s-4);
  flex: 1;
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--s-5) var(--pad-x);
  /* فضای نوار پایین + دکمهٔ صدا در موبایل */
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  min-width: 0;
}

/* سربرگ صفحه */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: var(--bw) solid var(--line);
}
.page-head__text { min-width: 0; flex: 1 1 14rem; }
.page-head h2 { font-size: var(--t-h2); font-weight: var(--w-bold); }
.page-head p {
  font-size: var(--t-body-sm);
  color: var(--ink-3);
  margin-top: 0.15rem;
  max-width: var(--w-prose);
}
.page-head__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  flex: none;
  margin-inline-start: auto;
}

/* ریتم بخش‌ها */
.section + .section { margin-top: var(--gap-section); }

/* ==========================================================================
   نوار پایین (موبایل)
   ========================================================================== */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: var(--bw) solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (backdrop-filter: blur(10px)) {
  .tabbar { backdrop-filter: saturate(180%) blur(12px); }
}
@supports not (color-mix(in srgb, red, blue)) {
  .tabbar { background: var(--surface); }
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.25rem;
  padding: var(--s-2) 0.15rem;
  font-size: 0.625rem;
  font-weight: var(--w-medium);
  color: var(--ink-3);
  position: relative;
  transition: color var(--d-fast) var(--ease);
}
.tabbar__item .icon { width: 1.25rem; height: 1.25rem; }
.tabbar__item.is-on { color: var(--ink); font-weight: var(--w-semi); }
.tabbar__item.is-on .icon { color: var(--red); stroke-width: 2; }
.tabbar__item .pill {
  position: absolute;
  top: 0.3rem;
  inset-inline-end: 18%;
}
.tabbar__gap { min-height: 3.25rem; }

/* ==========================================================================
   دکمهٔ شناور صدا
   ========================================================================== */
.fab {
  position: fixed;
  z-index: calc(var(--z-sticky) + 2);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--glow-red), var(--e-2);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
  /* موبایل: مرکز نوار پایین */
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
}
.fab .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
/* برچسب فقط در دسکتاپ معنا دارد؛ در موبایل دکمه دایره است. */
.fab__text { display: none; }
.fab:active { transform: translateX(-50%) scale(0.93); }
@media (hover: hover) {
  .fab:hover { box-shadow: var(--glow-red-lg), var(--e-3); }
}

/* ==========================================================================
   نقاط شکست
   ========================================================================== */

/* ------------------ تبلت: سایدبار باریک آیکونی ------------------ */
@media (min-width: 900px) {
  .app {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    direction: rtl;
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: auto;
    transform: none;
    visibility: visible;
    box-shadow: none;
    background: var(--paper-2);
    grid-column: 1;
  }

  .app-sidebar__head { justify-content: center; padding-inline: var(--s-2); }
  .app-sidebar__nav { padding: var(--s-2); }
  .app-sidebar__foot { padding: var(--s-2); }

  /* در حالت باریک فقط آیکون */
  .nav-group__title,
  .nav-item__text,
  .nav-item__end,
  .brand__text,
  .plan__row,
  .plan .bar,
  .sidebar-close { display: none; }

  .nav-item {
    justify-content: center;
    padding: 0;
    width: 2.5rem;
    margin-inline: auto;
  }
  .nav-item .icon { width: 1.25rem; height: 1.25rem; }
  .nav-item.is-on::before { display: none; }
  .nav-item.is-on { background: var(--surface); box-shadow: var(--e-1); }

  .nav-group + .nav-group {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: var(--bw) solid var(--line);
  }

  .plan { padding: var(--s-2); align-items: center; }

  .scrim { display: none; }
  .sidebar-toggle { display: none; }
  .tabbar { display: none; }

  .app-content {
    --pad-x: var(--s-6);
    /* در دسکتاپ نوار پایین نیست، ولی دکمهٔ شناور صدا هست: انتهای محتوا نباید
       زیرش گم شود. */
    padding-bottom: var(--s-12);
  }

  /* دکمهٔ صدا به گوشهٔ پایین می‌رود و برچسب می‌گیرد.
     در دسکتاپ نوار پایین وجود ندارد، پس یک دایرهٔ بی‌متن گم می‌شود؛ کاربر باید
     ببیند «با صدا بگو» در هر صفحه در دسترس است. */
  .fab {
    left: auto;
    right: auto;
    inset-inline-start: var(--s-6);
    bottom: var(--s-6);
    transform: none;
    width: auto;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding-inline: var(--s-4);
    border-radius: var(--r-full);
    font-size: var(--t-body-sm);
    font-weight: var(--w-semi);
  }
  .fab .icon { width: 1.25rem; height: 1.25rem; }
  .fab__text { display: inline; white-space: nowrap; }
  .fab:active { transform: scale(0.97); }

  .app-topbar { padding-inline: var(--s-6); }
  .app-topbar__search { display: block; flex: 1 1 14rem; max-width: 22rem; }
  .topbar-search { display: none; }
  .topbar-user { display: block; }
}

/* ------------------ دسکتاپ: سایدبار کامل ------------------ */
@media (min-width: 1200px) {
  .app { grid-template-columns: var(--w-sidebar) minmax(0, 1fr); }

  .app-sidebar__head { justify-content: flex-start; padding-inline: var(--s-4); }
  .app-sidebar__nav { padding: var(--s-3); }
  .app-sidebar__foot { padding: var(--s-3); }

  .nav-group__title,
  .nav-item__text,
  .nav-item__end,
  .brand__text,
  .plan__row,
  .plan .bar { display: revert; }

  .nav-item {
    justify-content: flex-start;
    width: auto;
    padding: 0 var(--s-3);
    margin-inline: 0;
  }
  .nav-item .icon { width: 1rem; height: 1rem; }
  .nav-item.is-on::before { display: block; }
  .nav-item.is-on { box-shadow: none; }

  .nav-group + .nav-group { border-top: none; padding-top: 0; margin-top: var(--s-4); }

  .plan { align-items: stretch; padding: var(--s-3); }

  .app-content { --pad-x: var(--s-8); padding-block: var(--s-6) var(--s-12); }
  .app-topbar { padding-inline: var(--s-8); }
}

/* ------------------ موبایل کوچک ------------------ */
@media (max-width: 400px) {
  .app-content { --pad-x: var(--s-3); }
  .app-topbar { padding-inline: var(--s-3); }
  .tabbar__item { font-size: 0.5625rem; }
}

/* برند (.brand) و پیام‌ها (.messages) در components.css تعریف شده‌اند،
   چون در پوستهٔ عمومی و صفحهٔ ورود هم استفاده می‌شوند. */

/* ==========================================================================
   پوستهٔ احراز هویت
   ========================================================================== */
.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

.auth__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-8) var(--s-5);
  padding-top: calc(var(--s-8) + env(safe-area-inset-top, 0px));
}

.auth__box { width: min(24rem, 100%); }
.auth__box h1 { font-size: var(--t-h1); margin-bottom: var(--s-2); }
.auth__box > p {
  font-size: var(--t-body-sm);
  color: var(--ink-3);
  margin-bottom: var(--s-6);
  line-height: var(--lh-snug);
}

.auth__foot {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--bw) dashed var(--line);
  font-size: var(--t-body-sm);
  color: var(--ink-3);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}
.auth__foot a { color: var(--red); font-weight: var(--w-semi); }

.auth__aside {
  display: none;
  background: var(--paper-2);
  border-inline-end: var(--bw) solid var(--line);
  padding: var(--s-12) var(--s-10);
  flex-direction: column;
  gap: var(--s-6);
  justify-content: center;
}
.auth__aside-title { font-size: var(--t-h1); margin-bottom: var(--s-3); }
.auth__aside-lead { max-width: 26rem; line-height: var(--lh-normal); }

.auth-point {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--t-body-sm);
  color: var(--ink-2);
}
.auth-point .icon { color: var(--red); margin-top: 0.15rem; flex: none; }
.auth-point b { color: var(--ink); display: block; font-weight: var(--w-semi); }

@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth__aside { display: flex; }
}