/* ==========================================================================
   دیزاین‌سیستم لوبریمکس ERP
   --------------------------------------------------------------------------
   بدون build step، بدون وابستگی خارجی. همه‌چیز با CSS variable تنظیم می‌شود،
   پس تغییر رنگ یا فاصله‌ها یک‌جا انجام می‌شود نه در ۵۰ فایل.

   ساختار: توکن‌ها → پایه → چیدمان → اجزا → کمکی‌ها
   ========================================================================== */

/* ------------------------------------------------------------------ فونت
   وزیرمتن، **از روی خودِ سرور**. پیش از این از jsDelivr گرفته می‌شد و روی
   سرور داخل ایران یعنی: یا کند، یا بسته — و آن‌وقت همه‌چیز با Tahoma رندر
   می‌شد، که دقیقاً همان چیزی است که «قدیمی» به نظر می‌رسد. یک پنلِ داخلی
   نباید برای فونتش به اینترنت وابسته باشد.

   چهار وزن کافی است (۴۰۰ متن، ۵۰۰ برچسب، ۶۰۰ تیتر و عدد، ۷۰۰ تأکید).
   هر وزنِ اضافه ۵۰ کیلوبایت است بی‌آنکه چیزی به طراحی اضافه کند.
   `font-display: swap` یعنی متن بلافاصله دیده می‌شود، نه بعد از فونت.
   ========================================================================== */
@font-face {
  font-family: Vazirmatn; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Vazirmatn-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Vazirmatn; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Vazirmatn-Medium.woff2") format("woff2");
}
@font-face {
  font-family: Vazirmatn; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: Vazirmatn; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Vazirmatn-Bold.woff2") format("woff2");
}

/* ---------------------------------------------------------------- توکن‌ها
   هویت: **سورمه‌ای زنده** (بدنه) + **نارنجی** (اقدام) + شش رنگ وضعیت.

   نسخه‌ی قبل سورمه‌ایِ کدر و کم‌اشباعی داشت با سایه‌های تقریباً صاف و گردیِ
   ۴ تا ۸ پیکسل. نتیجه‌اش درست همان چیزی بود که کاربر گفت: «خشک و بی‌روح».
   این نسخه سه چیز را عوض می‌کند و بقیه‌ی برنامه بدون دست‌خوردن تغییر
   می‌کند، چون همه‌چیز از همین متغیرها می‌آید:

   ۱. **رنگ** — آبیِ برند اشباع بیشتری دارد و کمی به ایندیگو می‌زند، پس
      زنده است بی‌آنکه از خانواده‌ی سورمه‌ای بیرون بزند. شش رنگ وضعیت هر
      کدام پنج پله دارند (۵۰ برای پس‌زمینه‌ی روشن، ۶۰۰ برای متن روی آن)،
      چون نشانِ رنگی بدون جفتِ پس‌زمینه/متنِ حساب‌شده یا خوانا نیست یا جیغ.
   ۲. **سایه‌ی لایه‌ای** — هر سایه دو لایه دارد: یکی تیز و نزدیک برای لبه،
      یکی پخش و دور برای عمق. سایه‌ی تک‌لایه همیشه یا کثیف به نظر می‌رسد یا
      دیده نمی‌شود.
   ۳. **گردی بیشتر** — ۱۰ تا ۱۸ پیکسل به‌جای ۴ تا ۸. همین یک عدد بیشترین
      سهم را در «مدرن به نظر رسیدن» دارد.

   **حالت تیره حذف شده است** (تصمیم کاربر). همه‌ی وقت صرف یک حالتِ بی‌نقص
   می‌شود؛ حالت تیره‌ی نیمه‌کاره از نبودش بدتر است.
   ========================================================================== */
:root {
  color-scheme: light;

  /* برند — سورمه‌ای با جانِ بیشتر. ۹۰۰ و ۹۵۰ بدنه‌ی منوی کناری‌اند،
     ۵۰۰ و ۶۰۰ رنگِ لینک و حالت فعال. */
  --brand-50:  #eff4ff;
  --brand-100: #dbe6fe;
  --brand-200: #bfd3fe;
  --brand-300: #93b4fd;
  --brand-400: #608cfa;
  --brand-500: #3b68f6;
  --brand-600: #2549eb;
  --brand-700: #1d37d8;
  --brand-800: #1e30af;
  --brand-900: #1e2f8a;
  --brand-950: #172154;

  /* تأکید — نارنجی. فقط جایی می‌آید که کاربر باید کاری بکند: دکمه‌ی اصلی،
     نشانه‌ی سررسید، عددِ در حال تغییر. اگر همه‌جا بیاید دیگر تأکید نیست. */
  --accent-50:  #fff7ed;
  --accent-100: #ffedd5;
  --accent-200: #fed7aa;
  --accent-300: #fdba74;
  --accent-400: #fb923c;
  --accent-500: #f97316;
  --accent-600: #ea580c;
  --accent-700: #c2410c;
  --accent-800: #9a3412;
  --accent-900: #7c2d12;
  --accent-ink: #ffffff;

  /* خاکستریِ سرد و هم‌خانواده‌ی آبی — خاکستریِ خنثی کنار آبی، کثیف دیده
     می‌شود. */
  --gray-25:  #fbfcfe;
  --gray-50:  #f6f8fc;
  --gray-100: #eff2f8;
  --gray-200: #e2e8f2;
  --gray-300: #cdd6e5;
  --gray-400: #9aa7bf;
  --gray-500: #6b7a96;
  --gray-600: #4e5c77;
  --gray-700: #3a465d;
  --gray-800: #262f42;
  --gray-900: #161d2c;

  /* ---- شش رنگ وضعیت.
     هر کدام: ۵۰ پس‌زمینه‌ی نشان · ۱۰۰ لبه · ۵۰۰ رنگِ پُر · ۶۰۰ متن روی ۵۰
     · ۷۰۰ متنِ پررنگ. جفت‌ها برای کنتراست AA روی سفید بررسی شده‌اند. */
  --green-50:  #ecfdf5; --green-100: #d1fae5; --green-500: #10b981;
  --green-600: #059669; --green-700: #047857;

  --amber-50:  #fffbeb; --amber-100: #fef3c7; --amber-500: #f59e0b;
  --amber-600: #d97706; --amber-700: #b45309;

  --red-50:    #fef2f2; --red-100:   #fee2e2; --red-500:   #ef4444;
  --red-600:   #dc2626; --red-700:   #b91c1c;

  --blue-50:   #eff6ff; --blue-100:  #dbeafe; --blue-500:  #3b82f6;
  --blue-600:  #2563eb; --blue-700:  #1d4ed8;

  --violet-50: #f5f3ff; --violet-100:#ede9fe; --violet-500:#8b5cf6;
  --violet-600:#7c3aed; --violet-700:#6d28d9;

  --cyan-50:   #ecfeff; --cyan-100:  #cffafe; --cyan-500:  #06b6d4;
  --cyan-600:  #0891b2; --cyan-700:  #0e7490;

  /* سطوح */
  --bg:        #f5f7fb;
  --surface:   #ffffff;
  --surface-2: var(--gray-50);
  --surface-3: var(--gray-100);
  --sidebar:   var(--brand-950);
  --sidebar-2: #1d2a63;

  /* متن */
  --text:      var(--gray-900);
  --text-2:    var(--gray-600);
  --text-3:    var(--gray-500);
  --text-inv:  #ffffff;

  --line:   var(--gray-200);
  --line-2: var(--gray-300);

  /* فاصله — مضرب ۴ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* گردی — بیشترین سهم در «مدرن به نظر رسیدن» */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px;
  --r-full: 999px;

  /* سایه‌ی دولایه: لبه‌ی نزدیک + عمقِ پخش */
  --sh-xs: 0 1px 2px rgba(23,33,84,.05);
  --sh-sm: 0 1px 3px rgba(23,33,84,.07), 0 1px 2px rgba(23,33,84,.04);
  --sh:    0 2px 6px -1px rgba(23,33,84,.08), 0 1px 3px rgba(23,33,84,.05);
  --sh-md: 0 8px 18px -6px rgba(23,33,84,.12), 0 2px 6px rgba(23,33,84,.06);
  --sh-lg: 0 18px 36px -10px rgba(23,33,84,.16), 0 4px 12px rgba(23,33,84,.07);
  --sh-xl: 0 32px 64px -16px rgba(23,33,84,.22), 0 8px 20px rgba(23,33,84,.08);
  /* حلقه‌ی فوکوس — همه‌جا یکی، وگرنه دسترس‌پذیری تکه‌تکه می‌شود */
  --ring: 0 0 0 3px rgba(59,104,246,.22);
  --ring-danger: 0 0 0 3px rgba(239,68,68,.20);

  /* اندازه‌ها — کمی بازتر از نسخه‌ی قبل. «هوادار» یعنی نفس‌کشیدنِ عنصرها،
     ولی نه آن‌قدر که ردیف‌های جدول کم شود و اسکرول زیاد. */
  --sidebar-w: 246px;
  --sidebar-w-mini: 68px;
  --topbar-h: 60px;

  /* پلکان اندازه‌ی متن */
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs: 13.5px;
  --fs-md: 15px;   --fs-lg: 17px;   --fs-xl: 20px;  --fs-2xl: 27px;
  --fs-3xl: 34px;

  /* ---- حرکت.
     همه زیر ۲۵۰ms (تصمیم کاربر: «محسوس ولی سریع»). سه منحنی کافی است:
     `ease` برای تغییر رنگ و حالت، `ease-out` برای ورود چیزی که باید سریع
     بنشیند، و `spring` فقط برای چیزی که کاربر مستقیم حرکتش می‌دهد. */
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 240ms;
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ------------------------------------------------- پالت‌های رنگِ تأکید
   فقط ۱۱ متغیر عوض می‌شود؛ هیچ کامپوننتی نمی‌داند رنگ تأکید چیست. */
[data-accent="azure"] {
  --accent-50:#eff6ff; --accent-100:#dbeafe; --accent-200:#bfdbfe;
  --accent-300:#93c5fd; --accent-400:#60a5fa; --accent-500:#3b82f6;
  --accent-600:#2563eb; --accent-700:#1d4ed8; --accent-800:#1e40af;
  --accent-900:#1e3a8a;
}
[data-accent="teal"] {
  --accent-50:#f0fdfa; --accent-100:#ccfbf1; --accent-200:#99f6e4;
  --accent-300:#5eead4; --accent-400:#2dd4bf; --accent-500:#14b8a6;
  --accent-600:#0d9488; --accent-700:#0f766e; --accent-800:#115e59;
  --accent-900:#134e4a;
}
[data-accent="violet"] {
  --accent-50:#f5f3ff; --accent-100:#ede9fe; --accent-200:#ddd6fe;
  --accent-300:#c4b5fd; --accent-400:#a78bfa; --accent-500:#8b5cf6;
  --accent-600:#7c3aed; --accent-700:#6d28d9; --accent-800:#5b21b6;
  --accent-900:#4c1d95;
}

/* کسی که در سیستمش حرکت را خاموش کرده، باید خاموش بماند. این یک سلیقه
   نیست: برای بخشی از کاربران انیمیشن باعث سرگیجه و تهوع می‌شود. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
/* ------------------------------------------------------------------ پایه */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Vazirmatn, "Segoe UI", Tahoma, "Iranian Sans", sans-serif;
  font-size: var(--fs);
  /* ۱٫۷ برای متنِ مقاله خوب است، برای جدولِ پرردیف زیادی باز. ۱٫۶ هنوز
     برای فارسی (که کشیدگی و زیرنویس دارد) راحت است. */
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { margin: 0; font-weight: 700; line-height: 1.4; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p  { margin: 0 0 var(--s3); }

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

/* ارقام عمداً هم‌عرض (tabular-nums) نیستند: در وزیرمتن ارقامِ هم‌عرض «۱ ۲ ۶ ، ۰ ۰ ۰» را از هم
   باز می‌کنند و خواندنِ مبلغ چشم را خسته می‌کند — نرم‌افزارهای حسابداری هم همین‌طور فشرده‌اند. */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--r-full);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* -------------------------------------------------------------- چیدمان */
.app { display: flex; min-height: 100vh; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.content { padding: var(--s6); flex: 1; }
.content > * + * { margin-top: var(--s5); }

@media (max-width: 900px) {
  .content { padding: var(--s4); }
}

/* ---------------------------------------------------------------- کارت */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card + .card, .grid + .card, .card + .grid { margin-top: var(--s4); }
.card > .card-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.card > .card-head h2, .card > .card-head h3 {
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -.006em;
}
.card > .card-head .spacer, .card > .card-head .sp { flex: 1; }
.card > .card-body { padding: var(--s5); }
.card > .card-body.tight { padding: 0; }
.card > .card-foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* کارتی که کل سطحش لینک است باید با موس واکنش بدهد، وگرنه کاربر نمی‌داند
   قابل کلیک است. فقط با کلاس صریح، نه روی هر کارتی. */
.card.hoverable {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.card.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--line-2);
}

/* --------------------------------------------------------------- شبکه */
.grid { display: grid; gap: var(--s4); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.sidebar-right { grid-template-columns: minmax(0,1fr) 330px; }
@media (max-width: 1200px) { .grid.c4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1000px) {
  .grid.c3, .grid.sidebar-right { grid-template-columns: minmax(0, 1fr); }
}
/* روی گوشی، کارت‌های آمار **دوتایی** می‌مانند نه تک‌ستونه: چهار کارتِ
   تمام‌عرض یعنی ۷۰۰ پیکسل اسکرول پیش از دیدن اولین ردیف داده. برای مدیری
   که نگاه سریع می‌اندازد، همین چهار عدد کلِ کار است و باید یک‌جا دیده شوند. */
@media (max-width: 700px) {
  .grid.c2 { grid-template-columns: minmax(0, 1fr); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .grid.c4 .stat { padding: var(--s3); }
  .grid.c4 .stat .value { font-size: var(--fs-md); }
  .grid.c4 .stat .ic-box { display: none; }   /* در عرض کم، عدد مهم‌تر از آیکن است */
}

.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: var(--s2); }
.row .spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }

/* ------------------------------------------------------------ آمار کارت
   بازطراحی: آیکن **کنارِ برچسب** می‌نشیند نه در گوشه‌ی شناور. حالت قبلی
   آیکن را `position:absolute` در گوشه می‌گذاشت و روی عددهای بلندِ ریالی
   با رقم برخورد می‌کرد؛ و چون عدد از راست می‌آید و آیکن هم سمت راست بود،
   دقیقاً جایی می‌نشست که مهم‌ترین رقم‌ها هستند.

   نوار رنگیِ بالای کارت هویتِ شاخص را می‌دهد بی‌آنکه کل کارت رنگی شود —
   چهار کارتِ تماماً رنگی کنار هم، هیچ‌کدام دیگر برجسته نیست. */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5) var(--s5);
  box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand-500); opacity: .85;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.stat .label {
  font-size: var(--fs-sm); color: var(--text-2); font-weight: 500;
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1);
}
.stat .value {
  font-size: var(--fs-2xl); font-weight: 700; margin-top: var(--s2);
  letter-spacing: -.02em; line-height: 1.25;
}
.stat .value .unit {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-3);
  margin-inline-start: 4px;
}
.stat .sub {
  font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s2);
  display: flex; align-items: center; gap: var(--s2);
}
.stat .ic-box {
  position: absolute; inset-inline-end: var(--s4); top: var(--s4);
  width: 34px; height: 34px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
  opacity: .9;
}
.stat.green  { --stat-tone: var(--green-500); }
.stat.amber  { --stat-tone: var(--amber-500); }
.stat.red    { --stat-tone: var(--red-500); }
.stat.violet { --stat-tone: var(--violet-500); }
.stat.cyan   { --stat-tone: var(--cyan-500); }
.stat.green::before, .stat.amber::before, .stat.red::before,
.stat.violet::before, .stat.cyan::before { background: var(--stat-tone); }
.stat.green  .ic-box { background: var(--green-50);  color: var(--green-700); }
.stat.amber  .ic-box { background: var(--amber-50);  color: var(--amber-700); }
.stat.red    .ic-box { background: var(--red-50);    color: var(--red-700); }
.stat.violet .ic-box { background: var(--violet-50); color: var(--violet-700); }
.stat.cyan   .ic-box { background: var(--cyan-50);   color: var(--cyan-700); }

/* روند: قرصِ کوچک، نه متنِ رنگی. متنِ رنگیِ تنها در کنار متنِ خاکستری
   گم می‌شود و دقیقاً همان چیزی است که باید اول دیده شود. */
.trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-full); 
  background: var(--surface-3); color: var(--text-2);
}
.trend.up   { background: var(--green-50); color: var(--green-700); }
.trend.down { background: var(--red-50);   color: var(--red-700); }

/* --------------------------------------------------------------- جدول */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs); }
/* سربرگ: حروف کوچک‌تر و کم‌رنگ‌تر تا داده جلو بیفتد، نه عنوان ستون */
table.tbl th {
  text-align: right; font-weight: 600; font-size: var(--fs-xs);
  color: var(--text-3); padding: var(--s3);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
  letter-spacing: .02em;
}
table.tbl td {
  padding: 10px var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
/* ستون اول معمولاً نام است و نباید کلمه‌به‌کلمه بشکند. روی تبلت، «اکتان
   بوستر اکتو پلاس لوبریمکس» به شش سطر تکه‌تکه می‌شد. */
table.tbl td:first-child { min-width: 8rem; }
table.tbl tbody tr { transition: background var(--dur-fast) var(--ease); }
table.tbl tbody tr:hover { background: var(--brand-50); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.left, table.tbl th.left { text-align: left; }
table.tbl td.center, table.tbl th.center { text-align: center; }
table.tbl .muted { color: var(--text-3); }
table.tbl tfoot td {
  padding: var(--s3); font-weight: 700;
  border-top: 2px solid var(--line-2); background: var(--surface-2);
}

/* حالت خالی — «هیچ داده‌ای نیست» باید مثل یک پیام طراحی‌شده به نظر برسد،
   نه مثل صفحه‌ای که بارگذاری‌اش شکست خورده. */
.empty { padding: var(--s12) var(--s5); text-align: center; }
.empty .ic {
  width: 64px; height: 64px; margin: 0 auto var(--s4);
  border-radius: var(--r-xl); display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-400);
}
.empty h3 { color: var(--text); font-size: var(--fs-md); margin-bottom: var(--s2); }
.empty p { color: var(--text-3); max-width: 40ch; margin: 0 auto; }
.empty .btn { margin-top: var(--s4); }

/* --------------------------------------------------------------- دکمه
   ارتفاع ثابت ۳۶ پیکسل برای همه‌ی دکمه‌های اندازه‌ی معمولی، تا ردیفِ
   دکمه‌ها بالا و پایین نپرد وقتی یکی آیکن دارد و دیگری ندارد. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 36px; padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r);
  font: inherit; font-size: var(--fs); font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: var(--sh-xs);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease);
}
.btn:hover {
  background: var(--surface-2); border-color: var(--line-2);
  color: var(--text); box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--sh-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[disabled] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* دکمه‌ی اصلی **رنگ تأکید** است، نه رنگ برند. قاعده‌ای که از اول درست بود
   و باید بماند: نارنجی فقط جایی می‌آید که کاربر باید کاری بکند، و در هر
   صفحه فقط یک دکمه‌ی اصلی هست. اگر نارنجی همه‌جا بیاید دیگر تأکید نیست. */
.btn.primary {
  background: var(--accent-600); border-color: var(--accent-600); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(234,88,12,.24);
}
.btn.primary:hover {
  background: var(--accent-700); border-color: var(--accent-700); color: var(--accent-ink);
  box-shadow: 0 6px 14px -4px rgba(234,88,12,.42);
}
/* دکمه‌ی پُررنگِ برند — برای جایی که اقدام نیست ولی باید برجسته باشد
   (مثلاً «ورود» در صفحه‌ی لاگین که تنها دکمه‌ی صفحه است). */
.btn.brand {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
  box-shadow: 0 1px 2px rgba(30,47,138,.24);
}
.btn.brand:hover {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
  box-shadow: 0 6px 14px -4px rgba(30,47,138,.42);
}
.btn.success { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.btn.success:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.btn.danger { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.btn.danger:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.btn.danger:focus-visible { box-shadow: var(--ring-danger); }

.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); box-shadow: none; transform: none; }

.btn.sm { min-height: 30px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.btn.lg { min-height: 44px; padding: 0 var(--s6); font-size: var(--fs-md); }
.btn.icon { padding: 0; width: 36px; }
.btn.icon.sm { width: 30px; }
.btn.block { width: 100%; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-inline-start: -1px; box-shadow: none; transform: none; }
.btn-group .btn:first-child { border-radius: 0 var(--r) var(--r) 0; margin: 0; }
.btn-group .btn:last-child  { border-radius: var(--r) 0 0 var(--r); }
.btn-group .btn.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; z-index: 1; }

/* ---------------------------------------------------------------- فرم */
label.lbl {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-2); margin-bottom: var(--s2);
}
label.lbl .req { color: var(--red-500); }

.input, select.input, textarea.input {
  width: 100%;
  min-height: 38px; padding: 8px var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--fs);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input:hover:not(:disabled) { border-color: var(--gray-400); }
.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}
.input::placeholder { color: var(--text-3); }
.input:disabled {
  background: var(--surface-3); color: var(--text-3);
  cursor: not-allowed; border-color: var(--line);
}
/* ورودیِ نامعتبر — قرمزیِ لبه به‌تنهایی برای کسی که رنگ را تشخیص نمی‌دهد
   کافی نیست، پس متن راهنما هم زیرش قرمز می‌شود و `aria-invalid` را هم
   می‌پذیریم تا صفحه‌خوان خبردار شود. */
.input[aria-invalid="true"], .field.error .input {
  border-color: var(--red-500); background: var(--red-50);
}
.input[aria-invalid="true"]:focus, .field.error .input:focus {
  box-shadow: var(--ring-danger);
}
textarea.input { min-height: 90px; resize: vertical; line-height: 1.7; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a96' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--s3) center;
  padding-inline-start: var(--s8);
  cursor: pointer;
}
.field { margin-bottom: var(--s4); }
.field .hint { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s1); }
.field.error .hint, .hint.err { color: var(--red-600); }

.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.check input {
  width: 17px; height: 17px; accent-color: var(--brand-600); cursor: pointer;
  flex: none;
}

/* سوییچ رسمی/غیررسمی — پرکاربردترین کنترل سیستم */
.book-switch {
  display: inline-flex; background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px;
}
.book-switch a, .book-switch button {
  padding: 5px 14px; border-radius: var(--r-full); border: 0; background: transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-2); cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease);
}
.book-switch .on {
  background: var(--surface); color: var(--text); box-shadow: var(--sh-sm);
}
.book-switch .on.official   { color: var(--brand-700); }
.book-switch .on.unofficial { color: var(--amber-700); }

/* --------------------------------------------------------------- نشان */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.7;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge.green  { background: var(--green-50);  color: var(--green-700);  border-color: var(--green-100); }
.badge.amber  { background: var(--amber-50);  color: var(--amber-700);  border-color: var(--amber-100); }
.badge.red    { background: var(--red-50);    color: var(--red-700);    border-color: var(--red-100); }
.badge.blue   { background: var(--blue-50);   color: var(--blue-700);   border-color: var(--blue-100); }
.badge.violet { background: var(--violet-50); color: var(--violet-700); border-color: var(--violet-100); }
.badge.cyan   { background: var(--cyan-50);   color: var(--cyan-700);   border-color: var(--cyan-100); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--line); white-space: nowrap;
}

/* --------------------------------------------------------------- پیام
   نوار رنگیِ لبه به‌جای رنگ‌کردن کل کادر: پیام خوانا می‌ماند و صفحه‌ای که
   سه هشدار دارد شبیه چراغ‌قوه نمی‌شود. */
.alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gray-400);
  background: var(--surface-2);
  font-size: var(--fs); line-height: 1.75;
  margin-bottom: var(--s4);
}
.alert > span:first-child { flex: none; margin-top: 3px; }
.alert.success, .alert.ok {
  background: var(--green-50); border-color: var(--green-100);
  border-inline-start-color: var(--green-500); color: var(--green-700);
}
.alert.danger {
  background: var(--red-50); border-color: var(--red-100);
  border-inline-start-color: var(--red-500); color: var(--red-700);
}
.alert.warning, .alert.warn {
  background: var(--amber-50); border-color: var(--amber-100);
  border-inline-start-color: var(--amber-500); color: var(--amber-700);
}
.alert.info {
  background: var(--blue-50); border-color: var(--blue-100);
  border-inline-start-color: var(--blue-500); color: var(--blue-700);
}

.toast-wrap {
  position: fixed; top: var(--s5); inset-inline-start: var(--s5);
  z-index: 100; display: flex; flex-direction: column; gap: var(--s2);
}
.toast {
  padding: var(--s3) var(--s4); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); background: var(--surface);
  border: 1px solid var(--line); min-width: 260px;
  animation: slide-in var(--dur-slow) var(--ease-out);
}
@keyframes slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   کانبان — یک جزء برای هر سه برد
   --------------------------------------------------------------------------
   قیف فروش (`/crm`)، گردش سفارش (`/pipeline`) و برد پروژه (`/projects/{id}`)
   هر کدام CSS خودشان را داشتند: سه اسم برای کارت، سه جور ستون، و برای یکی
   دو لایه‌ی روی هم. حالا یک جزء است (`components/kanban.html`) و هر برد
   فقط محتوای کارتش را می‌چیند.

   کشیدن و رها کردن در `app.js` است (`initKanban`) و فقط روی بردی فعال است که
   `data-move` دارد. گردش سفارش عمداً ندارد: جابه‌جایی سفارش گذارِ فرایند است
   و باید از کارتابل بگذرد تا اجازه و تاریخچه ثبت شود.

   کارتِ درحال‌کشیدن به `body` منتقل می‌شود تا ستونِ اسکرول‌دار بُرشش ندهد؛
   پس استایل کارت **بدون** والدِ `.kb` نوشته شده — وگرنه وسطِ کشیدن ظاهرش
   را از دست می‌داد.
   ========================================================================== */
.tone-slate, .tone-gray { --tone-50: var(--gray-50); --tone-100: var(--gray-100); --tone-500: var(--gray-400); --tone-600: var(--gray-600); }
.tone-teal { --tone-50: var(--cyan-50); --tone-100: var(--cyan-100); --tone-500: var(--cyan-500); --tone-600: var(--cyan-700); }

/* ---- نوار بالای برد */
.kb-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin: 0; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-xs);
}
.kb-bar .spacer { flex: 1; }
.kb-bar form { display: contents; }
.kb-search { position: relative; display: flex; align-items: center; flex: 0 1 270px; min-width: 170px; }
.kb-search > svg { position: absolute; inset-inline-start: 12px; color: var(--text-3); pointer-events: none; }
.kb-search input {
  width: 100%; height: 34px; padding-inline: 36px 12px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.kb-search input:focus { outline: none; background: var(--surface); border-color: var(--brand-400); box-shadow: var(--ring); }
.kb-bar select.input {
  width: auto; min-width: 160px; height: 34px; padding-block: 0;
  border-radius: var(--r-full); font-size: var(--fs-sm);
}
.kb-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
  color: var(--text-2); font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.kb-chip:hover { color: var(--text); border-color: var(--line-2); }
.kb-chip[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); font-weight: 600; }
.kb-chip.warn[aria-pressed="true"] { background: var(--red-50); border-color: var(--red-100); color: var(--red-700); }
.kb-found { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.kb-view {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2);
}
.kb-view button {
  display: grid; place-items: center; width: 32px; height: 26px; padding: 0;
  border: 0; border-radius: var(--r-full); background: none; color: var(--text-3); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.kb-view button:hover { color: var(--text); }
.kb-view button[aria-pressed="true"] { background: var(--surface); color: var(--brand-700); box-shadow: var(--sh-xs); }
.kb-bar + .kb { margin-top: var(--s3) !important; }

/* ---- برد و ستون */
.kb {
  display: flex; align-items: flex-start; gap: var(--s3);
  overflow-x: auto; padding: 2px 2px var(--s4);
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.kb-col {
  flex: 0 0 292px; display: flex; flex-direction: column; min-width: 0;
  max-height: calc(100vh - var(--topbar-h) - 150px); min-height: 190px;
  background: var(--gray-50);
  background: color-mix(in srgb, var(--tone-50, var(--gray-50)) 40%, var(--gray-50));
  border: 1px solid var(--line); border-radius: var(--r-xl);
  scroll-snap-align: start;
  /* فقط شفافیت، نه جابه‌جایی: `transform` روی ستون آن را ظرفِ کارتِ
     `position: fixed` می‌کرد و کارتِ درحال‌کشیدن جای غلطی می‌افتاد. */
  animation: kb-in var(--dur-slow) var(--ease-out) both;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
@keyframes kb-in { from { opacity: 0; } }
.kb-col-h {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  /* نوار رنگیِ بالای ستون — هویتِ مرحله، بی‌آنکه کل سربرگ رنگی شود */
  box-shadow: inset 0 3px 0 var(--tone-500, var(--gray-400));
}
.kb-col-h h3 {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 700;
}
.kb-col-h .spacer { flex: 1; }
.kb-col-h .badge { flex: 0 0 auto; }
.kb-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-500, var(--gray-400)); }
.kb-n {
  flex: 0 0 auto; min-width: 22px; padding: 0 7px; border-radius: var(--r-full);
  text-align: center; font-size: var(--fs-xs); font-weight: 700; line-height: 20px;
  background: var(--tone-100, var(--gray-100)); color: var(--tone-600, var(--text-2));
}
.kb-wip { margin-inline-start: -4px; font-size: var(--fs-xs); color: var(--text-3); }
.kb-sum { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); white-space: nowrap; }
.kb-sum:empty { display: none; }
.kb-col.over-wip { border-color: var(--amber-500); }
.kb-col.over-wip .kb-n { background: var(--amber-100); color: var(--amber-700); }
.kb-col.is-over { border-color: var(--tone-500, var(--brand-400)); box-shadow: 0 0 0 3px var(--tone-100, var(--brand-100)); }
.kb-hint {
  margin: 0 var(--s3) var(--s2); padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface);
  font-size: var(--fs-xs); line-height: 1.7; color: var(--text-3);
}
.kb-list {
  flex: 1; min-height: 80px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: 2px var(--s2) var(--s2); scrollbar-width: thin;
}
.kb-empty {
  display: none; align-items: center; justify-content: center; gap: 6px;
  padding: var(--s5) var(--s2); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  font-size: var(--fs-xs); color: var(--text-3);
}
.kb-list.is-empty > .kb-empty { display: flex; }
.kb.dragging .kb-empty { display: none !important; }

/* ---- کارت */
.kb-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--s3); color: var(--text); text-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.kb-card[hidden] { display: none !important; }
.kb[data-move] .kb-card { cursor: grab; }
.kb-card:hover { color: var(--text); border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-2px); }
.kb.dragging .kb-card:hover { transform: none; box-shadow: var(--sh-xs); border-color: var(--line); }
.kb-card.late  { border-inline-start: 3px solid var(--red-500); }
.kb-card.stale { border-inline-start: 3px solid var(--amber-500); }
.kb-card.done { opacity: .72; }
.kb-card.done .kb-card-t { text-decoration: line-through; text-decoration-color: var(--gray-300); }
.kb-card-top { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--text-3); }
.kb-card-top .spacer { flex: 1; }
.kb-no { font-weight: 700; color: var(--text-2); }
.kb-card-t {
  display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.6;
  color: var(--text); overflow-wrap: anywhere;
}
a.kb-card-t:hover { color: var(--brand-700); }
.kb-card-v { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.kb-card-v small { margin-inline-start: 4px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.kb-card-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-2); }
.kb-card-m a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.kb-card-m a:hover { color: var(--brand-700); }
.kb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-tag {
  padding: 1px 8px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 600; line-height: 1.7;
  background: var(--tone-50, var(--gray-100)); color: var(--tone-600, var(--text-2));
}
.kb-prog { height: 4px; border-radius: var(--r-full); background: var(--gray-100); overflow: hidden; }
.kb-prog i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(270deg, var(--brand-400), var(--brand-600));
  transition: width var(--dur-slow) var(--ease-out);
}
.kb-prog.full i { background: var(--green-500); }
.kb-card-f { display: flex; align-items: center; gap: var(--s2); min-height: 22px; font-size: var(--fs-xs); color: var(--text-3); }
.kb-card-f .spacer { flex: 1; }
.kb-meta { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.kb-meta.ok { color: var(--green-700); font-weight: 600; }
.kb-due { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: var(--text-3); }
.kb-due.soon { color: var(--amber-700); font-weight: 600; }
.kb-due.late { color: var(--red-600); font-weight: 600; }
.kb-avs { display: inline-flex; }
.kb-av {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 10.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface);
  background: var(--tone-100, var(--brand-100)); color: var(--tone-600, var(--brand-700));
}
.kb-av + .kb-av { margin-inline-start: -6px; }
.kb-av.more { background: var(--gray-100); color: var(--text-2); }

/* دستگیره — فقط روی صفحه‌ی لمسی. آن‌جا کشیدن از خودِ کارت یعنی دیگر
   نمی‌شود برد را با انگشت اسکرول کرد. */
.kb-grip {
  display: none; place-items: center; position: absolute; top: 6px; inset-inline-end: 6px;
  width: 30px; height: 30px; border-radius: var(--r); color: var(--text-3); touch-action: none;
}
@media (pointer: coarse) {
  .kb[data-move] .kb-grip { display: grid; }
  .kb[data-move] .kb-card { cursor: default; padding-inline-end: 40px; }
}

/* ---- کشیدن */
.kb-card.kb-lift {
  position: fixed; z-index: 1000; margin: 0; pointer-events: none;
  transform: rotate(-2deg) scale(1.03); box-shadow: var(--sh-xl); border-color: var(--brand-300);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.kb-card.kb-lift.kb-drop {
  transform: none; box-shadow: var(--sh-md);
  transition: left var(--dur) var(--ease-out), top var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.kb-ph {
  flex: 0 0 auto; border: 2px dashed var(--brand-300); border-radius: var(--r-lg);
  background: var(--brand-50);
}
body.kb-dragging, body.kb-dragging * { cursor: grabbing !important; user-select: none; }
.kb-card.kb-saving { opacity: .7; }
.kb-card.kb-back { animation: kb-shake .36s var(--ease); }
@keyframes kb-shake {
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
.kb-card.kb-landed { animation: kb-land .6s var(--ease-out); }
@keyframes kb-land { from { box-shadow: 0 0 0 3px var(--brand-200), var(--sh-md); } }

/* ---- نمای فشرده: عنوان، مبلغ، آواتار و سررسید. بقیه برای وقتی است که
   کارت را باز می‌کنید. */
.kb-compact .kb-col { flex-basis: 250px; }
.kb-compact .kb-list { gap: 6px; }
.kb-compact .kb-card { gap: 3px; padding: var(--s2) var(--s3); }
.kb-compact .kb-card-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-compact .kb-card-v { font-size: var(--fs-sm); }
.kb-compact .kb-card-m, .kb-compact .kb-prog, .kb-compact .kb-tags,
.kb-compact .kb-hint, .kb-compact .kb-card-top .badge, .kb-compact .kb-card-f .kb-meta { display: none; }

@media (max-width: 760px) {
  .kb-col { flex-basis: 84vw; }
  .kb-search { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- سایر */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); }
.tabs a {
  padding: var(--s3) var(--s4); font-size: var(--fs); font-weight: 500;
  color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--brand-700); border-bottom-color: var(--brand-600); font-weight: 600; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  flex: 0 0 auto;
}

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.progress { height: 6px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand-500); border-radius: var(--r-full); }

.sep { height: 1px; background: var(--line); margin: var(--s4) 0; }

/* خط زمانی فعالیت‌ها */
.timeline { position: relative; padding-inline-start: var(--s6); }
.timeline::before {
  content: ""; position: absolute; inset-inline-start: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.timeline .item { position: relative; padding-bottom: var(--s4); }
.timeline .item::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--s6) * -1 + 4px);
  top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand-400);
}
.timeline .item .when { font-size: var(--fs-sm); color: var(--text-3); }

/* ------------------------------------------------------------- کمکی‌ها */
.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.bold  { font-weight: 700; }
.center{ text-align: center; }
.left  { text-align: left; }
.nowrap{ white-space: nowrap; }
.hidden{ display: none !important; }
.mt1{margin-top:var(--s1)} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)}
.pos { color: var(--green-700); }
.neg { color: var(--red-700); }

/* چاپ فاکتور */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; }
}

/* ==========================================================================
   لایه‌ی فشرده — برای صفحه‌های پرمحتوا (پرونده‌ی مشتری، کارت کالا، سند)
   فاصله‌ها کمتر، اطلاعات بیشتر در یک نگاه، بدون شلوغی.
   ========================================================================== */

/* ------------------------------------------------------- نوار عملیات صفحه */
.pagebar {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}
.pagebar .title { font-weight: 700; font-size: var(--fs-md); }
.pagebar .sub { font-size: var(--fs-sm); color: var(--text-3); }
.pagebar .spacer { flex: 1; }

/* ------------------------------------------------- سربرگ موجودیت (۳۶۰) */
.entity-head {
  display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-xs);
}
.entity-head .ava {
  width: 54px; height: 54px; border-radius: var(--r-lg);
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700); flex: 0 0 auto;
}
.entity-head .idn { flex: 1; min-width: 0; }
.entity-head .idn h2 { font-size: var(--fs-lg); line-height: 1.3; }
.entity-head .idn .meta {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-2); margin-top: 3px;
}
.entity-head .idn .meta span { display: inline-flex; align-items: center; gap: 4px; }

/* آمار فشرده کنار سربرگ */
.kpis { display: flex; gap: var(--s4); flex-wrap: wrap; }
.kpi { min-width: 96px; }
.kpi .k { font-size: var(--fs-xs); color: var(--text-3); }
.kpi .v {
  font-size: var(--fs-lg); font-weight: 800; line-height: 1.3;
}
.kpi .v small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.kpis .kpi + .kpi { padding-inline-start: var(--s4); border-inline-start: 1px solid var(--line); }

/* ==========================================================================
   ویرایشگرِ سند — فاکتور، پیش‌فاکتور، خرید (`sales/document.html`)
   ========================================================================== */

/* ---- مراحلِ سند: «کجاست و قدمِ بعد چیست» در یک نگاه */
.steps {
  display: flex; align-items: center; margin: var(--s3) 0 0; padding: 0;
  list-style: none; overflow-x: auto; scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.steps li {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); white-space: nowrap;
}
.steps li + li::before {
  content: ""; width: 30px; height: 2px; margin-inline: 8px;
  border-radius: 2px; background: var(--line-2);
}
.steps .bub {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1.5px solid var(--line-2); color: var(--text-3);
}
.steps li.done { color: var(--text-2); }
.steps li.done .bub { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.steps li.done + li::before { background: var(--green-500); }
.steps li.now { color: var(--brand-700); }
.steps li.now .bub {
  background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.steps li.bad { color: var(--red-700); }
.steps li.bad .bub { background: var(--red-500); border-color: var(--red-500); color: #fff; }

.pagebar .convert { display: flex; gap: var(--s2); margin: 0; }
.pagebar .convert select.input { width: auto; min-width: 130px; }
.pagebar form.inline { margin: 0; }

/* ---- چیدمان: ستون کناری روی پیش‌نویس هنگام اسکرول جلوی چشم می‌ماند */
.grid.doc-grid { align-items: start; }
.doc-side.is-sticky { position: sticky; top: calc(var(--topbar-h) + var(--s3)); }
@media (max-width: 1000px) { .doc-side.is-sticky { position: static; } }

/* ---- مشخصات */
.doc-meta > .card-body { padding: var(--s4) var(--s5); }
.meta-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3) var(--s4); align-items: start;
}
@media (max-width: 760px) {
  .meta-grid { grid-template-columns: minmax(0, 1fr); }
  /* راهنمای «با تغییر ذخیره می‌شود» روی گوشی کنار تیتر نمی‌گنجید و آن را
     دو خط می‌کرد؛ فقط وقتی «در حال ذخیره…» است دیده می‌شود. */
  .doc-meta #metaState:not(.busy) { display: none; }
}

/* دفتر رسمی/غیررسمی به‌صورت کلید، با توضیحِ همان لحظه: کسی که نمی‌داند
   «رسمی» یعنی مالیات می‌خورد، از روی یک چک‌باکسِ لخت متوجه نمی‌شد. */
.bookswitch {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bookswitch:has(input:checked) { border-color: var(--brand-200); background: var(--brand-50); }
.bookswitch input { position: absolute; opacity: 0; pointer-events: none; }
.bs-track {
  position: relative; flex: 0 0 40px; width: 40px; height: 22px;
  border-radius: var(--r-full); background: var(--gray-300);
  transition: background var(--dur) var(--ease);
}
.bs-knob {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-xs);
  transition: inset-inline-start var(--dur) var(--ease-spring);
}
.bookswitch input:checked + .bs-track { background: var(--brand-500); }
.bookswitch input:checked + .bs-track .bs-knob { inset-inline-start: 21px; }
.bookswitch input:focus-visible + .bs-track { box-shadow: var(--ring); }
.bs-tx { display: grid; line-height: 1.5; }
.bs-tx b { font-size: var(--fs-sm); }
.bs-tx small { font-size: var(--fs-xs); color: var(--text-3); }
.meta-notes { margin-top: var(--s3); }
.meta-notes > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-radius: var(--r-sm); list-style: none; cursor: pointer;
  font-size: var(--fs-sm); color: var(--text-2);
}
.meta-notes > summary::-webkit-details-marker { display: none; }
.meta-notes > summary:hover { background: var(--surface-2); color: var(--text); }
.meta-notes[open] > summary { margin-bottom: var(--s3); }
.meta-save { display: flex; justify-content: flex-end; margin-top: var(--s2); }

/* ---- اقلام */
.doc-lines > .card-head { gap: var(--s2); }
.ln-name { font-weight: 600; }
.ln-acts { width: 1%; }
.ln-acts form.inline { display: inline; margin: 0; }
.btn.danger-text { color: var(--red-600); }
.btn.danger-text:hover { background: var(--red-50); color: var(--red-700); }
.ln-empty { display: flex; align-items: center; gap: var(--s3); padding: var(--s5); color: var(--text-3); }
.ln-empty .ic {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2);
}
.ln-empty b { color: var(--text-2); }
.ln-empty p { margin: 2px 0 0; font-size: var(--fs-sm); }

.addline {
  margin: 0; padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.al-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: var(--s2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
}
/* flex و نه grid: «واحد» فقط برای کالای چندواحدی دیده می‌شود، و در grid
   پنهان‌شدنش ستون‌ها را یکی جابه‌جا می‌کرد و «مبلغ» در خانه‌ی ۱۱۰ پیکسلی می‌افتاد. */
.al-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); }
.al-grid > .f { flex: 0 0 96px; min-width: 0; margin: 0; }
.al-grid > .f[hidden] { display: none; }
.al-grid > .al-product { flex: 1 1 280px; }
.al-grid > .al-unit { flex-basis: 110px; }
.al-grid > .al-price { flex: 0 1 160px; }
.al-grid > .al-disc { flex-basis: 80px; }
.al-grid > .al-desc { flex: 1 1 240px; }
.al-grid > .al-act { flex: 0 0 auto; }

/* ---- جمع‌ها */
.doc-total > .card-body { padding: var(--s4) var(--s5); }
.dt-big {
  display: grid; gap: 2px; margin-bottom: var(--s3); padding-bottom: var(--s3);
  border-bottom: 1px dashed var(--line-2);
}
.dt-big small { font-size: var(--fs-xs); color: var(--text-3); }
.dt-big b { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; }
.dt-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s3); margin: 0; font-size: var(--fs-sm); }
.dt-rows dt { color: var(--text-3); }
.dt-rows dd { margin: 0; text-align: left; overflow-wrap: anywhere; }
.dt-rows dd.neg { color: var(--red-600); }
.dt-rows dd.pos { color: var(--green-700); }
.dt-pay { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.dt-pay-h {
  display: flex; justify-content: space-between; gap: var(--s2); margin-bottom: 6px;
  font-size: var(--fs-xs); color: var(--text-3);
}
.dt-pay-h b { color: var(--text); }

/* ==========================================================================
   کارت کالا (`products/card.html`) — ساده، تحلیل‌ها در پاپ‌آپ
   ========================================================================== */
.entity-head .pthumb {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-lg);
  object-fit: cover; border: 1px solid var(--line); background: var(--surface-2);
}
.psec {
  display: flex; align-items: center; gap: 6px;
  margin: var(--s4) 0 var(--s2); padding-top: var(--s3); border-top: 1px dashed var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
}
.psec.first { margin-top: 0; padding-top: 0; border-top: 0; }
.psec-note { margin: var(--s2) 0 0; line-height: 1.8; }
.pchecks { display: grid; align-content: end; gap: var(--s2); padding-bottom: 6px; }
.pmore > summary, .doc-plan > summary { list-style: none; cursor: pointer; }
.pmore > summary::-webkit-details-marker { display: none; }
.pmore .fcar { display: inline-flex; color: var(--text-3); transition: transform var(--dur) var(--ease-out); }
.pmore[open] .fcar { transform: rotate(180deg); }
.pmore:not([open]) > summary { border-bottom: 0; }
.pimgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pimg { position: relative; margin: 0; }
.pimg img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2);
}
.pimg.main { grid-column: 1 / -1; }
.pimg.main img { aspect-ratio: 4 / 3; }
.pimg figcaption { margin-top: 3px; text-align: center; font-size: 10.5px; color: var(--text-3); }
.pimg form { position: absolute; top: 5px; inset-inline-end: 5px; margin: 0; }
.pimg-del {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(15, 23, 42, .6); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.pimg:hover .pimg-del, .pimg-del:focus-visible { opacity: 1; }
@media (hover: none) { .pimg-del { opacity: 1; } }
.pupload { margin: var(--s3) 0 0; }
.pupload label.btn { cursor: pointer; }

/* ماژولِ تب‌دار (ربات‌ها): نوارِ تب زیرِ سربرگِ صفحه */
.modtabs {
  display: flex; gap: var(--s1); min-width: 0; margin: 0 0 var(--s4); padding: 4px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  overflow-x: auto; scrollbar-width: none;
}
.modtabs::-webkit-scrollbar { display: none; }
.modtabs a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px var(--s3);
  border-radius: var(--r); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modtabs a:hover { background: var(--surface-2); color: var(--text); }
.modtabs a.on { background: var(--brand-50); color: var(--brand-700); }
.modtabs .n {
  padding: 0 7px; border-radius: var(--r-full); background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-3);
}
.modtabs a.on .n { background: var(--surface); color: var(--brand-700); }
.modtabs .n.warn { background: var(--amber-50); color: var(--amber-700); }

