/* ─── Material Symbols Rounded (self-hosted) ─── */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
}
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ─── Peyda Font ─── */
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-Thin.woff2') format('woff2'), url('../fonts/PeydaWeb-Thin.woff') format('woff'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-ExtraLight.woff2') format('woff2'), url('../fonts/PeydaWeb-ExtraLight.woff') format('woff'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-Light.woff2') format('woff2'), url('../fonts/PeydaWeb-Light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-Regular.woff2') format('woff2'), url('../fonts/PeydaWeb-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-Medium.woff2') format('woff2'), url('../fonts/PeydaWeb-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-SemiBold.woff2') format('woff2'), url('../fonts/PeydaWeb-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-Bold.woff2') format('woff2'), url('../fonts/PeydaWeb-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-ExtraBold.woff2') format('woff2'), url('../fonts/PeydaWeb-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaWeb-Black.woff2') format('woff2'), url('../fonts/PeydaWeb-Black.woff') format('woff'); font-weight: 900; font-display: swap; }

/* ── رنگ‌ها، فاصله‌ها و تایپوگرافی در tokens.css تعریف شده‌اند ── */

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Body ─── */
body {
  font-family: var(--font-sans);
  background-color: var(--surface-page);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.55;
  direction: rtl;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Material Symbols ─── */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 20px;
  line-height: 1;
  direction: ltr;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════════
   پوسته‌ی سامانه — هم‌ساختار با پنل مدیریت «اطلس کیهان»:
     هدر تمام‌عرض  →  (سایدبار + محتوا)  →  فوتر طلایی
══════════════════════════════════════════════════════════════════ */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── هدر بالا — با اسکرول ثابت می‌ماند تا ناوبری همیشه در دسترس باشد ─── */
.site-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header-inner {
  padding: var(--space-3) var(--space-5);
  min-height: 72px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

/* اکشن‌ها همیشه به لبه‌ی مقابل لوگو چسبیده‌اند */
.site-header-actions { margin-inline-start: auto; }

/* ≥۱۲۸۰: منو در همان سطر لوگو جا می‌شود */
@media (min-width: 1280px) {
  .main-nav { flex: 1; }
}

/* <۱۲۸۰: منو سطر خودش را می‌گیرد، وگرنه آیتم‌هایش بریده می‌شوند */
@media (max-width: 1279px) {
  .site-header-inner { row-gap: 0; padding-bottom: 0; }
  .main-nav {
    order: 3;
    flex-basis: 100%;
    padding: var(--space-1) 0;
    margin-top: var(--space-1);
  }
}

.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 56px; width: auto; display: block; }

/* لوگو بر اساس حالت — سفید روی شب، تیره روی روز */
.site-logo .logo-on-light { display: none; }
:root[data-theme="light"] .site-logo .logo-on-dark  { display: none; }
:root[data-theme="light"] .site-logo .logo-on-light { display: block; }

.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* کاربر جاری در هدر */
.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.header-user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  white-space: nowrap;
}
.header-user-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.header-icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.header-icon-btn:hover { color: var(--text-strong); background: var(--surface-hover); }
.header-icon-btn.is-danger:hover { color: var(--expense-ink); background: var(--expense-soft); }
/* تنظیمات از سایدبار به هدر آمده، پس حالت «صفحه‌ی جاری» را اینجا نشان می‌دهیم */
.header-icon-btn.active,
.header-icon-btn.is-filtered { color: var(--brand-ink); background: var(--brand-soft); }

/* ─── نوار بازه‌ی تاریخ سراسری (در هدر) ───────────────────────────
   قبلاً این بخش سهواً حذف شده بود و دکمه با استایل پیش‌فرض مرورگر
   (سفید) رندر می‌شد. اینجا تعمداً کنار .header-icon-btn نگه داشته
   می‌شود تا در پاکسازی‌های بعدی دوباره گم نشود. */
.date-bar { position: relative; flex-shrink: 0; }


.date-pop {
  position: absolute;
  /* از لبه‌ی پایانی دکمه باز می‌شود نه ابتدایی: دکمه ۳۶ پیکسلی نزدیک لبه‌ی
     صفحه است و با inset-inline-start پاپ‌آپ ۲۴۰ پیکسلی از کادر بیرون می‌زد. */
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 400;
  width: 240px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
}

/* بازه‌ی جاری، بالای پاپ‌آپ — چون دکمه دیگر متن ندارد */
.sdp-current {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

/* ─── انتخاب ماه — حالت پیش‌فرض تقویم ─── */
.sdp-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.sdp-year > span {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
.sdp-ystep {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.sdp-ystep:hover:not(:disabled) { color: var(--text-strong); background: var(--surface-hover); }
.sdp-ystep:disabled { opacity: 0.3; cursor: not-allowed; }
.sdp-ystep .material-symbols-rounded { font-size: 18px; }

.sdp-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.sdp-month {
  padding: var(--space-2) var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.sdp-month:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-strong); }
.sdp-month:disabled { opacity: 0.3; cursor: not-allowed; }
.sdp-month.is-selected {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-on);
  font-weight: var(--weight-medium);
}

.sdp-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sdp-row label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  width: 18px;
  flex-shrink: 0;
  margin: 0;
}
.sdp-input {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 6px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-strong);
  outline: none;
  text-align: center;
  direction: ltr;
}
.sdp-input:focus { border-color: var(--brand); }

