/* ---------------------------------------------------------------------------
   چیدمان اصلی
--------------------------------------------------------------------------- */

#app,
.shell {
  height: 100%;
}

.shell {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--bg);
  position: relative;
  isolation: isolate;
  /* لکه‌های شفق عمداً از لبهٔ صفحه بیرون می‌زنند؛ اینجا بریده می‌شوند تا
     عرض صفحه را کش ندهند */
  overflow: hidden;
}

/* ------------------------------ شفق پس‌زمینه ------------------------------
   دو لکهٔ رنگی محو که خیلی آرام جابه‌جا می‌شوند. تنها نقش‌شان این است که
   سطوح شیشه‌ای چیزی برای شکستن داشته باشند و صفحه مرده به نظر نرسد. */

.shell::before,
.shell::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--aurora-op);
  pointer-events: none;
}
.shell::before {
  width: 70vw;
  height: 52vw;
  max-height: 760px;
  top: -14vw;
  inset-inline-end: -8vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-1), transparent 66%);
  animation: sy-drift-a 26s ease-in-out infinite;
}
.shell::after {
  width: 66vw;
  height: 52vw;
  max-height: 760px;
  bottom: -18vw;
  inset-inline-start: -10vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-2), transparent 66%);
  animation: sy-drift-b 32s ease-in-out infinite;
}
/* لکهٔ سوم، وسطِ صفحه — رنگ را تا مرکز می‌کشاند تا گوشه‌ها تنها نمانند */
.content::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 46vw;
  height: 40vw;
  max-height: 620px;
  top: 26%;
  inset-inline-start: 8%;
  border-radius: 50%;
  filter: blur(100px);
  opacity: var(--aurora-op);
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--aurora-3), transparent 68%);
  animation: sy-drift-b 38s ease-in-out infinite reverse;
}

/* ------------------------------- Sidebar ------------------------------- */

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 16px 13px 13px;
  gap: 4px;
  border-radius: var(--radius-xl);
  background: var(--chrome);
  backdrop-filter: blur(var(--blur-lg)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
  position: relative;
  overflow: hidden;
}
/* درخشش ملایمی که از بالای منو پایین می‌آید */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 240px;
  background: linear-gradient(180deg, var(--accent-bg), transparent);
  pointer-events: none;
}
.sidebar > * {
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 18px;
}
.brand__logo {
  display: flex;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(139, 92, 246, 0.4));
}
.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.3px;
  background: linear-gradient(100deg, var(--text) 25%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -3px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: var(--fs-base);
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  text-align: start;
  position: relative;
  border: 1px solid transparent;
}
.nav__item .icn,
.nav__item > svg {
  transition: transform var(--t), color var(--t-fast);
}
.nav__item:hover {
  background: var(--glass-hi);
  color: var(--text);
}
.nav__item:hover .icn {
  transform: scale(1.12);
}
.nav__item:active {
  transform: scale(0.985);
}
.nav__item.is-active {
  background: linear-gradient(90deg, var(--accent-bg), transparent 85%);
  border-color: var(--glass-line);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.nav__item.is-active .icn {
  color: var(--accent);
}
/* ریل درخشان کنارهٔ گزینهٔ فعال */
.nav__item.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: -1px;
  top: 50%;
  transform: translateY(-50%);
  height: 55%;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px 1px var(--accent);
}
.nav__label {
  flex: 1;
}
.nav__badge {
  background: var(--red);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 20px;
  height: 19px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}
.nav__badge--dim {
  background: var(--glass-hi);
  color: var(--text-2);
  box-shadow: none;
}

.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--glass-hi);
  border: 1px solid var(--glass-line);
  text-align: start;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.side-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.side-card__icon {
  color: var(--green);
  display: flex;
}
.side-card--alert .side-card__icon {
  color: var(--amber);
  animation: sy-pulse 2.4s ease-in-out infinite;
}
.side-card--alert {
  background: var(--amber-bg);
  border-color: color-mix(in srgb, var(--amber) 26%, transparent);
}
.side-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.side-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.side-date {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 6px 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* -------------------------------- Content -------------------------------- */

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.topbar {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
}
.topbar__spacer {
  flex: 1;
}
.topbar__search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-inline-start: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--chrome);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  color: var(--text-3);
  font-size: var(--fs-sm);
  min-width: 280px;
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.topbar__search:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--accent-bg);
}
.topbar__search kbd {
  margin-inline-start: auto;
  background: transparent;
}

