/* ── فونت لوکال Vazirmatn ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── متغیرها ──────────────────────────────────────────────────────────── */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6ea;
  --text: #16202c;
  --text-muted: #6b7785;

  --primary: #1c5fb0;
  --primary-soft: #eaf1fb;
  --income: #12805c;
  --expense: #c0392b;
  --transfer: #b07515;

  --radius: 10px;
  --sidebar-w: 232px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

/* ── پایه ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* منوی کناریِ پنهان روی موبایل از لبه بیرون می‌زند و صفحه را افقی
   می‌لغزاند؛ در حالت راست‌به‌چپ این یعنی محتوا از سمت راست بریده می‌شود. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.5; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--text-muted); }

/* ── لینک‌ها — قاعده پایه ─────────────────────────────────────────────
 *
 * ⚠️ **این قاعده نبود و همان باگی را ساخت که یک بار برای دکمه‌ها حل
 * شده بود.**
 *
 *     تا فاز ۵ فقط `.btn` و `.row-actions a` استایل داشتند. هر لینک
 *     محتوایی — نام رکورد در جدول، لینک داخل کادر هشدار، لینک وسط
 *     متن — به هیچ قاعده‌ای نمی‌خورد و به پیش‌فرض مرورگر می‌افتاد:
 *     آبی روشن با زیرخط، شبیه صفحه‌ای که CSS ندارد.
 *
 *     راه‌حل قبلی روی *کلاس دکمه* اعمال شده بود نه روی خودِ `a`، پس با
 *     هر فاز تازه دوباره برمی‌گشت. حالا قاعده روی خودِ عنصر است، پس
 *     هر لینکی که در فازهای بعد اضافه شود خودکار پوشش دارد و لازم
 *     نیست کسی یادش بماند.
 *
 *     بررسی خودکارش در `check_links.py` است: سبک **محاسبه‌شده** هر
 *     لینک در مرورگر واقعی خوانده می‌شود، نه فایل CSS.
 */
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover,
a:focus-visible { text-decoration: underline; }

/* نام رکورد در جدول مثل متن عادی دیده می‌شود — جدولی که همه نام‌هایش
   آبی باشند خوانده نمی‌شود. با hover معلوم می‌شود کلیک‌شدنی است. */
.table td a {
  color: var(--text);
  font-weight: 500;
}
.table td a:hover,
.table td a:focus-visible { color: var(--primary); text-decoration: underline; }

/* لینک داخل کادر هشدار رنگ خودِ کادر را می‌گیرد تا با متنش یکی باشد.
   ⚠️ عمداً زیرخط ندارد: اگر می‌داشت، بررسی خودکار مجبور می‌شد برایش
   استثنا بگیرد — و بررسی‌ای که فهرست استثنا داشته باشد به‌مرور بی‌اثر
   می‌شود. ضخامت و زیرخطِ hover برای تشخیص کافی است. */
.flash a {
  color: inherit;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}
.flash a:hover { text-decoration: none; border-bottom-width: 2px; }



/* اعداد در متن فارسی بهتر خوانده می‌شوند وقتی کمی فاصله بگیرند */
table, .stat-value { font-variant-numeric: tabular-nums; }

/* ── منوی کناری ───────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  padding: 1.1rem .8rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: .55rem; padding: 0 .4rem 1rem; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--primary); color: #fff;
  border-radius: 8px; font-size: .95rem;
}
.brand-text { font-weight: 700; }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-group {
  margin: .9rem .5rem .3rem;
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .42rem .6rem;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  font-size: .88rem;
}
.nav-item:hover { background: var(--primary-soft); }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.nav-item.is-disabled { color: #a8b1bb; cursor: not-allowed; }
.nav-item.is-disabled:hover { background: transparent; }
.nav-item em {
  font-style: normal; font-size: .65rem;
  background: #f0f2f5; color: #97a1ac;
  padding: .05rem .35rem; border-radius: 20px; flex: none;
}

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding-top: .7rem; margin-top: .7rem;
  font-size: .8rem;
}

/* ── محتوا ────────────────────────────────────────────────────────────── */
.content {
  margin-inline-start: var(--sidebar-w);
  padding: 1.4rem 1.6rem 3rem;
  max-width: 1100px;
}

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}
.page-head h1 { margin: 0; }