.sdp-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.sdp-apply {
  flex: 1;
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: var(--weight-medium);
  padding: 7px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--brand-on);
  cursor: pointer;
}
.sdp-apply:hover { background: var(--brand-hover); }
.sdp-alltime {
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 7px var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.sdp-alltime:hover { border-color: var(--brand); color: var(--brand-ink); }

/* ─── بدنه ─── */
.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ─── ناوبری اصلی — نوار افقی داخل هدر ──────────────────────────
   قبلاً ستون کناری ۲۴۰ پیکسلی بود. برداشته شد چون برای هفت بخش
   جای زیادی می‌گرفت و چون ارتفاعش کوتاه‌تر از صفحه بود، شبیه یک
   کارت شناور در گوشه دیده می‌شد. حالا یک نوار است که در عرض‌های
   بزرگ کنار لوگو می‌نشیند و در عرض‌های کوچک‌تر به سطر بعد می‌رود. */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-link .material-symbols-rounded { font-size: 18px; }
.nav-link:hover { background: var(--surface-hover); color: var(--text-strong); }

/* بخش فعال — در نوار افقی، قرص طلایی خواناتر از خط کناری است */
.nav-link.active {
  color: var(--brand-ink);
  background: var(--brand-soft);
  font-weight: var(--weight-medium);
}

/* ─── محتوای اصلی ─── */
.app-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
}

/* ─── فوتر طلایی — امضای برند کیهان ─── */
.site-footer {
  flex-shrink: 0;
  background: var(--brand);
  color: var(--brand-on);
}

.site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.site-footer-logo { height: 40px; width: auto; flex-shrink: 0; }

.site-footer-contact {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-inline-start: auto;
}
.site-footer-contact li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.site-footer a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast); }
.site-footer a:hover { opacity: 0.7; }
.site-footer .material-symbols-rounded { font-size: 17px; flex-shrink: 0; }

/* ─── دسکتاپ ─── */
@media (min-width: 1024px) {
  .app-main { padding: var(--space-6); }

  .site-footer-logo { height: 48px; }
}

/* ─── موبایل و تبلت ─── */
@media (max-width: 1023px) {
  .site-header-inner { padding: var(--space-2) var(--space-4) 0; }
  .site-logo img     { height: 40px; }
  .site-footer-inner { padding: var(--space-3) var(--space-4); }
}

/* ─── موبایل کوچک: هدر را تا حد ضروری فشرده می‌کنیم ─── */
@media (max-width: 640px) {
  .site-header-inner { height: 64px; padding: 0 var(--space-3); gap: var(--space-2); }
  .site-logo img     { height: 32px; }

  .site-header-actions { gap: var(--space-1); }

  /* نام و نقش کاربر جا نمی‌شود — فقط دکمه‌ی خروج می‌ماند */
  .header-user { display: none; }

  .date-pop          { width: min(240px, calc(100vw - var(--space-6))); }

  .header-icon-btn { width: 32px; height: 32px; }
  .header-icon-btn .material-symbols-rounded { font-size: 18px; }

  .app-main { padding: var(--space-3); }
}