/* ربات‌ها: کارتِ کانال و کارتِ اکانت */
.chans { display: grid; gap: var(--s3); margin-bottom: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.chanc {
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--green-500);
  border-radius: var(--r-lg); background: var(--surface);
}
.chanc.is-off { border-inline-start-color: var(--amber-500); }
.chanc header { display: flex; align-items: center; gap: var(--s3); }
.chanc-ic {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--r); background: var(--brand-50); color: var(--brand-700);
}
.chanc-t { flex: 1; min-width: 0; }
.chanc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.chanc-stats > * {
  padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-3); text-decoration: none;
}
.chanc-stats b { display: block; font-size: 18px; color: var(--text); }
.chanc-stats b.pos { color: var(--green-600); }
.chanc-stats a:hover { background: var(--brand-50); color: var(--brand-700); }
.chanc-how {
  display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: var(--s2) var(--s3);
  border-radius: var(--r); background: var(--amber-50); color: var(--amber-700); font-size: var(--fs-sm);
}
.chanc-how svg { flex: none; margin-top: 3px; }
.chanc-note { margin: 0; font-size: var(--fs-sm); line-height: 1.9; color: var(--text-3); }
.acctc-grid { display: grid; gap: var(--s3); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.acctc .steps { margin: 0 0 var(--s4); }
.acctc .qr { width: 280px; max-width: 100%; padding: 8px; border-radius: var(--r); background: #fff; }
.acctc .page-note { margin-inline: 0; }
.whc-links .spacer { flex: 1; }

/* پیام به مشتری: تراشه‌ی جای‌گذار، رویداد، متن */
.phchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.phchips .ph {
  display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 10px 4px;
  border: 1px dashed var(--line-2); border-radius: var(--r-full); background: var(--surface);
  font: inherit; font-size: var(--fs-xs); color: var(--text-2); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.phchips .ph:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-700); }
.phchips .ph code { padding: 1px 6px; border-radius: var(--r-full); background: var(--surface-2); font-size: 11px; color: var(--text-3); }
.evt { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.evt svg { flex: none; color: var(--text-3); }
.msgtxt { min-width: 220px; max-width: 380px; }

/* تخفیف‌ها: کد، ردیفِ کم‌رنگ، نردبانِ پله‌ها */
.ccode {
  display: inline-block; padding: 2px 10px; border: 1px dashed var(--brand-400); border-radius: var(--r);
  background: var(--brand-50); color: var(--brand-700); font-family: ui-monospace, Consolas, monospace;
  font-weight: 700; letter-spacing: .04em;
}
.dtbl tbody tr.is-dim td { color: var(--text-3); }
.dtbl tbody tr.is-dim .ccode { border-color: var(--line-2); background: var(--surface-2); color: var(--text-3); }
.tiergrid { display: grid; gap: var(--s4); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.tierside { display: grid; gap: var(--s4); }
.tierlad { list-style: none; margin: 0; padding: var(--s2) var(--s4) var(--s3); }
.tierlad li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px auto; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px dashed var(--line);
}
.tierlad li:last-child { border-bottom: 0; }
.tierlad .tq { color: var(--text-2); white-space: nowrap; }
.tierlad .tq b { color: var(--text); font-size: var(--fs-md); }
.tierlad .tbar { height: 10px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.tierlad .tbar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--green-500); }
.tierlad .tp { text-align: end; font-size: var(--fs-md); color: var(--green-700); }
.tierlad .tact { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.tierlad li.is-ignored .tbar i { background: var(--amber-500); }
.tierlad li.is-ignored .tp { color: var(--text-3); text-decoration: line-through; }
.tier-out { margin: var(--s2) 0 0; font-size: var(--fs-md); font-weight: 800; color: var(--green-700); }
.tier-out small { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); }
@media (max-width: 900px) { .tiergrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .tierlad li { grid-template-columns: minmax(0, 1fr) 56px auto; row-gap: 6px; }
  .tierlad .tbar { grid-column: 1 / -1; grid-row: 2; }
}

/* کمپین: نوارِ وضعیتِ مخاطبان، راهنمایش، «پیش از شروع»، نسخه‌ها و حلقه‌ها */
.tstack { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-2); }
.tstack.lg { height: 14px; }
.tstack i { display: block; height: 100%; min-width: 3px; }
.tstack .t-green, .tlegend .t-green { background: var(--green-500); }
.tstack .t-blue, .tlegend .t-blue { background: var(--brand-400); }
.tstack .t-red, .tlegend .t-red { background: var(--red-500); }
.tstack .t-amber, .tlegend .t-amber { background: var(--amber-500); }
.tstack .t-violet, .tlegend .t-violet { background: var(--violet-500); }
.tstack .t-gray, .tlegend .t-gray { background: var(--line-2); }
.dtbl .tstack { margin: 2px 0 4px; }
.tlegend {
  list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.tlegend li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.tlegend li b { margin-inline-start: auto; color: var(--text); }
.tlegend li.is-zero { opacity: .5; }
.tlegend .sw { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.tl-act { margin: var(--s3) 0 0; }
.campgrid { display: grid; gap: var(--s4); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.card-head.bordered { border-top: 1px solid var(--line); }
.ready { list-style: none; margin: 0; padding: 0 var(--s4); }
.ready li { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px dashed var(--line); }
.ready li:last-child { border-bottom: 0; }
.ready .ri {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--green-50); color: var(--green-700);
}
.ready .r-warn .ri { background: var(--amber-50); color: var(--amber-700); }
.ready .r-bad .ri { background: var(--red-50); color: var(--red-700); }
.ready .r-info .ri { background: var(--brand-50); color: var(--brand-700); }
.ready .rt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.ready .rt span { font-size: var(--fs-sm); line-height: 1.8; color: var(--text-3); }
.ready .r-bad .rt span { color: var(--red-700); }
.ready li > .btn { flex: none; align-self: center; }
.vlist { display: grid; gap: var(--s3); }
.vcard { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.vcard > header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line);
}
.vcard > header .spacer { flex: 1; }
.vcard .vno { font-weight: 700; }
.vcard .vbody { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s3) var(--s4) var(--s4); }
.vcard .vbody p { flex: 1; min-width: 0; margin: 0; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.vcard .vbody img { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); }
.vcard .vform textarea { flex: 1; min-width: 0; }
.vcard .vside { display: grid; flex: none; gap: 6px; width: 170px; }
.mv svg { display: block; }
.mv-up svg { transform: rotate(180deg); }
.mform .fsec {
  display: flex; align-items: center; gap: 6px; margin: var(--s5) 0 var(--s3); padding-top: var(--s4);
  border-top: 1px dashed var(--line); font-weight: 700; color: var(--text-2);
}
.camp-add { margin-top: var(--s3); }
@media (max-width: 1000px) { .campgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .vcard .vbody, .vcard .vform { flex-direction: column; align-items: stretch; }
  .vcard .vside { width: auto; }
  .vcard .vbody img { width: 100%; height: auto; max-height: 220px; }
}

/* منابع انسانی: سربرگِ دوره، مسیرِ حقوقِ ماه، مرخصی، فیش */
.payhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
.perpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.perform { display: flex; gap: var(--s1); margin: 0; }
.perform select.input { width: auto; min-width: 110px; }
.perform input.input { width: 84px; text-align: center; }
.per-prev svg { transform: rotate(-90deg); }
.per-next svg { transform: rotate(90deg); }
.payhead .steps { flex: 1 1 380px; min-width: 0; margin: 0; }
.steps li small { margin-inline-start: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
.pagebar .slip-steps { margin: 0; min-width: 0; }
.mform .fsec.first { margin-top: 0; padding-top: 0; border-top: 0; }
.sec-add { margin-top: var(--s3); }
.lvbar { height: 12px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-2); }
.lvbar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--green-500); }
.lvmeter.is-over .lvbar i { background: var(--red-500); }
.lvnums { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-3); }
.lvnums b { font-size: var(--fs-md); color: var(--text); }
.lvnums small { color: var(--text-3); }
.lvform { flex-wrap: wrap; gap: var(--s2); }
.lvform .input { width: 80px; }
.slipgrid { display: grid; gap: var(--s4); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.sliptot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--surface-2);
}
.sliptot > div { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.sliptot b { font-size: var(--fs-md); color: var(--text); }
.sliptot b.neg { color: var(--red-600); }
.sliptot .net b { font-size: 20px; }
.payform { display: inline-flex; gap: var(--s1); }
.payform select.input { width: auto; max-width: 220px; }
.wklist { list-style: none; margin: 0; padding: 0 var(--s4) var(--s3); }
.wklist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--s2) 0; border-bottom: 1px dashed var(--line); }
.wklist li:last-child { border-bottom: 0; }
.wklist li b { margin-inline-start: auto; }
@media (max-width: 1000px) { .slipgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sliptot { grid-template-columns: minmax(0, 1fr); }
  .payform { display: flex; flex-wrap: wrap; width: 100%; }
  .payform select.input { max-width: none; flex: 1; }
}

/* پورسانت: اجزای عدد، بازه‌ی سریع، پله‌ها، ویرایشگرِ پله، سربرگِ تسویه */
.cparts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.quickr { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.dhead { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.tierchips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tierchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--violet-50); color: var(--violet-700); font-size: var(--fs-xs); white-space: nowrap;
}
.tierchip b { font-weight: 800; }
.tieredit { margin: var(--s3) 0 0; padding: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.tiertbl { width: 100%; border-collapse: collapse; margin-bottom: var(--s2); }
.tiertbl th { padding: 0 4px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-align: start; }
.tiertbl td { padding: 3px 4px; }
.tiertbl td:last-child { width: 1%; }
.tiertbl .input { width: 100%; }
.settlehead { margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px dashed var(--line); }

/* کارها: شبکه‌ی کارتِ پروژه داخلِ کارتِ فهرست، و پیوندِ پروژه در جدول */
.pgrid { display: grid; gap: var(--s3); padding: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.projlink { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.projlink:hover { color: var(--brand-700); }

/* اتوماسیون: نوارِ وضعیتِ موتور */
.engine {
  display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4);
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); font-size: var(--fs-sm);
}
.engine > svg { flex: none; margin-top: 2px; }
.engine b { display: block; font-size: var(--fs); }
.engine .sub { color: var(--text-3); line-height: 1.9; }
.engine code { font-size: var(--fs-xs); }
.engine.ok { border-color: transparent; background: var(--green-50); }
.engine.ok b { color: var(--green-700); }
.engine.bad { border-color: transparent; background: var(--red-50); color: var(--red-700); }
.engine.bad .sub { color: var(--red-700); }
.engine.idle { background: var(--surface-2); color: var(--text-2); }
.engine .pulse {
  position: relative; flex: none; width: 10px; height: 10px; margin: 6px 4px 0;
  border-radius: 50%; background: var(--green-500);
}
.engine .pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green-500);
  animation: engine-pulse 1.8s var(--ease) infinite;
}
@keyframes engine-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .engine .pulse::after { animation: none; } }

/* اتوماسیون: ردیفِ قاعده با سوییچ */
.rulegroup { margin-bottom: var(--s4); }
.rules { list-style: none; margin: 0; padding: 0; }
.rule {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
}
.rule .ric {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: var(--r); background: var(--surface-2); color: var(--text-3);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rule.on .ric { background: var(--brand-50); color: var(--brand-700); }
.rule.failed .ric { background: var(--red-50); color: var(--red-600); }
.rule .rbody { flex: 1; min-width: 0; }
.rule .rtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rule .rtitle a { font-weight: 700; color: var(--text); }
.rule .rtitle a:hover { color: var(--brand-700); }
.rule p { margin: 2px 0 4px; font-size: var(--fs-sm); line-height: 1.9; color: var(--text-3); }
.rule .rmsg {
  margin-top: 6px; padding: 4px var(--s2); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2);
}
.rule .rmsg.bad { background: var(--red-50); color: var(--red-700); }
.rule .ract { display: flex; align-items: center; gap: var(--s1); flex: none; }
.rule .ract form { margin: 0; }

.switch {
  position: relative; flex: none; width: 40px; height: 22px; margin-inline-start: var(--s1);
  padding: 0; border: 0; border-radius: 999px; background: var(--gray-300); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.switch i {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: inset-inline-start var(--dur-fast) var(--ease);
}
.switch.on { background: var(--green-500); }
.switch.on i { inset-inline-start: 21px; }
.switch:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

@media (max-width: 760px) {
  .rule { flex-wrap: wrap; }
  .rule .ract { width: 100%; justify-content: flex-end; padding-inline-start: 46px; }
}

/* گزارش‌ها: نوارِ بازه، نشانِ دفتر، جدولِ زیرِ نمودار، ردیفِ سهم، سنِ مطالبات */
.rperiod { margin-bottom: var(--s4); }
.bookchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.bookchip.on { background: var(--brand-50); color: var(--brand-700); }
.bookchip.off { background: var(--amber-50); color: var(--amber-700); }
.rtable { margin-top: var(--s3); border-top: 1px dashed var(--line); padding-top: var(--s2); }
.rtable summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--fs-sm); color: var(--text-3); list-style: none;
}
.rtable summary::-webkit-details-marker { display: none; }
.rtable summary:hover { color: var(--brand-700); }
.rtable[open] summary { margin-bottom: var(--s2); }
.rtable .table-wrap { max-height: 320px; overflow-y: auto; }
.sharerow { margin-bottom: var(--s3); }
.sharerow:last-child { margin-bottom: 0; }
.shead { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-sm); }
.agegrid { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agebox { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.agebox .amt { margin: 4px 0 2px; font-size: var(--fs-md); font-weight: 700; }
@media (max-width: 760px) { .agegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ارسال بار و نمونه: مسیرِ وضعیت زیرِ سربرگِ پرونده */
.flowsteps {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.flowsteps .steps { margin: 0; }
.flowsteps .steps small { display: block; font-size: var(--fs-xs); color: var(--text-3); }

/* قیف و پیگیری: رنگِ فیروزه‌ای برای ستونِ قیف، و فهرستِ ستون‌ها */
.dot.cyan { background: var(--cyan-500); }
.stagelist { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); }
.stagelist .whc > summary form { margin: 0; }
.stagelist .whc-ic .dot { width: 14px; height: 14px; }

/* پیوندِ بی‌دسترسی (`deps.strip_denied_links`): متن می‌ماند، کلیک نه. دکمه و آیتمِ منو
   بدونِ مقصد فقط جا می‌گیرند، پس پنهان‌اند. */
a[data-denied] { color: inherit; cursor: default; text-decoration: none; pointer-events: none; }
a.btn[data-denied], .rowmenu .rm a[data-denied], .sb-l[data-denied], .wg-link[data-denied] { display: none; }
tr[data-denied] { cursor: default; }

/* حسابداری: بازه‌ی تاریخ در نوار، درختِ کدینگ، گروه‌های تراز، سندِ دستی */
.drange { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); }
.drange .input { width: 124px; }
.dtbl tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--line-2); }
.acctree tr.acc-group > td { background: var(--surface-2); }
.acctree tr.acc-leaf > td:nth-child(2) { padding-inline-start: var(--s8); }
.tbal tr.tb-group > td {
  padding-block: var(--s2); font-size: var(--fs-sm); font-weight: 700;
  color: var(--brand-700); background: var(--brand-50);
}
.tbal tr.tb-sub > td { font-weight: 700; color: var(--text-2); background: var(--surface-2); }
tr.ledger-open > td { color: var(--text-3); background: var(--surface-2); }
.kindseg { flex-wrap: wrap; }
.jform [hidden] { display: none !important; }
.jrows .c-acc { width: 30%; }
.jrows .c-party { width: 20%; }
.jrows .c-amt { width: 14%; }
.jrows .c-x { width: 48px; }
.jfoot {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s3); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line); background: var(--surface);
}
.jfoot .spacer { flex: 1; }
.jsum { font-size: var(--fs-sm); color: var(--text-3); }
.jsum b { color: var(--text); }
.jsum.bad b { color: var(--red-600); }
.jsum.ok b { color: var(--green-600); }
.jform .mwarn { margin: var(--s3) var(--s4) 0; }

/* صندوق و بانک: کارت‌ها، با رنگِ دفتر در لبه */
.boxsum { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.boxsum .bs {
  display: inline-flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s4);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--brand-500);
  border-radius: var(--r); background: var(--surface); font-size: var(--fs-sm);
}
.boxsum .bs.b-unofficial { border-inline-start-color: var(--amber-500); }
.boxsum .bs .k { color: var(--text-3); }
.boxsum .bs b { font-size: var(--fs); }
.boxes { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.boxc {
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--brand-500);
  border-radius: var(--r-lg); background: var(--surface);
  transition: box-shadow .15s var(--ease), transform .15s var(--ease);
}
.boxc.b-unofficial { border-inline-start-color: var(--amber-500); }
.boxc:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.boxc.is-off { opacity: .65; }
.boxc header { display: flex; align-items: center; gap: var(--s3); }
.boxc-ic {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: var(--r); background: var(--brand-50); color: var(--brand-700);
}
.boxc.b-unofficial .boxc-ic { background: var(--amber-50); color: var(--amber-700); }
.boxc-t { flex: 1; min-width: 0; }
.boxc-t a { color: var(--text); text-decoration: none; }
.boxc-t a:hover { color: var(--brand-700); }
.boxc-bal { font-size: 24px; font-weight: 800; color: var(--text); text-decoration: none; }
.boxc-bal.neg { color: var(--red-600); }
.boxc-ids { display: grid; gap: 4px; font-size: var(--fs-sm); }
.boxc-ids > span { display: flex; justify-content: space-between; gap: var(--s3); min-width: 0; }
.boxc-ids .k { flex: none; color: var(--text-3); }
.boxc-ids .num { overflow-wrap: anywhere; }
.boxc footer { display: flex; align-items: center; gap: var(--s1); padding-top: var(--s2); border-top: 1px dashed var(--line); }
.boxc footer .spacer { flex: 1; }
.catrow.is-off { opacity: .6; }
.expcats { margin-bottom: var(--s3); border: 1px solid var(--line); border-radius: var(--r); }

/* فرم‌های مالی: جهت، دفتر، وضعیتِ چک */
.mform [hidden] { display: none !important; }
.seg label:has(input:disabled) { cursor: not-allowed; opacity: .75; }
.seg.dirseg, .seg.stseg { margin-bottom: var(--s4); }
.seg.stseg { flex-wrap: wrap; }
.seg.stseg label { flex: 1 1 30%; }
.seg label.book-off:has(input:checked),
.seg label.st-deposited:has(input:checked) {
  border-color: var(--amber-600); background: var(--amber-50); color: var(--amber-700);
}
.seg label.st-cleared:has(input:checked) {
  border-color: var(--green-600); background: var(--green-50); color: var(--green-700);
}
.seg label.st-bounced:has(input:checked), .seg label.st-returned:has(input:checked) {
  border-color: var(--red-600); background: var(--red-50); color: var(--red-700);
}
.paydoc {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r);
  background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-sm);
}
.paydoc .sp { flex: 1; }
.paydoc svg { flex: none; }
.chqcard {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.chqcard .k { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.chqcard .amt { font-size: 20px; font-weight: 800; }
.chqcard .meta { display: flex; flex-wrap: wrap; gap: 4px var(--s3); font-size: var(--fs-sm); color: var(--text-2); }
.mwarn {
  margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r);
  background: var(--red-50); color: var(--red-700); font-size: var(--fs-sm);
}
.dsum b.pos { color: var(--green-600); }
.duetag { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.duetag.late { color: var(--red-600); }
.duetag.soon { color: var(--amber-700); }

/* یادداشتِ کوتاهِ پایینِ صفحه یا زیرِ سربرگ، به‌جای جعبه‌ی «راهنما» */
.page-note {
  display: flex; align-items: flex-start; gap: 6px; margin: var(--s3) var(--s1);
  font-size: var(--fs-xs); line-height: 1.9; color: var(--text-3);
}
.page-note svg { flex: none; margin-top: 4px; }

/* نوارِ هشدارِ داخلِ کارتِ فهرست، زیرِ نوارِ جستجو */
.dnote {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line); font-size: var(--fs-sm);
}
.dnote svg { flex: none; }
.dnote.warn { background: var(--amber-50); color: var(--amber-700); }
.dnote.bad { background: var(--red-50); color: var(--red-700); }
.dsum a { color: inherit; text-decoration: none; }
.dsum a:hover b, .dsum a:hover { color: var(--brand-700); }

/* برگه‌ی انبار: فرمِ «افزودن قلم» ته کارتِ اقلام */
.whl-add {
  display: grid; align-items: end; gap: var(--s2); padding: var(--s3) var(--s4);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 84px 84px minmax(0, 1.4fr) auto;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
@media (max-width: 1100px) {
  .whl-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whl-add .grow { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .whl-add { grid-template-columns: minmax(0, 1fr); } }

/* دسته‌بندی و واحد */
.cat-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }
.catlist { display: grid; }
.catrow {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
}
.catlist > .catrow:first-child { border-top: 0; }
.catedit { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; }
.catrow .catname { flex: 1; min-width: 0; }
.catrow span.catname { font-weight: 600; }
.catrow .catsort { flex: none; width: 56px; text-align: center; }
.catdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tone-500, var(--brand-400)); }
.catcount { flex: none; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-3); text-decoration: none; }
.catcount:hover { color: var(--brand-700); }
.catdel { color: var(--text-3); }
.catdel:hover { color: var(--red-600); background: var(--red-50); }
.catrow.add { background: var(--surface-2); }
.catempty { margin: 0; padding: var(--s4); font-size: var(--fs-sm); color: var(--text-3); }
.uchips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.uchip {
  display: inline-flex; align-items: center; gap: 4px; padding-block: 4px; padding-inline: 12px 5px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2);
  font-size: var(--fs-sm);
}
.uchip form { display: contents; }
.uchip button {
  display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3); cursor: pointer; transition: all .12s var(--ease);
}
.uchip button:hover { background: var(--red-50); color: var(--red-600); }
.uadd { display: flex; gap: var(--s2); margin-top: var(--s4); }
.uadd .input { flex: 1; min-width: 0; }