.main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.page {
  padding: 8px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ورود پلکانی محتوای صفحه — حسِ «چیده شدن» به‌جای «ظاهر شدن ناگهانی» */
.page > * {
  animation: sy-rise var(--t-slow) both;
}
.page > *:nth-child(1) { animation-delay: 0ms; }
.page > *:nth-child(2) { animation-delay: 45ms; }
.page > *:nth-child(3) { animation-delay: 90ms; }
.page > *:nth-child(4) { animation-delay: 135ms; }
.page > *:nth-child(n + 5) { animation-delay: 175ms; }

/* ------------------------------- Page head ------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.4;
}
.page-sub {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: 2px;
}
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* -------------------------------- Buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover:not(:disabled) {
  filter: brightness(1.09);
  box-shadow: 0 10px 26px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--ghost {
  background: var(--panel);
  border-color: var(--glass-line);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--panel-hover);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn--danger {
  background: var(--red);
  color: #fff;
}
.btn--danger-soft {
  background: var(--red-bg);
  color: var(--red);
  border-color: transparent;
}
.btn--danger-soft:hover {
  background: var(--red);
  color: #fff;
}
.btn--sm {
  padding: 5px 11px;
  font-size: var(--fs-sm);
  border-radius: 7px;
}
.btn--block {
  width: 100%;
}
.btn .icn {
  display: flex;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  flex: 0 0 auto;
}
.icon-btn:hover {
  background: var(--panel-hover);
  color: var(--text);
}
.icon-btn:active {
  transform: scale(0.9);
}
/* دکمه‌های نوار بالا روی شفق شناورند، پس خودشان شیشه‌اند */
.topbar > .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--chrome);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  color: var(--text-2);
}
.topbar > .icon-btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.icon-btn.is-primary:hover {
  background: var(--accent-bg);
  color: var(--accent);
}
.icon-btn.is-danger:hover {
  background: var(--red-bg);
  color: var(--red);
}
.icon-btn svg {
  display: block;
}

.link-btn {
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 5px;
  transition: background var(--t-fast);
}
.link-btn:hover {
  background: var(--accent-bg);
}

.icn {
  display: inline-flex;
  align-items: center;
}

/* --------------------------------- Cards --------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
  transition: border-color var(--t), transform var(--t);
}
/* خط نوریِ نازک روی لبهٔ بالایی — همان چیزی که سطح را «شیشه» نشان می‌دهد */
.card::before {
  content: '';
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  pointer-events: none;
}
.card--flush {
  padding: 0;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px 10px;
}
.card__head--pad {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* نشانِ کوچک کنار عنوان کارت — مرز بخش‌ها را بدون خط‌کشی مشخص می‌کند */
.card__title::before {
  content: '';
  width: 3px;
  height: 15px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px -1px var(--accent);
}
.card__desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: 2px;
}
.card__body {
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
}
@media (max-width: 1180px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------- KPI ----------------------------------
   عمداً از grid با ستون‌بندی ثابت استفاده نشده: وقتی تعداد کارت‌ها بر تعداد
   ستون‌ها بخش‌پذیر نباشد (مثلاً ۵ کارت در ۳ ستون)، ردیف آخر یک خانهٔ خالی
   می‌ماند. با flex-wrap هر ردیف مستقل فضای باقی‌مانده‌اش را بین کارت‌های
   همان ردیف پخش می‌کند، پس هیچ‌وقت جای خالی نمی‌ماند — در هر عرضی. */

.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kpi {
  --kpi: var(--text-3);
  /* سقفی برای عرض نمی‌گذاریم: اگر ردیف آخر یک یا دو کارت تنها ماند، باید
     بدون مانع تا انتهای ردیف رشد کند — وگرنه دقیقاً همان جای خالی برمی‌گردد
     که قرار بود از بین برود. صفحاتی با کارت کمتر (دفتر مالی، گزارش‌ها) هم
     همین‌طور خودبه‌خود کارت‌های بزرگ‌تری می‌گیرند، چون رقیب کمتری برای
     فضای ردیف دارند. */
  flex: 1 1 190px;
  background: var(--panel);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
/* هالهٔ رنگی که از گوشهٔ بالا به داخل کارت می‌ریزد */
.kpi::before {
  content: '';
  position: absolute;
  top: -55px;
  inset-inline-start: -35px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--kpi);
  opacity: 0.16;
  filter: blur(38px);
  pointer-events: none;
  transition: opacity var(--t);
}
.kpi:hover {
  border-color: color-mix(in srgb, var(--kpi) 45%, transparent);
  transform: translateY(-2px);
}
.kpi:hover::before {
  opacity: 0.3;
}
.kpi::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 3px;
  height: 100%;
  background: var(--kpi);
}
.kpi--blue { --kpi: var(--blue); }
.kpi--green { --kpi: var(--green); }
.kpi--red { --kpi: var(--red); }
.kpi--amber { --kpi: var(--amber); }
.kpi--violet { --kpi: var(--accent); }
.kpi--teal { --kpi: var(--teal); }