/* ── کارت و جدول ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat-label { font-size: .8rem; color: var(--text-muted); }
.stat-value { font-size: 1.2rem; font-weight: 700; }

/* جدول‌های عریض روی موبایل نباید کل صفحه را افقی بکشند */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: right;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--border);
}
.table th { font-size: .82rem; color: var(--text-muted); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-block; font-size: .75rem;
  background: #f0f2f5; color: var(--text-muted);
  padding: .1rem .5rem; border-radius: 20px;
}
.badge-ok { background: #e4f4ee; color: var(--income); }
.badge-bad { background: #fdeceb; color: var(--expense); }
.badge-auto { background: var(--primary-soft); color: var(--primary); }

/* مقادیر فنی مثل هش کامیت و نسخه مهاجرت */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

.amount-income { color: var(--income); }
.amount-expense { color: var(--expense); }
.amount-transfer { color: var(--transfer); }

.note { margin-top: 1.2rem; font-size: .87rem; }

/* ── پیام‌ها ──────────────────────────────────────────────────────────── */
.flashes { margin-bottom: 1rem; display: grid; gap: .5rem; }
.flash {
  padding: .6rem .85rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: .88rem;
}
.flash-success { background: #e4f4ee; border-color: #bfe3d5; color: var(--income); }
.flash-danger  { background: #fdeceb; border-color: #f5cdc9; color: var(--expense); }
.flash-warning { background: #fdf4e3; border-color: #f0dcb4; color: var(--transfer); }

/* ── فرم‌ها ───────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.field label { font-size: .85rem; color: var(--text-muted); }

.input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field-error { font-size: .8rem; color: var(--expense); }
.input::placeholder { color: #aab2bb; }

/* عدد با علامت — در جهت راست‌به‌چپ، منفی باید سمت چپ عدد بماند */
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ⚠️ `.num` روی خودِ سلول جدول.
 *
 *   `display: inline-block` سلول را از چیدمان جدول بیرون می‌اندازد:
 *   دیگر ستون نیست و عرضش با سربرگ هم‌تراز نمی‌شود. نتیجه‌اش جدولی است
 *   که عددهایش زیر ستون اشتباه می‌نشینند — و چون همه ردیف‌ها یک‌جور
 *   جابه‌جا می‌شوند، مرتب به نظر می‌رسد و فقط با سربرگ نمی‌خواند.
 *
 *   جهت و ایزوله شدن (که کار اصلی `.num` است) می‌مانند؛ فقط نوع نمایش
 *   به حالت سلول برمی‌گردد. `check_tables.py` این را خودکار بررسی می‌کند. */
td.num, th.num { display: table-cell; }

.checkbox {
  display: flex; align-items: center; gap: .45rem;
  font-size: .87rem; margin-bottom: 1rem; cursor: pointer;
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--primary); }

.btn {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  /* دکمه‌ها گاهی <a> و گاهی <button> هستند. بدون این، تگ <a> خط زیر
     پیش‌فرض مرورگر را می‌گیرد و در همه صفحه‌ها دیده می‌شود. */
  text-decoration: none;
}
/* حالت‌ها جداگانه، وگرنه خط در hover یا بعد از بازدید برمی‌گردد */
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active { text-decoration: none; }

.btn:hover { background: var(--bg); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn-primary,
.btn-primary:link,
.btn-primary:visited { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary); filter: brightness(1.08); }
.btn-block { width: 100%; }

.btn-link {
  background: none; border: 0; padding: 0;
  color: var(--primary); font-family: inherit; font-size: .82rem;
  cursor: pointer; text-decoration: underline;
}

/* ── صفحه ورود ────────────────────────────────────────────────────────── */
.auth-body { background: var(--bg); }
.auth-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 1.2rem;
}
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow);
}
.auth-brand {
  display: flex; align-items: center; justify-content: center;
  gap: .55rem; margin-bottom: 1.4rem;
  font-weight: 700;
}

/* ── فرم و جدول در صفحه‌های داده پایه ─────────────────────────────────── */
.field-hint { font-size: .78rem; color: var(--text-muted); }
.form-card { max-width: 460px; }
.form-actions { display: flex; gap: .6rem; align-items: center; margin-top: 1.1rem; }
.inline-form { display: inline; }

.input-color { padding: .2rem; height: 38px; cursor: pointer; }
select.input { appearance: none; background-image: none; }

.row-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; }
.row-actions a { color: var(--primary); text-decoration: none; font-size: .82rem; }
.row-actions a:hover { text-decoration: underline; }
.btn-danger { color: var(--expense); }
.row-muted td { opacity: .55; }
.row-deleted td { background: #fdeceb; }
.strong { font-weight: 700; }

.swatch {
  display: inline-block; width: 18px; height: 18px;
  border-radius: 5px; border: 1px solid var(--border);
}

.empty { text-align: center; padding: 2.2rem 1.2rem; }
.empty p { margin-bottom: .8rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; background: #f0f2f5;
  padding: .1rem .35rem; border-radius: 5px;
  direction: ltr; unicode-bidi: plaintext;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* ── درخت دسته‌بندی ───────────────────────────────────────────────────── */
.tree, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree > li { border-bottom: 1px solid var(--border); }
.tree > li:last-child { border-bottom: 0; }
.tree-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .45rem 0;
}
.tree-children {
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--border);
  margin-inline-start: .3rem; margin-bottom: .3rem;
}
.tree-children .tree-row { padding: .3rem 0; font-size: .9rem; color: var(--text-muted); }