/* هیچ صفحه‌ای نباید افقی اسکرول شود — جدول‌ها داخل ظرف خودشان اسکرول می‌کنند.
   clip به‌جای hidden: مقدار hidden روی body یک ظرف اسکرول می‌سازد و همان
   باعث می‌شد position:sticky سایدبار کار نکند. clip فقط می‌بُرد. */
html, body { overflow-x: clip; }
.app-shell, .app-body, .app-main, .container { min-width: 0; max-width: 100%; }

/* ─── ظرف محتوا — همان عرض max-w-7xl اطلس ─── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ─── MD3 Card (Elevated) ─── */
/* پنل — گوشه‌ی تیز و حاشیه‌ی نازک، بدون سایه. مثل bg-panel اطلس. */
.card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
}


.card-body { padding: 16px; }

/* ─── MD3 Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-sans);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.1px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
  vertical-align: middle;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.btn:hover::after  { opacity: 0.08; }
.btn:focus::after  { opacity: 0.12; }
.btn:active::after { opacity: 0.12; }

/* Filled */
.btn-primary {
  background-color: var(--brand);
  color: var(--brand-on);
}
.btn-primary:hover { color: var(--brand-on); box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.12); }

/* Outlined */
.btn-outline {
  background-color: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--border-strong);
  padding: 0 23px;
}
.btn-outline:hover { color: var(--brand-ink); }

/* Tonal */
.btn-secondary {
  background-color: var(--brand-soft);
  color: var(--warn-on);
}

/* Small */
.btn-sm {
  padding: 0 16px;
  height: 32px;
  font-size: 13px;
}

/* دکمه‌ی تیک حسابدار — در سربرگ صفحات جزئیات */
.btn-mark, .btn-mark-active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.btn-mark {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}
.btn-mark:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-mark-active {
  border: 1px solid var(--income);
  background: var(--income-soft);
  color: var(--income-ink);
  font-weight: var(--weight-medium);
}
.btn-mark .material-symbols-rounded,
.btn-mark-active .material-symbols-rounded { font-size: 17px; }

/* آپلود فایل */
.upload-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 34px; font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.upload-label:hover { border-color: var(--brand-edge); color: var(--brand-ink); }

/* Icon Button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  text-decoration: none;
  color: var(--text-muted);
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s;
  vertical-align: middle;
}

.btn-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-icon:hover::after  { opacity: 0.08; }
.btn-icon:active::after { opacity: 0.12; }

.btn-icon-edit { color: var(--brand-ink); }
.btn-icon-del  { color: var(--expense); }

/* ─── Tables ─── */
.table-wrapper { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

/* سربرگ جدول با خط طلایی ۲ پیکسلی — امضای جدول‌های اطلس */
thead tr { border-bottom: 2px solid var(--brand); }

th {
  padding: var(--space-4);
  text-align: start;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
  font-size: var(--text-base);
  background: none;
}

td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-strong);
  font-size: var(--text-base);
  text-align: start;
}

td .btn-icon {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

tbody tr:last-child td { border-bottom: none; }

/* راه‌راهِ ملایم ردیف زوج — کمک به چشم برای دنبال‌کردن یک ردیف در
   جدول‌های پهن و پرستون بدون گم‌کردن جای خود؛ hover همیشه رویش برتری دارد. */
tbody tr:nth-child(even) td { background-color: var(--surface-zebra); }
tbody tr:hover td { background-color: var(--surface-hover); }

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.badge-success { background-color: var(--income-soft);       color: var(--income-on); }
.badge-warning { background-color: var(--brand-soft);      color: var(--warn-on); }
.badge-danger  { background-color: var(--expense-soft);          color: var(--expense-on); }
.badge-info    { background-color: var(--brand-soft);        color: var(--warn-on); }
.badge-gray    { background-color: var(--surface-sunken); color: var(--text-muted); }

/* ─── Colored text labels (no background) ─── */
.label-success { color: var(--income-ink); font-weight: 600; font-size: 13px; }
.label-warning { color: var(--warn-ink); font-weight: 600; font-size: 13px; }
.label-danger  { color: var(--expense-ink); font-weight: 600; font-size: 13px; }
.label-info    { color: var(--brand-ink); font-weight: 600; font-size: 13px; }
.label-gray    { color: var(--text-muted); font-weight: 500; font-size: 13px; }

/* ─── فرم‌ها ───────────────────────────────────────────────────
   واحد فیلد، کلاس .field است (تعریفش کنار پاپ‌آپ). سیستم برچسب
   شناور MD3 با :has() حذف شد — شکننده بود و با زبان اطلس نمی‌خواند.
──────────────────────────────────────────────────────────── */

label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
}

