/**
 * انیمیشن‌های مشترک داشبورد: ورود صفحه، استگر، کشوی موبایل، شیت «بیشتر»
 */

:root {
  --dash-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dash-motion-ease-out-soft: cubic-bezier(0.25, 0.9, 0.35, 1);
  --dash-motion-dur: 420ms;
  --dash-motion-dur-fast: 300ms;
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --dash-motion-dur: 0.001ms;
    --dash-motion-dur-fast: 0.001ms;
  }

  .dashboard-motion-route-host,
  .public-motion-route-host,
  .dashboard-stagger-children > *,
  .dashboard-suspense-fallback {
    animation: none !important;
  }

  .dashboard-drawer-backdrop,
  .dashboard-drawer-panel-wrap,
  .dashboard-more-sheet-backdrop,
  .dashboard-more-sheet-panel {
    transition: none !important;
  }

  .dashboard-drawer-panel-wrap,
  .dashboard-more-sheet-panel {
    transform: none !important;
    opacity: 1 !important;
  }

  .dashboard-drawer-backdrop--open,
  .dashboard-more-sheet-backdrop--open {
    opacity: 1 !important;
  }
}

@keyframes dash-route-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.dashboard-motion-route-host {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: dash-route-enter var(--dash-motion-dur) var(--dash-motion-ease) both;
}

.public-motion-route-host {
  animation: dash-route-enter var(--dash-motion-dur) var(--dash-motion-ease) both;
}

@keyframes dash-item-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.dashboard-stagger-children > * {
  animation: dash-item-rise var(--dash-motion-dur-fast) var(--dash-motion-ease-out-soft) backwards;
}

.dashboard-stagger-children > *:nth-child(1) {
  animation-delay: 0.02s;
}
.dashboard-stagger-children > *:nth-child(2) {
  animation-delay: 0.06s;
}
.dashboard-stagger-children > *:nth-child(3) {
  animation-delay: 0.1s;
}
.dashboard-stagger-children > *:nth-child(4) {
  animation-delay: 0.14s;
}
.dashboard-stagger-children > *:nth-child(5) {
  animation-delay: 0.18s;
}
.dashboard-stagger-children > *:nth-child(6) {
  animation-delay: 0.22s;
}
.dashboard-stagger-children > *:nth-child(7) {
  animation-delay: 0.26s;
}
.dashboard-stagger-children > *:nth-child(8) {
  animation-delay: 0.3s;
}
.dashboard-stagger-children > *:nth-child(9) {
  animation-delay: 0.34s;
}
.dashboard-stagger-children > *:nth-child(10) {
  animation-delay: 0.38s;
}
.dashboard-stagger-children > *:nth-child(11) {
  animation-delay: 0.42s;
}
.dashboard-stagger-children > *:nth-child(12) {
  animation-delay: 0.46s;
}

@keyframes dash-suspense-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.dashboard-suspense-fallback {
  animation: dash-suspense-pulse 1.1s ease-in-out infinite;
}

/* کشوی ناوبری موبایل — RTL پیش‌فرض (صفحه fa) */
.dashboard-drawer-backdrop {
  opacity: 0;
  transition: opacity var(--dash-motion-dur-fast) var(--dash-motion-ease);
}

.dashboard-drawer-backdrop--open {
  opacity: 1;
}

.dashboard-drawer-panel-wrap {
  transition: transform var(--dash-motion-dur-fast) var(--dash-motion-ease);
  will-change: transform;
}

.dashboard-drawer-panel-wrap:not(.dashboard-drawer-panel-wrap--open) {
  transform: translate3d(100%, 0, 0);
}

html[dir="ltr"] .dashboard-drawer-panel-wrap:not(.dashboard-drawer-panel-wrap--open) {
  transform: translate3d(-100%, 0, 0);
}

.dashboard-drawer-panel-wrap--open {
  transform: translate3d(0, 0, 0);
}

/* شیت «بیشتر» */
.dashboard-more-sheet-backdrop {
  opacity: 0;
  transition: opacity var(--dash-motion-dur-fast) var(--dash-motion-ease);
}

.dashboard-more-sheet-backdrop--open {
  opacity: 1;
}

.dashboard-more-sheet-panel {
  transition:
    transform var(--dash-motion-dur-fast) var(--dash-motion-ease),
    opacity var(--dash-motion-dur-fast) var(--dash-motion-ease);
  will-change: transform, opacity;
}

.dashboard-more-sheet-panel:not(.dashboard-more-sheet-panel--open) {
  transform: translate3d(0, 108%, 0);
  opacity: 0.82;
}

@media (min-width: 640px) {
  .dashboard-more-sheet-panel:not(.dashboard-more-sheet-panel--open) {
    transform: translate3d(0, 12px, 0) scale(0.94);
    opacity: 0;
  }
}

.dashboard-more-sheet-panel--open {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* Django shell layout — mirrors React dashboard structure */
.app.app--dashboard-dvh {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.dashboard-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: calc(env(safe-area-inset-bottom) + 4.5rem);
}

@media (min-width: 1024px) {
  .dashboard-shell {
    padding-bottom: 0;
  }
}

.dashboard-shell__layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .dashboard-shell__layout {
    flex-direction: row;
  }
}