/* گردش کالا: علامتِ جهت کنارِ عدد — سبز ورود، قرمز خروج */
.mvq { font-weight: 800; }
.mvq.in { color: var(--green-600, #16a34a); }
.mvq.out { color: var(--red-600); }

/* اصلاح موجودی: جهتِ انتخابی و پیش‌نمایشِ «الان ← بعد از ثبت» */
.adj [hidden] { display: none !important; }
.adj-note {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s4);
  font-size: var(--fs-xs); color: var(--text-3);
}
.seg label.in:has(input:checked) {
  border-color: var(--green-600, #16a34a); background: var(--green-50, #f0fdf4); color: var(--green-700, #15803d);
}
.seg label.out:has(input:checked) { border-color: var(--red-600); background: var(--red-50); color: var(--red-700); }
.adj-prev {
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  margin-block: var(--s2) var(--s3); padding: var(--s3) var(--s4);
  border-radius: var(--r); background: var(--surface-2); text-align: center;
  transition: background-color .15s var(--ease);
}
.adj-prev .k { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.adj-prev b { font-size: 22px; font-weight: 800; color: var(--text); }
.adj-prev .to b { color: var(--brand-700); transition: color .15s var(--ease); }
.adj-prev .u { align-self: flex-end; padding-bottom: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.adj-prev .arr {
  width: 9px; height: 9px; transform: rotate(-45deg);
  border-top: 2px solid var(--text-3); border-left: 2px solid var(--text-3);
}
.adj-prev.bad { background: var(--red-50); }
.adj-prev.bad .to b { color: var(--red-600); }
.adj-warn { margin: 0 0 var(--s3); text-align: center; font-size: var(--fs-sm); color: var(--red-700); }
.adj-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }

/* انبارها: هر انبار یک ردیفِ بازشونده */
.whs { display: grid; gap: var(--s2); }
.whc {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.whc:hover { border-color: var(--brand-400); }
.whc[open] { border-color: var(--brand-400); box-shadow: var(--sh-md); }
.whc > summary {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  cursor: pointer; list-style: none;
}
.whc > summary::-webkit-details-marker { display: none; }
.whc-ic {
  display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px;
  border-radius: var(--r); background: var(--brand-50); color: var(--brand-700);
}
.whc.off .whc-ic { background: var(--surface-2); color: var(--text-3); }
.whc-t { flex: 1; min-width: 0; }
.whc-t > b { margin-inline-end: 6px; }
.whc-n { white-space: nowrap; font-size: var(--fs-xs); color: var(--text-3); }
.whc-n b { font-size: var(--fs); color: var(--text); }
.whc-chev {
  width: 8px; height: 8px; margin-inline-start: var(--s2); transform: rotate(-45deg);
  border-bottom: 2px solid var(--text-3); border-left: 2px solid var(--text-3);
  transition: transform .2s var(--ease);
}
.whc[open] .whc-chev { transform: rotate(135deg); }
.whc-body { padding: 0 var(--s4) var(--s4); }
.whc[open] .whc-body { animation: whcIn .2s var(--ease); }
@keyframes whcIn { from { opacity: 0; transform: translateY(-4px); } }
.whc-links { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px dashed var(--line); margin-bottom: var(--s3); }
.whc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.whc-form .full { grid-column: 1 / -1; }
.whc-checks { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.whc-checks .spacer { flex: 1; }
.whc.add { border-style: dashed; }
.whc.add > summary { justify-content: center; font-weight: 700; color: var(--brand-700); }
.whc.add .whc-body { padding-top: var(--s2); }
@media (max-width: 560px) {
  .whc-form { grid-template-columns: minmax(0, 1fr); }
  .whc-n { display: none; }
}

/* موجودی در فهرست: عدد درشت، کهربایی زیرِ حد هشدار، قرمز در صفر */
.stockpill {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px;
  border-radius: var(--r-full); background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-3);
}
.stockpill b { font-size: var(--fs-sm); color: var(--text); }
.stockpill.low { background: var(--amber-50); color: var(--amber-700); }
.stockpill.low b { color: var(--amber-700); }
.stockpill.out { background: var(--red-50); color: var(--red-700); }
.stockpill.out b { color: var(--red-700); }
.dtabs .n.warn { background: var(--amber-50); color: var(--amber-700); }
.ps-sum { margin-bottom: var(--s3); }

/* تصویرِ کوچکِ کالا در فهرست */
.pth {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--r);
  display: grid; place-items: center; object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3);
}

.doc-plan > summary { list-style: none; cursor: pointer; }
.doc-plan > summary::-webkit-details-marker { display: none; }
.doc-plan .fcar { display: inline-flex; color: var(--text-3); transition: transform var(--dur) var(--ease-out); }
.doc-plan[open] .fcar { transform: rotate(180deg); }


/* ----------------------------------------------------- فرم‌های فشرده */
/* تقویم: ماهِ شمسی با شنبه‌ی اول، و فهرستِ روزِ انتخاب‌شده کنارش (روی گوشی زیرش) */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s4); align-items: start; }
@media (max-width: 1000px) { .cal-wrap { grid-template-columns: minmax(0, 1fr); } }
.cal-card { padding: var(--s3); }
.cal-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.cal-head h2 { font-size: var(--fs-lg); margin: 0; min-width: 9em; text-align: center; }
.cal-head .flip svg { transform: scaleX(-1); }
.cal-who .input { width: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: var(--fs-xs); color: var(--text-3); padding: 4px 0; font-weight: 600; }
.cal-wd.fri, .cal-day.fri .cal-n { color: var(--red-600); }
.cal-day {
  min-height: 92px; padding: 4px 5px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--text); display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; text-decoration: none; transition: border-color var(--dur) var(--ease);
}
.cal-day:hover { border-color: var(--brand-300, var(--line-2)); }
.cal-day.out { background: var(--surface-2); opacity: .55; }
.cal-day.today .cal-n { background: var(--accent-500, #f97316); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-day.on { border-color: var(--brand-500, #3b68f6); box-shadow: 0 0 0 1px var(--brand-500, #3b68f6) inset; }
.cal-n { font-weight: 700; font-size: var(--fs-sm); align-self: flex-start; line-height: 1.6; }
.cal-it {
  font-size: 11px; line-height: 1.5; padding: 0 5px; border-radius: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-inline-start: 3px solid currentColor;
}
.cal-it.done { text-decoration: line-through; opacity: .6; }
.cal-more { font-size: 11px; color: var(--text-3); }
.ct-blue { color: var(--blue-700, #1d4ed8); background: var(--blue-50, #eff6ff); }
.ct-violet { color: var(--violet-700, #6d28d9); background: var(--violet-50, #f5f3ff); }
.ct-amber { color: var(--amber-700, #b45309); background: var(--amber-50, #fffbeb); }
.cal-legend { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3); }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; border: 1px solid currentColor; }
.cal-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px dashed var(--line); }
.cal-row:last-child { border-bottom: 0; }
.cal-row.done .cal-tx b { text-decoration: line-through; color: var(--text-3); }
.cal-time { flex: 0 0 52px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.cal-ic { flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.cal-tx { flex: 1 1 auto; min-width: 0; display: grid; }
.cal-tx a { color: var(--text); }
/* روی گوشی خانه‌ها فقط عدد و نقطه‌اند؛ متن در فهرستِ روز خوانده می‌شود */
@media (max-width: 640px) {
  .cal-day { min-height: 48px; padding: 3px; }
  .cal-it { font-size: 0; height: 5px; padding: 0; border-inline-start-width: 0; background: currentColor; }
  .cal-more { display: none; }
}

/* مسیر درخواست‌ها: مرحله‌ها پشتِ هم، با شماره؛ مرحله‌ی بی‌مسئول قرمز */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.route > li {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.route > li.nobody { border-color: var(--red-100); background: var(--red-50); }
.route > li.end { border-style: dashed; background: transparent; align-items: center; }
.route .rn {
  flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: var(--fs-sm);
}
.route .rb { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.route .rh, .route .rw { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.route .rw .input { width: auto; min-width: 0; max-width: 100%; flex: 0 1 320px; }
.route .rwarn { color: var(--red-700); display: inline-flex; gap: 4px; align-items: center; }
.route .radd summary { cursor: pointer; color: var(--text-3); }
.route-card.off { opacity: .7; }
.route-card .card-head { flex-wrap: wrap; row-gap: var(--s2); }

/* تصویرِ تنظیمات (لوگو، مهر): پیش‌نمایش کنارِ انتخابِ فایل */
.imgset { display: flex; gap: var(--s3); align-items: center; }
.imgset-prev {
  flex: 0 0 auto; width: 88px; height: 64px; border-radius: var(--r);
  border: 1px dashed var(--line-2); background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden;
}
.imgset-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imgset-prev.sig { width: 160px; background: #fff; }
.imgset-in { display: grid; gap: var(--s2); min-width: 0; flex: 1 1 auto; }

.fgrid { display: grid; gap: var(--s3) var(--s4); }
.fgrid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fgrid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fgrid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.fgrid .wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .fgrid.c4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px)  { .fgrid.c2, .fgrid.c3, .fgrid.c4 { grid-template-columns: minmax(0, 1fr); } }

.f { display: flex; flex-direction: column; gap: 3px; }
.f > label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
}
.f > label .req { color: var(--red-500); }
.f .input, .f select.input, .f textarea.input { padding: 6px var(--s3); }
.f .hint { font-size: var(--fs-xs); color: var(--text-3); }
.f.inline { flex-direction: row; align-items: center; gap: var(--s2); }

/* گروه فیلدهای چسبیده (مثلاً از تاریخ / تا تاریخ) */
.fjoin { display: flex; }
.fjoin .input { border-radius: 0; margin-inline-start: -1px; }
.fjoin .input:first-child { border-radius: 0 var(--r) var(--r) 0; margin: 0; }
.fjoin .input:last-child  { border-radius: var(--r) 0 0 var(--r); }

/* -------------------------------------------------- فهرست کلید/مقدار */
.dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); }
.dl dt {
  font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap;
  padding: 3px 0;
}
.dl dd {
  margin: 0; font-size: var(--fs); padding: 3px 0;
  overflow-wrap: anywhere;
}
.dl.two { grid-template-columns: auto 1fr auto 1fr; }
@media (max-width: 760px) { .dl.two { grid-template-columns: auto 1fr; } }

/* ------------------------------------------------------- جدول فشرده */
table.tbl.dense th { padding: 6px var(--s3); }
table.tbl.dense td { padding: 5px var(--s3); font-size: var(--fs-sm); }
table.tbl.dense .badge { line-height: 1.6; }

/* ------------------------------------------------------------- تب‌ها */
.tabs.pill {
  gap: var(--s1); border: 0; background: var(--surface-2);
  padding: 3px; border-radius: var(--r); display: inline-flex;
}
.tabs.pill a {
  padding: 5px var(--s4); border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-sm); margin: 0;
}
.tabs.pill a.active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--sh-sm); font-weight: 600;
}
.tabs a .n {
  display: inline-block; margin-inline-start: 4px; font-size: var(--fs-xs);
  background: var(--surface-2); padding: 0 6px; border-radius: var(--r-full);
  color: var(--text-3);
}
.tabs.pill a.active .n { background: var(--brand-50); color: var(--brand-700); }

/* --------------------------------------------- کارت فشرده و سطر لیست */
.card.tight > .card-head { padding: var(--s3) var(--s4); }
.card.tight > .card-body { padding: var(--s4); }
.card.tight > .card-foot { padding: var(--s2) var(--s4); }

.lrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--surface-2); }
.lrow .main { flex: 1; min-width: 0; }
.lrow .main .t { font-weight: 600; }
.lrow .main .s { font-size: var(--fs-sm); color: var(--text-3); }
.lrow .side { text-align: left; white-space: nowrap; }

/* ==========================================================================
   پرونده‌ی طرف‌حساب (`parties/portal.html`)
   ========================================================================== */
.entity-head .idn .meta a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.entity-head .idn .meta a:hover { color: var(--brand-700); }
.kpi .v.sm { font-size: var(--fs); }
.p-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s2); }
.p-alerts .alert { margin: 0; }
/* `min-width: 0` لازم است: آیتمِ flex پیش‌فرض از عرضِ محتوایش کوچک‌تر نمی‌شود،
   پس نُه تبِ پرونده روی گوشی کلِ صفحه را به ۴۲۹ پیکسل پهن می‌کرد و
   `overflow-x` هیچ‌وقت فرصتِ کار پیدا نمی‌کرد. */
.pagebar .tabs.pill { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pagebar .tabs.pill::-webkit-scrollbar { display: none; }
.pagebar .tabs.pill a { white-space: nowrap; }

/* راه‌های تماس: هر کدام یک ردیفِ کلیک‌پذیر (tel:، mailto:)، نه متنی که باید
   کپی و در گوشی تایپ شود */
.pinfo { display: grid; gap: 2px; }
.card.tight > .card-body.pinfo { padding: var(--s2); }
.pc-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r); color: var(--text); }
a.pc-row:hover { background: var(--surface-2); color: var(--text); }
.pc-row .ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
}
.pc-row .tx { display: grid; min-width: 0; line-height: 1.5; }
.pc-row small { font-size: var(--fs-xs); color: var(--text-3); }
.pc-row b { font-weight: 600; overflow-wrap: anywhere; }
.pc-empty { padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--text-3); }

.kperson { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); }
.kperson + .kperson { border-top: 1px solid var(--line); }
.kperson .tx { flex: 1; min-width: 0; display: grid; line-height: 1.5; }
.kperson .tx b { font-size: var(--fs-sm); }
.kperson .tx small { font-size: var(--fs-xs); color: var(--text-3); }
.kperson > a { font-size: var(--fs-sm); white-space: nowrap; }

/* خطِ زمانِ فعالیت‌ها: آیکنِ هر نوع روی خط؛ سبز انجام‌شده، قرمز گذشته */
.tl { position: relative; margin: 0; padding: 0; list-style: none; }
.tl::before {
  content: ""; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 15px;
  width: 2px; border-radius: 2px; background: var(--line);
}
.tl-item { position: relative; display: flex; gap: var(--s3); padding-bottom: var(--s4); }
.tl-item:last-child { padding-bottom: 0; }
.tl-ic {
  position: relative; z-index: 1; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
  box-shadow: 0 0 0 4px var(--surface);
}
.tl-item.done .tl-ic { background: var(--green-50); color: var(--green-600); }
.tl-item.late .tl-ic { background: var(--red-50); color: var(--red-600); }
.tl-body { flex: 1; min-width: 0; padding-top: 5px; }
.tl-head { display: flex; align-items: baseline; gap: var(--s2); }
.tl-head b { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.tl-when { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.tl-body p { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--text-2); white-space: pre-wrap; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); }

/* --------------------------------------------------- نوار مرحله (فرایند) */
.steps { display: flex; align-items: center; gap: 0; overflow-x: auto; }
.steps .st {
  flex: 1; min-width: 92px; text-align: center; position: relative;
  padding: 0 var(--s1);
}
.steps .st .bar {
  height: 5px; border-radius: var(--r-full); background: var(--line);
  margin-bottom: 5px;
}
.steps .st.done .bar { background: var(--green-500); }
.steps .st.now .bar  { background: var(--brand-500); }
.steps .st .lb { font-size: var(--fs-xs); color: var(--text-3); }
.steps .st.now .lb { color: var(--text); font-weight: 700; }
.steps .st.done .lb { color: var(--text-2); }

/* ----------------------------------------------------------- متفرقه */
.mini-stat {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface);
  font-size: var(--fs-sm);
}

.thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.thumbs img {
  width: 72px; height: 72px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r);
}

.split { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: var(--s3); }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* فاصله‌ی عمودی کمتر بین بلوک‌های محتوا */
.content.dense > * + * { margin-top: var(--s3); }

/* ==========================================================================
   مسیر، عنوان صفحه و کارت فیلتر
   --------------------------------------------------------------------------
   کارت «جستجو و فیلتر» فیلدهای برچسب‌دار دارد، به‌جای یک ردیف اینپوت لخت.
   (نوار بالا بخش خودش را دارد: «نوار بالا» را پایین‌تر ببینید.)
   ========================================================================== */

/* --------------------------------------- مسیر + عنوان صفحه (نمونه‌ی سوم) */
.crumb {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s5) 0; font-size: var(--fs-sm); color: var(--text-3);
}
.crumb a { color: var(--text-3); }
.crumb a:hover { color: var(--brand-600); }
.crumb .sep { opacity: .5; }
.crumb .cur { color: var(--text); font-weight: 600; }

/* نوار عنوان صفحه: تیتر بزرگ سمت راست، اکشن‌ها سمت چپ */
.phead {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4); flex-wrap: wrap;
}
.phead .ic-box {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r);
  background: var(--brand-50); color: var(--brand-700);
  display: grid; place-items: center; font-size: 20px;
}
.phead h1 { font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; }
.phead .sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
.phead .spacer { flex: 1; }
.phead .acts { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* -------------------------------------------- کارت «جستجو و فیلتر» */
.filters {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); margin-bottom: var(--s3); overflow: hidden;
}
.filters > .fhead {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer; list-style: none; user-select: none;
}
/* مثلثِ پیش‌فرضِ <details> در وبکیت یک شبه‌عنصر جداست */
.filters > .fhead::-webkit-details-marker { display: none; }
.filters > .fhead::marker { content: ""; }
.filters > .fhead:hover { background: var(--surface-3); }
.filters .fcar { color: var(--text-3); display: inline-flex; transition: transform .18s var(--ease); }
.filters[open] .fcar { transform: rotate(180deg); }
/* لینکِ «پاک‌کردن فیلترها» داخل سربرگ است؛ کلیکش نباید پانل را جمع کند */
.filters > .fhead .btn { pointer-events: auto; }
.filters > .fhead h3 { font-size: var(--fs); font-weight: 700; }
.filters > .fhead .spacer { flex: 1; }
.filters > .fbody { padding: var(--s3); }
.filters .fgrid { align-items: end; }
.filters .actions { display: flex; gap: var(--s2); align-items: end; }
.filters .chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* ==========================================================================
   فهرستِ داده — تب، نوار جستجو، جدول، در یک کارت
   --------------------------------------------------------------------------
   فهرست‌های پرتکرار (فاکتور، طرف‌حساب) کارتِ «جستجو و فیلتر» را کنار
   گذاشتند: پرسشِ روزانه «کدام‌ها باز است؟» با یک کلیک روی تب و **با عدد**
   جواب داده می‌شود، نه با باز کردنِ منو و زدنِ «اعمال فیلتر». جمع‌ها روی
   کلِ فیلترند.
   ========================================================================== */
.dcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-xs); overflow: hidden;
}
.dtabs {
  display: flex; gap: 2px; padding: var(--s2) var(--s3) 0;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.dtabs::-webkit-scrollbar { display: none; }
.dtabs a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px var(--s3) 11px; border-radius: var(--r) var(--r) 0 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dtabs a:hover { color: var(--text); background: var(--surface-2); }
.dtabs a.on { color: var(--brand-700); }
.dtabs a.on::after {
  content: ""; position: absolute; inset-inline: var(--s3); bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--brand-600);
}
.dtabs .n {
  min-width: 20px; padding: 0 6px; border-radius: var(--r-full); text-align: center;
  font-size: 10.5px; line-height: 18px; background: var(--surface-2); color: var(--text-3);
}
.dtabs a.on .n { background: var(--brand-50); color: var(--brand-700); }
.dbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
  margin: 0; padding: var(--s3); border-bottom: 1px solid var(--line);
}
.dbar .spacer { flex: 1; }
.dbar select.input {
  width: auto; min-width: 160px; height: 34px; padding-block: 0;
  border-radius: var(--r-full); font-size: var(--fs-sm);
}
.dsearch { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 190px; }
.dsearch > svg { position: absolute; inset-inline-start: 12px; color: var(--text-3); pointer-events: none; }
.dsearch input {
  width: 100%; height: 34px; padding-inline: 36px 12px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.dsearch input:focus { outline: none; background: var(--surface); border-color: var(--brand-400); box-shadow: var(--ring); }
.dsum { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); color: var(--text-3); }
.dsum b { color: var(--text); font-weight: 700; }
.dsum b.neg { color: var(--red-600); }
.dcard > .empty { padding-block: var(--s10); }
.dcard > .table-wrap + .row { border-top: 1px solid var(--line); }

.dtbl th { background: var(--surface); }
.dtbl td { padding-block: 11px; }
.dtbl tbody tr[data-href] { cursor: pointer; }
.dtbl tbody tr.is-canceled td { color: var(--text-3); }
.dtbl tbody tr.is-canceled .dnum { text-decoration: line-through; }
.dnum, .dname { font-weight: 700; color: var(--text); }
.dnum:hover, .dname:hover { color: var(--brand-700); }
.dsub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
.dparty { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; font-weight: 600; }
.dparty > span:last-child { min-width: 0; }
.dpay { min-width: 130px; }
.dpay .kb-prog { max-width: 150px; margin-top: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* آواتارِ حرفِ اول — رنگ از `avatar_tone(نام)`: همان نفر همه‌جا همان رنگ */
.av {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--tone-100, var(--brand-100)); color: var(--tone-600, var(--brand-700));
}
.av.sm { width: 26px; height: 26px; font-size: 11.5px; }
.av.xs { width: 22px; height: 22px; font-size: 10.5px; }
.av.lg { width: 48px; height: 48px; font-size: 19px; }

/* چیپ فیلترِ فعال با ضربدر حذف — الگوی «شعبه گاندی ×» نمونه‌ی سوم */
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--s2) 3px var(--s3); border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  font-size: var(--fs-sm); font-weight: 600;
}
.fchip a { color: inherit; opacity: .65; font-size: 13px; line-height: 1; }
.fchip a:hover { opacity: 1; }