/* ورودی‌ها — هم‌مشخصات با Input اطلس */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 9px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-strong);
  background-color: transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  direction: rtl;
  appearance: none;
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F7163' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 38px;
}

/* ─── Alerts ─── */
.alert {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 14px;
  border: none;
}

.alert-success { background-color: var(--income-soft);  color: var(--income-on); }
.alert-danger  { background-color: var(--expense-soft);     color: var(--expense-on); }
.alert-warning { background-color: var(--brand-soft); color: var(--warn-on); }
.alert-info    { background-color: var(--brand-soft);   color: var(--warn-on); }

/* فوتر قدیمی حذف شد — جایش .site-footer طلایی در بخش پوسته آمده است. */

/* ══════════════════════════════════════════════════════════════════
   پاپ‌آپ — مرجع واحد سامانه، هم‌مشخصات با dialog اطلس.
   ساختار را از قالب _ui.html بسازید؛ اینجا فقط ظاهر است.
     پرده: سیاهی ۱۰٪ + بلور     پنل: surface-raised + حلقه‌ی ۱px
     دکمه‌ی بستن: شناور در گوشه   ورودی‌ها: پس‌زمینه‌ی ۴٪
══════════════════════════════════════════════════════════════════ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: var(--space-4);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; animation: modal-fade var(--dur-fast) var(--ease); }

@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-pop  { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: none } }

.modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--ring), var(--shadow-lg);
  font-size: var(--text-base);
  color: var(--text-body);
  animation: modal-pop var(--dur-fast) var(--ease);
}

.modal-box-sm { max-width: 384px; }
.modal-box-lg { max-width: 672px; }

/* سربرگ — بدون خط جداکننده، مثل اطلس */
.modal-header {
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
}
.modal-header h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  line-height: 1.2;
}

/* دکمه‌ی بستن — شناور در گوشه‌ی مقابل عنوان */
.modal-close {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.modal-close:hover { color: var(--text-strong); background: var(--surface-hover); }
.modal-close .material-symbols-rounded { font-size: 18px; }

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0;
  overflow: visible;
  flex: none;
}

/* پاورقی — تا لبه‌ی پنل کشیده می‌شود */
/* پس‌زمینه‌ی پاپ‌آپ یکدست است — پاورقی رنگ جدا ندارد، فقط یک خط
   جداکننده‌ی ظریف بالای دکمه‌ها، داخل همان فاصله‌ی داخلی پنل.
   (قبلاً --surface-sunken داشت که محسوساً تیره‌تر از پنل بود و
   به‌شکل یک کادر مشکی جدا دیده می‌شد.) */
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* ─── فیلد فرم — واحد مشترک داخل و بیرون پاپ‌آپ ─── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  margin: 0;
}
.field-hint  { font-size: var(--text-sm); color: var(--text-muted); }
.field-error { font-size: var(--text-sm); color: var(--expense-ink); }

/* گرید فیلدها — خودتنظیم، برای فرم‌های کوتاه (پاپ‌آپ‌ها) که عرضشان
   خودش محدود است. در فرم‌های تمام‌صفحه از .field-stack استفاده کنید. */
.field-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.field-full { grid-column: 1 / -1; }

/* ─── فرم‌های تمام‌صفحه — استاندارد مدرن: تک‌ستونی و باریک ───────────
   حتی اطلس تقریباً تک‌ستونی است (فقط نام/نام‌خانوادگی کنار هم).
   میدان‌های ناهم‌جنس (تاریخ، مبلغ، طرف، شرح) نباید کنار هم چیده شوند —
   فقط دو فیلد کوتاه و مفهوماً یکی (مثل از‌حساب/به‌حساب) می‌توانند
   جفت شوند، آن هم با .field-pair.
──────────────────────────────────────────────────────────────── */
.form-narrow { max-width: 640px; }

.field-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* ورودی‌های داخل پاپ‌آپ پس‌زمینه‌ی ملایم دارند — مثل اطلس */
.modal-box input[type="text"],
.modal-box input[type="password"],
.modal-box input[type="number"],
.modal-box select,
.modal-box textarea {
  background-color: var(--field-fill);
}