.dashboard-shell__backdrop {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 50%),
    radial-gradient(80% 50% at 100% 40%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 45%);
}

.dashboard-shell__main-column {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-shell__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0.5rem 0.75rem 2rem;
}

@media (min-width: 1024px) {
  .dashboard-shell__content {
    padding: 0.5rem 1rem 2rem;
  }
}

.dashboard-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 17.5rem;
    flex-shrink: 0;
    margin: 1rem;
    padding: 1.25rem;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    order: -1;
    border-radius: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
    backdrop-filter: blur(24px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--color-shadow) 35%, transparent);
  }
}

.dashboard-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  text-decoration: none;
  color: inherit;
}

.dashboard-sidebar__brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 60%, transparent);
  background: color-mix(in srgb, var(--color-surface-strong) 80%, transparent);
}

.dashboard-sidebar__brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dashboard-sidebar__brand-copy small {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.dashboard-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dashboard-nav__link:hover {
  border-color: color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.dashboard-nav__link--active {
  border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  font-weight: 600;
}

.dashboard-nav__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent);
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
}

.dashboard-sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
}

.dashboard-sidebar__logout,
.dashboard-sidebar__revenue {
  width: 100%;
  border-radius: 1rem;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  font-size: 0.875rem;
}

.dashboard-sidebar__logout {
  border: 1px solid color-mix(in srgb, #f43f5e 35%, transparent);
  background: color-mix(in srgb, #f43f5e 10%, transparent);
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}

.dashboard-sidebar__revenue {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  color: inherit;
}

.dashboard-topbar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin: 0.5rem 0.75rem 0;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(20px);
}

@media (min-width: 1024px) {
  .dashboard-topbar {
    margin: 1rem 1rem 0;
    border-radius: 1.75rem;
    padding: 0.75rem 1rem;
  }
}

.dashboard-topbar__menu-btn,
.dashboard-topbar__icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .dashboard-topbar__menu-btn {
    display: none;
  }
}

.dashboard-topbar__brand-mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1024px) {
  .dashboard-topbar__brand-mobile {
    display: none;
  }
}

.dashboard-topbar__titles {
  display: none;
  min-width: 0;
  flex: 1;
}

@media (min-width: 1024px) {
  .dashboard-topbar__titles {
    display: block;
  }

  .dashboard-topbar__titles h1 {
    margin: 0;
    font-size: 1.125rem;
  }

  .dashboard-topbar__titles p {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }
}

.dashboard-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
}

.dashboard-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  border: 0;
  background: color-mix(in srgb, #0f172a 35%, transparent);
  backdrop-filter: blur(4px);
}

.dashboard-drawer-panel-wrap {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 70;
  width: min(17.5rem, 85vw);
}

.dashboard-drawer-panel {
  margin: 0.75rem;
  height: calc(100dvh - 1.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-shadow) 45%, transparent);
}

.dashboard-drawer-panel__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent);
}

.dashboard-drawer-panel__close {
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--color-text-muted);
}

.dashboard-nav--drawer {
  padding: 0.75rem 1.25rem;
  overflow-y: auto;
}

.dashboard-more-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
}

.dashboard-more-sheet[hidden] {
  display: none !important;
}

.dashboard-more-sheet__backdrop,
.dashboard-more-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, #0f172a 40%, transparent);
}

.dashboard-more-sheet__panel,
.dashboard-more-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  border-radius: 1.25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(24px);
}

.dashboard-more-sheet__wallet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  text-decoration: none;
  color: inherit;
}

.dashboard-more-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.dashboard-more-sheet__grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.65rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  text-decoration: none;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
}

.dashboard-more-sheet__logout {
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 0.85rem;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, #f43f5e 35%, transparent);
  background: color-mix(in srgb, #f43f5e 10%, transparent);
  font-weight: 700;
  cursor: pointer;
}

.shop-layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .shop-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
  }
}

.shop-cart__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.shop-cart__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.weight-progress-card__chart-wrap {
  position: relative;
  min-height: 220px;
}

#weight-chart {
  width: 100%;
  height: 220px;
}

.weight-progress-card__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.weight-progress-card__range {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: transparent;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.weight-progress-card__range.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.dashboard-home__intro {
  margin-bottom: 1.5rem;
}

.dashboard-home__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
}

.dashboard-home__greeting {
  margin: 0.25rem 0;
  font-size: 1.5rem;
}

.dashboard-home__lede {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}

.dashboard-home__activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard-home__activity-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent);
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

.dashboard-home__alert {
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
}

.dashboard-home__alert--warning {
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.dashboard-home__alert--danger {
  border-color: color-mix(in srgb, #f43f5e 35%, transparent);
  background: color-mix(in srgb, #f43f5e 10%, transparent);
}

.dashboard-home__alert--success {
  border-color: color-mix(in srgb, #10b981 35%, transparent);
  background: color-mix(in srgb, #10b981 10%, transparent);
}

.dashboard-home__alert--info {
  border-color: color-mix(in srgb, #0ea5e9 35%, transparent);
  background: color-mix(in srgb, #0ea5e9 10%, transparent);
}