/* ── ثبت سریع ─────────────────────────────────────────────────────────── */
.quick-card { max-width: 420px; }

.type-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  margin-bottom: 1rem;
}
.type-btn {
  padding: .55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  font-family: inherit; font-size: .95rem; cursor: pointer;
}
.type-btn.is-on {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary); font-weight: 700;
}

.input-amount { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; }

.more { margin: .3rem 0 .6rem; }
.more > summary {
  cursor: pointer; font-size: .85rem; color: var(--primary);
  padding: .35rem 0; list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: '⌄ '; }
.more[open] > summary::before { content: '⌃ '; }

.saved-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  background: #e4f4ee; border: 1px solid #bfe3d5; color: var(--income);
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1rem;
  font-size: .88rem;
}

.radio { display: flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.radio input { accent-color: var(--primary); }
.backfill { gap: .4rem; }
.field-label { font-size: .85rem; color: var(--text-muted); }

/* ── فیلتر و فهرست ────────────────────────────────────────────────────── */
.filters { padding-bottom: .9rem; }
.filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
}
.filter-grid label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .8rem; color: var(--text-muted);
}
.filter-search { grid-column: 1 / -1; }

.totals { margin-bottom: .4rem; }
.totals-note { margin: 0 0 1rem; }
.nowrap { white-space: nowrap; }
.desc { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; flex-wrap: wrap; margin-top: 1rem; font-size: .85rem;
}
.btn.is-disabled { opacity: .45; cursor: not-allowed; }
button[disabled] { opacity: .6; cursor: progress; }

/* تقویم شمسی المان سفارشی است، نه کلاس — باید روی کارت‌ها بیاید */
jdp-container { z-index: 60; font-family: 'Vazirmatn', sans-serif; }

/* ── کاربر در منو ─────────────────────────────────────────────────────── */
.sidebar-user {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: .45rem;
}
.user-name { font-size: .85rem; font-weight: 500; }

/* ── موبایل ───────────────────────────────────────────────────────────── */
.menu-toggle {
  display: none;
  position: fixed; top: .7rem; inset-inline-start: .7rem;
  z-index: 40;
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
  font-size: 1.1rem; cursor: pointer;
}
.backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(16, 24, 40, .4);
  z-index: 25;
}

@media (max-width: 860px) {
  .menu-toggle { display: block; }
  /* منو کاملاً بیرون از دید می‌رود؛ چون فاصله‌اش از لبه دقیقاً اندازه عرض
     خودش است، چیزی از آن پیدا نمی‌ماند. */
  .sidebar {
    transform: translateX(100%);
    transition: transform .2s ease;
    width: min(var(--sidebar-w), 78vw);
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: 0 0 24px rgba(16, 24, 40, .18); }
  .backdrop.is-open { display: block; }
  .content { margin-inline-start: 0; padding: 3.6rem 1rem 3rem; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
  .page-head { margin-bottom: .9rem; }
  /* دکمه منو روی نشان برند می‌افتد؛ عنوان را پایین‌تر می‌آوریم */
  .brand { padding-block-start: 2.9rem; }
}

/* ── جزئیات یک رکورد ──────────────────────────────────────────────────── */
/* برچسب و مقدار کنار هم؛ در فاز‌های بعد برای بدهی و چک هم استفاده می‌شود */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem 1.4rem;
  margin: 0;
}
.detail-grid dt { font-size: .8rem; color: var(--text-muted); margin-bottom: .15rem; }
.detail-grid dd { margin: 0; font-size: 1rem; }
/* شماره تلفن باید چپ‌به‌راست خوانده شود ولی سر جای خودش، سمت راست، بماند */
.ltr-value { unicode-bidi: plaintext; text-align: start; }

/* حالت سومِ نشان: نه خوب نه بد — «نزدیک سررسید» */
.badge-warn { background: #fdf3e2; color: #9a6212; }

/* بخش حذف — عمداً از بقیه کارت‌ها جدا دیده می‌شود */
.danger-zone { border-color: #f3c9c5; }
.danger-zone h2 { color: var(--expense); }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem 1rem; }
}

/* ── صفحه حالت تعمیر ──────────────────────────────────────────────────── */
/* از کارت ورود پهن‌تر است: اینجا جدول نسخه‌ها و دستورهای طولانی داریم،
   نه دو فیلد فرم. */
/* `min-width: 0` لازم است: آیتم گرید به‌طور پیش‌فرض کوچک‌تر از عرض
   محتوایش نمی‌شود، و جدول nowrap کارت را از عرض صفحه پهن‌تر می‌کرد. */