/* ─── Dot indicators ─── */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot.green  { background-color: var(--income); }
.dot.red    { background-color: var(--expense); }

/* ─── Cat actions hover ─── */
.cat-actions { opacity: 0; transition: opacity 0.15s; }
tr:hover .cat-actions,
div:hover > .cat-actions { opacity: 1; }

/* ─── کلید دوحالته‌ی درآمد/هزینه — سگمنتد، تیزگوشه ─── */
.dir-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.dir-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--dur-fast);
  margin: 0;
}
.dir-opt:hover { color: var(--text-strong); }

.dir-opt:has(input:checked).dir-opt-income {
  background: var(--income-soft);
  border-color: var(--income);
  color: var(--income-ink);
  font-weight: var(--weight-medium);
}
.dir-opt:has(input:checked).dir-opt-expense {
  background: var(--expense-soft);
  border-color: var(--expense);
  color: var(--expense-ink);
  font-weight: var(--weight-medium);
}

.dir-opt input[type="radio"] { display: none; }

/* ─── Autocomplete dropdown ─── */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; top: calc(100% + 2px); right: 0; left: 0;
  z-index: 200;
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-height: 220px; overflow-y: auto;
  box-shadow: var(--shadow-md);
  display: none;
}
.ac-list.open { display: block; }
.ac-item {
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border-subtle);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--surface-sunken); }

/* ─── Table tfoot ─── */
tfoot tr {
  background-color: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
}

tfoot td { border-bottom: none; padding: var(--space-4); }

/* ─── Links ─── */
a { color: var(--brand-ink); }
a:hover { opacity: 0.85; }

/* ─── رنگ متن درآمد/هزینه ─── */
.text-income  { color: var(--income-ink); }
.text-expense { color: var(--expense-ink); }

/* ─── Table Cards: edge-to-edge (مدل اقلام فاکتورها) ─── */
.card-body:has(> .table-wrapper) { padding: 0; }

/* ══════════════════════════════════════════════════════════════════
   ردیف‌های تکرارشونده‌ی فرم — اقلام فاکتور، تخصیص پرداخت، موعدها
══════════════════════════════════════════════════════════════════ */

.repeat-rows { display: flex; flex-direction: column; }

.repeat-row {
  position: relative;
  padding: var(--space-4);
  padding-inline-end: calc(var(--space-4) + 40px);
  border-bottom: 1px solid var(--border-subtle);
}
.repeat-row:last-child { border-bottom: none; }
.repeat-row:nth-child(even) { background: var(--surface-zebra); }
.repeat-row:focus-within { background: var(--surface-hover); }

/* دکمه‌ی حذف ردیف — شناور در گوشه، هم‌الگو با modal-close */
.repeat-row > .btn-icon-del {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
}

/* شبکه‌ی داخل ردیف — ستون‌ها خودشان جا باز می‌کنند */
.repeat-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.repeat-grid .col-narrow { max-width: 110px; }

/* برچسب کوچک بالای ورودی داخل ردیف */
.repeat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 5px;
}

.repeat-value {
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  color: var(--text-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-bottom: 8px;
}

/* نوار جمع پایین پنل */
.total-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.total-bar.split { justify-content: space-between; }
.total-bar:not(.split) { justify-content: flex-end; }
.total-bar .total-label { font-size: var(--text-base); color: var(--text-muted); }
.total-bar .total-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* نوار دکمه‌های پایین فرم */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

/* برچسب انتخاب فایل */
.upload-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.upload-label:hover { border-color: var(--brand); color: var(--brand-ink); }
.upload-label .material-symbols-rounded { font-size: 17px; }

/* ─── تکمیل خودکار (انتخاب طرف) ─── */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline: 0;
  z-index: 200;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: none;
}
.ac-list.open { display: block; }
.ac-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text-body);
  border-bottom: 1px solid var(--border-subtle);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--surface-hover); color: var(--text-strong); }

/* ─── فهرست سرفصل‌ها در تنظیمات ─── */
.cat-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.cat-type { margin-bottom: var(--space-4); }
.cat-type-name {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 5px var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: background var(--dur-fast);
}
.cat-item:hover { background: var(--surface-hover); }

