/* ============================================================================
   ظاهر برنامه — راست‌به‌چپ، پالت سبز تیره و کرم، کارت‌های سفید با گوشهٔ نرم.
   ساختار: هدر ثابت بالا + نوار کناری ثابت سمت راست + محتوای صفحه در .container
   ============================================================================ */

:root {
  /* --- پالت اصلی --- */
  --green-900: #0d3527;   /* سبز تیرهٔ کارت شاخص و دکمهٔ اصلی */
  --green-800: #14432f;
  --green-700: #1c5a41;
  --green-100: #dff0e6;
  --mint: #8ed6b3;        /* پرکنندهٔ نوار پیشرفت */

  --sand-50: #fbf8f2;     /* پس‌زمینهٔ صفحه */
  --sand-100: #f6f0e4;    /* نوار کناری */
  --sand-200: #efe3cd;    /* چیپ آیکون‌ها */
  --sand-300: #e6d5b4;
  --gold: #e9d6a8;        /* نشان سطح */
  --gold-text: #6b5426;

  --ink: #17231d;
  /* ⚠️ روشن‌تر از این نشود: متن‌های ۰٫۷۲rem (برچسب KPI، help-text) با
     خاکستریِ قبلی (#74857b) روی کارتِ سفید نسبت کنتراست ۳٫۶ داشتند — زیر حدِ
     ۴٫۵ استاندارد. این مقدار ۴٫۷ می‌دهد و رنگ عوض‌شده به چشم نمی‌آید. */
  --muted: #5e7268;
  --line: #eae5da;
  /* خطِ پررنگ‌تر برای جداکننده‌های ساختاری (سرِ جدول، ته‌کارت) — تا مرزِ
     «بخش» از مرزِ «ردیف» قابل تشخیص باشد. */
  --line-strong: #ded5c4;

  --danger: #b3392c;
  --danger-bg: #fdecea;
  --success: #1f7a4d;
  --success-bg: #e6f5ec;
  --warning: #8a5a10;
  --warning-bg: #fbf1dd;

  --card: #ffffff;
  /* سایه‌ها با همان سبزِ پالت تینت شده‌اند (نه مشکیِ خنثی) و یک جهتِ نورِ
     واحد از بالا دارند. */
  --shadow-xs: 0 1px 2px rgba(23, 42, 32, 0.05);
  --shadow-soft: 0 2px 10px rgba(23, 42, 32, 0.05), 0 12px 28px rgba(23, 42, 32, 0.04);
  --shadow-hover: 0 4px 14px rgba(23, 42, 32, 0.08), 0 16px 36px rgba(23, 42, 32, 0.06);

  /* گوشه‌ها: ظرفِ بیرونی نرم‌تر، کنترلِ داخلی تیزتر — تودرتوییِ هم‌شعاع
     (که همه‌چیز را یک‌شکل می‌کند) عمداً شکسته شده. */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;

  /* مقیاس فاصله — ضریب ۴. جای `style="margin-top:16px"` های پراکنده. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 34px;

  /* کوچک‌ترین اندازهٔ لمسیِ قابل‌قبول (راهنمای WCAG 2.5.8) */
  --tap: 40px;

  --sidebar-w: 252px;
  --topbar-h: 72px;

  --content-w: 1180px;

  /* سازگاری با نام‌های قدیمی که هنوز در چند جای کد استفاده می‌شوند */
  --color-bg: var(--sand-50);
  --color-card: var(--card);
  --color-primary: var(--green-800);
  --color-primary-dark: var(--green-900);
  --color-danger: var(--danger);
  --color-success: var(--success);
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--sand-50);
  color: var(--ink);
  /* dvh نه vh: در سافاری موبایل نوارِ آدرسِ جمع‌شونده باعث پرشِ چیدمان می‌شد. */
  min-height: 100dvh;
  /* ۱٫۸ برای متنِ مقاله خوب است ولی این برنامه صفحهٔ داده است؛ در جدول‌ها
     ردیف‌ها را بی‌دلیل بلند می‌کرد. متنِ طولانی جداگانه ۱٫۸ می‌گیرد. */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* پاراگرافِ توضیحی همچنان بازِ خوانا بماند و از ~۷۰ نویسه پهن‌تر نشود. */
p {
  line-height: 1.8;
  max-width: 68ch;
}

a {
  color: var(--green-700);
  text-decoration: none;
}

/* زیرخط از خودِ حروف فاصله بگیرد — چسبیدنش به دنبالهٔ حروف فارسی
   (ی، ن، ...) متن را کثیف نشان می‌داد. */
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- حلقهٔ فوکوس ----------
   تا پیش از این هیچ دکمه/لینکی نشانهٔ فوکوس نداشت و پیمایش با کیبورد
   (Tab) کاملاً کور بود. focus-visible یعنی کلیکِ ماوس حلقه نمی‌سازد. */
:where(a, button, summary, [tabindex], .btn, .tag-chip):focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
  /* لنگرهای داخل صفحه (مثل #book-statement در پروفایل مشتری) زیر نوارِ
     ثابتِ بالا گم می‌شدند. */
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============================ هدر بالا ============================ */
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: var(--topbar-h);
  z-index: 20;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  color: var(--green-900);
}

.brand:hover {
  text-decoration: none;
}

.brand-fa {
  font-size: 1.15rem;
  font-weight: 700;
}

.brand-en {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* زیرعنوان فارسیِ برند («بخش مدیریتی»). جدا از .brand-en است چون آن یکی فونت
   سِریفِ لاتین و letter-spacing دارد و فارسی را بد نشان می‌دهد. */
.brand-sub {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding-right: 32px;
}

.topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
}

.topbar-nav a:hover {
  background: var(--sand-100);
  text-decoration: none;
}

.topbar-nav a.is-active {
  background: var(--sand-100);
  color: var(--green-900);
  font-weight: 600;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sand-200);
  color: var(--green-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ============================ دکمهٔ منوی موبایل ============================ */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--sand-100);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  background: rgba(23, 42, 32, 0.35);
  z-index: 30;
}

.sidebar-backdrop:not([hidden]) {
  display: block;
}

/* ============================ نوار کناری ============================ */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 15;
  background: var(--sand-100);
  border-left: 1px solid var(--line);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.sidebar-greeting {
  padding: 0 8px;
}

.sidebar-hello {
  font-size: 0.78rem;
  color: var(--muted);
}

.sidebar-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-900);
}

.tier-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a,
.sidebar-footer a,
.sidebar-footer button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.93rem;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  text-align: right;
}

.sidebar-nav a:hover,
.sidebar-footer a:hover,
.sidebar-footer button:hover {
  background: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.sidebar-nav a.is-active {
  background: var(--card);
  font-weight: 600;
  color: var(--green-900);
  box-shadow: var(--shadow-soft);
}

.sidebar-cta {
  margin-top: auto;
}

.sidebar-footer {
  border-top: 1px solid var(--sand-300);
  padding-top: 10px;
  color: var(--muted);
}

.sidebar-footer a,
.sidebar-footer button {
  color: var(--muted);
  font-size: 0.88rem;
}

/* ============================ چیدمان صفحه ============================ */
/* ⚠️ چرا با padding و نه max-width:
   نسخهٔ قبلی `margin: 0 var(--sidebar-w) 0 0` بود، یعنی محتوا از لبهٔ نوار
   کناری شروع می‌شد و حاشیهٔ سمت چپ صفر می‌ماند. روی نمایشگر ۱۹۲۰ این یعنی
   ~۴۹۰ پیکسل فضای مردهٔ سمت چپ و محتوایی که به یک لبه چسبیده است.
   حالا ستونِ محتوا در **فضای باقی‌مانده** (بعد از کسر نوار کناری) وسط‌چین
   می‌شود: `--gutter` هرچه بماند را نصف می‌کند، و کفِ ۲۸ پیکسلی دارد تا در
   عرض‌های کم به حاشیهٔ عادی برگردد.
   درصدها اینجا نسبت به عرضِ خودِ .container حساب می‌شوند (نه 100vw) — پس
   عرضِ نوار اسکرول هم خودبه‌خود حساب شده و سرریزِ افقی نمی‌سازد. */
.container {
  --gutter: max(28px, calc((100% - var(--sidebar-w) - var(--content-w)) / 2));
  max-width: none;
  margin: 0;
  padding-block: calc(var(--topbar-h) + 28px) 60px;
  padding-inline-start: calc(var(--gutter) + var(--sidebar-w));
  padding-inline-end: var(--gutter);
}

.page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--sand-100);
}