/* ------------------------------------------------- منوی عملیات هر ردیف */
.rowmenu { position: relative; display: inline-block; }
.rowmenu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap;
}
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu > summary:hover { border-color: var(--brand-400); color: var(--brand-700); }
.rowmenu[open] > summary { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
/* fixed چون این منو داخل .table-wrap (اسکرول افقی) و .rel (overflow:hidden)
   می‌نشیند؛ با absolute بریده می‌شد. مختصاتش را app.js لحظه‌ی باز شدن می‌گذارد. */
.rowmenu .rm {
  position: fixed; z-index: 120; visibility: hidden;
  min-width: 190px; background: var(--surface); text-align: right;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: var(--s1);
}
/* رویداد toggle ناهمگام است؛ تا app.js مختصات را نگذاشته پنهان می‌ماند تا
   یک فریم در جای اشتباه دیده نشود. */
.rowmenu .rm.placed { visibility: visible; }
.rowmenu .rm a, .rowmenu .rm button {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 7px var(--s3); border-radius: var(--r-sm); border: 0;
  background: transparent; font: inherit; font-size: var(--fs-sm);
  color: var(--text); cursor: pointer; text-align: right;
}
.rowmenu .rm a:hover, .rowmenu .rm button:hover { background: var(--surface-2); }
.rowmenu .rm .danger { color: var(--red-700); }
.rowmenu .rm form { margin: 0; }
.rowmenu .rm .sep { height: 1px; background: var(--line); margin: var(--s1) 0; }

/* -------------------------- پنل اطلاعات: برچسب بالا، مقدار پررنگ پایین */
.info {
  display: grid; gap: var(--s4) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.info .it .k { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 2px; }
.info .it .v { font-weight: 600; word-break: break-word; }
.info .it .v a { color: var(--brand-700); }

/* --------------------------------------------------------------- پاپ‌آپ */
/* پاپ‌آپ — ستون فقراتِ «صفحه عوض نشود» که کاربر خواست.
   چهار اندازه‌ی استاندارد و بس. اندازه‌ی دلخواه برای هر پاپ‌آپ یعنی هر
   کدام کمی متفاوت باز می‌شوند و صفحه بی‌قرار به نظر می‌رسد. */
dialog.modal {
  border: 0; padding: 0; border-radius: var(--r-xl);
  max-width: 96vw; width: 580px; max-height: 92vh;
  background: var(--surface); color: var(--text);
  box-shadow: var(--sh-xl);
  animation: modal-in var(--dur) var(--ease-out);
}
dialog.modal.narrow { width: 460px; }
dialog.modal.wide   { width: 940px; }
dialog.modal.full   { width: 1240px; }
dialog.modal::backdrop {
  background: rgba(23,33,84,.44);
  backdrop-filter: blur(3px);
  animation: fade-in var(--dur) var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

dialog.modal .mhead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
dialog.modal .mhead h3 { font-size: var(--fs-md); font-weight: 600; }
dialog.modal .mhead .spacer, dialog.modal .mhead .sp { flex: 1; }
dialog.modal .mbody { padding: var(--s5); overflow-y: auto; max-height: calc(92vh - 122px); }
dialog.modal .mfoot {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
  display: flex; gap: var(--s2); background: var(--surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
dialog.modal .mfoot .spacer, dialog.modal .mfoot .sp { flex: 1; }

/* «نرم‌افزار به‌روز شد» (layout/base.html) و صفحه‌ی نسخه‌ها (system/changelog.html) */
.wn-ver + .wn-ver { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.wn-ver h4 { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--s2); }
.wn-ver h4 .muted { color: var(--text-3); font-weight: 400; }
.wn-list { margin: 0; padding-inline-start: 1.25em; display: grid; gap: var(--s2); line-height: 1.9; }

/* اسکلتِ بارگذاری به‌جای «در حال بارگذاری…».
   نوشته‌ی خالی، پرش ایجاد می‌کند: کادر کوچک باز می‌شود و بعد یک‌باره بزرگ.
   اسکلت جای واقعی را از همان اول می‌گیرد. */
.modal-loading { padding: var(--s6) var(--s5); display: grid; gap: var(--s3); }
.modal-loading::before, .modal-loading::after {
  content: ""; height: 12px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--gray-100), var(--gray-200), var(--gray-100));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.modal-loading::after { width: 60%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.modal-fail { padding: var(--s10); text-align: center; color: var(--red-600); font-size: var(--fs-sm); }

/* ---- تأییدِ اقدام — جای `window.confirm` (app.js → initConfirm) */
dialog.modal.confirm-dlg { width: 430px; }
.cf-body { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s5) var(--s5) var(--s4); }
.cf-ic {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  background: var(--brand-50); color: var(--brand-600);
}
.cf-ic.danger { background: var(--red-50); color: var(--red-600); }
.cf-tx { margin: 0; padding-top: 9px; font-size: var(--fs); line-height: 1.9; color: var(--text); }
dialog.modal.confirm-dlg .mfoot { margin: 0; }

/* ---- انتخابگرِ جستجوپذیر (app.js → initCombos)
   `<select>` اصلی در فرم می‌ماند و فقط دیده نمی‌شود؛ این دکمه و پنل راهِ
   انتخاب‌اند، نه جای داده. */
.cb-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%);
}
.input.cb {
  display: flex; align-items: center; gap: var(--s2); min-width: 0;
  text-align: start; cursor: pointer;
}
.input.cb .cb-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input.cb.is-empty .cb-v { color: var(--text-3); }
.input.cb .cb-car {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: -3px;
  border-inline-end: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease-out), margin var(--dur) var(--ease-out);
}
[dir="rtl"] .input.cb .cb-car { transform: rotate(-45deg); }
.input.cb.is-open { border-color: var(--brand-400); box-shadow: var(--ring); }
.input.cb.is-open .cb-car { margin-top: 4px; transform: rotate(-135deg); }
.input.cb.is-invalid { border-color: var(--red-500); box-shadow: var(--ring-danger); }
.cb-panel {
  position: fixed; z-index: 1100; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); animation: drop-in var(--dur) var(--ease-out);
}
.cb-search { padding: var(--s2); border-bottom: 1px solid var(--line); }
.cb-search input {
  width: 100%; height: 34px; padding-inline: 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.cb-search input:focus { outline: none; border-color: var(--brand-400); background: var(--surface); }
.cb-list { overflow-y: auto; overscroll-behavior: contain; padding: var(--s1); }
.cb-row {
  padding: 7px var(--s3); border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-row[hidden] { display: none; }
.cb-row.blank { color: var(--text-3); }
.cb-row.hi { background: var(--brand-50); color: var(--brand-800); }
.cb-row.on { font-weight: 700; box-shadow: inset -3px 0 0 var(--brand-500); }
.cb-none { padding: var(--s4); text-align: center; font-size: var(--fs-sm); color: var(--text-3); }

/* نوار دکمه‌های فرم؛ داخل پاپ‌آپ به لبه می‌چسبد، در صفحه کارت‌وار می‌ماند */
.mfoot {
  display: flex; gap: var(--s2); align-items: center;
  padding: var(--s3) 0 0; margin-top: var(--s4);
  border-top: 1px solid var(--line);
}
dialog.modal .mform > .mfoot {
  margin: var(--s5) calc(var(--s5) * -1) calc(var(--s5) * -1);
  padding: var(--s3) var(--s5); background: var(--surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.mform .fgrid { margin-bottom: var(--s2); }
.mform .alert { margin-bottom: var(--s4); }

/* ------------------------------------------- بخش تاکردنی رکوردهای مرتبط */
.rel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); margin-bottom: var(--s3); overflow: hidden;
}
.rel > summary {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: var(--fs);
}
.rel > summary::-webkit-details-marker { display: none; }
.rel > summary .ic { font-size: 15px; }
.rel > summary .n { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.rel > summary .spacer { flex: 1; }
.rel > summary .chev { transition: transform .15s var(--ease); opacity: .5; }
.rel[open] > summary .chev { transform: rotate(180deg); }
.rel .rempty { padding: var(--s5); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

/* -------------------------------------------- انتخاب دوحالته (سگمنت) */
.seg { display: flex; gap: var(--s2); }
.seg label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px var(--s3); border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; font-size: var(--fs-sm); color: var(--text-2);
  background: var(--surface); transition: all .12s var(--ease); position: relative;
}
.seg label:hover { border-color: var(--brand-400); }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked), .seg label.on {
  border-color: var(--brand-600); background: var(--brand-50);
  color: var(--brand-700); font-weight: 700;
}

/* ------------------------------------------------------ ردیف هشداردار */
tr.row-warn > td { background: var(--red-50); }
a.stat { text-decoration: none; color: inherit; transition: all .12s var(--ease); }
a.stat:hover { border-color: var(--brand-400); box-shadow: var(--sh-md); }

/* ------------------------------------------------------- تقویم شمسی */
.jpick {
  position: fixed; z-index: 1000; width: 262px; max-width: calc(100vw - 16px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: var(--s2);
}
.jpick .jhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s1) var(--s2) var(--s2);
}
.jpick .jtitle { font-weight: 700; font-size: var(--fs-sm); }
.jpick .jnav {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 16px; color: var(--text-2); padding: 2px 8px; border-radius: var(--r-sm);
}
.jpick .jnav:hover { background: var(--surface-2); color: var(--text); }
.jpick .jgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jpick .jw {
  text-align: center; font-size: var(--fs-xs); color: var(--text-3);
  padding-bottom: 4px; font-weight: 700;
}
.jpick .jd {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--fs-sm); padding: 6px 0; border-radius: var(--r-sm); color: var(--text);
}
.jpick .jd:hover { background: var(--surface-2); }
.jpick .jd.today { color: var(--brand-700); font-weight: 700; }
.jpick .jd.on { background: var(--brand-600); color: #fff; font-weight: 700; }
.jpick .jfoot {
  display: flex; gap: var(--s2); justify-content: space-between;
  border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2);
}
input.jdate, input.money-input {
 letter-spacing: .02em;
}
input.jdate { cursor: pointer; }

@media (max-width: 820px) {
  .phead h1 { font-size: var(--fs-lg); }
  .info { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ==========================================================================
   صفحه‌ی ورود — کارت دوستونه: فرم سمت راست، معرفی سمت چپ

   اولین چیزی است که هر کس از این نرم‌افزار می‌بیند، و تا امروز یک کارتِ
   ساده بود. ستونِ چپ کارِ واقعی می‌کند: می‌گوید این چه سیستمی است، برای
   کارمند تازه‌ای که هنوز نمی‌داند کجا آمده.
   ========================================================================== */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(59,104,246,.16), transparent 62%),
    radial-gradient(720px 420px at 4% 112%, rgba(139,92,246,.12), transparent 62%),
    var(--bg);
}
.auth .box {
  width: 100%; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-xl);
  animation: auth-in var(--dur-slow) var(--ease-out);
}
@keyframes auth-in {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.auth .side {
  padding: var(--s10) var(--s8); color: #fff;
  background: linear-gradient(155deg, var(--brand-600), var(--brand-950));
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s4); position: relative; overflow: hidden;
}
/* الگوی محوِ پس‌زمینه — با گرادیان ساخته می‌شود و نه تصویر، چون هیچ فایلی
   لازم ندارد و روی هر اندازه‌ای درست در می‌آید. */
.auth .side::after {
  content: ""; position: absolute; inset: 0; opacity: .28;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 68% 72%, rgba(255,255,255,.16) 0 1.5px, transparent 1.5px);
  background-size: 26px 26px, 34px 34px;
  pointer-events: none;
}
.auth .side > * { position: relative; z-index: 1; }
.auth .side .mark {
  width: 56px; height: 56px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.16); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
}
/* لوگو روی زمینه‌ی رنگی: کارتِ سفید تا لوگوی تیره هم خوانا بماند */
.auth .side .mark.logo {
  width: auto; height: auto; min-width: 56px; max-width: 100%; padding: 8px 12px;
  justify-self: start; align-self: flex-start; background: #fff;
}
/* لوگوی کامل نوشته دارد («Kaveh Oil Industry»، «روغن صنعت کاوه»)؛ زیرِ ~۹۰ پیکسل خوانا نیست */
.auth .side .mark.logo img { display: block; max-height: 96px; max-width: 200px; object-fit: contain; }
.auth .side .mark[hidden] { display: none; }
.auth .side h2 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; }
.auth .side .tag { font-size: var(--fs-sm); opacity: .82; line-height: 1.9; }
.auth .side ul { display: grid; gap: var(--s2); margin-top: var(--s2); }
.auth .side li {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); opacity: .92;
}
.auth .side li > span:first-child {
  width: 22px; height: 22px; border-radius: var(--r-sm); flex: none;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
}
.auth .side .trust {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3);
  padding: 6px var(--s3); border-radius: var(--r-full); align-self: flex-start;
  background: rgba(255,255,255,.14); font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid rgba(255,255,255,.18);
}

.auth .form { padding: var(--s10) var(--s8); display: flex; flex-direction: column; }
.auth .form h1 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--s2); }
.auth .form .lead { color: var(--text-3); font-size: var(--fs-sm); margin-bottom: var(--s6); }
.auth .form .ver {
  text-align: center; color: var(--text-3); font-size: var(--fs-xs);
  margin-top: auto; padding-top: var(--s6);
}
/* چشمکِ نمایش رمز — بدون آن، کاربری که رمز بلند دارد و اشتباه می‌زند هیچ
   راهی برای فهمیدنش ندارد جز امتحان دوباره. */
.auth .pw { position: relative; }
/* جا برای دکمه، وگرنه رمزِ بلند از زیرش رد می‌شود */
.auth .pw .input { padding-inline-start: var(--s10); }
.auth .pw .eye {
  position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--text-3);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.auth .pw .eye:hover { background: var(--surface-3); color: var(--text); }

@media (max-width: 760px) {
  .auth .box { grid-template-columns: minmax(0, 1fr); }
  .auth .side { padding: var(--s6); gap: var(--s3); }
  .auth .side ul, .auth .side .tag { display: none; }
  .auth .form { padding: var(--s6); }
}

/* ---------------- پالایش سربرگ موجودیت (پرونده‌ی طرف‌حساب، کارت کالا، سند) */
.entity-head {
  gap: var(--s5); align-items: center;
}
.entity-head .ava {
  width: 56px; height: 56px; font-size: 24px;
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
.entity-head .idn h2 { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* شاخص‌ها با جداکننده، مثل نمونه‌ی «اطلاعات حساب» */
.entity-head .kpis { gap: 0; }
.entity-head .kpi {
  padding: 0 var(--s5); border-inline-start: 1px solid var(--line);
  text-align: center;
}
.entity-head .kpi:first-child { border-inline-start: 0; }

/* نوار عملیات زیر سربرگ — کارت جدا، مثل نمونه‌ها */
.entity-head + .pagebar { margin-top: var(--s3); }

@media (max-width: 900px) {
  .entity-head { flex-wrap: wrap; gap: var(--s3); }
  .entity-head .kpis { width: 100%; }
  .entity-head .kpi { padding: 0 var(--s3); }
}

/* ==========================================================================
   گزارش‌ها: نمودار میله‌ای بدون کتابخانه
   میله‌ها flex‌اند و ارتفاعشان درصدی است، پس در هر عرضی درست می‌مانند و
   در تم تیره هم رنگشان از توکن‌ها می‌آید نه از مقدار ثابت.
   ========================================================================== */
.chart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5) var(--s3);
}
.chart-legend {
  display: flex; gap: var(--s4); justify-content: flex-end;
  font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s3);
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend i.a { background: var(--brand-500); }
.chart-legend i.b { background: var(--green-500); }

.chart-body {
  display: flex; align-items: flex-end; gap: 3px;
  height: 190px; overflow-x: auto; padding-bottom: var(--s2);
}
.chart .bar-col {
  flex: 1 0 22px; min-width: 22px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.chart .bars {
  display: flex; align-items: flex-end; gap: 2px; height: 100%;
}
.chart .bars i {
  flex: 1; display: block; border-radius: 3px 3px 0 0; min-height: 2px;
  transition: opacity .12s var(--ease);
}
.chart .bars i.a { background: var(--brand-500); }
.chart .bars i.b { background: var(--green-500); opacity: .85; }
.chart .bar-col:hover .bars i { opacity: .7; }
.chart .lbl {
  font-size: 9px; color: var(--text-3); text-align: center;
  white-space: nowrap; 
}

/* نوار سهم رنگی */
.progress > i.green { background: var(--green-500); }
.progress > i.amber { background: var(--amber-500); }
.progress > i.red   { background: var(--red-500); }

/* ردیف جمعِ پایین جدول‌های گزارش */
table.tbl tfoot td, table.tbl tr.total td {
  font-weight: 800; background: var(--surface-2);
  border-top: 2px solid var(--line-2);
}

/* صورت سود و زیان: ردیف‌های تراز */
.pnl { width: 100%; border-collapse: collapse; }
.pnl td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.pnl td.amt { text-align: left; white-space: nowrap; }
.pnl tr.sum td { font-weight: 800; background: var(--surface-2); }
.pnl tr.grand td {
  font-weight: 800; font-size: var(--fs-md);
  background: var(--brand-50); color: var(--brand-700);
  border-bottom: 0;
}
.pnl tr.grand td.neg, .pnl tr.grand td.loss { background: var(--red-50); color: var(--red-700); }
.pnl .ind { padding-inline-start: var(--s8); color: var(--text-2); font-size: var(--fs-sm); }

/* ==========================================================================
   CRM — قیف فروش و برد کانبان
   کانبان قلب CRM است؛ باید در یک نگاه بگوید هر فرصت کجای مسیر ایستاده.
   ========================================================================== */

/* ------------------------------------------------- نمودار قیف (ریزش) */
.funnel {
  display: flex; align-items: flex-end; gap: var(--s2);
  overflow-x: auto; padding-bottom: var(--s2);
}
.funnel .fstep {
  flex: 1 0 90px; min-width: 90px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.funnel .fbar {
  width: 100%; border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  min-height: 20px;
}
.funnel .fn { font-weight: 800; font-size: var(--fs-md); }
.funnel .flabel { font-size: var(--fs-xs); color: var(--text-2); }
.funnel .fval { font-size: 10px; color: var(--text-3); }
.funnel .farrow {
  align-self: center; color: var(--text-3); font-size: 14px; padding-bottom: var(--s6);
}

/* ---- نوار مراحل (قیف فروش و گردش سفارش روی میزکار)
   هر مرحله رنگ خودش را از تنظیمات قیف می‌گیرد (`--tone`) و همان رنگ روی نوار
   بالا، نقطه و نوار سهم می‌نشیند — نام مرحله کنارش است، پس رنگ تنها نشانه نیست. */
.pipestrip { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: thin; }
.pipe {
  position: relative; overflow: hidden;
  flex: 1 0 150px; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  padding: var(--s3) var(--s3) var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.pipe::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tone, var(--gray-400));
}
.pipe:hover { color: inherit; border-color: var(--line-2); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.pipe .ph { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.pipe .swatch { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--gray-400)); }
.pipe .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe .n { margin-top: var(--s1); font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; }
.pipe .v { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.pipe .bar { height: 4px; margin-top: var(--s2); border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.pipe .bar i {
  display: block; height: 100%; border-radius: inherit; background: var(--tone, var(--brand-500));
  transform-origin: right; animation: bar-grow .6s var(--ease-out) both;
}
.pipe.won { background: linear-gradient(180deg, var(--green-50), var(--surface) 70%); }
.pipe.lost { opacity: .75; }
.pipefoot {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3);
  font-size: var(--fs-xs); color: var(--text-3);
}
.pipefoot b { color: var(--text); font-weight: 700; }

/* ==========================================================================
   پوسته‌ی نسخه ۳ — نوار بالای سورمه‌ای + منوی کناری
   --------------------------------------------------------------------------
   چرا منوی کناری جای نوار افقی نشست: ماژول‌ها از ۹ تا گذشتند و نوار افقی
   مجبور بود در دو خط بشکند یا زیرمنوهای عمیق بسازد. منوی کناری هر ماژول را
   با زیربخش‌هایش هم‌زمان نشان می‌دهد، جای فعلیِ کاربر همیشه پیداست، و همان
   الگویی است که نرم‌افزارهای اداری مرجع دارند.

   نوار بالا زمینه‌ی کار را نگه می‌دارد (دفتر، سال مالی، جستجو، کاربر) و
   منوی کناری مقصد را. این دو نباید کار هم را بکنند.
   ========================================================================== */

.app.side {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "topbar topbar" "sbar main";
  min-height: 100vh;
}
.app.side > .appbar { grid-area: topbar; }
.app.side > .sbar   { grid-area: sbar; }
.app.side > .main   { grid-area: main; min-width: 0; }

/* منوی جمع‌شده: فقط آیکن‌ها */
.app.side.narrow { --sidebar-w: var(--sidebar-w-mini); }

/* ------------------------------------------------------------ منوی کناری
   دو سطح و بس: گروهِ آکاردئونی ← لینک. هر بار فقط یک گروه باز است.

   انیمیشنِ باز شدن با `grid-template-rows: 0fr → 1fr` انجام می‌شود و نه با
   `max-height`. دلیلش این است که `max-height` عددِ حدسی می‌خواهد: کم بگیری
   محتوا بریده می‌شود، زیاد بگیری بسته‌شدن اولش کند به نظر می‌رسد و بعد
   می‌پرد. این روش ارتفاع واقعی را می‌گیرد و در هر دو جهت یکنواخت است.
   ========================================================================== */
.sbar {
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}
.sbar-scroll {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s3) var(--s3) var(--s6);
  scrollbar-width: thin;
}
.sbar-scroll::-webkit-scrollbar { width: 6px; }
.sbar-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.sbar-scroll::-webkit-scrollbar-track { background: transparent; }

.sb-sep { height: 1px; background: var(--line); margin: var(--s3) var(--s2); }

/* ---- میانبرِ سطح‌اول (میزکار، کارتابل، پیام‌رسان) و سربرگ گروه:
   یک شکلِ مشترک دارند تا منو یک ستونِ یکدست به نظر برسد نه دو جور دکمه. */
.sb-p, .sb-h {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 8px var(--s3);
  border: 0; background: none; font: inherit; font-size: var(--fs);
  text-align: start; color: var(--text-2); border-radius: var(--r);
  cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sb-p > .ic, .sb-h > .ic {
  flex: 0 0 18px; display: grid; place-items: center; color: var(--text-3);
  transition: color var(--dur-fast) var(--ease);
}
.sb-p > .tx, .sb-h > .tx {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-h > .tx { font-weight: 600; }
.sb-p:hover, .sb-h:hover { background: var(--surface-3); color: var(--text); }
.sb-p:hover > .ic, .sb-h:hover > .ic { color: var(--brand-500); }
.sb-p:focus-visible, .sb-h:focus-visible { outline: none; box-shadow: var(--ring); }

/* پیکانِ گروه — بسته: رو به چپ (در RTL یعنی «باز می‌شود»)، باز: رو به پایین */
.sb-h > .car {
  flex: 0 0 auto; color: var(--gray-400);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
}
.sb-g.open > .sb-h > .car { transform: rotate(-90deg); color: var(--brand-500); }
.sb-g.open > .sb-h { color: var(--text); }
.sb-g.open > .sb-h > .ic { color: var(--brand-600); }

/* میانبرِ فعال — قرصِ سورمه‌ای با نشانگر نارنجی در لبه */
.sb-p.on { background: var(--brand-700); color: #fff; font-weight: 600; }
.sb-p.on > .ic { color: #fff; }
.sb-p.on::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%;
  width: 3px; border-radius: 3px; background: var(--accent-500);
}

/* شمارنده */
.sb-p .n, .sb-h .n, .sb-l .n {
  flex: 0 0 auto; min-width: 19px; text-align: center;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--r-full); background: var(--accent-500); color: var(--accent-ink);
  line-height: 1.6;
}
/* شمارنده‌ی روی سربرگِ گروهِ **باز** تکراری است — همان عدد یک خط پایین‌تر
   روی لینک خودش هست. */
.sb-g.open > .sb-h > .n { display: none; }

/* ---- بدنه‌ی آکاردئون */
.sb-b {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.sb-b > * { overflow: hidden; min-height: 0; }
.sb-g.open > .sb-b { grid-template-rows: 1fr; }
.sb-g.open .sb-in { padding-block: 2px var(--s2); }
/* پوشش برای مرورگری که `grid-template-rows` انیمیشن‌پذیر ندارد: آن‌جا
   بی‌انیمیشن ولی **درست** باز و بسته می‌شود، نه اینکه همیشه باز بماند. */
@supports not (transition-property: grid-template-rows) {
  .sb-b { display: block; height: 0; overflow: hidden; }
  .sb-g.open > .sb-b { height: auto; }
}

.sb-l {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s3); border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-sm);
  position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* خطِ راهنمای عمودی کنار زیرمجموعه‌ها — چشم می‌فهمد این‌ها زیرِ آن گروه‌اند */
/* فاصله‌ی عمودی فقط وقتی گروه **باز** است.
   نه margin کار می‌کند و نه padding ثابت: هیچ‌کدام را ردیفِ `0fr` صفر
   نمی‌کند، چون بیرون از جعبه‌ی محتوا حساب می‌شوند. نتیجه‌اش ۱۰ پیکسل
   ارتفاعِ باقی‌مانده بود، و ضربدر هفت گروهِ بسته یعنی ۷۰ پیکسل فضای مُرده
   که منو را بی‌دلیل اسکرول‌دار می‌کرد. */
.sb-in {
  padding-block: 0;
  transition: padding-block var(--dur-slow) var(--ease-out);
  padding-inline-start: var(--s4);
  margin-inline-start: calc(var(--s3) + 9px);
  border-inline-start: 1px solid var(--line);
  display: grid; gap: 1px;
}
.sb-l > .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-l:hover { background: var(--surface-3); color: var(--text); }
.sb-l.on {
  color: var(--brand-700); font-weight: 700; background: var(--brand-50);
}
.sb-l.on::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--s4) * -1 - 1px);
  top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--brand-500);
}

/* ---- حالت جمع‌شده: فقط آیکن.
   گروه‌ها در این حالت باز نمی‌شوند (جایی برای متن نیست)؛ کاربر اول منو را
   باز می‌کند. سعی در نشان‌دادنِ زیرمنو در ۶۸ پیکسل فقط یک پنلِ شناور
   می‌سازد که روی محتوا می‌افتد. */
.narrow .sb-p > .tx, .narrow .sb-h > .tx,
.narrow .sb-h > .car, .narrow .sb-b, .narrow .sb-sep { display: none; }
.narrow .sb-p, .narrow .sb-h { justify-content: center; padding: 10px 0; }
.narrow .sb-p .n, .narrow .sb-h .n {
  position: absolute; top: 2px; inset-inline-end: 2px; min-width: 15px;
  font-size: 9.5px; padding: 0 4px;
}
.narrow .sb-g.open > .sb-h { background: var(--brand-50); color: var(--brand-700); }