/* حالت شب دیگر override جداگانه ندارد — توکن‌های tokens.css خودشان
   در data-theme="dark" بازتعریف می‌شوند و همه‌ی قواعد بالا را می‌پوشانند. */

/* ─── نوار صفحه‌بندی (داخل پنل جدول) ─── */
.pag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.pag-total { font-size: var(--text-sm); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════
   نوار ابزار فهرست‌ها — الگوی «جستجو + فیلتر + شمارنده» اطلس
══════════════════════════════════════════════════════════════════ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}

.toolbar-search {
  position: relative;
  flex: 1 1 240px;
  max-width: 320px;
  min-width: 0;
}
.toolbar-search .material-symbols-rounded {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-faint);
  pointer-events: none;
}
.toolbar-search input {
  width: 100%;
  height: 40px;
  padding-inline-start: 38px;
  padding-inline-end: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
.toolbar-search input:focus {
  outline: none;
  border-color: var(--brand);
  border-width: 1px;
  padding-inline-start: 38px;
}

.toolbar-count { margin-inline-start: auto; font-size: var(--text-base); color: var(--text-muted); white-space: nowrap; }

/* ─── چیپ فیلتر فعال ─── */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  padding: 3px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: none;
}
.fchip button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  padding: 0 2px;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}
.fchip button:hover { opacity: 1; }

.fchip-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 4px var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.fchip-clear:hover { color: var(--text-strong); background: var(--surface-hover); }

/* ══════════════════════════════════════════════════════════════════
   سربرگ ستون — مرتب‌سازی و فیلتر در یک پاپ‌آور
══════════════════════════════════════════════════════════════════ */

.tbl-list { table-layout: fixed; }
.th-col { position: relative; }

.th-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast);
}
.th-head:hover { color: var(--brand-ink); }
.th-col-sorted .th-head { color: var(--brand-ink); }

.th-caret { font-size: var(--text-xs); opacity: 0.4; flex-shrink: 0; transition: opacity var(--dur-fast); }
.th-col-sorted .th-caret { opacity: 1; }

.th-f-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

/* position:fixed تا پاپ‌آور از overflow جدول و پنل بیرون بزند.
   مختصاتش را positionPop() در shared.js حساب می‌کند. */
.col-pop {
  display: none;
  position: fixed;
  z-index: 300;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-width: 200px;
  max-width: 260px;
  box-shadow: var(--shadow-lg);
  direction: rtl;
  white-space: normal;
  font-weight: var(--weight-normal);
}
.col-pop.open { display: block; }

.col-pop label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-2) var(--space-1) var(--space-1);
  font-weight: var(--weight-normal);
}
.col-pop input, .col-pop select {
  width: 100%;
  box-sizing: border-box;
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 6px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-strong);
  margin-bottom: var(--space-2);
  outline: none;
}
.col-pop input:focus, .col-pop select:focus { border-color: var(--brand); }

.pop-btns { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.pop-btns button {
  flex: 1;
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 6px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
}
.pop-btns button:first-child { background: var(--brand); color: var(--brand-on); font-weight: var(--weight-medium); }
.pop-btns button:first-child:hover { background: var(--brand-hover); }
.pop-btns button:not(:first-child) { background: var(--surface-hover); color: var(--text-muted); }

.pop-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 var(--space-1) var(--space-1); }
.pop-chip {
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 3px var(--space-2);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.pop-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.pop-chip.active { background: var(--brand); color: var(--brand-on); border-color: var(--brand); }

.cpop-sort-btn {
  display: block;
  width: 100%;
  padding: 7px var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-body);
  cursor: pointer;
  text-align: start;
  transition: background var(--dur-fast);
  white-space: nowrap;
}
.cpop-sort-btn:hover { background: var(--surface-hover); }
.cpop-sort-btn.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--weight-medium); }
.cpop-sort-clear { color: var(--expense-ink) !important; }
.cpop-sort-clear:hover { background: var(--expense-soft) !important; }

.cpop-divider { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }

/* ─── Search Box ─── */
/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — ناوبری در بخش «پوسته» بالاتر مدیریت می‌شود.
   اینجا فقط تنظیمات محتوای صفحات می‌آید.