/* ============================ کارت‌ها ============================ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px 28px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 34px 32px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.login-brand-fa {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green-900);
}

.card-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green-900);
}

.card-subtitle {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.section-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--green-900);
  margin: 26px 0 14px;
}

/* کارت شاخص سبز تیره — برای مهم‌ترین عدد هر صفحه */
.hero-card {
  background: var(--green-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.hero-label {
  font-size: 0.85rem;
  opacity: 0.72;
}

.hero-value {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.hero-value small {
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.72;
  margin-right: 6px;
}

.hero-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
}

.hero-icon svg {
  width: 28px;
  height: 28px;
}

/* ============================ فرم‌ها ============================ */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-row > .field {
  flex: 1;
  min-width: 180px;
}

/* صفت hidden باید همیشه برنده باشد. بدون این، هر کلاسی که display را ست
   می‌کند (مثل .field زیر که flex است) صفت hidden مرورگر را خنثی می‌کند و
   فیلدِ «پنهان» همچنان دیده می‌شود. */
[hidden] {
  display: none !important;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.field span {
  color: var(--muted);
}

input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-100);
}

input[readonly], input:disabled {
  background: var(--sand-50);
  color: var(--muted);
}

.help-text {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ============================ انتخابگر کشور ============================ */
.form-row > .field-narrow {
  flex: 0 0 120px;
  min-width: 100px;
}

.dial-code {
  text-align: center;
  letter-spacing: 0.5px;
  direction: ltr;
  cursor: not-allowed;
}

.combo {
  position: relative;
}

.combo-input {
  padding-left: 34px; /* جا برای دکمهٔ باز کردن فهرست */
}

.combo-toggle {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.combo-toggle:hover {
  background: var(--sand-100);
  color: var(--ink);
}

.combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
}

.combo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.92rem;
}

.combo-option:hover,
.combo-option.is-active {
  background: var(--sand-100);
}

.combo-option[aria-selected='true'] {
  color: var(--green-900);
  font-weight: 700;
}

.combo-option-code {
  direction: ltr;
  color: var(--muted);
  font-size: 0.85rem;
}

.combo-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ============================ محاسبهٔ زندهٔ کش‌بک ============================ */
.rate-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sand-200);
  color: var(--gold-text);
  font-size: 0.82rem;
  font-weight: 600;
}

.cashback-cell {
  font-weight: 700;
  color: var(--success);
}

.cashback-summary {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--sand-100);
}

.cashback-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.cashback-summary-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--sand-300);
  font-size: 1.02rem;
  color: var(--ink);
}

.cashback-summary-total strong {
  color: var(--green-900);
  font-size: 1.2rem;
}

/* ============================ کلید فعال/غیرفعال ============================ */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.switch input {
  width: auto;
  margin: 0;
  accent-color: var(--green-800);
}

.row-muted td {
  opacity: 0.5;
}

.order-input {
  text-align: center;
  padding: 6px;
  cursor: default;
}

/* ============================ دکمه‌ها ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.93rem;
  /* ۶۰۰ به‌جای ۵۰۰: وزیرمتن هر چهار وزن را روی سرور دارد ولی فقط ۴۰۰/۷۰۰
     استفاده می‌شد؛ دکمه با ۶۰۰ بدون درشت‌شدن، خوانا و «قابل‌فشار» دیده می‌شود. */
  font-weight: 600;
  line-height: 1.4;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: background 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, transform 0.08s ease;
}

.btn:hover {
  background: var(--sand-50);
  border-color: var(--muted);
  text-decoration: none;
}

/* بازخوردِ فشرده‌شدن — تا لمس/کلیک حسِ فیزیکی بدهد. */
.btn:active:not(:disabled):not(.is-disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

.btn-icon {
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
}

.btn-primary:hover {
  background: var(--green-800);
  box-shadow: var(--shadow-hover);
}

.btn-danger {
  background: var(--danger-bg);
  border-color: transparent;
  color: var(--danger);
}

.btn-success {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
}

.btn-success:hover {
  background: var(--green-800);
  box-shadow: var(--shadow-hover);
}

/* ============ تولبار افزودن/کسر موجودی کش‌بک ============ */
.balance-adjuster .adjuster-found {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.existing-customer-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  background: var(--sand-50);
}

.existing-customer-card .adjuster-found {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-block {
  width: 100%;
}

/* دکمهٔ کوچک فقط از نظر بصری کوچک است؛ ارتفاعِ لمسی‌اش روی صفحهٔ لمسی
   کامل می‌ماند (pointer:coarse) تا در گوشی قابل زدن باشد. */
.btn-sm {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 0.85rem;
}

@media (pointer: coarse) {
  .btn-sm { min-height: var(--tap); padding-inline: 15px; }
}

.link-button {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0;
}

.link-button:hover {
  text-decoration: underline;
}

.inline-form {
  display: inline;
}

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

/* ============================ هشدارها ============================ */
.alert {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.alert-success {
  background: var(--success-bg);
  color: var(--success);
}

/* هشدارِ نیازمندِ تصمیمِ کاربر — نه خطا (کار رد نشده)، نه موفقیت.
   هم‌پالتِ .badge-warning تا رنگ تازه‌ای وارد سیستم نشود. */
.alert-warning {
  background: #fbf1dd;
  color: #8a5a10;
}

.alert-warning .alert-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-weight: 600;
  cursor: pointer;
}

.alert-warning .alert-confirm input {
  width: auto;
  margin-top: 3px;
  flex: none;
}

/* ============================ جدول‌ها ============================ */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table th, table td {
  padding: 13px 14px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.83rem;
}

table tbody tr:hover {
  background: var(--sand-50);
}

table tfoot th {
  color: var(--green-900);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: none;
  border-top: 2px solid var(--line);
}

/* ============================ کارت‌های آماری ============================ */
.stat-grid,
.customer-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
}

.stat-card .stat-label {
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.stat-card .stat-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--green-900);
}

/* داخل کارت (مثل خلاصهٔ پروفایل) سایه لازم نیست */
.card .customer-summary .stat-card {
  box-shadow: none;
  background: var(--sand-50);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

/* ============================ نمودار میله‌ای ============================ */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  width: 110px;
  font-size: 0.85rem;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  flex: 1;
  background: var(--sand-100);
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
}

.bar-fill {
  height: 100%;
  background: var(--green-800);
  border-radius: 999px;
}

.bar-value {
  width: 140px;
  font-size: 0.82rem;
  color: var(--ink);
  text-align: left;
  flex-shrink: 0;
}

/* ============================ اقلام خرید ============================ */
.items-table {
  width: 100%;
  border-collapse: collapse;
}

.items-table th {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

.items-table td {
  padding: 8px;
  border-bottom: none;
}

.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--sand-100);
  color: var(--muted);
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.empty-state {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
}

/* ============================ صفحهٔ خرج کردن کش‌بک ============================ */
.customer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* صفحهٔ خرج کردن تک‌ستونه و باریک است تا چشم اپراتور جای دیگری نرود.
   ⚠️ از ۱۴۰۵/۰۶/۱۰ عرضِ ستون با `--content-w` کنترل می‌شود، نه max-width —
   چون .container عرضش را از padding می‌گیرد (توضیح بالای همان قاعده). */
.container-narrow {
  --content-w: 780px;
}

/* قرینهٔ container-narrow: صفحه‌های جدولیِ پرستون (کاتالوگ محصولات) از کلِ
   عرضِ نمایشگر استفاده می‌کنند تا به‌جای اسکرول افقی، ستون‌ها جا شوند
   (۱۴۰۵/۰۶/۰۵). سقفِ ۱۸۰۰ گذاشته شده تا روی نمایشگرهای خیلی پهن، خط‌های
   متن بی‌اندازه بلند نشوند. */