/* پاورقی منو — جمع‌کردن منو */
.sb-foot {
  border-top: 1px solid var(--line); padding: var(--s2);
  display: flex; align-items: center; gap: var(--s2);
}
.sb-foot button {
  display: flex; align-items: center; gap: var(--s2); flex: 1;
  padding: 7px var(--s3); border: 0; border-radius: var(--r);
  background: none; color: var(--text-3); font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sb-foot button:hover { background: var(--surface-3); color: var(--text); }
.sb-foot button .car { transition: transform var(--dur) var(--ease-out); }
.narrow .sb-foot button { justify-content: center; }
.narrow .sb-foot button .tx { display: none; }
.narrow .sb-foot button .car { transform: rotate(180deg); }

/* ==========================================================================
   نوار بالا
   --------------------------------------------------------------------------
   سه ناحیه از راست به چپ: **کجا هستم** (برند، دفتر، سال مالی)، **چه
   می‌خواهم** (جستجو، ایجاد سریع)، **چه چیزی منتظر من است** (کارتابل، اعلان،
   حساب).

   تا پیش از این سه لایه‌ی CSS روی هم بود: نوار تیره‌ی نسخه‌ی اول، منوی
   افقیِ قرص‌شکلی که مدت‌ها بود در هیچ قالبی نبود، و روکشِ روشنی که هر دو را
   خنثی می‌کرد. هر تغییر سه جا لازم داشت و ترتیبِ فایل تعیین می‌کرد کدام
   برنده است. حالا یک تعریف است.

   **همه‌ی انتخابگرها زیر `.appbar` هستند.** `.ctx` و `.who` در پیام‌رسان و
   تسک‌ها معنای دیگری دارند؛ قاعده‌ی سراسریِ قبلی به نامِ گفتگوهای
   پیام‌رسان هم پس‌زمینه و حاشیه‌ی دکمه می‌داد.
   ========================================================================== */
.appbar {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--topbar-h); padding-inline: var(--s4);
  /* نیمه‌شفاف و مات: محتوایی که زیرش می‌رود محو دیده می‌شود، نه بریده */
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-block-end: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* سایه فقط وقتی محتوا زیرِ نوار رفته (app.js) */
.appbar.lift { box-shadow: var(--sh-sm); border-block-end-color: transparent; }
.appbar .spacer { flex: 1; }

/* ---- برند: هم‌عرضِ منوی کناری، تا انتخابگرِ دفتر هم‌راستای لبه‌ی محتوا باشد */
.appbar .brand {
  display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto;
  min-width: calc(var(--sidebar-w) - var(--s4));
  color: var(--text); font-weight: 800; font-size: var(--fs-md);
  letter-spacing: -.01em; white-space: nowrap;
}
.appbar .brand:hover { color: var(--brand-700); }
.appbar .brand .mark {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r);
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: 0 4px 12px -3px rgba(59, 104, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform var(--dur) var(--ease-spring);
}
.appbar .brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.appbar .brand .bn { overflow: hidden; text-overflow: ellipsis; }
/* لوگوی بارگذاری‌شده جای نشانِ پیش‌فرض: ارتفاعِ همان نشان، پهنا به نسبتِ خودِ تصویر */
.appbar .brand .logo {
  height: 32px; width: auto; max-width: 96px; flex: 0 0 auto; object-fit: contain;
}

/* ---- دکمه‌ی آیکنی: ۳۸ پیکسل همه‌جا — روی گوشی هم با شست بی‌خطا زده می‌شود */
.appbar .ab {
  position: relative; display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 38px; padding: 0;
  border: 0; border-radius: var(--r); background: transparent;
  color: var(--text-2); font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.appbar .ab:hover { background: var(--surface-2); color: var(--text); }
.appbar .ab:active { transform: scale(.92); }
.appbar .menu.on > .ab { background: var(--brand-50); color: var(--brand-700); }
.appbar .sb-burger, .appbar .qs-mini { display: none; }

.appbar .ab:focus-visible, .appbar .ctx:focus-visible, .appbar .qnew:focus-visible,
.appbar .who:focus-visible, .appbar .drop a:focus-visible, .appbar .drop button:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* شمارنده روی گوشه‌ی آیکن، با حلقه‌ای هم‌رنگِ زمینه تا از خطوطِ آیکن جدا خوانده شود */
.appbar .dotn {
  position: absolute; top: 2px; inset-inline-end: 1px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  border: 2px solid var(--surface); border-radius: var(--r-full);
  background: var(--red-500); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  animation: dotn-pop var(--dur-slow) var(--ease-spring);
}
.appbar .dotn.off { display: none; }
@keyframes dotn-pop { from { transform: scale(0); } }

/* زنگوله فقط وقتی اعلانِ **تازه** آمده تکان می‌خورد — app.js تصمیم می‌گیرد */
.appbar .ab.ring svg { animation: bell-ring .7s var(--ease) .25s; transform-origin: 50% 3px; }
@keyframes bell-ring {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(7deg); }
  80% { transform: rotate(-3deg); }
}

/* ---- انتخابگرهای زمینه: دفتر و سال مالی */
.appbar .ctx {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 34px; padding-inline: 12px 9px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-2);
  font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.appbar .ctx:hover { background: var(--surface-2); border-color: var(--line-2); }
.appbar .ctx .k { color: var(--text-3); font-size: var(--fs-xs); }
.appbar .ctx .v { color: var(--text); font-weight: 700; }
.appbar .ctx .ic, .appbar .ctx .car { display: grid; color: var(--text-3); }
.appbar .ctx .car { transition: transform var(--dur) var(--ease-out); }
.appbar .menu.on > .ctx .car { transform: rotate(180deg); }
.appbar .ctx.year { cursor: default; padding-inline: 10px 12px; }
.appbar .ctx.year:hover { background: var(--surface); border-color: var(--line); }

/* رنگِ هر دفتر: رسمی سورمه‌ای، غیررسمی کهربایی، «هر دو» خنثی.
   نارنجیِ تأکید اینجا عمداً نیست — آن رنگ فقط برای *اقدام* است، و لایه‌ی
   قبلی دفتر رسمی را نارنجی می‌کرد. */
.appbar .dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  background: var(--gray-400); box-shadow: 0 0 0 3px var(--gray-100);
}
.appbar .bk-official .dot   { background: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.appbar .bk-unofficial .dot { background: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); }
.appbar .ctx.bk-official       { background: var(--brand-50); border-color: var(--brand-200); }
.appbar .ctx.bk-official .v    { color: var(--brand-700); }
.appbar .ctx.bk-unofficial     { background: var(--amber-50); border-color: var(--amber-100); }
.appbar .ctx.bk-unofficial .v  { color: var(--amber-700); }

/* ---- جستجو: ظاهرِ کادر، رفتارِ دکمه (پالت فرمان را باز می‌کند) */
.appbar .qsearch { flex: 0 1 300px; min-width: 180px; }
.appbar .qsearch form { position: relative; margin: 0; }
.appbar .qsearch .ic {
  position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
  display: grid; color: var(--text-3); pointer-events: none;
}
.appbar .qsearch input {
  width: 100%; height: 38px; padding-block: 0; padding-inline: 38px 66px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.appbar .qsearch input::placeholder { color: var(--text-3); }
.appbar .qsearch input:hover {
  background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-xs);
}
.appbar .qsearch .kbdhint {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  background: var(--surface); pointer-events: none;
}

/* ---- ایجاد سریع: تنها دکمه‌ی رنگیِ نوار، چون تنها «اقدامِ» آن است */
.appbar .qnew {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 38px; padding-inline: 12px 16px;
  border: 0; border-radius: var(--r-full);
  background: var(--accent-500); color: var(--accent-ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 14px -7px var(--accent-500);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.appbar .qnew:hover {
  background: var(--accent-600); transform: translateY(-1px);
  box-shadow: 0 8px 18px -7px var(--accent-500);
}
.appbar .qnew:active { transform: scale(.97); }
.appbar .qnew svg { transition: transform var(--dur) var(--ease-spring); }
/* باز که شد، «+» می‌شود «×» — همان دکمه می‌بندد */
.appbar .menu.on > .qnew svg { transform: rotate(45deg); }

/* ---- حساب کاربری */
.appbar .who {
  display: inline-flex; align-items: center; gap: var(--s2); flex: 0 0 auto;
  height: 42px; padding: 3px; padding-inline-end: 10px; margin-inline-start: var(--s1);
  border: 1px solid transparent; border-radius: var(--r-full);
  background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.appbar .who:hover, .appbar .menu.on > .who { background: var(--surface-2); border-color: var(--line); }
.appbar .who .nm { display: grid; max-width: 150px; line-height: 1.3; font-size: var(--fs-sm); }
.appbar .who .nm b, .appbar .who .nm small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar .who .nm b { font-weight: 600; }
.appbar .who .nm small { font-size: var(--fs-xs); color: var(--text-3); }
.appbar .who .car { display: grid; color: var(--text-3); transition: transform var(--dur) var(--ease-out); }
.appbar .menu.on > .who .car { transform: rotate(180deg); }
.appbar .avatar {
  width: 34px; height: 34px; color: #fff; font-size: var(--fs); font-weight: 700;
  background: linear-gradient(135deg, var(--violet-500), var(--brand-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---- منوهای کشویی */
.appbar .menu { position: relative; flex: 0 0 auto; }
.appbar .drop {
  display: none; position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 60;
  min-width: 240px; padding: var(--s2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  transform-origin: top right;
}
.appbar .drop.end { inset-inline-start: auto; inset-inline-end: 0; transform-origin: top left; }
.appbar .menu.on > .drop { display: block; animation: drop-in var(--dur) var(--ease-out); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

.appbar .drop a, .appbar .drop > button {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 8px var(--s3); border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text); font: inherit; font-size: var(--fs); text-align: start;
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.appbar .drop a:hover, .appbar .drop > button:hover { background: var(--surface-2); color: var(--text); }
.appbar .drop .ic { display: grid; place-items: center; width: 18px; color: var(--text-3); }
.appbar .drop .tx { flex: 1; min-width: 0; }
.appbar .drop .sep { height: 1px; background: var(--line); margin: var(--s2) calc(-1 * var(--s2)); }
.appbar .drop .lbl {
  padding: var(--s2) var(--s3) var(--s1);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3);
}
.appbar .drop .n {
  min-width: 20px; padding: 1px 6px; border-radius: var(--r-full); text-align: center;
  background: var(--red-500); color: #fff; font-size: 10.5px; font-weight: 700;
}
.appbar .drop a.danger, .appbar .drop a.danger .ic { color: var(--red-600); }
.appbar .drop a.danger:hover { background: var(--red-50); }

/* دفتر — هر گزینه یک خط توضیح دارد: کاربرِ تازه نمی‌داند «غیررسمی» یعنی چه */
.appbar .bookbox { min-width: 270px; }
.appbar .bookbox .opt { padding-block: 9px; }
.appbar .bookbox .opt .tx { display: grid; line-height: 1.45; }
.appbar .bookbox .opt b { font-weight: 600; }
.appbar .bookbox .opt small { font-size: var(--fs-xs); color: var(--text-3); }
.appbar .bookbox .opt.on { background: var(--surface-2); }
.appbar .bookbox .opt.on b { font-weight: 700; }
.appbar .bookbox .tick { display: grid; color: var(--brand-600); }

/* ایجاد سریع — کاشی‌های رنگی، هر گروه یک رنگ: بعد از چند بار، دست بدون
   خواندن جای «دریافت وجه» را پیدا می‌کند */
.appbar .quickbox { width: 296px; padding: var(--s1) var(--s2) var(--s2); }
.appbar .qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.appbar .qgrid a {
  flex-direction: column; gap: 6px; padding: var(--s3) var(--s2);
  border-radius: var(--r); text-align: center; white-space: normal;
  font-size: var(--fs-sm); font-weight: 600;
}
.appbar .qgrid a .ic {
  width: 38px; height: 38px; border-radius: var(--r);
  background: var(--tone-50, var(--gray-50)); color: var(--tone-600, var(--text-2));
  transition: transform var(--dur) var(--ease-spring);
}
.appbar .qgrid a:hover .ic { transform: translateY(-2px) scale(1.07); }
.appbar .qgrid .t-blue   { --tone-50: var(--blue-50);   --tone-600: var(--blue-600); }
.appbar .qgrid .t-violet { --tone-50: var(--violet-50); --tone-600: var(--violet-600); }
.appbar .qgrid .t-cyan   { --tone-50: var(--cyan-50);   --tone-600: var(--cyan-600); }
.appbar .qgrid .t-green  { --tone-50: var(--green-50);  --tone-600: var(--green-600); }
.appbar .qgrid .t-red    { --tone-50: var(--red-50);    --tone-600: var(--red-600); }
.appbar .qgrid .t-amber  { --tone-50: var(--amber-50);  --tone-600: var(--amber-600); }

/* حساب */
.appbar .mebox { width: 264px; }
.appbar .mehead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s3); margin-block-end: var(--s1);
  border-block-end: 1px solid var(--line);
}
.appbar .mehead .avatar { width: 42px; height: 42px; font-size: var(--fs-md); }
.appbar .mehead .tx { display: grid; min-width: 0; line-height: 1.45; }
.appbar .mehead small {
  font-size: var(--fs-xs); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar .swatches { display: flex; gap: var(--s3); padding: var(--s1) var(--s3) var(--s2); }
.appbar .swatches button {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease);
}
.appbar .swatches button:hover { transform: scale(1.12); }
.appbar .swatches button.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-2); }
.appbar .swatches [data-a="orange"] { background: #f96316; }
.appbar .swatches [data-a="azure"]  { background: #2f7fe0; }
.appbar .swatches [data-a="teal"]   { background: #149c77; }
.appbar .swatches [data-a="violet"] { background: #7c5ad6; }

/* اعلان */
.appbar .bellbox { width: 360px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden; }
.appbar .bellbox .bhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4); border-block-end: 1px solid var(--line);
}
.appbar .bellbox .bhead a {
  display: inline; width: auto; padding: 0; border-radius: 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-600);
}
.appbar .bellbox .bhead a:hover { background: none; color: var(--brand-700); }
.appbar #bellList { max-height: min(380px, 60vh); overflow-y: auto; }
.appbar .bellbox .bellfoot { margin: 0; padding: var(--s2); border-block-start: 1px solid var(--line); }

/* ---- عرضِ کم: اول جستجو آیکن می‌شود، بعد نام کاربر، بعد سال مالی */
@media (max-width: 1180px) {
  .appbar .qsearch { display: none; }
  .appbar .qs-mini { display: inline-grid; }
  .appbar .who .nm, .appbar .who .car { display: none; }
  .appbar .who { padding: 3px; }
}
@media (max-width: 1040px) {
  .appbar .ctx.year { display: none; }
}
@media (max-width: 900px) {
  .appbar { gap: var(--s1); padding-inline: var(--s2); }
  .appbar .sb-burger { display: inline-grid; }
  .appbar .brand { min-width: 0; gap: var(--s2); font-size: var(--fs); }
  .appbar .brand .mark { width: 30px; height: 30px; flex-basis: 30px; }
  .appbar .brand .bn { max-width: 34vw; }
  /* انتخابگر دفتر روی گوشی هم می‌ماند — فقط کوتاه‌تر */
  .appbar .ctx { padding-inline: 9px 7px; }
  .appbar .ctx .k { display: none; }
  /* `.hide-sm` روی خودِ قالب نشسته تا از روی نشانه‌گذاری معلوم باشد چه چیزی
     روی گوشی می‌رود — به‌جای انتخابگرهای شکننده‌ای که با اولین تغییرِ قالب
     بی‌صدا از کار می‌افتند. */
  .hide-sm { display: none !important; }
}
/* گوشی: نام برنامه جا نمی‌شود، و منوهای کشویی به عرضِ نوار باز می‌شوند —
   منویی که از کنارِ دکمه‌اش باز شود، روی ۳۷۵ پیکسل از لبه بیرون می‌زند. */
@media (max-width: 600px) {
  .appbar .brand .bn { display: none; }
  .appbar .menu { position: static; }
  .appbar .drop, .appbar .drop.end {
    inset-inline: var(--s2); top: calc(100% + 6px);
    width: auto; min-width: 0; max-width: none;
  }
}

/* --------------------------------------------------- ریزتنظیم‌های رسمی
   اینجا یک‌بار **لایه‌ی متناقض** بود: `box-shadow: none` روی همه‌ی کارت‌ها و
   بازتعریف دکمه‌ی اصلی، که با لایه‌ی پایه می‌جنگید. نتیجه‌اش همان ظاهرِ
   صافِ بی‌روحی بود که کاربر از آن شکایت داشت — و هر کس استایل کارت را در
   بالای فایل درست می‌کرد، هیچ اثری نمی‌دید و دنبال دلیلش می‌گشت.

   حالا تصمیم‌ها **در خودِ لایه‌ی پایه** نشسته‌اند و اینجا فقط چیزی می‌ماند
   که واقعاً استثناست. اگر دوباره وسوسه شدید چیزی را ته فایل خنثی کنید:
   نکنید؛ بروید همان‌جا که تعریف شده عوضش کنید. */

.phead { padding-block: var(--s3); }
.phead .ic-box {
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--line); border-radius: var(--r);
}

/* ══════════════════════════════════════════════════════ موبایل و تبلت
   سه کاربرِ واقعی اینجا هستند: فروشنده‌ای که وسط ملاقات فاکتور می‌زند،
   مدیری که نگاه سریع می‌اندازد، و انباردار با تبلت. هر سه **ایستاده‌اند
   و یک دست دارند**، و طراحیِ دسکتاپِ کوچک‌شده برای هیچ‌کدامشان کار نمی‌کند.
   ========================================================================== */

/* ---------------------------------------------------- کشوی منو
   باگی که اینجا بود: کشو با `inset-inline-end: 0` به لبه‌ی **چپ** می‌چسبید
   (در RTL، inline-end یعنی چپ) ولی برای پنهان‌شدن `translateX(100%)`
   می‌گرفت که آن را به **راست** می‌برد — یعنی درست وسط صفحه. نتیجه: منو
   همیشه باز روی محتوا بود. در یک برنامه‌ی راست‌به‌چپ منو باید سمت راست
   بنشیند و به راست جمع شود. */
@media (max-width: 900px) {
  .app.side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "main";
  }
  .app.side > .sbar {
    position: fixed; top: var(--topbar-h); bottom: 0;
    inset-inline-start: 0; inset-inline-end: auto;
    width: min(280px, 82vw); z-index: 70;
    transform: translateX(100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--sh-lg);
    border-inline-start: 0;
    border-inline-end: 1px solid var(--line);
  }
  [dir="ltr"] .app.side > .sbar { transform: translateX(-100%); }
  .app.side.menu-open > .sbar { transform: none; }

  .sbar-veil {
    position: fixed; inset: var(--topbar-h) 0 0; z-index: 65;
    background: rgba(12, 19, 34, .45);
    opacity: 0; transition: opacity .22s var(--ease);
  }
  .app.side.menu-open .sbar-veil { opacity: 1; }

}

/* ---------------------------------------------------- نوار پایین */
.bnav { display: none; }

@media (max-width: 900px) {
  .bnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: stretch;
    background: var(--surface);
    border-block-start: 1px solid var(--line);
    /* روی آیفون، نوار خانه زیر صفحه می‌نشیند و دکمه‌ها را می‌خورد */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bnav-i {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    /* ۵۶ پیکسل حداقلِ چیزی است که با شست بی‌خطا زده می‌شود */
    min-height: 56px; padding: 6px 2px;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 10.5px; font-weight: 500;
    color: var(--text-3); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-i .ic { position: relative; display: grid; place-items: center; }
  .bnav-i.on { color: var(--brand-700); }
  .bnav-i.on .ic { color: var(--brand-700); }
  .bnav-i:active { background: var(--surface-2); }

  /* نشان کارتابل روی خودِ آیکن، نه کنارش — کنارش ستون را کج می‌کرد */
  .bnav-i .bdg {
    position: absolute; top: -4px; inset-inline-end: -8px;
    background: var(--red-500); color: #fff;
    font-size: 9.5px; font-style: normal; font-weight: 700;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: var(--r-full);
    display: grid; place-items: center;
    border: 1.5px solid var(--surface);
  }

  /* کارِ اصلیِ فروشنده، برجسته و در دسترس شست */
  .bnav-i.mid { justify-content: center; }
  .bnav-i.mid .ic {
    width: 44px; height: 44px; border-radius: var(--r-full);
    background: var(--accent-500); color: var(--accent-ink);
    box-shadow: 0 2px 8px rgba(249,99,22,.35);
  }
  .bnav-i.mid:active .ic { background: var(--accent-600); }

  /* محتوا نباید زیر نوار پایین گم شود */
  .app.side > .main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
  /* کشو هم نباید زیرش برود */
  .app.side > .sbar { bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}

/* ==========================================================================
   میزکار
   --------------------------------------------------------------------------
   شبکه‌ی ۱۲ ستونی: کوچک=۴ (سه کارت در ردیف)، متوسط=۶، عریض=۱۲. چیدمانِ
   پیش‌فرضِ نقش‌ها سه یا شش کارت شاخص دارد، پس سه‌تایی همیشه ردیفِ پر می‌سازد.

   همین شبکه در تراز آزمایشی و حقوق هم به کار رفته؛ نسبت‌ها عمداً همان نسبت‌های
   شبکه‌ی ۶ستونیِ قبلی‌اند (۲/۶ = ۴/۱۲) تا آن صفحه‌ها بی‌تغییر بمانند.
   ========================================================================== */

/* رنگِ هویت — یک متغیرِ `--tone-*` که هر جزء از آن می‌خواند. یک کلاس روی
   کارت، و آیکن و نوار و سهم همه با هم عوض می‌شوند. */
.tone-brand  { --tone-50: var(--brand-50);  --tone-100: var(--brand-100);  --tone-500: var(--brand-500);  --tone-600: var(--brand-600); }
.tone-blue   { --tone-50: var(--blue-50);   --tone-100: var(--blue-100);   --tone-500: var(--blue-500);   --tone-600: var(--blue-600); }
.tone-green  { --tone-50: var(--green-50);  --tone-100: var(--green-100);  --tone-500: var(--green-500);  --tone-600: var(--green-600); }
.tone-amber  { --tone-50: var(--amber-50);  --tone-100: var(--amber-100);  --tone-500: var(--amber-500);  --tone-600: var(--amber-600); }
.tone-red    { --tone-50: var(--red-50);    --tone-100: var(--red-100);    --tone-500: var(--red-500);    --tone-600: var(--red-600); }
.tone-violet { --tone-50: var(--violet-50); --tone-100: var(--violet-100); --tone-500: var(--violet-500); --tone-600: var(--violet-600); }
.tone-cyan   { --tone-50: var(--cyan-50);   --tone-100: var(--cyan-100);   --tone-500: var(--cyan-500);   --tone-600: var(--cyan-600); }

/* ---- سلام */
.dhero { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s2); }
.dhero .hi { min-width: 0; }
.dhero .hello {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.35;
}
.dhero .hello span { color: var(--brand-600); }
.dhero .today {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  color: var(--text-3); font-size: var(--fs-sm);
}
.dhero .today .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); }
.dhero .spacer { flex: 1; }
.dhero .acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.dchips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.dchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-xs);
  color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.dchip:hover { color: var(--text); border-color: var(--tone-100, var(--line-2)); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.dchip .ic {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tone-50, var(--surface-2)); color: var(--tone-600, var(--text-2));
}
.dchip b { color: var(--text); font-weight: 700; }

/* ---- شروع کار */
.onb {
  position: relative; overflow: hidden;
  padding: var(--s4) var(--s5) var(--s5);
  border: 1px solid var(--brand-100); border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--brand-50), var(--surface) 60%);
  box-shadow: var(--sh-xs);
  animation: wg-in var(--dur-slow) var(--ease-out) both;
}
/* لکه‌ی نورِ گوشه — تنها تزئینِ این صفحه، و فقط روی کارتی که موقتی است */
.onb::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  inset-inline-end: -90px; top: -130px; pointer-events: none;
  background: radial-gradient(circle, rgba(59, 104, 246, .14), transparent 70%);
}
.onb.bye { animation: onb-out var(--dur) var(--ease) forwards; }
@keyframes onb-out { to { opacity: 0; transform: translateY(-6px); } }
.onb-head { display: flex; align-items: center; gap: var(--s4); position: relative; z-index: 1; }
.onb-head .tx { min-width: 0; }
.onb-head h3 { font-size: var(--fs-md); }
.onb-head p { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.onb-head .spacer { flex: 1; }
.onb-ring {
  --p: 0;
  position: relative; flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--brand-500) calc(var(--p) * 1%), var(--brand-100) 0);
}
.onb-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.onb-ring b { position: relative; font-size: var(--fs-sm); font-weight: 800; color: var(--brand-700); }
.onb-steps {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s2); margin-top: var(--s4);
}
.onb-step {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.onb-step:hover { color: var(--text); border-color: var(--brand-200); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.onb-step .ck {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  border: 1.5px dashed var(--brand-300); background: var(--brand-50); color: var(--brand-700);
}
.onb-step .tx { display: grid; min-width: 0; line-height: 1.45; }
.onb-step .tx b { font-size: var(--fs-sm); font-weight: 700; }
.onb-step .tx small { font-size: var(--fs-xs); color: var(--text-3); }
.onb-step.done { background: rgba(255, 255, 255, .55); border-color: transparent; }
.onb-step.done:hover { transform: none; box-shadow: none; }
.onb-step.done .ck { border: 0; background: var(--green-500); color: #fff; }
.onb-step.done .tx b { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--gray-300); }

.dhero + *, .onb + * { margin-top: var(--s4) !important; }

/* ---- شبکه */
.wgrid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s4); align-items: stretch;
}
.wg-sm { grid-column: span 4; }
.wg-md { grid-column: span 6; }
.wg-lg { grid-column: span 12; }
@media (max-width: 1100px) {
  .wg-sm { grid-column: span 6; }
  .wg-md, .wg-lg { grid-column: span 12; }
}