.kpi__top {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
  margin-bottom: 6px;
}
/* آیکن داخل یک مربعِ کم‌رنگ هم‌رنگ خودِ شاخص */
.kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--kpi);
  background: color-mix(in srgb, var(--kpi) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi) 22%, transparent);
}
.kpi__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
}
.kpi__value {
  font-size: calc(23px * var(--fs-scale));
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.kpi__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  /* کارت‌ها باریک‌اند؛ اگر متن دو خطی شد، خط‌ها هم‌اندازه بشکنند نه یک کلمهٔ تنها */
  text-wrap: balance;
}
.kpi .spark-wrap {
  margin-top: 6px;
}

/* --------------------------------- Charts --------------------------------- */

.chart-wrap {
  padding: 4px 12px 12px;
}
.chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.chart__grid {
  stroke: var(--line-soft);
  stroke-width: 1;
}
.chart__ylabel,
.chart__xlabel {
  fill: var(--text-3);
  font-size: 10.5px;
  font-family: inherit;
}
.chart__xlabel--dim {
  fill: var(--text-3);
  opacity: 0.6;
  font-size: 9.5px;
}
/* ستون‌ها: گرادیان عمودی (روشن در بالا) حس «نورخورده از بالا» می‌دهد و
   ستون تخت را برجسته نشان می‌دهد. سایهٔ رنگی خیلی کم‌جان، فقط برای جدا شدن
   ستون از پس‌زمینهٔ کارت — نه بیشتر، وگرنه زننده می‌شود. */
.chart__bar {
  transition: filter var(--t-fast);
}
.chart__bar--income {
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--accent) 40%, transparent));
}
.chart__bar--expense {
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--red) 38%, transparent));
}
.chart__bar:hover {
  filter: brightness(1.15) drop-shadow(0 3px 9px color-mix(in srgb, var(--accent) 55%, transparent));
}

/* رنگ استاپ‌های گرادیان از توکن‌های تم می‌آید تا با رنگ لهجهٔ کاربر عوض شود */
.grad-income-a { stop-color: color-mix(in srgb, var(--accent) 68%, #fff); }
.grad-income-b { stop-color: var(--accent); }
.grad-expense-a { stop-color: color-mix(in srgb, var(--red) 68%, #fff); }
.grad-expense-b { stop-color: var(--red); }

.legend {
  display: flex;
  gap: 14px;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
}
.dot--income { background: var(--accent); }
.dot--expense { background: var(--red); }

.donut-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
/* حلقه کمی از سطح کارت بلند می‌شود — سایه ملایم است تا شبیه استیکر نشود */
.donut {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.32));
}
:root[data-theme='light'] .donut {
  filter: drop-shadow(0 6px 14px rgba(24, 34, 60, 0.16));
}
.donut__track {
  stroke: var(--line-soft);
}
.donut__seg {
  transition: opacity var(--t-fast);
}
.donut-wrap:hover .donut__seg {
  opacity: 0.55;
}
.donut-wrap .donut__seg:hover {
  opacity: 1;
}
.donut__center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.donut__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.donut__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.plan-split {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 18px 18px;
  flex-wrap: wrap;
}
.plan-legend {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.plan-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}
.plan-legend__name {
  flex: 1;
  color: var(--text-2);
}

.spark-wrap {
  width: 100%;
  height: 34px;
}
.spark {
  width: 100%;
  height: 100%;
  display: block;
}
.spark__line {
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.spark__area {
  fill: var(--accent);
  opacity: 0.13;
}

.barlist {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 6px 18px 18px;
}
.barlist__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 12px;
  align-items: center;
}
.barlist__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  min-width: 0;
}
.barlist__track {
  height: 7px;
  background: var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.barlist__fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--t);
}
.barlist__value {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* --------------------------------- Toolbar --------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 400px;
}
.search-icon {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  display: flex;
  pointer-events: none;
}
.search-input {
  padding-inline-start: 36px !important;
}