.maintenance-card { max-width: 640px; min-width: 0; text-align: start; }
.maintenance-card h1 { font-size: 1.35rem; margin-bottom: .6rem; }
.maintenance-card h2 { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.maintenance-card .lead { color: var(--text-muted); line-height: 1.9; }

/* برچسب و مقدار در یک خط بمانند — وگرنه «نسخه‌ای که کد می‌خواهد» سه خط
   می‌شود و جدول ناخوانا. */
.maintenance-table th {
  width: 45%;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* روی موبایل برچسب و مقدار روی هم می‌آیند؛ nowrap اینجا کارت را
     پهن‌تر از صفحه می‌کرد و متن از لبه بیرون می‌زد. */
  .maintenance-table th, .maintenance-table td { display: block; width: auto; }
  .maintenance-table th { white-space: normal; border-bottom: none; padding-bottom: 0; }
}
.maintenance-table td { text-align: start; }

/* دستور بلند نباید کارت را پهن کند؛ داخل خودش اسکرول شود */
.cmd {
  background: #f0f2f5;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .8rem;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  margin: .4rem 0 .9rem;
}
.cmd code {
  background: none; padding: 0;
  font-size: .82rem; line-height: 1.9;
  white-space: pre;
}
.maintenance-list { list-style: none; padding: 0; margin: 0; }
.maintenance-list .cmd code { white-space: pre-wrap; }

/* جزئیات هر فاز در جدول وضعیت — زیر عنوان، نه کنارش */
.roadmap-detail {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-top: .15rem;
}

/* ── نشانه تاریخ قیمت ─────────────────────────────────────────────────── */
/* تاریخ قیمت هیچ‌وقت از عددی که با آن حساب شده جدا نمی‌افتد */
.price-stamp {
  display: block;
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: .1rem;
}
.price-stamp em { font-style: normal; opacity: .8; }
.price-stamp.is-stale { color: #9a6212; font-weight: 500; }
.price-stamp.is-missing { color: var(--expense); }

/* جدول ورود گروهی قیمت */
.price-table td { vertical-align: middle; }
.price-table .input { min-width: 9rem; }

/* فهرست کوتاه داخل هشدار */
.tight-list { margin: .4rem 0 .2rem; padding-inline-start: 1.2rem; }
.tight-list li { margin-bottom: .15rem; }

/* ───────────────────────────── فاز ۴ — داشبورد و ارزش خالص ───────── */

/* ⚠️ عددی که با قیمت کهنه حساب شده نباید با همان قطعیت عدد تازه دیده
   شود. کم‌رنگ‌تر و با خط‌چین زیرش، تا چشم خودش مکث کند. */
.stat-value.is-uncertain {
  opacity: .72;
  border-bottom: 2px dashed var(--warn-border, #e8c98a);
  padding-bottom: .1rem;
}

/* ردیف جمع در جدول تفکیک */
.row-total td {
  border-top: 2px solid var(--border, #e2e5ea);
  background: var(--row-total-bg, #f7f8fa);
}

/* جعبه نمودار — ارتفاع ثابت لازم است وگرنه Chart.js بی‌نهایت بزرگ می‌شود */
.chart-box { position: relative; height: 260px; }

/* دو ستون در دسکتاپ، یک ستون در موبایل */
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .grid.two { grid-template-columns: 1fr; }
}

/* ── فاز ۵: پیش‌بینی نقدی و اهداف ─────────────────────────────────── */

/* ماهی که مانده‌اش منفی می‌شود — مرز کسری نقدینگی باید در جدول هم دیده
   شود، نه فقط در نمودار. */
.row-danger td { background: #fdeceb; }
.row-warn td { background: #fdf6e3; }

/* ردیف تفکیک زیر هر ماه — بخشی از همان ردیف بالاست، نه سطری مستقل */
.row-detail td {
  background: var(--row-total-bg, #f7f8fa);
  padding-top: 0;
  padding-bottom: .6rem;
}
.row-detail .tight-list { margin: 0; }

/* نوار پیشرفت هدف */
.progress-bar {
  height: .55rem;
  border-radius: .3rem;
  background: var(--row-total-bg, #f0f2f5);
  overflow: hidden;
  margin: .8rem 0 .4rem;
}
.progress-fill {
  height: 100%;
  background: var(--income, #2f8f5b);
  border-radius: .3rem;
}

/* ── فاز ۶: گزارش‌ها و هشدارها ────────────────────────────────────── */

/* ردیف دکمه‌های انتخاب سال */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* فهرست دسته‌های هشدار — چند ستونه تا فهرست بلند صفحه را نکشد */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem .9rem;
  margin-bottom: .4rem;
}
.check-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .1rem;
  cursor: pointer;
}
.check-item input { width: 1rem; height: 1rem; accent-color: var(--primary); }

/* عنوان بخش داخل کارت گزارش */
.card h3 {
  margin: 1.4rem 0 .3rem;
  font-size: 1rem;
  color: var(--text);
}
.card h3:first-of-type { margin-top: .6rem; }