.container-wide {
  --content-w: 1720px;
}

/* جدولِ فشرده — همان جدول، با پدینگ و فونتِ کمتر؛ برای صفحه‌هایی که تعداد
   ستونشان زیاد است و باید بدون اسکرول افقی جا شوند. */
.table-compact th,
.table-compact td {
  padding: 9px 8px;
}

.table-compact {
  font-size: 0.87rem;
}

.table-compact .spec-clamp {
  max-width: 200px;
}

/* نوار عملیاتِ گروهی: دکمه‌ها اولِ نوار (سمت راست)، شمارشِ انتخاب ته نوار */
.bulk-bar {
  align-items: center;
  gap: 8px;
}

.bulk-bar-count {
  margin: 0;
  margin-inline-start: auto;
}

/* --- کارت اصلی: مبلغ کش‌بک --- */
.redeem-hero {
  margin-top: 16px;
  padding: 26px 28px 22px;
}

.redeem-hero-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

.redeem-hero-balance strong {
  font-size: 1.15rem;
  color: var(--green-900);
}

.redeem-amount-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: 12px;
}

.redeem-amount-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.redeem-amount-field {
  position: relative;
  flex: 1;
}

/* عدد بزرگ و خوانا — این فیلد قلب صفحه است */
.redeem-amount-input {
  font-size: 1.9rem;
  font-weight: 700;
  padding: 14px 18px 14px 64px;
  letter-spacing: 0.5px;
  color: var(--green-900);
}

.redeem-amount-unit {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--muted);
  pointer-events: none;
}

.btn-max {
  flex: 0 0 auto;
  padding: 0 26px;
  font-size: 1rem;
  font-weight: 600;
  background: var(--sand-200);
  border-color: transparent;
  color: var(--green-900);
}

.btn-max:hover {
  background: var(--sand-300);
}

/* --- بخش تاشوی اقلام --- */
.details-card > summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
  color: var(--green-900);
  list-style: none;
}

.details-card > summary::-webkit-details-marker {
  display: none;
}

.details-card > summary::after {
  content: '▾';
  position: absolute;
  left: 28px;
  color: var(--muted);
  font-weight: 400;
}

.details-card {
  position: relative;
}

.details-card[open] > summary::after {
  content: '▴';
}

.details-card > summary .help-text {
  font-weight: 400;
}

/* --- نوار چسبان پایین: عددی که به مشتری گفته می‌شود --- */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 12;
  margin-top: 16px;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: var(--green-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 -6px 24px rgba(23, 42, 32, 0.14);
}

.action-bar-payable {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.action-bar-payable span {
  font-size: 0.8rem;
  opacity: 0.72;
}

.action-bar-payable strong {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.action-bar-meta {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 0.78rem;
  opacity: 0.72;
  flex-wrap: wrap;
}

.action-bar .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--green-900);
  padding: 13px 28px;
  font-weight: 700;
}

.action-bar .btn-primary:hover:not(:disabled) {
  background: var(--sand-100);
}

.action-bar .btn-primary:disabled {
  background: rgba(255, 255, 255, 0.22);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.65);
}

.field-error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--danger);
}

input.has-error {
  border-color: var(--danger);
}

input.has-error:focus {
  box-shadow: 0 0 0 3px var(--danger-bg);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- انتخاب نوع تعدیل --- */
.choice-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.choice {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--green-800);
  background: var(--sand-50);
}

.choice input {
  width: auto;
  margin-top: 6px;
  accent-color: var(--green-800);
}

.choice span {
  display: flex;
  flex-direction: column;
}

.choice small {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ============================ رسید ============================ */
.receipt {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 30px 34px;
  max-width: 460px;
}

.receipt-head {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 18px;
}

.receipt-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-900);
}

.receipt-sub {
  font-size: 0.86rem;
  color: var(--muted);
}

.receipt-rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.receipt-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.receipt-rows dt {
  color: var(--muted);
}

.receipt-rows dd {
  margin: 0;
  font-weight: 600;
}

.receipt-items {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.receipt-items th {
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  text-align: right;
}

.receipt-items td {
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.receipt-totals {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.receipt-payable {
  padding: 10px 0;
  font-size: 1.05rem !important;
}

.receipt-payable dt {
  color: var(--ink) !important;
  font-weight: 700;
}

.receipt-payable dd {
  color: var(--green-900);
  font-weight: 700;
}

.receipt-balance {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--sand-100);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.9rem;
}

.receipt-balance strong {
  color: var(--green-900);
  font-size: 1.02rem;
}

.receipt-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ============================ چاپ ============================ */
@media print {
  .topbar,
  .sidebar,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .container {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .receipt {
    box-shadow: none;
    border: none;
    max-width: none;
    padding: 0;
  }

  .receipt-balance {
    background: none;
    border: 1px solid #ccc;
  }
}

/* ============================ واکنش‌گرایی ============================ */
@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .redeem-amount-row {
    flex-wrap: wrap;
  }

  .btn-max {
    flex: 1;
    padding: 12px;
  }

  .redeem-amount-input {
    font-size: 1.5rem;
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .action-bar .btn-primary {
    width: 100%;
  }

  /* ---------------------------------------------------------------
   * جدول اقلامِ فروش (sales/create) — به‌جای فقط overflow-x، هر ردیف در
   * موبایل به یک کارتِ عمودیِ برچسب‌دار تبدیل می‌شود تا محصول/تعداد/قیمت/
   * حذف/موجودی بدون اسکرول افقی قابل‌دیدن و قابل‌ویرایش بمانند. دسکتاپ
   * (بالای این breakpoint) دست‌نخورده می‌ماند.
   * --------------------------------------------------------------- */
  .items-table-responsive thead {
    display: none;
  }

  .items-table-responsive,
  .items-table-responsive tbody {
    display: block;
    width: 100%;
  }

  .items-table-responsive tr[data-item-row] {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px 12px;
    margin-bottom: 10px;
    background: var(--sand-50);
  }

  .items-table-responsive tr[data-item-row] td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
  }

  .items-table-responsive tr[data-item-row] td:last-child {
    border-bottom: none;
    justify-content: flex-end;
  }

  .items-table-responsive tr[data-item-row] td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.78rem;
    flex: 0 0 auto;
  }

  .items-table-responsive tr[data-item-row] td[data-label=""]::before {
    content: none;
  }

  .items-table-responsive tr[data-item-row] td input:not([type="hidden"]) {
    max-width: 55%;
  }

  /* سلولِ کد/نام محصول: به‌جای ردیفِ افقیِ برچسب+ورودی، برچسب بالا و
     ورودیِ جست‌وجو تمام‌عرض — چون فهرست نتایج (combo-list) به فضای کامل نیاز دارد. */
  .items-table-responsive tr[data-item-row] td:first-child {
    display: block;
    border-bottom: 1px dashed var(--line);
    padding: 8px 0;
  }

  .items-table-responsive tr[data-item-row] td:first-child::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--muted);
    font-size: 0.78rem;
    margin-bottom: 4px;
  }

  .items-table-responsive tr[data-item-row] td:first-child input.sale-code {
    width: 100%;
  }

  .items-table-responsive tr[data-item-row] td:first-child .combo-list {
    width: 100% !important;
  }

  /* فهرست پیشنهادهای محصول به‌جای روکشِ شناور روی تعداد/قیمتِ زیرش، محتوا را
     به پایین هل می‌دهد — قبلاً چون position:absolute بود، بازشدنش تعداد و
     قیمتِ همان ردیف را زیر خودش پنهان می‌کرد. */
  .items-table-responsive tr[data-item-row] td:first-child .combo-list {
    position: static;
    margin-top: 6px;
    box-shadow: none;
  }

  /* مشخصات محصول در کارتِ موبایل خیلی ریز/کم‌رنگ بود */
  .items-table-responsive [data-summary] {
    font-size: 0.95rem;
    color: var(--ink);
  }

  /* نوار سبز چسبانِ پایین جمع‌وجورتر شود تا کنار صفحه‌کلید جای زیادی نگیرد */
  .action-bar {
    padding: 10px 14px;
    gap: 10px;
  }

  .action-bar-payable strong {
    font-size: 1.25rem;
  }

  .action-bar .btn-primary {
    padding: 11px 20px;
  }
}