.seg {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.seg__btn:hover {
  color: var(--text);
}
.seg__btn.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.seg__count {
  font-size: var(--fs-xs);
  opacity: 0.75;
  background: rgba(127, 127, 127, 0.18);
  border-radius: 8px;
  padding: 0 5px;
  min-width: 17px;
  text-align: center;
}
.seg__btn.is-active .seg__count {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.range-pick {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------- Bulkbar --------------------------------- */

.bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  flex-wrap: wrap;
}
.bulkbar__count {
  font-weight: 600;
  color: var(--accent);
  font-size: var(--fs-sm);
}
.bulkbar__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------------------------------- Table ---------------------------------- */

.table-scroll {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.table thead th {
  text-align: start;
  padding: 11px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  background: var(--panel-2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  letter-spacing: 0.02em;
}
.th-sort {
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast);
}
.th-sort:hover {
  color: var(--text);
}
.th-sort.is-active {
  color: var(--accent);
}
.th-sort__arrow {
  font-size: 8px;
  margin-inline-start: 3px;
}
.th-check {
  width: 40px;
  padding-inline-end: 0 !important;
}
.th-actions {
  width: 1%;
  text-align: end !important;
}

.table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.row {
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.row:hover {
  background: var(--panel-2);
  /* خط باریک کنارهٔ راستِ ردیف زیر نشانگر — ردیابی چشم در جدول‌های بلند (RTL) */
  box-shadow: inset -3px 0 0 var(--accent);
}
.row--expired .cell-user__name {
  color: var(--text-2);
}

.row-group td {
  background: var(--panel-2);
  padding: 7px 14px !important;
}
.row-group__inner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.row-actions {
  display: flex;
  gap: 1px;
  justify-content: flex-end;
  opacity: 0.45;
  transition: opacity var(--t-fast);
}
.row:hover .row-actions {
  opacity: 1;
}

.cb {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.cell-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 170px;
}
.cell-user__name {
  font-weight: 600;
  transition: color var(--t-fast);
}
.cell-user:hover .cell-user__name {
  color: var(--accent);
}
.cell-user__meta {
  display: flex;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  flex-wrap: wrap;
}

.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex: 0 0 auto;
  letter-spacing: -0.3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px -3px rgba(0, 0, 0, 0.6);
}

.date-cell__g {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.left-cell {
  min-width: 108px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.left-cell__num {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.left-cell__num.is-soon {
  color: var(--amber);
}
.left-cell__num.is-urgent {
  color: var(--red);
}
.left-cell__num.is-over {
  color: var(--red);
}

.price-cell {
  white-space: nowrap;
}
.note-cell {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

.progress {
  display: block;
  height: 5px;
  background: var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.progress--thin {
  height: 4px;
}
.progress__fill {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width var(--t);
}
.progress--soon .progress__fill {
  background: var(--amber);
}
.progress--over .progress__fill {
  background: var(--red);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.pill--active {
  background: var(--green-bg);
  color: var(--green);
}
.pill--expiring {
  background: var(--amber-bg);
  color: var(--amber);
}
.pill--expired {
  background: var(--red-bg);
  color: var(--red);
}
.pill--paused {
  background: var(--line-soft);
  color: var(--text-3);
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--plan-color, var(--blue));
  background: color-mix(in srgb, var(--plan-color, var(--blue)) 14%, transparent);
  white-space: nowrap;
}

.tag-mini {
  display: inline-flex;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--line-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.days-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--line-soft);
  color: var(--text-2);
  white-space: nowrap;
  border: 1px solid var(--line-soft);
}
.days-badge.is-soon {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 28%, transparent);
}
.days-badge.is-urgent,
.days-badge.is-over {
  background: var(--red-bg);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.tx-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tx-icon--income {
  background: var(--green-bg);
  color: var(--green);
}
.tx-icon--expense {
  background: var(--red-bg);
  color: var(--red);
}
.tx-amount {
  white-space: nowrap;
}
.tx-amount--income {
  color: var(--green);
}
.tx-amount--expense {
  color: var(--red);
}

.growth.is-up {
  color: var(--green);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.growth.is-down {
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}
.pager__info {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* -------------------------------- Mini list -------------------------------- */

.mini-list {
  display: flex;
  flex-direction: column;
  padding: 0 8px 10px;
}
.mini-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.mini-row:hover {
  background: var(--panel-2);
}
.mini-row__main {
  flex: 1;
  min-width: 0;
}
.mini-row__name {
  font-weight: 600;
  font-size: var(--fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.top-grid {
  display: flex;
  flex-direction: column;
  padding: 0 10px 12px;
}
.top-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.top-row:hover {
  background: var(--panel-2);
}
.top-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--line-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.top-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.top-name {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.top-total {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* ------------------------------- Empty state ------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 46px 20px;
  text-align: center;
}
.empty__icon {
  color: var(--text-3);
  opacity: 0.45;
  display: flex;
}
.empty__title {
  font-size: var(--fs-md);
  font-weight: 600;
}
.empty__sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
  max-width: 340px;
}
.empty .btn {
  margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   صفحهٔ باریک — موبایل و تبلت
   سایدبار از جریان چیدمان بیرون می‌رود و کشویی می‌شود؛ باقی صفحه همان‌طور
   می‌ماند چون چیدمان از قبل با flex و ویژگی‌های منطقی نوشته شده بود.
--------------------------------------------------------------------------- */

/* در عرض کامل دیده نمی‌شود؛ فقط زیر ۸۶۰ پیکسل ظاهر می‌شود */
.topbar__nav {
  display: none;
}

@media (max-width: 860px) {
  .shell {
    padding: 8px;
    gap: 0;
  }

  .topbar__nav {
    display: inline-grid;
    place-items: center;
  }

  .sidebar {
    position: fixed;
    inset-block: 8px;
    inset-inline-start: 8px;
    width: min(285px, 84vw);
    flex: none;
    z-index: 80;
    /* بسته: از لبهٔ همان سمتی که هست بیرون می‌رود */
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-slow), opacity var(--t);
  }

  [dir='rtl'] .sidebar {
    transform: translateX(105%);
  }

  .shell.is-nav-open .sidebar,
  [dir='rtl'] .shell.is-nav-open .sidebar {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* پردهٔ پشت منو. باید داخل .shell بنشیند: آن عنصر isolation:isolate دارد
     و یک زمینهٔ چیدمان تازه می‌سازد، پس پرده‌ای بیرون از آن روی سایدبار هم
     می‌افتد. ::before خودِ .content برای لکهٔ شفق گرفته شده، پس ::after. */
  .shell.is-nav-open .content::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--overlay);
    backdrop-filter: blur(2px);
  }

  .topbar {
    gap: 4px;
    padding: 0 2px;
  }

  .topbar__search {
    min-width: 0;
    flex: 1;
    margin-inline-start: 4px;
    padding: 8px 12px;
  }
  /* میان‌بر صفحه‌کلید روی موبایل معنایی ندارد */
  .topbar__search kbd {
    display: none;
  }

  .page {
    padding: 8px 10px 40px;
    gap: 14px;
  }

  .page-head {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .kpi {
    flex: 1 1 140px;
  }
}

@media (max-width: 700px) {
  /* افزودن عضو و پشتیبان سریع هر دو داخل خودِ صفحه‌ها هم هستند؛ در نوار
     باریک فقط جا را از جستجو می‌گیرند */
  .topbar__quick {
    display: none;
  }
}