══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .page-title { flex-wrap: wrap; gap: var(--space-2); }
  .page-title h1 { font-size: var(--text-md); }

  /* مودال → شیت پایین صفحه.
     دیگر !important لازم نیست: قانون پایه‌ی .modal-box از این ضعیف‌تر است
     چون داخل @media نیست و ویژگی سلکتور یکسان است، پس این یکی برنده می‌شود.
     padding پرده هم صفر می‌شود، وگرنه شیت به لبه‌ی پایین نمی‌چسبد. */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   واژگان مشترک اطلس — عنوان صفحه، پنل، چیپ، حالت خالی
══════════════════════════════════════════════════════════════════ */

/* ─── عنوان صفحه — لوزی طلایی + عنوان طلایی + خط جداکننده ─── */
.page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.page-title-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.page-title-main::before {
  content: '';
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--brand);
  transform: rotate(45deg);
}

.page-title h1 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--brand-ink);
  letter-spacing: 0;
}

.page-title-meta {
  font-size: var(--text-base);
  color: var(--text-muted);
}

.page-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ─── گرید خودتنظیم — ستون‌ها خودشان جا باز می‌کنند ─── */
.grid-auto {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: var(--space-4);
}
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ─── کارت شاخص (KPI) ─── */
.kpi {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-inline-start: 2px solid var(--border-strong);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.kpi.is-income  { border-inline-start-color: var(--income); }
.kpi.is-expense { border-inline-start-color: var(--expense); }
.kpi.is-brand   { border-inline-start-color: var(--brand); }

.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.kpi-label { font-size: var(--text-base); color: var(--text-muted); }
.kpi-icon  { display: inline-flex; color: var(--text-faint); }
.kpi-icon.is-income  { color: var(--income); }
.kpi-icon.is-expense { color: var(--expense); }
.kpi-icon.is-brand   { color: var(--brand-ink); }

.kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.kpi-value.is-income  { color: var(--income-ink); }
.kpi-value.is-expense { color: var(--expense-ink); }
.kpi-unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  margin: 0 var(--space-1);   /* متقارن — در RTL و LTR هر دو درست */
}

.kpi-break {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.kpi-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.kpi-row strong { font-weight: var(--weight-medium); }

/* ─── چیپ ─── */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-xs);
  background: var(--surface-hover);
  padding: 2px var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-body);
  white-space: nowrap;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ─── حالت خالی ─── */
.empty-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  padding: var(--space-10) var(--space-5);
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* ─── جعبه‌ی تأکیدی با نوار طلایی ─── */
.accent-box {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-inline-start: 2px solid var(--brand);
  padding: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.9;
}

/* ─── سرصفحه‌ی بخش داخل پنل ─── */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.panel-head h2 {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--text-strong);
}
.panel-head .hint { font-size: var(--text-sm); color: var(--text-muted); }

/* لینکی که ظاهر «راهنما» دارد باز هم هدف لمسی است — ارتفاع خط ۱۹px
   کمتر از حداقل ۲۴px استاندارد بود، پس برای انگشت جا باز می‌کنیم. */
a.hint {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
}
a.hint:hover { color: var(--brand-ink); }

/* لینک‌های تکی داخل «مقدار» و سلول جدول (طرف، حساب، شماره فاکتور) هم
   هدف لمسی‌اند؛ ارتفاع خطشان ۲۰px بود، کمتر از حداقل ۲۴px. */
.info-value > a,
td > a { display: inline-flex; align-items: center; min-height: 24px; }

/* عدد پولی.
   direction را دست نمی‌زنیم: رشته‌ی «۲۱۶,۵۶۰,۰۰۰» در متن RTL خودش
   درست رندر می‌شود، ولی direction:ltr باعث می‌شد بلوک به چپ بچسبد و
   سربرگ فارسی ستون هم LTR شود. فقط ارقام هم‌عرض و بدون شکست خط. */
.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* سلول داده و عدد بزرگ کارت، بلوک LTR ایزوله می‌شوند تا علامت منفی
   سمت چپ عدد بنشیند؛ ترازشان صریح راست است (لبه‌ی شروع در RTL).
   سربرگ ستون دست‌نخورده RTL می‌ماند چون متنش فارسی است. */
td.num, .kpi-value.num { direction: ltr; unicode-bidi: isolate; }
td.num, th.num, .kpi-value.num { text-align: right; }
th.num .th-head { justify-content: flex-end; }