@media (max-width: 860px) {
  /* ⚠️ باگِ کشف‌شده در بازبینیِ ۱۴۰۵/۰۶/۱۰ (با اندازه‌گیریِ واقعیِ چیدمان،
     نه چشمی): نوار کناریِ **بسته** با `transform: translateX(100%)` بیرونِ
     صفحه پارک می‌شود، ولی عنصرِ fixed همچنان به ناحیهٔ قابل‌اسکرولِ سند
     اضافه می‌شود ⇒ در عرض ۷۶۸ پیکسل، صفحه ۲۲۱ پیکسل اسکرولِ افقی داشت،
     درست برخلافِ قاعدهٔ «هیچ صفحه‌ای نباید افقی اسکرول بخورد».

     `overflow-x: clip` (نه `hidden`) درست‌ترین ابزار برای این کار است:
     محتوای بیرون‌زده را می‌بُرد ولی — برخلافِ hidden — ظرفِ اسکرول نمی‌سازد،
     پس `position: sticky` نوارِ سبزِ پایینِ فرم‌ها سالم می‌ماند. همان
     نگرانی‌ای که در یادداشتِ «واکنش‌گراییِ سراسری» بالاتر ثبت شده بود.
     مرورگرِ قدیمی که clip را نشناسد، این خط را نادیده می‌گیرد و رفتارش
     دقیقاً همان قبل می‌شود (بدون پسرفت). */
  html { overflow-x: clip; }

  .menu-toggle {
    display: inline-flex;
  }

  /* نوار کناری در موبایل یک کشوی روکش‌دار از سمت راست است — پیش‌فرض بسته،
     فقط با دکمهٔ منو (یا کلیک روی روکش/لینک‌هایش) باز/بسته می‌شود. */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: min(82vw, 300px);
    border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px rgba(23, 42, 32, 0.18);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 40;
  }

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

  /* نوار کناری کشو شد ⇒ سهمِ عرضِ آن از padding برداشته می‌شود، وگرنه
     محتوا در گوشی یک ستونِ ۲۵۲ پیکسلیِ خالی کنارِ خودش می‌داشت. */
  .container {
    --sidebar-w: 0px;
    --gutter: 16px;
    padding-block: calc(var(--topbar-h) + 18px) 50px;
  }

  .topbar {
    padding: 0 16px;
  }

  .topbar-nav {
    padding-right: 12px;
  }

  /* در عرض کم فقط آیکون بماند تا نام کاربر جا شود */
  .topbar-nav a span {
    display: none;
  }

  .topbar-user-name {
    display: none;
  }

  .hero-card {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

/* ---------- نوار انتخاب نوع کالا (فاکتور خرید) ---------- */
.type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}
.type-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--border, #d8d8d8);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--ink, #333);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.type-btn:hover:not(:disabled) { border-color: var(--primary, #5a6e3a); }
.type-btn.is-active {
  background: var(--primary, #5a6e3a);
  border-color: var(--primary, #5a6e3a);
  color: #fff;
}
.type-btn:disabled { opacity: .5; cursor: not-allowed; }
.type-selector.is-locked .type-btn:not(.is-active) { opacity: .4; cursor: not-allowed; }
.type-soon {
  font-size: .7rem;
  font-weight: 400;
  background: var(--danger-bg, #fdecea);
  color: var(--danger, #b3392c);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ---------- صفحه‌بندی (partials/pagination) ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.pager-link {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.pager-link:hover { border-color: var(--green-700); color: var(--green-800); }
.pager-link.is-disabled { opacity: .45; pointer-events: none; }
.pager-status { color: var(--muted); font-size: 0.85rem; }
.pager-total { opacity: .8; }

/* ---------- نوار فیلتر (مدیریت فروش) ---------- */
/* شبکهٔ خودتنظیم: در عرض کم فیلترها زیر هم می‌روند بدون media query جدا */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* چیپ‌های «فیلتر فعال» تا کاربر بداند چه چیزی نتیجه را محدود کرده */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.78rem;
}
.filter-chip a {
  color: inherit;
  text-decoration: none;
  opacity: .6;
  font-weight: 700;
}
.filter-chip a:hover { opacity: 1; }

/* ---------- ریز اقلام داخل ردیف فهرست فروش ---------- */
.line-items {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: normal;
}
.line-items li + li { margin-top: 2px; }

/* ============================ تب‌ها ============================ */
/* صفحه‌های سنگین (حسابداری) به‌جای هفت کارتِ روی‌هم، تب می‌شوند تا کاربر
   یک‌بار با دیوار اطلاعات روبه‌رو نشود. */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin: 18px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: 10px 10px 0 0;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--green-800); background: var(--sand-100); }
.tab-btn.is-active {
  color: var(--green-900);
  border-bottom-color: var(--green-800);
  background: var(--card);
}
.tab-btn .tab-count {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sand-200);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.tab-btn.is-active .tab-count { background: var(--green-100); color: var(--green-800); }
.tab-panel[hidden] { display: none; }

/* ============================ اعداد ============================ */
/* ارقام هم‌عرض تا ستون مبالغ در جدول‌ها روی هم بیفتد و چشم بتواند
   بزرگ و کوچک را مقایسه کند. */
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.num, th.num { text-align: left; }
.num-pos { color: var(--success); }
.num-neg { color: var(--danger); }
.num-zero { color: var(--muted); opacity: .55; }

/* ============================ جدول فشرده ============================ */
.table-compact table { font-size: 0.86rem; }
.table-compact th, .table-compact td { padding: 8px 10px; }
.table-compact tbody tr:hover { background: var(--sand-50); }

/* سرستون چسبان برای جدول‌های بلند */
.table-sticky { max-height: 520px; overflow: auto; }
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sand-100);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* ============================ کارت آمار فشرده ============================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.kpi-label { font-size: 0.76rem; color: var(--muted); margin-bottom: 5px; }
.kpi-value { font-size: 1.18rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-hint { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.kpi.is-primary { background: var(--green-900); border-color: var(--green-900); }
.kpi.is-primary .kpi-label,
.kpi.is-primary .kpi-hint { color: rgba(255,255,255,.72); }
.kpi.is-primary .kpi-value { color: #fff; }

/* ============================ نوار ابزار صفحه ============================ */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* جمع‌شونده برای فرم‌هایی که همیشه لازم نیستند */
.collapsible > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 0;
  color: var(--green-800);
  list-style: none;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::before { content: '+ '; font-weight: 700; }
.collapsible[open] > summary::before { content: '− '; }

/* ============================================================================
   بازطراحی UI/UX — Design System تکمیلی (فاز ۱)
   بر پایهٔ سند «طراحی محصول»: افزودن Badgeهای وضعیت، بنر حالت دفتر، نمایش
   عدد نامشخص، سربرگ گروه‌های سایدبار و Breadcrumb. رنگ فقط برای وضعیت است،
   نه برای جهتِ بدهکار/بستانکار — همان قاعدهٔ سند طراحی.
   ============================================================================ */

/* ---------- Badgeهای وضعیت تکمیلی ---------- */
.badge-warning { background: #fbf1dd; color: #8a5a10; }
.badge-info { background: #e6eef8; color: #2f5f96; }
.badge-neutral { background: var(--sand-100); color: var(--muted); border: 1px solid var(--line); }
.badge-brand { background: var(--green-100); color: var(--green-800); font-weight: 700; }
.badge-dashed { border: 1px dashed var(--muted); background: transparent; }
.badge-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-end: 4px; }

/* ---------- عدد مالیِ نامشخص ---------- */
/* هرگز صفر برای «نامعلوم» نمایش داده نشود؛ این کلاس همیشه با متن «نامشخص» و
   یک title توضیحی همراه است (نه با یک عدد ساختگی). */
.money-unknown {
  color: var(--muted);
  border-bottom: 1px dashed var(--muted);
  cursor: help;
  font-weight: 400;
}

/* ---------- بنر وضعیت دفتر (پارک‌شده / دفترچهٔ فعال) ---------- */
/* برای جلوگیری از اشتباه‌گرفتنِ «حسابداری» (پارک‌شده) با «دفترچه» (فعال) —
   ریسک بحرانی #۲ سند ممیزی. رنگش عمداً از پالت هشدار/برند جداست. */
.ledger-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.ledger-banner svg { flex-shrink: 0; margin-top: 2px; }
.ledger-banner-parked {
  background: var(--sand-200);
  color: #5c5648;
  border: 1px dashed #b7ac8f;
}
.ledger-banner-active {
  background: var(--green-100);
  color: var(--green-800);
}

/* ---------- سربرگ گروه در سایدبار ---------- */
.sidebar-group-label {
  padding: 14px 14px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.sidebar-group-label:first-child { padding-top: 0; }
.sidebar-group-badge {
  margin-right: auto;
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--sand-200);
  color: var(--muted);
  padding: 1px 7px;
  border-radius: 6px;
}

/* ---------- گروه کشویی سایدبار ----------
   هر گروه یک <details> است: پیش‌فرض بسته، با کلیک روی سربرگ باز می‌شود.
   چون <details> بومی است، بدون JS هم کار می‌کند؛ JS فقط گروهِ صفحهٔ جاری را
   باز نگه می‌دارد و انتخاب کاربر را به یاد می‌سپارد. */
.nav-group {
  border-top: 1px solid var(--line);
}
.nav-group:first-of-type { border-top: none; }

.nav-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 11px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.nav-group > summary::-webkit-details-marker { display: none; }

.nav-group > summary:hover {
  color: var(--ink);
  background: var(--sand-100);
}

/* فلش کشویی — با باز شدن گروه می‌چرخد. */
.nav-group > summary::after {
  content: '';
  margin-inline-start: auto;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.nav-group[open] > summary::after { transform: rotate(135deg); }

.nav-group[open] > summary { color: var(--ink); }

/* گروهی که لینک فعالِ صفحهٔ جاری را دارد، حتی بسته هم نشانه می‌دهد. */
.nav-group.has-active > summary { color: var(--green-800); }

.nav-group > summary + * { margin-top: 2px; }
.nav-group .sidebar-group-badge { margin-right: 0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green-800); }
.breadcrumb .crumb-sep { opacity: 0.5; }
.breadcrumb .crumb-current { color: var(--ink); font-weight: 600; }

/* ---------- Detail Panel (چیدمان دوستونهٔ صفحات جزئیات) ---------- */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.detail-panel {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 980px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-panel { position: static; }
}

/* ---------- Financial Impact Box ---------- */
.impact-box {
  background: var(--sand-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.86rem;
}
.impact-box h4 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
}
.impact-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}
.impact-row .impact-side {
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
}

/* ---------- Modal (بر پایهٔ <dialog> بومی — بدون کتابخانهٔ خارجی) ---------- */
dialog.modal {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 32px);
  color: var(--ink);
}
dialog.modal::backdrop { background: rgba(23, 35, 29, 0.45); }
.modal-body { padding: 24px 26px; }
.modal-body h3 { margin: 0 0 8px; color: var(--green-900); }
.modal-body p { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.modal-confirm-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.86rem;
  background: var(--sand-100);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 4px;
}
.modal-confirm-check input { width: auto; margin-top: 3px; }

/* ---------- فیلد غیرفعال با دلیل (title) ---------- */
.btn[disabled], .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto; /* تا title/tooltip همچنان کار کند */
}

/* ============================================================================
   بازطراحی UI/UX — تکمیل فاز ۲ (۱۴۰۵/۰۵/۰۸)
   ============================================================================ */

/* ---------- ستون‌های کم‌اهمیت‌تر جدول در موبایل ---------- */
/* به‌جای فقط overflow-x (که کاربر باید کشو ببرد)، ستون‌های ثانویه در عرض کم
   کلاً حذف می‌شوند؛ جدول با ستون‌های ضروری در صفحه جا می‌شود. */
@media (max-width: 720px) {
  .col-hide-sm { display: none; }
}

/* ---------- کارت‌های خلاصه واکنش‌گرا ---------- */
@media (max-width: 720px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions { justify-content: flex-start; }
  .action-bar-figures { width: 100%; }
}

/* ---------- سرصفحهٔ بخش با شمارهٔ گام ---------- */
.section-title .step-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  margin-right: 8px;
}

/* ---------- زیرمنوی بخش «مالی» (نمای مالی/فروش/خرید/خزانه‌داری/گزارش‌ها) ---------- */
.finance-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  background: var(--sand-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.finance-subnav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.finance-subnav a:hover { background: var(--sand-200); }
.finance-subnav a.is-active {
  background: var(--green-900);
  color: #fff;
  font-weight: 600;
}
@media (max-width: 640px) {
  .finance-subnav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---------- سطل‌های سنِ مانده (aging) ---------- */
.aging-buckets { display: flex; gap: 8px; flex-wrap: wrap; }
.aging-bucket {
  flex: 1 1 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sand-50);
}
.aging-bucket .aging-bucket-label { font-size: 12px; color: var(--muted); }
.aging-bucket .aging-bucket-value { font-size: 15px; font-weight: 700; margin-top: 2px; }
.aging-bucket.is-overdue { border-color: var(--danger); background: var(--danger-bg); }

/* ---------- علامت تطبیق مغایرت بانکی ---------- */
.reconcile-mark { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- تخفیف سطریِ ردیف فاکتور (مبلغ + واحد ریال/درصد) ---------- */
.line-discount { display: flex; gap: 4px; align-items: stretch; }
.line-discount input { flex: 1 1 auto; min-width: 0; }
.line-discount select { flex: 0 0 auto; width: auto; padding-inline: 6px; }

/* ---------- تاشوی «مشخصات» در جدول اقلامِ فاکتور خرید (فاز ۱۴۰۵/۰۵/۱۸) ----------
   پیش‌فرض یک خط با «...»؛ اگر متن واقعاً سرریز شد یک فلش کوچک ظاهر می‌شود که
   با کلیک، خط دوم به بعد را باز/بسته می‌کند (procurement.js::wireSpecClamp). */
.spec-clamp {
  display: inline-block;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.spec-clamp.is-expanded { white-space: normal; max-width: none; }
.spec-toggle {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  vertical-align: middle;
  margin-inline-start: 4px;
  padding: 0 2px;
}
.spec-toggle:hover { color: var(--ink); }

/* ============================================================================
   واکنش‌گراییِ سراسری — «هیچ صفحه‌ای نباید افقی اسکرول بخورد»
   (خواستِ صریح مالک ۱۴۰۵/۰۵/۲۵)
   ----------------------------------------------------------------------------
   ریشهٔ مشکل قبلی یک چیز نبود، سه چیز بود و هر سه اینجا بسته می‌شوند:

     ۱. جدول‌های عریض. `.table-wrap{overflow-x:auto}` از قبل بود، ولی چون
        نه خودش نه هیچ‌کدام از والدهای flex/grid‌اش `min-width:0` نداشتند،
        مرورگر به‌جای اسکرولِ داخلی، **کلِ صفحه** را پهن می‌کرد. قاعدهٔ
        min-content سازِ flexbox: آیتم flex پیش‌فرض کوچک‌تر از محتوایش
        نمی‌شود مگر min-width صفر شود.
     ۲. رشته‌های بلندِ بدون فاصله (کد کالا، شمارهٔ فاکتور، URL) که هیچ‌جا
        نمی‌شکستند.
     ۳. مقدارهای ثابتِ min-width روی فیلدها/ستون‌ها که در عرض ۳۶۰ پیکسل
        بزرگ‌تر از خودِ صفحه بودند.

   ⚠️ عمداً `overflow-x: hidden` روی body **زده نشده**: آن فقط علامت را پنهان
   می‌کند (محتوا واقعاً بریده می‌شود) و ضمناً `position: sticky` نوار پایین
   را در بعضی مرورگرها می‌شکند. به‌جایش علتِ سرریز درمان شده است.
   ============================================================================ */

/* --- ۱) هیچ عنصری از عرضِ ویوپورت رد نشود --- */
html, body {
  max-width: 100%;
}

/* والدهای مستقیمِ محتوا باید اجازهٔ کوچک‌شدن بدهند تا اسکرولِ جدول «داخلی»
   بماند و به صفحه سرایت نکند. */
.container,
.card,
.form-row,
.detail-layout,
.detail-panel {
  min-width: 0;
}

.table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  /* اسکرولِ افقیِ جدول به صفحهٔ پشتش سرایت نکند (کشیدن با انگشت روی جدول
     نباید کلِ صفحه را جابه‌جا کند). */
  overscroll-behavior-x: contain;
}

/* --- ۲) شکستنِ رشته‌های بلندِ بدون فاصله --- */
.card, .kpi, .stat-card, .help-text, .alert, summary {
  overflow-wrap: anywhere;
}

/* جدول‌ها عمداً از overflow-wrap:anywhere بالا مستثنی‌اند — شکستن کلمه‌به‌کلمه
   (حتی فارسی) داخل ستون‌های تنگ باعث نمایش «هر حرف روی یک خط» می‌شد. چون
   overflow-wrap ارثی است، فقط حذفِ td/th از فهرست بالا کافی نبود — همان مقدار
   از .card/.alert/... به هر جدولِ داخلشان ارث می‌رسید؛ اینجا صریح خنثی می‌شود.
   به‌جایش خودِ جدول (در هر عرضی، نه فقط زیرِ ۷۲۰px — بین ۷۲۰ تا ۹۸۰px کنارِ
   پنلِ جزئیات هم همین مشکل پیش می‌آمد) ظرفِ اسکرول افقیِ خودش می‌شود؛
   شکستنِ عمدیِ متن فقط جاهایی که صریحاً خواسته شده (مثل .spec-clamp)
   اتفاق می‌افتد. */
/* ⚠️ بازبینیِ ۱۴۰۵/۰۶/۱۰ — چرا `display:block` روی خودِ table برداشته شد:
   آن راه‌حل سرریزِ افقی را می‌بست ولی سه عارضه داشت: (۱) جدول با
   `width:auto` دیگر عرضِ کارت را پر نمی‌کرد و روی دسکتاپ یک جدولِ باریکِ
   چسبیده به راست با فضای خالیِ کنارش دیده می‌شد؛ (۲) `position:sticky` روی
   سرِ جدول کار نمی‌کرد؛ (۳) `display:block` نقشِ table را از درختِ دسترسی‌پذیری
   حذف می‌کند و صفحه‌خوان دیگر «جدول ۸ ستونه» را اعلام نمی‌کند.
   حالا ظرفِ اسکرول `.table-wrap` است (که ‏min-width:0 والدهایش هم از قبل
   ست شده) و جدولِ داخلش یک جدولِ واقعیِ تمام‌عرض است. جدولِ بدون ظرف —
   اگر جایی مانده باشد — همان رفتار قدیمیِ امن را نگه می‌دارد. */
/* جدولِ بدونِ ظرف: همان رفتار قدیمیِ امن (خودش اسکرول می‌شود). */
table {
  display: block;
  width: auto;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* جدولِ داخلِ ظرف: جدولِ واقعیِ تمام‌عرض؛ اسکرول کارِ ظرف است.
   ⚠️ عمداً با ویژگیِ بالاتر نوشته شده و نه `:not(.table-wrap > table)` —
   `:not()` با ترکیب‌کنندهٔ فرزند تا Safari 16.4 پشتیبانی نمی‌شود و اگر
   نامعتبر شمرده شود کلِ قاعده حذف می‌شد و گوشی‌های قدیمی دوباره سرریزِ
   افقی می‌گرفتند. */
.table-wrap > table {
  display: table;
  width: 100%;
  overflow: visible;
}

table th, table td {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* عکس/جاسازی هرگز از ظرفش بیرون نزند */
img, svg, video, iframe, canvas {
  max-width: 100%;
}

/* --- ۳) عرض‌های ثابت در گوشی --- */
@media (max-width: 720px) {
  /* فیلدها تک‌ستونی می‌شوند؛ min-width ۱۸۰ پیکسلیِ دسکتاپ در کنارِ gap
     باعث می‌شد دو فیلد کنار هم از ۳۶۰ پیکسل رد کنند. */
  .form-row > .field,
  .form-row > .field-narrow,
  .form-row > div {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* بلوک‌های فیلدِ اسکیما (که در Blade با style سرخود flex:1 1 200px دارند) */
  .form-row > [style*="min-width"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  .card { padding: 18px 16px; }

  /* اسکرولِ افقیِ خودِ جدول از این پس سراسری است (بالاتر، بیرون از این
     media query) چون مشکل فقط مالِ زیرِ ۷۲۰px نبود؛ اینجا فقط اندازهٔ گوشی. */
  table { font-size: 0.86rem; }
  table th, table td { padding: 10px 8px; }

  .kpi-row,
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

  /* «مشخصات» در جدول‌ها: در گوشی ستون را پهن نکند */
  .spec-clamp { max-width: 42vw; }

  /* نوار چسبانِ ثبت: دکمه تمام‌عرض، ارقام بالای آن */
  .action-bar { padding: 12px 14px; }
  .action-bar .actions-row { width: 100%; display: flex; gap: 8px; }
  .action-bar .actions-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* گوشی‌های باریک (≤ ۳۸۰ پیکسل) */
@media (max-width: 380px) {
  /* ⚠️ باگِ قدیمی که در بازبینیِ ۱۴۰۵/۰۶/۱۰ با اندازه‌گیریِ واقعیِ چیدمان
     پیدا شد: اینجا `padding: 18px 10px 44px` نوشته شده بود — یعنی padding
     بالای صفحه ۱۸ پیکسل، در حالی که نوارِ بالا `position:fixed` با ارتفاع
     ۷۲ پیکسل است. نتیجه: روی گوشی‌های باریک (آیفون SE/mini و اندرویدهای
     ۳۶۰ پیکسلی) حدود ۵۴ پیکسل ابتدای هر صفحه — یعنی عنوانِ صفحه — زیرِ
     هدر پنهان می‌ماند. حالا فقط padding افقی سبک‌تر می‌شود. */
  .container {
    --gutter: 10px;
    padding-block: calc(var(--topbar-h) + 14px) 44px;
  }
  table th, table td { padding: 8px 6px; }
  .btn { padding: 10px 12px; }
}

/* ---- تگ‌های مشتری (partials.tag-picker) ---- */
.tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tag-chip {
  --tag-color: #8a6d3b;
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--tag-color);
  background: #fff;
  color: var(--tag-color);
  cursor: pointer;
  line-height: 1.6;
}

.tag-chip.is-active {
  background: var(--tag-color);
  color: #fff;
}

.tag-create-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.tag-create-row input[type="text"] { flex: 1; }

.tag-create-row input[type="color"] {
  width: 36px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--sand-300);
  border-radius: 6px;
}

/* ============================================================================
   بازطراحی ۱۴۰۵/۰۶/۱۰ — «مشتریان و فروش»
   ----------------------------------------------------------------------------
   پالت سبز/کرم دست‌نخورده مانده (تصمیم مالک). چیزی که عوض شده، ساختار است:
   ریتمِ فاصله، سلسله‌مراتبِ تایپوگرافی، حالت‌های تعاملی، و رفتارِ فهرست‌ها
   در گوشی.

   قاعده‌ای که همه‌جای این بخش رعایت شده: **رنگ فقط وضعیت را می‌گوید،
   وزن و اندازه اهمیت را** — همان قاعدهٔ سند طراحیِ فاز ۱.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ۱) ریتم عمودیِ صفحه
   جای ده‌ها `style="margin-top:16px"` که در Blade تکرار شده بود. بخش‌های
   یک صفحه فرزندِ مستقیمِ .page-stack می‌شوند و فاصله‌شان یک‌جا کنترل می‌شود.
   --------------------------------------------------------------------------- */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.page-stack > * { min-width: 0; }
/* جداکنندهٔ «موضوع عوض شد» — فاصلهٔ بیشتر، بدون خط. */
.page-stack > .is-new-topic { margin-top: var(--sp-4); }

/* ---------------------------------------------------------------------------
   ۲) سربرگ صفحه
   عنوان صفحه تا امروز با .card-title (همان کلاسِ عنوانِ داخلِ کارت) نوشته
   می‌شد، پس «نام صفحه» و «نام یک بخش» هم‌وزن دیده می‌شدند.
   --------------------------------------------------------------------------- */
/* ⚠️ خطِ زیرِ سربرگ فقط برای سربرگِ **صفحه** است، نه سربرگ‌های تودرتو:
   `.page-head` در چند جا (sales/show، sales/edit) داخل کارت هم استفاده شده
   و آنجا خط اضافه، مرزِ کاذب می‌سازد. پس به فرزندِ مستقیمِ .page-stack
   محدود شده — یعنی فقط صفحه‌هایی که در همین فاز بازطراحی شده‌اند. */
.page-stack > .page-head {
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.page-head-main { min-width: 0; }

.page-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--green-900);
  text-wrap: balance;
}

.page-sub {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

/* ردیفِ فرادادهٔ زیرِ عنوان (شمارهٔ حساب، تاریخ عضویت، برچسب‌ها) */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  font-size: 0.85rem;
  color: var(--muted);
}
.page-meta > * { min-width: 0; }
.page-meta .meta-sep { opacity: 0.45; }
.page-meta strong { color: var(--ink); font-weight: 600; }

.page-head-actions { align-items: center; gap: var(--sp-2); }

/* ---------------------------------------------------------------------------
   ۳) کارت
   `.card-flush` برای کارتی که فقط یک جدول است: جدول تا لبهٔ کارت می‌رود و
   پدینگ ۲۸ پیکسلی دو طرف را نمی‌خورد (در گوشی همین ۵۶ پیکسل تعیین‌کننده است).
   --------------------------------------------------------------------------- */
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.card-head > :first-child { margin: 0; }
/* جای `style="margin-top:0"` که روی هر .section-title اولِ کارت تکرار شده بود */
.section-title:first-child { margin-top: 0; }
.card-head .card-head-hint {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
}

.card-flush { padding: var(--sp-5) 0 0; }
.card-flush > .card-head,
.card-flush > .card-pad,
.card-flush > .card-foot,
.card-flush > .empty-state { padding-inline: var(--sp-6); }
.card-flush > .table-wrap { padding-bottom: 2px; }

/* ته‌کارت — جای صفحه‌بندی/جمع‌بندی، با خطِ جداکننده از جدول. */
.card-foot {
  padding-block: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  margin-top: -1px;
}
.card:not(.card-flush) > .card-foot { border-top: none; padding-bottom: 0; }

/* فاصلهٔ فرمِ فیلتر از سربرگِ تاشو (جای style="margin-top:12px") */
.filter-form { margin-top: var(--sp-3); }

/* ---------- ابزارهای کوچکِ مشترک ---------- */
/* متنی که فقط صفحه‌خوان باید بشنود (مثلاً عنوانِ ستونِ عملیات). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-muted { color: var(--muted); }

/* چند نشانِ وضعیت زیرِ هم در یک سلول (تحویل‌نشده + مرجوعی) */
.badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-inline-start: 44px;   /* هم‌راستا با متنِ کنارِ .identity-mark */
}

/* ستونِ ریز اقلام: پهنایش مهار شود وگرنه بقیهٔ ستون‌ها را می‌فشرد. */
.cell-items { max-width: 300px; white-space: normal; }

/* تگِ فقط‌خواندنی داخل جدول — همان چیپ، بدون رفتارِ کلیک‌شدنی. */
.tag-chip-static {
  cursor: default;
  font-size: 0.72rem;
  padding: 1px 8px;
}
.card-flush > .table-wrap > table > :is(thead, tbody, tfoot) > tr > :first-child { padding-inline-start: var(--sp-6); }
.card-flush > .table-wrap > table > :is(thead, tbody, tfoot) > tr > :last-child { padding-inline-end: var(--sp-6); }

/* ---------------------------------------------------------------------------
   ۴) جدول‌ها
   سرِ جدول حالا زمینهٔ خودش را دارد (قبلاً فقط متنِ کم‌رنگ بود و از ردیفِ اول
   جدا دیده نمی‌شد) و ردیفِ زیرِ نشانگر یک نوارِ سبزِ کوچک در لبهٔ راست می‌گیرد.
   --------------------------------------------------------------------------- */
.table-wrap > table > thead > tr > th {
  background: var(--sand-50);
  border-bottom: 1px solid var(--line-strong);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  padding-block: 11px;
}

/* سرِ چسبان برای فهرست‌های بلند — با اسکرولِ صفحه زیرِ نوارِ بالا می‌ماند. */
.table-stick-head > table > thead > tr > th {
  position: sticky;
  top: var(--topbar-h);
  z-index: 3;
}

.table-wrap > table > tbody > tr {
  transition: background 0.14s ease;
}
.table-wrap > table > tbody > tr > td:first-child {
  box-shadow: inset 3px 0 0 -3px transparent;
  transition: box-shadow 0.14s ease;
}
.table-wrap > table > tbody > tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--green-700);
}

/* ردیفی که «کارِ باز» دارد (تحویل‌نشده، مرجوعیِ در انتظار) باید در یک نگاه
   از بقیه جدا باشد — نه فقط با یک برچسبِ کوچک وسط ردیف. */
tr.row-flag > td:first-child { box-shadow: inset 3px 0 0 0 var(--warning); }
tr.row-flag:hover > td:first-child { box-shadow: inset 3px 0 0 0 var(--warning); }

/* ---------------------------------------------------------------------------
   ۵) سلولِ هویت — مربعِ گِردگوشه با حرفِ اول + نام + خطِ دوم
   اسکنِ ستونِ «مشتری» با یک لنگرِ بصری بسیار سریع‌تر از متنِ خالی است.
   دایره عمداً استفاده نشده (که همه‌جا هست)؛ مربعِ نرم.
   --------------------------------------------------------------------------- */
.identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.identity-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--sand-200);
  color: var(--green-900);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}
.identity-body { min-width: 0; }
.identity-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.identity-name:hover { color: var(--green-800); }
.identity-sub {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* نسخهٔ بزرگِ سلولِ هویت — برای سربرگِ صفحهٔ پروفایل */
.identity-lg { gap: 14px; }
.identity-lg .identity-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 1.35rem;
  background: var(--green-900);
  color: var(--sand-100);
}
.identity-lg .identity-name { white-space: normal; }

/* برچسب‌های مشتری زیرِ سربرگ */
.page-tags { margin-top: var(--sp-3); }

/* هشدارِ درون‌سربرگ (مثلاً «این حساب کش‌بک نمی‌گیرد») — عرضش به اندازهٔ
   متن است، نه تمام‌عرض، تا از ردیفِ دکمه‌ها فاصله بگیرد. */
.notice-inline {
  display: inline-block;
  max-width: 68ch;
  margin: var(--sp-3) 0 0;
}

/* ---------- کارت‌های پنلِ کناری ---------- */
.panel-card { padding: 18px 20px; }
.panel-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.panel-list { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.panel-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 0.86rem;
}
.panel-list dt { color: var(--muted); flex: 0 0 auto; }
.panel-list dd { margin: 0; font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.panel-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--muted);
}
.panel-note-top { margin-top: 0; padding-top: 0; border-top: none; margin-bottom: 10px; }
.panel-body { margin-top: var(--sp-3); }

/* ---------- کارتِ «مسیر جایگزین» ---------- */
/* خط‌چین + زمینهٔ کرم: بدون آنکه شبیه خطا شود، می‌گوید «این مسیرِ اصلی نیست». */
.card-alt {
  border: 1px dashed var(--sand-300);
  background: linear-gradient(0deg, var(--sand-50), var(--sand-50)), var(--card);
  box-shadow: none;
}
.alert-muted { background: var(--sand-100); color: var(--muted); }

/* ---------- ریزه‌کاری‌های تکرارشونده ---------- */
.stat-value-sm { font-size: 1.05rem !important; }
.cell-strong { display: block; font-weight: 600; }
.pager-block { margin-top: var(--sp-4); }
.field-spaced { margin-top: var(--sp-2); }
.select-auto { width: auto; }

/* ---------------------------------------------------------------------------
   ۶) عملیاتِ ردیف
   قبلاً هر ردیف یک دکمهٔ کاملِ «مشاهده پروفایل»/«جزئیات» داشت که ستونِ
   آخر را پر سر و صدا می‌کرد. حالا لینکِ آرام است و در hover/فوکوس پررنگ
   می‌شود — ولی **هرگز پنهان نمی‌شود** (روی لمسی hover وجود ندارد).
   --------------------------------------------------------------------------- */
.row-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding-inline: 10px;
  border-radius: var(--radius-xs);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.row-link::after { content: '‹'; font-size: 1.05rem; line-height: 1; opacity: 0.7; }
.row-link:hover {
  background: var(--green-100);
  color: var(--green-800);
  text-decoration: none;
}
tr:hover .row-link { color: var(--green-800); }

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* ---------------------------------------------------------------------------
   ۷) حالت خالی
   «هیچ داده‌ای نیست» تا امروز یک خطِ خاکستریِ وسط‌چین بود. حالا نشانه +
   عنوان + توضیح + راهِ خروج دارد.
   --------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 52px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 15px;
  background: var(--sand-100);
  color: var(--muted);
}
.empty-mark svg { width: 22px; height: 22px; }
.empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.empty-hint {
  margin: 0;
  font-size: 0.87rem;
  max-width: 44ch;
  line-height: 1.75;
}
.empty-state .actions-row { margin-top: var(--sp-3); justify-content: center; }

/* ---------------------------------------------------------------------------
   ۸) کارت‌های شاخص (KPI)
   --------------------------------------------------------------------------- */
.kpi {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.kpi-value { color: var(--green-900); line-height: 1.4; }
.kpi.is-primary {
  /* گرادیانِ ملایمِ شعاعی به‌جای رنگِ تختِ یکدست — تنها کارتِ تیرهٔ صفحه
     نباید مثل یک مستطیلِ چاپ‌شده دیده شود. */
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(142, 214, 179, 0.16), transparent 62%),
    var(--green-900);
}
.kpi.is-primary .kpi-value { color: #fff; }

.stat-card { border: 1px solid var(--line); }
.stat-card .stat-value { line-height: 1.45; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   ۹) نوار جست‌وجو/فیلتر
   --------------------------------------------------------------------------- */
.collapsible > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.collapsible > summary:hover { color: var(--green-900); }
/* «+ / −» متنی جای خود را به یک فلشِ چرخان می‌دهد (هم‌الگوی .nav-group).
   ⚠️ حالتِ [open] هم باید صریح خنثی شود: قاعدهٔ قدیمیِ
   `.collabsible[open] > summary::before` ویژگیِ بالاتری دارد و وگرنه با
   بازشدنِ فیلتر، «−» دوباره برمی‌گشت. */
.collapsible > summary::before,
.collapsible[open] > summary::before { content: none; }
.collapsible > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  opacity: 0.7;
}
.collapsible[open] > summary::after { transform: rotate(135deg); }

.filter-chip {
  padding-block: 5px;
  font-weight: 500;
}
.filter-chip a {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 0.72rem;
}
.filter-chip a:hover { background: rgba(13, 53, 39, 0.12); text-decoration: none; }

/* ---------------------------------------------------------------------------
   ۱۰) نشان‌ها (badge)
   --------------------------------------------------------------------------- */
.badge {
  font-weight: 600;
  line-height: 1.7;
  border-radius: 8px;   /* گوشهٔ نرم به‌جای قرصِ کامل — با گوشهٔ بقیهٔ اجزا هم‌خانواده است */
  padding: 2px 9px;
}
.badge-neutral { border-color: var(--line-strong); }

/* ---------------------------------------------------------------------------
   ۱۱) واکنش‌گرایی — «فهرست در گوشی جدول نیست، کارت است»
   ----------------------------------------------------------------------------
   خواستِ صریح مالک (۱۴۰۵/۰۶/۱۰): ریسپانسیو مهم‌ترین معیار است.
   `.table-wrap` جلوی سرریزِ صفحه را می‌گیرد ولی کاربر را مجبور می‌کند برای
   دیدن مبلغ، جدول را افقی بکشد. زیرِ ۷۲۰ پیکسل هر ردیفِ جدولِ `.table-cards`
   به یک کارتِ عمودی تبدیل می‌شود: نامِ ستون از `data-label` می‌آید.
   ⚠️ هر <td> باید `data-label` داشته باشد وگرنه در گوشی بی‌عنوان می‌ماند؛
   سلولِ اولِ هر ردیف عنوانِ کارت است و data-label نمی‌گیرد.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .table-cards > table,
  .table-cards > table > tbody,
  .table-cards > table > tbody > tr,
  .table-cards > table > tbody > tr > td { display: block; width: auto; }

  .table-cards > table > thead,
  .table-cards > table > tfoot { display: none; }

  .table-cards { overflow: visible; }

  .table-cards > table > tbody > tr {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: var(--shadow-xs);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: 10px;
  }
  .table-cards > table > tbody > tr:hover { background: var(--card); }
  .table-cards > table > tbody > tr.row-flag {
    border-inline-start: 3px solid var(--warning);
  }

  .table-cards > table > tbody > tr > td {
    padding: 5px 0;
    border-bottom: none;
    white-space: normal;
    box-shadow: none !important;
  }

  /* سلولِ اول = عنوانِ کارت */
  .table-cards > table > tbody > tr > td:first-child {
    padding-top: 0;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--line);
    font-weight: 600;
  }

  /* بقیه: «برچسب ....... مقدار» در یک خط */
  .table-cards > table > tbody > tr > td[data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    text-align: start;
  }
  .table-cards > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
  }
  /* ستون‌های مبلغ در جدول `text-align:left` دارند؛ در کارت باید کنارِ
     برچسبشان بنشینند، نه ته کارت. */
  .table-cards > table > tbody > tr > td.num { text-align: start; }

  /* ردیفِ عملیات ته کارت، تمام‌عرض و قابل‌لمس */
  .table-cards > table > tbody > tr > td:last-child:not([data-label]) {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--line);
  }
  .table-cards .row-link,
  .table-cards .row-actions > .btn {
    width: 100%;
    min-height: var(--tap);
    justify-content: center;
  }
  .table-cards .row-link {
    border: 1px solid var(--line-strong);
    color: var(--green-800);
  }

  /* ستونی که در جدول پنهان می‌شد، در کارت جا دارد و باید برگردد. */
  .table-cards .col-hide-sm { display: block; }
  .table-cards td.col-hide-sm[data-label] { display: flex; }

  /* در کارت، عرضِ سلول کلِ کارت است؛ مهارهای مخصوصِ جدول باید برداشته شوند. */
  .table-cards .cell-items { max-width: none; }
  .table-cards .badge-stack { padding-inline-start: 0; }
  /* «اقلام» فهرستِ چندخطی است و کنارِ برچسبش جا نمی‌شود ⇒ زیرِ آن. */
  .table-cards td.cell-items[data-label] {
    display: block;
  }
  .table-cards td.cell-items[data-label]::before {
    display: block;
    margin-bottom: 4px;
  }
}

/* KPIها در گوشی: دو ستونِ خوانا به‌جای auto-fit ۱۳۰ پیکسلی که عددِ
   ریالیِ بلند را می‌شکست. */
@media (max-width: 560px) {
  .kpi-row,
  .stat-grid,
  .customer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-row > .kpi.is-primary,
  .customer-summary > .stat-card:first-child { grid-column: 1 / -1; }
  .kpi-value { font-size: 1.05rem; }
  .stat-card .stat-value { font-size: 1.15rem; }

  .page-title { font-size: 1.3rem; }
  .page-head-actions { width: 100%; }
  .page-head-actions > .btn { flex: 1 1 auto; }
}