/* ---- کارت ویجت */
.wg {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-xs); overflow: hidden;
  /* ورودِ پلکانی — `--i` را قالب می‌دهد */
  animation: wg-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@keyframes wg-in { from { opacity: 0; transform: translateY(8px); } }
/* جابه‌جاکردنِ کارت در DOM انیمیشن ورود را از نو پخش می‌کند؛ وسطِ کشیدن،
   کارت‌ها پشتِ سرِ هم چشمک می‌زدند. */
.arranging .wg { animation: none; }
.wg-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s2); }
.wg-head .ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--tone-50, var(--brand-50)); color: var(--tone-600, var(--brand-600));
}
.wg-head h3 { font-size: var(--fs); font-weight: 700; }
.wg-head .spacer { flex: 1; }
.wg-link {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); background: var(--surface-2);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.wg-link:hover { background: var(--brand-50); color: var(--brand-700); }
.wg-body { flex: 1; min-width: 0; padding: var(--s2) var(--s4) var(--s4); }
.wg-body > .tbl { margin: 0 calc(var(--s4) * -1) calc(var(--s4) * -1); width: calc(100% + var(--s4) * 2); }

/* ---- کارت شاخص
   برچسب و عدد سمت راست، آیکن رنگی سمت چپ، و نوارِ رنگیِ نازک بالای کارت که
   هویتش را می‌دهد بی‌آنکه کل کارت رنگی شود. عدد با ارقامِ متناسب است، نه
   `tabular-nums`: در اندازه‌ی درشت، ارقامِ هم‌عرض «۱۲۱» را از هم باز می‌کنند. */
/* اندازه‌ی عدد از عرضِ خودِ کارت می‌آید (cqi): مبلغِ کامل «۲۳۸٬۲۶۷٬۶۵۰ ریال» در کارتِ باریکِ
   گوشی از لبه بیرون می‌زد؛ حالا کوچک می‌شود و در کارتِ پهن همان اندازه‌ی درشت می‌ماند. */
.wg.kpi { position: relative; container-type: inline-size; }
.wg.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
  background: var(--tone-500, var(--brand-500));
}
.kpi-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k ic" "v ic" "s s";
  gap: 2px var(--s3); height: 100%;
  padding: var(--s4) var(--s5); color: inherit;
  transition: background var(--dur) var(--ease);
}
.kpi-in .ic {
  grid-area: ic; align-self: start;
  width: 42px; height: 42px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--tone-50, var(--brand-50)); color: var(--tone-600, var(--brand-600));
  transition: transform var(--dur) var(--ease-spring);
}
.kpi-in .k { grid-area: k; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.kpi-in .v {
  grid-area: v; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px;
  font-size: clamp(var(--fs-md), 10.5cqi, var(--fs-2xl)); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.3; color: var(--text); font-variant-numeric: normal;
}
.kpi-in .v small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.kpi-in .s {
  grid-area: s; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s2); font-size: var(--fs-xs); color: var(--text-3);
}
a.kpi-in:hover { background: var(--surface-3); color: inherit; }
a.kpi-in:hover .ic { transform: scale(1.08) rotate(-5deg); }
.wg.kpi:hover { box-shadow: var(--sh-md); }
.count-up { display: inline-block; }
/* «روند»: پیکانِ بالا همان `chevron` است که برعکس شده */
.trend svg { transition: transform var(--dur) var(--ease); }
.trend.up svg { transform: rotate(180deg); }

/* ---- نمودار روند
   ناحیه‌ی یک‌سری: خط ۲ پیکسل، زیرش پرشدگیِ کم‌رنگ، شبکه‌ی مویی و ساکت.
   نقطه‌ها و برچسب‌ها HTML‌اند نه SVG، چون SVG کش می‌آید و دایره بیضی می‌شد. */
.tsum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s2); }
.tsum b { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.tsum small { font-size: var(--fs-xs); color: var(--text-3); }
.tchart { position: relative; margin-top: var(--s4); padding-inline-start: 62px; outline: none; border-radius: var(--r); }
.tchart:focus-visible { box-shadow: var(--ring); }
.tchart [hidden] { display: none !important; }
.tchart .yticks { position: absolute; inset-inline-start: 0; top: 0; width: 56px; height: 140px; }
.tchart .yticks span {
  position: absolute; inset-inline-start: 0; transform: translateY(-50%);
  font-size: 10.5px; color: var(--text-3); white-space: nowrap; 
}
.tplot { position: relative; height: 140px; }
.tplot svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  /* رسمِ خط از راست به چپ، هم‌جهتِ زمان */
  animation: tchart-reveal .7s var(--ease-out) both;
}
@keyframes tchart-reveal { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.tchart .grid { stroke: var(--gray-100); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tchart .grid.base { stroke: var(--line); }
.tchart .line {
  fill: none; stroke: var(--brand-500); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.tchart stop.s0 { stop-color: var(--brand-500); stop-opacity: .16; }
.tchart stop.s1 { stop-color: var(--brand-500); stop-opacity: 0; }
.tdot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500); box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%); pointer-events: none;
}
.tdot.hover { width: 10px; height: 10px; }
.tpeak {
  position: absolute; transform: translate(-50%, calc(-100% - 8px));
  padding: 1px 6px; border-radius: var(--r-sm); background: var(--surface);
  font-size: 10.5px; font-weight: 600; color: var(--text-2); white-space: nowrap;
  pointer-events: none; transition: opacity var(--dur-fast) var(--ease);
}
.tpeak.edge-r { transform: translate(-100%, calc(-100% - 8px)); }
.tpeak.edge-l { transform: translate(0, calc(-100% - 8px)); }
.tchart.hovering .tpeak { opacity: 0; }
.xhair {
  position: absolute; top: 0; bottom: 0; width: 1px; margin-inline-start: -.5px;
  background: var(--line-2); pointer-events: none;
}
.ttip {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 12px));
  display: grid; text-align: center; line-height: 1.5;
  padding: 6px 10px; border-radius: var(--r); background: var(--gray-900); color: #fff;
  box-shadow: var(--sh-md); white-space: nowrap; pointer-events: none;
}
.ttip b { font-size: var(--fs-sm); font-weight: 700; }
.ttip small { font-size: var(--fs-xs); color: var(--gray-300); }
.xticks { position: relative; height: 20px; margin-top: 6px; }
.xticks span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 10.5px; color: var(--text-3); white-space: nowrap;
}
.xticks span.edge-r { transform: translateX(-100%); }
.xticks span.edge-l { transform: none; }
.tview { margin-top: var(--s2); }
.tview summary {
  display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer;
  font-size: var(--fs-xs); color: var(--text-3); padding: 2px 6px; border-radius: var(--r-sm);
}
.tview summary::-webkit-details-marker { display: none; }
.tview summary:hover { color: var(--text); background: var(--surface-2); }
.tview-in {
  max-height: 220px; overflow-y: auto; margin-top: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r);
}

/* ---- فهرست‌های داخل ویجت
   `.lrow` در شش صفحه‌ی دیگر هم هست؛ ظاهرِ تازه فقط داخل `.wg` است تا آن
   صفحه‌ها بی‌خبر عوض نشوند. */
.lrows { display: flex; flex-direction: column; }
.lrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); color: inherit;
}
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--surface-3); }
.lrow > .ic { color: var(--text-3); flex: 0 0 auto; }
.lrow > .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow > .tx small { display: block; color: var(--text-3); font-size: var(--fs-xs); }

.wg .lrows { gap: 2px; margin-inline: calc(var(--s2) * -1); }
.wg .lrow {
  padding: var(--s2); border-bottom: 0; border-radius: var(--r);
  transition: background var(--dur-fast) var(--ease);
}
.wg .lrow:hover { background: var(--surface-2); color: inherit; }
.wg .lrow > .ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tone-50, var(--brand-50)); color: var(--tone-600, var(--brand-600));
}
.wg .lrow > .ic.hot { background: var(--red-50); color: var(--red-600); }
.wg .lrow > .tx { font-size: var(--fs-sm); font-weight: 600; }
.wg .lrow > .tx small { font-weight: 400; margin-top: 1px; }
.wg .lrow .rank {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800;
  background: var(--surface-2); color: var(--text-2);
}
.wg .lrow .rank.r1 { background: var(--amber-100); color: var(--amber-700); }
.mini-bar { flex: 0 0 70px; height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.mini-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--tone-500, var(--brand-500));
  transform-origin: right; animation: bar-grow .6s var(--ease-out) both;
}
@keyframes bar-grow { from { transform: scaleX(0); } }

/* ---- خالیِ ویجت */
.wempty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); min-height: 150px; padding: var(--s4) var(--s3);
  text-align: center; font-size: var(--fs-sm); color: var(--text-3);
}
.wempty .ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-3);
}
.wempty.ok .ic { background: var(--green-50); color: var(--green-600); }
.wempty p { margin: 0; max-width: 34ch; line-height: 1.8; }

/* ---- گوشی: شاخص‌ها دوتایی، نه یکی زیرِ دیگری — شش کارتِ تمام‌عرض یعنی
   دو صفحه اسکرول پیش از اولین نمودار. */
@media (max-width: 680px) {
  .wgrid { gap: var(--s3); }
  .wg-md, .wg-lg { grid-column: span 12; }
  .wg-sm { grid-column: span 6; }
  .kpi-in { grid-template-areas: "ic ic" "k k" "v v" "s s"; padding: var(--s3); }
  .kpi-in .ic { width: 34px; height: 34px; margin-bottom: var(--s1); }
  .kpi-in .v { font-size: var(--fs-xl); }
  .dhero .hello { font-size: var(--fs-xl); }
  .dhero .acts { width: 100%; }
  .onb { padding: var(--s4); }
  .onb-head { flex-wrap: wrap; }
  /* حلقه‌ی پیشرفت می‌گوید چند قدم مانده؛ روی گوشی فقط قدم‌های باقی دیده
     می‌شوند، نه شش ردیفِ بلند که پنج‌تایش خط‌خورده است. */
  .onb-step.done { display: none; }
  /* جدولِ داخل کارت روی ۳۷۵ پیکسل از کارت پهن‌تر می‌شد و `overflow: hidden`ِ
     کارت ستونِ آخر را بی‌صدا می‌برید — تاریخ سررسید چک دیده نمی‌شد. ستونِ
     کم‌اهمیت می‌رود و خانه‌ها می‌پیچند. */
  .wg .tbl .xs-hide { display: none; }
  .wg .tbl td { white-space: normal; }
}

/* ------------------------------------------------- صفحه‌ی شخصی‌سازی */
.pick-group {
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  letter-spacing: .05em; padding: var(--s3) var(--s4) var(--s1);
}
.picki {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); cursor: pointer; border-bottom: 1px solid var(--line);
}
.picki:hover { background: var(--surface-3); }
.picki input { accent-color: var(--accent-600); width: 15px; height: 15px; }
.picki .ic { color: var(--text-3); }
.picki .tx { flex: 1; min-width: 0; }
.picki .tx small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.picki .sz {
  font-size: 10.5px; color: var(--text-3); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 0 var(--s2);
}
.pickd { display: flex; flex-direction: column; }
.pickr {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line);
}
.pickr .ic { color: var(--text-3); }
.pickr .tx { flex: 1; min-width: 0; font-weight: 600; }
.pickr button {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-sm); width: 24px; height: 24px; cursor: pointer;
  font-size: 10px; line-height: 1; padding: 0;
}
.pickr button:hover:not(:disabled) { border-color: var(--brand-300); color: var(--text); }
.pickr button:disabled { opacity: .35; cursor: default; }
.pickr button.rm:hover { border-color: var(--red-500); color: var(--red-700); }

/* ------------------------------------------------------------ پیوست‌ها */
.filelist { display: flex; flex-direction: column; }
.filerow {
  display: flex; align-items: center; gap: var(--s2);
  border-bottom: 1px solid var(--line); padding: var(--s2) var(--s4);
}
.filerow:last-child { border-bottom: 0; }
.filerow:hover { background: var(--surface-3); }
.filerow .fmain {
  display: flex; align-items: center; gap: var(--s3);
  flex: 1; min-width: 0; color: inherit;
}
.filerow .fic {
  flex: 0 0 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700);
}
.filerow .ftx { flex: 1; min-width: 0; overflow: hidden; }
.filerow .ftx small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.filerow .ftx .fnote { color: var(--text-2); }
.filerow .fmain:hover .ftx { color: var(--accent-700); }
.filerow form { margin: 0; }
.fdel {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-3);
  border-radius: var(--r-sm); width: 26px; height: 26px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.fdel:hover { border-color: var(--red-500); color: var(--red-700); }
.fupload { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s2); }
.fupload input[type="file"] { padding: 4px var(--s2); }
@media (max-width: 760px) { .fupload { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------- حد نصاب تأیید */
.quorum { display: flex; flex-direction: column; gap: var(--s2); }
.qbar {
  height: 7px; border-radius: var(--r-full); overflow: hidden;
  background: var(--surface-2);
}
.qbar i {
  display: block; height: 100%; background: var(--green-500);
  transition: width .25s var(--ease);
}

/* ==========================================================================
   ماژول‌های تازه و رفتار واکنش‌گرا
   --------------------------------------------------------------------------
   این بخش سه کار می‌کند:

   ۱. اجزای تازه (پیام‌رسان داخلی، داشبورد مدیریتی، پیگیری‌ها، نظرسنجی).
   ۲. **جدولِ کارت‌شونده** روی موبایل: جدولی که `data-cards` دارد در عرض کم به
      کارت تبدیل می‌شود و برچسب هر خانه از `data-th` می‌آید. اسکرول افقیِ جدول
      روی گوشی عملاً یعنی «نصف ستون‌ها را نمی‌بینی».
   ۳. جابه‌جایی ویجت‌های میزکار با کشیدن.
   ========================================================================== */

/* ---------------------------------------------------- تکه‌های کوچکِ مشترک */
.sub-line { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.sub-line.err { color: var(--red-700); }
.kind-ic { color: var(--text-3); display: inline-flex; vertical-align: -2px; }
.fsec {
  margin: var(--s5) 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; gap: var(--s2);
}
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split.main { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1000px) {
  .split.even, .split.main { grid-template-columns: minmax(0, 1fr); }
}
.checkgrid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.check.off { opacity: .55; }
.ph {
  display: inline-block; padding: 1px 5px; margin: 2px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--fs-xs);
  font-family: ui-monospace, monospace; direction: ltr;
}
.phlist { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
textarea.mono { font-family: ui-monospace, "Vazirmatn", monospace; line-height: 1.9; }
.msgcell { max-width: 340px; }

/* ------------------------------------------------ جدولِ کارت‌شونده (موبایل) */
@media (max-width: 760px) {
  /* نسخه‌ی قبلی هر ستون را یک سطرِ «برچسب: مقدار» می‌کرد — ده سطرِ هم‌وزن
     که خواندنشان یعنی خواندنِ همه‌شان. کارت باید **سلسله‌مراتب** داشته
     باشد: یک چیز که هویت ردیف است، و بقیه ریز زیرش.

     قرارداد بدون دست‌زدن به صدها قالب:
       خانه‌ی اول           → عنوان کارت (بدون برچسب، درشت)
       خانه‌ی بدون data-th  → دکمه‌ی عملیات، بالا-چپ، کنار عنوان
       بقیه                 → سطرهای ریزِ برچسب/مقدار
  */
  table.tbl[data-cards] { display: block; }
  table.tbl[data-cards] thead { display: none; }
  table.tbl[data-cards] tbody { display: block; }
  table.tbl[data-cards] tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px var(--s3);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    margin: var(--s3) 0; padding: var(--s3);
    background: var(--surface);
  }
  table.tbl[data-cards] tr:hover { background: var(--surface); }

  table.tbl[data-cards] td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3); padding: 3px 0; border: 0; text-align: start;
    white-space: normal; grid-column: 1 / -1;
    font-size: var(--fs-sm);
  }
  table.tbl[data-cards] td::before {
    content: attr(data-th); flex: 0 0 38%;
    color: var(--text-3); font-size: var(--fs-xs); font-weight: 500;
  }

  /* عنوان کارت */
  table.tbl[data-cards] td:first-child {
    grid-column: 1; grid-row: 1;
    min-width: 0; padding-bottom: var(--s2);
    font-size: var(--fs-md); font-weight: 600; line-height: 1.45;
    display: block;
  }
  table.tbl[data-cards] td:first-child::before { content: none; }

  /* عملیات کنار عنوان می‌نشیند، نه ته کارت — شست همان بالا است و
     پایین‌رفتن دنبال دکمه یعنی کارت دوباره خوانده شود.

     عمداً فقط **آخرین** خانه‌ی بی‌برچسب: اگر هر خانه‌ی بی‌برچسبی را عملیات
     حساب کنیم، در جدولی که هنوز `data-th` نگرفته همه‌ی خانه‌ها روی هم در
     گوشه‌ی بالا تلنبار می‌شوند. این‌طوری جدولِ برچسب‌نخورده هم بد نمی‌شود،
     فقط برچسب ندارد. */
  table.tbl[data-cards] td:last-child:not([data-th]) {
    grid-column: 2; grid-row: 1;
    justify-content: flex-end; padding: 0;
  }
  table.tbl[data-cards] td:not([data-th])::before { content: none; }

  /* خانه‌ی خالی جا اشغال می‌کند بی‌آنکه چیزی بگوید */
  table.tbl[data-cards] td:empty { display: none; }

  .msgcell { max-width: none; }
}

/* ------------------------------------------ جابه‌جایی ویجت‌های میزکار */
.wgrid.arranging .wg {
  position: relative; cursor: grab;
  border-style: dashed; border-color: var(--accent-400);
}
/* روکشِ شفاف روی کارت: در حالت جابه‌جایی، کشیدن نباید به لینک‌های داخل کارت
   بخورد و مرورگر به‌جای کارت، متن یا لینک را بکشد. */
.wgrid.arranging .wg::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.wgrid.arranging .wg.dragging { opacity: .45; }
.wgrid.arranging .wg.over { outline: 2px solid var(--accent-500); outline-offset: 2px; }

/* دسته‌ی کشیدن در فهرست شخصی‌سازی */
.pickr .grip {
  cursor: grab; color: var(--text-3); letter-spacing: -3px;
  padding-inline-end: var(--s2); user-select: none;
}
.pickr.dragging { opacity: .45; }
.pickr.over { outline: 2px solid var(--accent-500); outline-offset: -2px; }

/* ==========================================================================
   پیام‌رسان داخلی
   ========================================================================== */
.chat-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s3); }
.chat-list .card { position: sticky; top: var(--s3); }
.conv-list { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; }
.conv {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  color: inherit;
}
.conv:last-child { border-bottom: 0; }
.conv:hover { background: var(--surface-2); }
.conv.on { background: var(--brand-50); }
.conv.static:hover { background: transparent; }
.conv .cav {
  flex: 0 0 32px; height: 32px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700);
}
.conv .ctx { flex: 1; min-width: 0; }
.conv .ctx b { display: block; font-size: var(--fs); }
.conv .ctx small {
  display: block; color: var(--text-3); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv .ctx .tagline { color: var(--accent-600); }
.conv .cmeta { text-align: end; display: flex; flex-direction: column; gap: 3px; }
.conv .cmeta small { color: var(--text-3); font-size: var(--fs-xs); }
.conv form { margin: 0; }

.chat-card { display: flex; flex-direction: column; min-height: 60vh; }
.chat-card .back-btn { display: none; }
.msgs {
  flex: 1; overflow-y: auto; max-height: 58vh;
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
  background: var(--surface-3);
}
.msys {
  align-self: center; font-size: var(--fs-xs); color: var(--text-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 2px var(--s3);
}
.msg { display: flex; max-width: 78%; }
.msg.mine { align-self: flex-start; }
.msg:not(.mine) { align-self: flex-end; }
.msg .bub {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s2) var(--s3); min-width: 120px;
}
.msg.mine .bub { background: var(--brand-50); border-color: var(--brand-200); }
.msg .who { font-size: var(--fs-xs); font-weight: 700; color: var(--brand-700); }
.msg .txt { white-space: pre-wrap; word-break: break-word; }
.msg .mfile {
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2);
  padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-3); color: inherit; font-size: var(--fs-sm);
}
.msg .mfile small { color: var(--text-3); margin-inline-start: auto; }
.msg .mmeta {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3);
}
.msg .mmeta form { margin: 0; }
.msg .mmeta button {
  border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0;
}
.msg .mmeta button:hover { color: var(--red-700); }

.composer { border-top: 1px solid var(--line); }
.crow { display: flex; gap: var(--s2); align-items: center; }
.crow .input { flex: 1; }
.crow + .crow { margin-top: var(--s2); }
.crow.file .input[type="file"] { padding: 4px var(--s2); }

@media (max-width: 900px) {
  .chat-wrap { grid-template-columns: minmax(0, 1fr); }
  /* روی گوشی یا فهرست را می‌بینی یا گفتگو را — نه هر دو را نصفه */
  .chat-wrap.has-open .chat-list { display: none; }
  .chat-card .back-btn { display: inline-flex; }
  .chat-list .card { position: static; }
  .conv-list { max-height: none; }
  .msgs { max-height: 55vh; }
  .msg { max-width: 92%; }
}

/* ==========================================================================
   پیام‌رسانِ یکپارچه (۱.۲۰.۰) — همان چیدمانِ پیام‌رسانِ داخلی، به‌علاوه‌ی نشانِ پیام‌رسان و فایل
   ========================================================================== */
.mx-card { margin-bottom: var(--s3); }
.mx-card .dbar { flex-wrap: wrap; }
.mx-card .dbar .input[name="q"] { flex: 1 1 200px; }
.mx-list .ctx small.mx-acc { display: flex; align-items: center; gap: 4px; }
.mx-list .ctx small.mx-acc .badge { font-size: 10px; padding: 0 6px; }
.conv .mx-cav.blue   { background: var(--brand-50); color: var(--brand-700); }
.conv .mx-cav.cyan   { background: #e0f7fa; color: #00838f; }
.conv .mx-cav.green  { background: var(--green-50); color: var(--green-700); }
.conv .mx-cav.violet { background: #f1eafe; color: #6b3fc4; }
.conv .mx-cav.amber  { background: var(--amber-50); color: var(--amber-700); }
.mx-head .mx-who { min-width: 0; }
.mx-head .mx-who h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-head .mx-who .small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.msg .mx-img { display: block; max-width: min(280px, 100%); max-height: 320px; border-radius: var(--r); margin-top: 4px; }
.msg .mx-audio { display: block; width: min(260px, 100%); margin-top: 4px; }
.msg .mx-get { cursor: default; }
.msg .mx-get .btn { margin-inline-start: auto; }
.msg .mx-err { color: var(--red-700); }
.msg .mmeta .mx-retry button:hover { color: var(--brand-700); }
.composer .mx-text { resize: none; min-height: 40px; max-height: 160px; line-height: 1.7; }
.composer .mx-attach { cursor: pointer; }
.composer .mx-file { margin-top: var(--s2); }
.mx-qr { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; }
@media (max-width: 900px) { .mx-card.mx-open { display: none; } }
.mx-qr img { width: 260px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

/* ==========================================================================
   داشبورد مدیریتی
   ========================================================================== */
.delta { font-size: var(--fs-xs); font-weight: 700; margin-inline-start: var(--s2); }
.delta.up { color: var(--green-700); }
.delta.down { color: var(--red-700); }
.delta.flat { color: var(--text-3); }

.ministat {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-3); color: inherit;
}
.ministat .ic { color: var(--text-3); display: grid; place-items: center; }
.ministat .k { flex: 1; font-size: var(--fs-sm); color: var(--text-2); }
.ministat b { font-size: var(--fs-md); }
a.ministat:hover { border-color: var(--accent-400); }
.ministat.bad b { color: var(--red-700); }
.ministat.good b { color: var(--green-700); }

.flowrow { display: flex; gap: var(--s2); flex-wrap: wrap; }
.flowcell {
  flex: 1 1 120px; text-align: center; color: inherit;
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-3);
}
.flowcell b { display: block; font-size: var(--fs-xl); font-weight: 800; }
.flowcell span { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.flowcell small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.flowcell:hover { border-color: var(--accent-400); }

.agerow {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px;
  gap: var(--s3); align-items: center; padding: var(--s2) 0;
}
.agerow .k { font-size: var(--fs-sm); color: var(--text-2); }
.agerow b { text-align: end; }
@media (max-width: 620px) {
  .agerow { grid-template-columns: minmax(0, 1fr) 100px; }
  .agerow .progress { grid-column: 1 / -1; order: 3; }
}

.dimlist { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.dimlist .drow {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--text-2);
}

.issuelist { display: flex; flex-direction: column; margin-top: var(--s3); }
.issue {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--line); color: inherit;
}
.issue small { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-xs); }
.issue span { color: var(--red-700); font-weight: 700; }
.issue:hover b { color: var(--accent-700); }

/* ==========================================================================
   صفحه‌ی عمومی نظرسنجی — بدون منو، برای مشتری
   ========================================================================== */
body.pub { background: var(--surface-3); min-height: 100vh; }
.pubwrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s4); }
.pubcard {
  width: 100%; max-width: 520px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.pubhead {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4); border-bottom: 1px solid var(--line);
  background: var(--brand-900); color: #fff;
}
.pubhead .mark { display: grid; place-items: center; }
.pubbody { padding: var(--s5); }
.pubbody.center { text-align: center; }
.pubbody h1 { font-size: var(--fs-xl); margin-bottom: var(--s2); }
.pubbody .lead { color: var(--text-2); margin-bottom: var(--s5); line-height: 2; }
.pubbody p { color: var(--text-2); line-height: 2; }
.pubfoot {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3); text-align: center;
}
.bigic { display: inline-grid; place-items: center; color: var(--text-3); margin-bottom: var(--s3); }
.bigic.ok { color: var(--green-700); }

fieldset.rate { border: 0; padding: 0; margin: 0 0 var(--s5); }
fieldset.rate legend { font-weight: 700; font-size: var(--fs-md); }
fieldset.rate .hint { margin: 2px 0 var(--s2); }
.yn { display: flex; gap: var(--s4); }

/* ستاره‌ها: ورودی رادیو مخفی، برچسبش ستاره. ترتیب در HTML از زیاد به کم است
   تا با `~` بشود «این و هرچه بعدش» را رنگ کرد — بدون جاوااسکریپت. */
.stars { display: inline-flex; gap: 2px; direction: ltr; }
.stars.pick input { position: absolute; opacity: 0; pointer-events: none; }
.stars.pick label { color: var(--gray-300); cursor: pointer; line-height: 1; }
.stars.pick label:hover,
.stars.pick label:hover ~ label,
.stars.pick input:checked ~ label { color: var(--amber-500); }
.stars.pick input:focus-visible + label { outline: 2px solid var(--accent-500); }
.stars i { color: var(--gray-300); line-height: 1; }
.stars i.on { color: var(--amber-500); }
.scorecard { margin: var(--s4) 0; text-align: start; }
.scorecard .srow {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s2) 0; border-bottom: 1px solid var(--line);
}
.quoted {
  margin-top: var(--s4); padding: var(--s3);
  background: var(--surface-3); border-inline-start: 3px solid var(--brand-400);
  border-radius: var(--r); text-align: start; color: var(--text-2);
}

/* ==========================================================================
   اصلاحاتِ عرضِ کم — از سنجشِ واقعیِ صفحه‌ها در ۳۷۵ پیکسل درآمده‌اند
   ========================================================================== */

/* منوی «عملیات» روی گوشی از لبه می‌زد بیرون. `app.js` مختصات را می‌چیند ولی
   وقتی خودِ پنل از عرضِ دید پهن‌تر باشد هیچ مختصاتی نجاتش نمی‌دهد — پس عرضش
   محدود می‌شود. اندازه‌گیری روی /shipments/1 با عرض ۳۷۵: ۷۸ پیکسل بیرون‌زدگی. */
.rowmenu .rm { max-width: calc(100vw - 16px); }

/* گروه دکمه‌ها (فیلتر بازه‌ی گزارش‌ها) در عرض کم می‌شکند به‌جای بیرون‌زدن.
   با شکستن، گِردیِ سرِ گروه بی‌معنی می‌شود، پس همه‌ی دکمه‌ها گِرد می‌شوند. */
@media (max-width: 620px) {
  .btn-group { flex-wrap: wrap; gap: var(--s1); }
  .btn-group .btn,
  .btn-group .btn:first-child,
  .btn-group .btn:last-child { border-radius: var(--r); margin: 0; }
}

/* هدف لمسی: زیر ۳۲ پیکسل با انگشت قابل اتکا نیست. (دکمه‌های نوار بالا
   خودشان ۳۸ پیکسل‌اند.) */
@media (max-width: 820px) {
  .pagebar .btn.sm { min-height: 32px; }
}

/* تبلت: شبکه‌ی چهارتایی شاخص‌ها در ۷۶۸ پیکسل خیلی فشرده می‌شود.
   دوتایی، هم عدد را خوانا نگه می‌دارد هم مقایسه را ممکن. */
@media (max-width: 900px) {
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entity-head .kpis { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .grid.c3 { grid-template-columns: minmax(0, 1fr); }
  /* سربرگ موجودیت روی گوشی: آواتار و نام کنار هم، شاخص‌ها زیرشان */
  .entity-head { padding: var(--s3) var(--s4); }
  .entity-head .ava { width: 42px; height: 42px; }
  .entity-head .kpi { padding: 0 var(--s3) 0 0; border-inline-start: 0; text-align: start; }
  .phead { flex-wrap: wrap; }
}

/* ==========================================================================
   مدیریت کارها و اعلان‌ها
   ========================================================================== */

/* ------------------------------------------------------- نقطه‌ی رنگی و برچسب */
.dot {
  width: 10px; height: 10px; border-radius: var(--r-full);
  display: inline-block; flex: 0 0 auto; background: var(--gray-400);
}
.dot.lg { width: 20px; height: 20px; }
.dot.slate  { background: var(--gray-400); }
.dot.blue   { background: var(--brand-500); }
.dot.green  { background: var(--green-500); }
.dot.amber  { background: var(--amber-500); }
.dot.red    { background: var(--red-500); }
.dot.violet { background: #7c3aed; }
.dot.teal   { background: #0d9488; }

.lbls { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.lbl-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line);
}
.lbl-chip.blue   { background: var(--brand-50);  color: var(--brand-700); }
.lbl-chip.green  { background: var(--green-50);  color: var(--green-700); }
.lbl-chip.amber  { background: var(--amber-50);  color: var(--amber-700); }
.lbl-chip.red    { background: var(--red-50);    color: var(--red-700); }
.lbl-chip.violet { background: rgba(124,58,237,.12); color: #6d28d9; }
.lbl-chip.teal   { background: rgba(13,148,136,.12); color: #0f766e; }
.lbl-chip form { display: inline; margin: 0; }
.lbl-chip button {
  border: 0; background: none; color: inherit; cursor: pointer;
  padding: 0 0 0 2px; font-size: 13px; line-height: 1; opacity: .6;
}
.lbl-chip button:hover { opacity: 1; }

.colorpick { display: flex; gap: var(--s2); flex-wrap: wrap; }
.colorpick label { cursor: pointer; }
.colorpick input { position: absolute; opacity: 0; pointer-events: none; }
.colorpick .dot {
  width: 22px; height: 22px; box-shadow: 0 0 0 2px transparent;
  transition: box-shadow .12s var(--ease);
}
.colorpick input:checked + .dot { box-shadow: 0 0 0 2px var(--text); }

/* --------------------------------------------------------- نوار پیشرفت */
.progress.sm { height: 5px; margin: 4px 0 2px; }

/* ------------------------------------------------------------ کارت پروژه */
.pcard {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4); color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* نارنجی مالِ «اقدام» است، نه هاورِ کارت */
.pcard:hover { border-color: var(--brand-400); box-shadow: var(--sh-md); transform: translateY(-1px); }
.pcard .pmeta b { color: var(--text); }
.pcard.muted { opacity: .62; }
.pcard .phead { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pcard .phead b { font-size: var(--fs-md); }
.pcard p { color: var(--text-3); }
.pcard .pmeta,
.pcard .pfoot {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--text-3); flex-wrap: wrap;
}
.pcard .pfoot span { display: inline-flex; align-items: center; gap: 4px; }
.pcard .err { color: var(--red-700); }

/* ------------------------------------------------------------- چک‌لیست */
.checklist { display: flex; flex-direction: column; }
.citem {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line);
}
.citem:last-child { border-bottom: 0; }
.citem form { margin: 0; }
.citem .cbox {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; padding: 0;
  display: grid; place-items: center; color: var(--green-700);
}
.citem .cbox:hover { border-color: var(--accent-400); }
.citem .cbox:disabled { cursor: default; opacity: .6; }
.citem .ct { flex: 1; min-width: 0; line-height: 1.8; }
.citem.done .ct { text-decoration: line-through; color: var(--text-3); }
.citem.done .cbox { background: var(--green-50); border-color: var(--green-500); }

/* ------------------------------------------------- گفتگو و تاریخچه‌ی تسک */
.tfeed {
  display: flex; flex-direction: column; gap: var(--s2);
  max-height: 46vh; overflow-y: auto;
}
.tsys {
  align-self: center; font-size: var(--fs-xs); color: var(--text-3);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 2px var(--s3); text-align: center;
}
.tmsg { display: flex; max-width: 82%; }
.tmsg.mine { align-self: flex-start; }
.tmsg:not(.mine) { align-self: flex-end; }
.tmsg .bub {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s2) var(--s3); min-width: 140px;
}
.tmsg.mine .bub { background: var(--brand-50); border-color: var(--brand-200); }
.tmsg .who { font-size: var(--fs-xs); font-weight: 700; color: var(--brand-700); }
.tmsg .txt { white-space: pre-wrap; word-break: break-word; }
.tmsg .mmeta { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }

.pre { white-space: pre-wrap; line-height: 2; }

/* ================================================================ اعلان */
.bellempty { padding: var(--s6) var(--s4); text-align: center; color: var(--text-3); }

.brow { margin: 0; border-bottom: 1px solid var(--line); }
.brow:last-child { border-bottom: 0; }
.brow button {
  display: flex; align-items: flex-start; gap: var(--s2); width: 100%;
  padding: var(--s3) var(--s4); border: 0; background: none; cursor: pointer;
  text-align: right; font: inherit; color: inherit;
}
.brow button:hover { background: var(--surface-2); }
.brow .bdot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--r-full);
  margin-top: 6px; background: var(--brand-500);
}
.brow .bdot.green { background: var(--green-500); }
.brow .bdot.amber { background: var(--amber-500); }
.brow .bdot.red   { background: var(--red-500); }
.brow .btx { flex: 1; min-width: 0; }
.brow .btx b { display: block; font-weight: 600; }
.brow .btx small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.brow .btx .ago { color: var(--text-3); opacity: .8; }

/* صفحه‌ی کامل اعلان‌ها */
.alist { display: flex; flex-direction: column; }
.arow { margin: 0; border-bottom: 1px solid var(--line); }
.arow:last-child { border-bottom: 0; }
.arow .ahit {
  display: flex; align-items: flex-start; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); border: 0; background: none; cursor: pointer;
  text-align: right; font: inherit; color: inherit;
}
.arow .ahit:hover { background: var(--surface-2); }
.arow.unread .ahit { background: var(--brand-50); }
.arow .aic {
  flex: 0 0 32px; height: 32px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700);
}
.arow .aic.green { background: var(--green-50); color: var(--green-700); }
.arow .aic.amber { background: var(--amber-50); color: var(--amber-700); }
.arow .aic.red   { background: var(--red-50);   color: var(--red-700); }
.arow .atx { flex: 1; min-width: 0; }
.arow .atx b { display: block; }
.arow .atx small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.arow .atx .ameta { opacity: .85; margin-top: 2px; }
.arow .adot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--accent-500); margin-top: 10px;
}

/* ================================================================== توست
   گوشه‌ی پایینِ سمتِ شروع (RTL: چپ). عمداً پایین است نه بالا: نوار بالا خودش
   شلوغ است و توستِ بالا روی زنگوله و منو می‌افتد. */
.toasts {
  position: fixed; z-index: 300;
  inset-block-end: var(--s4); inset-inline-start: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand-500);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: var(--s3) var(--s4); pointer-events: auto;
  transform: translateY(12px); opacity: 0;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.toast.in { transform: none; opacity: 1; }
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { border-color: var(--accent-400); }
.toast.green  { border-inline-start-color: var(--green-500); }
.toast.amber  { border-inline-start-color: var(--amber-500); }
.toast.red    { border-inline-start-color: var(--red-500); }
.toast.danger { border-inline-start-color: var(--red-500); }
.toast .tic { color: var(--text-3); display: grid; place-items: center; }
.toast .ttx { flex: 1; min-width: 0; }
.toast .ttx b { display: block; font-weight: 600; line-height: 1.7; }
.toast .ttx small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.toast .tx {
  border: 0; background: none; color: var(--text-3); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 2px;
}
.toast .tx:hover { color: var(--text); }

@media (max-width: 620px) {
  .toasts {
    inset-inline: var(--s3); inset-block-end: var(--s3);
    max-width: none;
  }
}

/* ==========================================================================
   داشبورد شاخص‌های کلیدی
   --------------------------------------------------------------------------
   رنگِ هر کارت از **وضعیتِ محاسبه‌شده** می‌آید نه از دستِ قالب: نوارِ کناری
   سبز/کهربایی/قرمز است و متن خنثی می‌ماند، تا صفحه‌ای با سی شاخص به یک
   رنگین‌کمانِ ناخوانا تبدیل نشود.
   ========================================================================== */
.kgrid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.kcard {
  border: 1px solid var(--line); border-radius: var(--r);
  border-inline-start: 3px solid var(--gray-300);
  padding: var(--s3) var(--s4); background: var(--surface);
}
.kcard.good { border-inline-start-color: var(--green-500); }
.kcard.warn { border-inline-start-color: var(--amber-500); }
.kcard.bad  { border-inline-start-color: var(--red-500); }
.kcard .kt { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; }
.kcard .kv {
  font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.5; 
}
.kcard .kv small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.kcard.bad .kv  { color: var(--red-700); }
.kcard.good .kv { color: var(--green-700); }
.kcard .km {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-3);
}
.kcard .kth { margin-inline-start: auto; }
.kcard .kh {
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.8;
}

.kchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--s3); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface-2);
}
.kchip.good { background: var(--green-50); color: var(--green-700);
              border-color: rgba(18,183,106,.3); }
.kchip.warn { background: var(--amber-50); color: var(--amber-700);
              border-color: rgba(217,133,17,.3); }
.kchip.bad  { background: var(--red-50);   color: var(--red-700);
              border-color: rgba(240,68,56,.3); }

@media (max-width: 560px) {
  .kgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   پالت فرمان (Ctrl+K) و نشانه‌ی میان‌بر روی کادر جستجو
   ========================================================================== */
.kbdhint, .cmdk kbd {
  font: inherit; font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-3);
  border: 1px solid var(--line); white-space: nowrap;
}

dialog.cmdk {
  width: 620px; max-width: 94vw; padding: 0; border: 0;
  border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  background: var(--surface); color: var(--text);
  /* بالای صفحه می‌نشیند و نه وسط: چشم همان‌جا را نگاه می‌کند و دست هم
     همان‌جا تایپ می‌کند. پالتِ وسط‌چین در صفحه‌ی بلند، پایین می‌افتد. */
  margin: 12vh auto auto;
  animation: cmdk-in var(--dur) var(--ease-out);
}
dialog.cmdk::backdrop { background: rgba(23,33,84,.42); backdrop-filter: blur(3px); }
@keyframes cmdk-in {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.cmdk-in {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.cmdk-in .ic { color: var(--text-3); display: grid; place-items: center; }
.cmdk-in input {
  flex: 1; border: 0; background: none; font: inherit; font-size: var(--fs-md);
  color: var(--text); outline: none; min-width: 0;
}
.cmdk-in input::placeholder { color: var(--text-3); }

.cmdk-list { max-height: 48vh; overflow-y: auto; padding: var(--s2); }
.cmdk-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r);
  color: var(--text-2); text-decoration: none;
}
.cmdk-row .l { flex: 1; min-width: 0; color: var(--text); }
.cmdk-row .g { font-size: var(--fs-xs); color: var(--text-3); }
.cmdk-row.on, .cmdk-row:hover { background: var(--brand-50); }
.cmdk-row.on .l { color: var(--brand-700); font-weight: 600; }
.cmdk-none { padding: var(--s6) var(--s4); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

.cmdk-foot {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
  background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl);
  font-size: var(--fs-xs); color: var(--text-3);
}
.cmdk-foot .sp { flex: 1; }
.cmdk-foot kbd { margin-inline-end: 3px; }
@media (max-width: 700px) { .cmdk-foot span:not(.sp):not(:last-child) { display: none; } }

/* ==========================================================================
   فرصت فروش (`opportunities/detail.html`) — اسناد، فعالیت‌ها و تاریخچه‌ی یک فروش
   ========================================================================== */
.deal-grid { align-items: start; }
.deal-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.deal-docs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px dashed var(--line); }
.deal-docs li:last-child { border-bottom: 0; padding-bottom: 0; }
.deal-docs .k { min-width: 84px; color: var(--text-3); font-size: var(--fs-sm); }
.deal-act { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.deal-act.done b { text-decoration: line-through; color: var(--text-3); }
.deal-hist { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--s2); }
.deal-hist li { line-height: 1.8; }
/* «ثبت به‌عنوانِ سابقه» روی پیش‌نویسِ فاکتور: بسته، تا فرمِ اصلیِ صدور را شلوغ نکند */
.hist-card { padding: var(--s3) var(--s4); }
.hist-card > summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); display: flex; gap: var(--s2); align-items: center; }
.hist-card[open] > summary { margin-bottom: var(--s3); }

/* پرونده‌ی سرنخ: کشو و دکمه کنارِ هم، روی گوشی زیرِ هم */
.lead-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; width: 100%; }
.lead-row .input { flex: 1 1 140px; min-width: 0; width: auto; }
.lostbox > summary { list-style: none; display: inline-flex; cursor: pointer; }
.lostbox > summary::-webkit-details-marker { display: none; }
/* پیوندِ فیشِ واریز کنارِ شماره‌ی رسید (`finance/payments.html`) */
.slip { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: var(--s2);
  font-size: var(--fs-xs); }
/* «تاریخ سند» روی سندِ صادرشده، برای `documents.backdate` (`sales/document.html`) */
.docdate > summary { list-style: none; cursor: pointer; }
.docdate > summary::-webkit-details-marker { display: none; }
.docdate .card-body { display: flex; flex-direction: column; gap: var(--s3); }
/* پیوست‌های موجودِ یک هزینه در فرمش (`finance/expense_form.html`) */
.attlist { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.attlist li { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.attlist a { overflow-wrap: anywhere; }

/* ---- گزارش‌های مالی (`components/report.html`): سرستونِ مرتب‌شدنی، سطرِ جمع، دکمه‌های خروجی */
.rtools { display: inline-flex; gap: var(--s2); flex-wrap: wrap; }
.dtbl th .sortlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.dtbl th .sortlink:hover { color: var(--brand-700); }
.dtbl th .sortlink.on { color: var(--brand-700); }
.dtbl th .sarrow { font-size: .75em; }
.rtable tfoot .rtotal td { background: var(--surface-2); border-top: 2px solid var(--line); }
.rtable td.ident { direction: ltr; unicode-bidi: plaintext; }

/* درخواستِ وجه — پنلِ پرداخت از صندوق در مرحله‌ی «انجام پرداخت» (۱.۱۸.۰) */
.paybox { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4);
  background: var(--surface-2); }
.paybox-head { font-weight: 700; margin-bottom: var(--s2); display: flex; align-items: center; gap: 6px; }
.paybox [hidden] { display: none !important; }

/* مدارکِ پرسنلی با پیش‌نمایش و انتخاب برای چاپ (۱.۱۸.۰) */
.docbar { align-items: center; padding: var(--s2) 0 var(--s3); flex-wrap: wrap; }
.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); }
.doccard { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column; }
.doccard .docpick { position: absolute; top: 6px; right: 6px; z-index: 2; background: var(--surface);
  border-radius: var(--r-sm); padding: 2px 4px; box-shadow: var(--sh-sm); }
.doccard .docthumb { display: flex; align-items: center; justify-content: center; height: 120px;
  background: var(--surface-2); overflow: hidden; }
.doccard .docthumb img { width: 100%; height: 100%; object-fit: contain; }
.doccard .docic { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-3); }
.doccard .doctx { padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doccard .doctx b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doccard .doctx small { color: var(--text-3); }
.doccard .fdel { position: absolute; top: 6px; left: 6px; z-index: 2; }

/* «تمدیدِ اعتبار» کنارِ تاریخِ پیش‌فاکتورِ صادرشده (۱.۱۹.۵) */
.valid-ask { display: inline-block; }
.valid-ask > summary { cursor: pointer; color: var(--brand-600); list-style: none; display: inline-flex;
  align-items: center; gap: 4px; }
.valid-ask > summary::-webkit-details-marker { display: none; }
.valid-ask[open] > form { margin-top: var(--s2); }

/* -------------------------------------------- مناقصاتِ ستاد (routes/tenders، ۱.۲۱.۰) */
.tn-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); color: var(--text-2); }
.tn-status > span { display: inline-flex; align-items: center; gap: 4px; }
.tn-soon { color: var(--red-600); font-weight: 600; }
.tn-head { margin: 0 0 var(--s4); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tn-rows { grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); }
.tn-why { color: var(--amber-700); overflow-wrap: anywhere; }
.tn-why svg { vertical-align: -2px; }
.tn-rows dt { overflow-wrap: anywhere; }
.tn-rows dd { text-align: right; }
.tn-rows .tn-line { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); padding: 4px 8px; border-radius: var(--r-sm); }
.tn-snap { display: block; width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.tn-sub { margin: var(--s5) 0 var(--s2); font-size: var(--fs-md); display: flex; align-items: center; gap: 6px; }
.tn-pair { display: flex; align-items: center; gap: var(--s2); }
.tn-pair .input { width: 84px; }