/* ─── تیک «ثبت در دفتر» داخل جدول — مشترک بین فهرست‌ها ─── */
.mark-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-faint);
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.mark-btn:hover { background: var(--surface-hover); color: var(--text-muted); }
.mark-btn.is-marked { color: var(--income); }
.mark-btn .material-symbols-rounded { font-size: 18px; }
.mark-btn[disabled] { cursor: default; }
.mark-btn[disabled]:hover { background: none; }


/* ══════════════════════════════════════════════════════════════════
   صفحات جزئیات — فهرست «برچسب / مقدار» و چیدمان دوستونی
══════════════════════════════════════════════════════════════════ */

.detail-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: var(--space-4);
}

.info-list { display: flex; flex-direction: column; }

.info-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.info-row:last-child { border-bottom: none; }

.info-label {
  flex: 0 0 38%;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.info-value {
  flex: 1;
  min-width: 0;
  color: var(--text-strong);
  font-size: var(--text-base);
}
.info-value.is-strong { font-weight: var(--weight-semi); }

/* شماره‌ی حساب، کارت و شبا — تک‌عرض و چپ‌به‌راست، هرجای سامانه */
.is-mono { font-family: var(--font-mono); direction: ltr; text-align: start; }

/* ردیف مبلغ — مقدار در لبه‌ی مقابل می‌نشیند */
.info-row.is-amount .info-value { text-align: end; direction: ltr; font-variant-numeric: tabular-nums; }

/* نوار عمل‌های بالای صفحه‌ی جزئیات */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* وضعیت برجسته در بالای پنل تسویه */
.status-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.status-hero .badge { font-size: var(--text-md); padding: 6px var(--space-4); }

/* ══════════════════════════════════════════════════════════════════
   تب — مؤلفه‌ی مشترک. ساختار:
     <div class="tabs" data-tabs="KEY">
       <button class="tab-btn active" data-tab="a">…</button>
     </div>
     <div class="tab-panel active" data-tabs="KEY" data-panel="a">…</div>
   منطق سوییچ در shared.js است؛ هیچ صفحه‌ای نباید خودش بنویسد.
══════════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle);
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab-btn:hover { color: var(--text-strong); }
.tab-btn.active {
  color: var(--brand-ink);
  border-bottom-color: var(--brand);
  font-weight: var(--weight-medium);
}
.tab-btn .material-symbols-rounded { font-size: 17px; }
.tab-count { color: var(--text-muted); font-size: var(--text-sm); }

/* ─── نوار نسبت — یک مؤلفه برای سن مطالبات و سهم سرفصل‌ها ─── */
.mini-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.mini-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width var(--dur-base) var(--ease);
}
.mini-bar.is-income  > span { background: var(--income); }
.mini-bar.is-expense > span { background: var(--expense); }
.mini-bar.is-warn    > span { background: var(--warn); }

/* ردیف «برچسب — مبلغ» با نوار زیرش */
.bar-row { margin-bottom: var(--space-3); }
.bar-row:last-child { margin-bottom: 0; }
.bar-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 6px;
}
.bar-row-label { font-size: var(--text-base); color: var(--text-body); }
.bar-row-meta  { font-size: var(--text-sm); color: var(--text-muted); }

/* تغییر نسبت به دوره‌ی قبل، کنار عدد اصلی کارت */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-inline-start: var(--space-2);
}
.kpi-delta .material-symbols-rounded { font-size: 15px; }
.kpi-delta.is-up   { color: var(--income-ink); }
.kpi-delta.is-down { color: var(--expense-ink); }
.kpi-delta.is-flat { color: var(--text-muted); }

/* ─── ردیف تنظیمات: عنوان و توضیح در یک سو، کنترل در سوی دیگر ─── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.setting-row-title {
  font-size: var(--text-base);
  color: var(--text-strong);
  margin-bottom: 2px;
}

/* ─── کلید دو حالته ─── */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--field-fill);
  cursor: pointer;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.switch-knob {
  position: absolute;
  top: 50%;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  transform: translateY(-50%);
  transition: inset-inline-start var(--dur-base), background var(--dur-base);
}
.switch.is-on {
  background: var(--brand);
  border-color: var(--brand);
}
.switch.is-on .switch-knob {
  inset-inline-start: 21px;
  background: var(--brand-on);
}
.switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }