/* ============================================================================
   سامانه مدیریت پروژه‌های اعلام سرقت بانک‌ها — سیستم طراحی
   پالت: لاجورد (کنش) · فیروزه (تکمیل) · زعفران (در انتظار) روی کاغذ گرم
   دو تم کامل: روشن / تاریک — کلید سه‌حالته (روشن / تاریک / سیستم)
   ========================================================================== */

@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ---------------------------------------------------------------- توکن‌ها */
:root {
  color-scheme: light;

  --h-brand: 264;
  --h-paper: 85;

  --bg:            oklch(97.6% 0.006 var(--h-paper));
  --bg-sunk:       oklch(95.2% 0.009 var(--h-paper));
  --login-grid:    oklch(48% 0.150 var(--h-brand) / .12);
  --login-glow:    oklch(58% 0.120 178 / .12);
  --surface:       oklch(99.4% 0.003 var(--h-paper));
  --surface-2:     oklch(97.6% 0.005 var(--h-brand));
  --surface-3:     oklch(95.6% 0.007 var(--h-brand));
  --surface-inset: oklch(96.4% 0.006 var(--h-brand));

  --ink:    oklch(24% 0.030 var(--h-brand));
  --ink-2:  oklch(46% 0.022 var(--h-brand));
  --ink-3:  oklch(60% 0.016 var(--h-brand));

  --line:        oklch(90% 0.008 var(--h-brand));
  --line-soft:   oklch(93.5% 0.006 var(--h-brand));
  --line-strong: oklch(83% 0.012 var(--h-brand));

  --primary:       oklch(48% 0.150 var(--h-brand));
  --primary-hover: oklch(41% 0.150 var(--h-brand));
  --primary-ink:   oklch(31% 0.100 var(--h-brand));
  --primary-soft:  oklch(95.5% 0.025 var(--h-brand));
  --primary-soft-line: oklch(88% 0.050 var(--h-brand));
  --on-primary:    oklch(99% 0.006 var(--h-brand));

  --st-completed:      oklch(56% 0.100 178);
  --st-completed-soft: oklch(95% 0.030 178);
  --st-completed-line: oklch(87% 0.055 178);
  --st-progress:       oklch(52% 0.150 var(--h-brand));
  --st-progress-soft:  oklch(95.5% 0.028 var(--h-brand));
  --st-progress-line:  oklch(88% 0.050 var(--h-brand));
  --st-pending:        oklch(60% 0.130 68);
  --st-pending-soft:   oklch(95.5% 0.040 75);
  --st-pending-line:   oklch(87% 0.070 75);

  --danger:      oklch(53% 0.180 22);
  --danger-soft: oklch(95.5% 0.030 22);
  --danger-line: oklch(88% 0.055 22);
  --info:        oklch(56% 0.110 230);
  --info-soft:   oklch(95.5% 0.030 230);

  --accent-1: oklch(52% 0.130 300);
  --accent-2: oklch(58% 0.120 150);

  /* ناوبری — در هر دو تم تیره می‌ماند */
  --nav-bg:      oklch(26% 0.055 var(--h-brand));
  --nav-bg-deep: oklch(22% 0.050 var(--h-brand));
  --nav-ink:     oklch(84% 0.020 var(--h-brand));
  --nav-ink-dim: oklch(66% 0.024 var(--h-brand));
  --nav-hover:   oklch(32% 0.060 var(--h-brand));
  --nav-active:  oklch(38% 0.090 var(--h-brand));
  --nav-line:    oklch(34% 0.050 var(--h-brand));

  /* رنگ نمودار — Chart.js با oklch کار نمی‌کند، نسخه hex نگه داشته می‌شود */
  --chart-completed: #0f8774;
  --chart-progress:  #3b63be;
  --chart-pending:   #b8761f;
  --chart-neutral:   #a8adb8;
  --chart-primary:   #3057b1;
  --chart-accent:    #7a4fc0;
  --chart-ink:       #525865;
  --chart-grid:      #e2e4ea;
  --chart-surface:   #fefdfb;
  --chart-idle:      #d99a9a;
  --chart-tip-bg:    #181f2e;
  --chart-tip-ink:   #f4f5f8;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --radius: var(--r-lg);

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;

  --sh-1: 0 1px 2px oklch(24% 0.03 var(--h-brand) / .06);
  --sh-2: 0 1px 2px oklch(24% 0.03 var(--h-brand) / .05), 0 4px 12px oklch(24% 0.03 var(--h-brand) / .05);
  --sh-3: 0 2px 4px oklch(24% 0.03 var(--h-brand) / .05), 0 12px 28px oklch(24% 0.03 var(--h-brand) / .09);
  --sh-4: 0 24px 64px oklch(24% 0.03 var(--h-brand) / .18);
  --ring: oklch(48% 0.15 var(--h-brand) / .38);

  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in: cubic-bezier(.7, 0, .84, 0);
  --e-both: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 60ms;
  --t-mid: 100ms;
  --t-slow: 180ms;

  --z-sticky: 1040; --z-drawer: 1060; --z-modal: 1070; --z-toast: 2000; --z-tip: 2200;

  --sidebar-w: 254px;
  --topbar-h: 64px;
  --dir: 1;
}

html[dir="rtl"] { --dir: -1; }

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            oklch(20.5% 0.016 var(--h-brand));
  --bg-sunk:       oklch(17.5% 0.015 var(--h-brand));
  --login-grid:    oklch(68% 0.130 var(--h-brand) / .11);
  --login-glow:    oklch(70% 0.110 178 / .12);
  --surface:       oklch(24% 0.018 var(--h-brand));
  --surface-2:     oklch(28% 0.020 var(--h-brand));
  --surface-3:     oklch(32.5% 0.022 var(--h-brand));
  --surface-inset: oklch(27% 0.019 var(--h-brand));

  --ink:    oklch(94% 0.006 var(--h-brand));
  --ink-2:  oklch(78% 0.012 var(--h-brand));
  --ink-3:  oklch(64% 0.014 var(--h-brand));

  --line:        oklch(31% 0.020 var(--h-brand));
  --line-soft:   oklch(27.5% 0.019 var(--h-brand));
  --line-strong: oklch(40% 0.024 var(--h-brand));

  --primary:       oklch(68% 0.130 var(--h-brand));
  --primary-hover: oklch(75% 0.120 var(--h-brand));
  --primary-ink:   oklch(82% 0.090 var(--h-brand));
  --primary-soft:  oklch(31% 0.055 var(--h-brand));
  --primary-soft-line: oklch(40% 0.070 var(--h-brand));
  --on-primary:    oklch(17% 0.030 var(--h-brand));

  --st-completed:      oklch(70% 0.110 178);
  --st-completed-soft: oklch(30% 0.050 178);
  --st-completed-line: oklch(40% 0.065 178);
  --st-progress:       oklch(67% 0.130 var(--h-brand));
  --st-progress-soft:  oklch(30% 0.055 var(--h-brand));
  --st-progress-line:  oklch(40% 0.070 var(--h-brand));
  --st-pending:        oklch(76% 0.130 72);
  --st-pending-soft:   oklch(32% 0.060 72);
  --st-pending-line:   oklch(42% 0.080 72);

  --danger:      oklch(66% 0.160 22);
  --danger-soft: oklch(31% 0.070 22);
  --danger-line: oklch(41% 0.090 22);
  --info:        oklch(70% 0.110 230);
  --info-soft:   oklch(30% 0.055 230);

  --accent-1: oklch(70% 0.120 300);
  --accent-2: oklch(72% 0.110 150);

  --nav-bg:      oklch(18.5% 0.018 var(--h-brand));
  --nav-bg-deep: oklch(16% 0.016 var(--h-brand));
  --nav-ink:     oklch(80% 0.014 var(--h-brand));
  --nav-ink-dim: oklch(62% 0.016 var(--h-brand));
  --nav-hover:   oklch(25% 0.022 var(--h-brand));
  --nav-active:  oklch(33% 0.060 var(--h-brand));
  --nav-line:    oklch(27% 0.020 var(--h-brand));

  --chart-completed: #3eb59e;
  --chart-progress:  #6c93e5;
  --chart-pending:   #e4a249;
  --chart-neutral:   #5b6070;
  --chart-primary:   #6f96e8;
  --chart-accent:    #b088ea;
  --chart-ink:       #b4b7bf;
  --chart-grid:      #2b303b;
  --chart-surface:   #1b1f28;
  --chart-idle:      #8a5757;
  --chart-tip-bg:    #2f3440;
  --chart-tip-ink:   #e9ebef;

  /* در تم تاریک عمق از روشنایی سطح می‌آید، نه سایه */
  --sh-1: none;
  --sh-2: none;
  --sh-3: 0 8px 24px oklch(10% 0.01 var(--h-brand) / .5);
  --sh-4: 0 24px 64px oklch(8% 0.01 var(--h-brand) / .65);
  --ring: oklch(68% 0.13 var(--h-brand) / .5);
}

/* ------------------------------------------------------------------- پایه */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'Vazirmatn', system-ui, Tahoma, sans-serif;
  background-color: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
/* توجه: حالت تاریک نباید font-weight / letter-spacing / line-height بدنه را عوض کند.
   هر سه از خواص «چیدمانی» هستند و تغییرشان مرورگر را مجبور می‌کرد کل صفحه را از نو
   بچیند و همه گلیف‌های فارسی را دوباره رستر کند — همین تنها دلیل کندی محسوس هنگام
   سوییچ بین روشن/تاریک بود. ضمناً تغییر line-height ارتفاع کل سند را جابجا می‌کرد و
   با ظاهر/محو شدن نوار پیمایش، عرض بوم نمودارها عوض می‌شد (خطوط ضخیم/مات).
   Vazirmatn هم فونت متغیر نیست، پس وزن ۳۵۰ عملاً همان ۴۰۰ رسم می‌شد و هیچ سودی نداشت. */

/* تعویض تم: انتقال‌های رنگ و سایه برای یک لحظه خاموش می‌شوند تا تغییر تم در همان فریم
   انجام شود، نه در طول ده‌ها انیمیشن هم‌زمان روی کل صفحه. */
html.theme-swapping *,
html.theme-swapping *::before,
html.theme-swapping *::after {
  transition: none !important;
}

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

.tnum, .kpi-value, .stat-value, .table-app td, .table-app th, .info-cell .val, .balance-tag, .big { font-variant-numeric: tabular-nums; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px var(--ring) !important; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
::selection { background: var(--primary-soft); color: var(--primary-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------- کلید سه‌حالته تم نمایش */
.theme-switch {
  --sw-opt: 30px;
  --sw-pad: 3px;
  /* عرض کلید صریح است: یک خانه در حالت بسته، سه خانه در حالت باز. خانه‌ها هرگز پهنایشان
     عوض نمی‌شود، پس باز شدن یک حرکت پیوسته و تک‌جهته است (بدون پرش اول به چپ). */
  --sw-w1: calc(var(--sw-opt) + var(--sw-pad) * 2 + 2px);
  --sw-w3: calc(var(--sw-opt) * 3 + var(--sw-pad) * 2 + 2px);
  position: relative;
  display: inline-flex; align-items: center;
  /* چیدمان از لبه‌ی پایانی (سمت چپ در نمای راست‌به‌چپ) شروع می‌شود؛ همان لبه‌ای که با
     inset-inline-end قفل شده است. نتیجه: خانه‌ی فعال ثابت می‌ماند و دو گزینه‌ی دیگر
     فقط و فقط به سمت راست باز می‌شوند. */
  flex-direction: row-reverse;
  width: var(--sw-w1);
  padding: var(--sw-pad);
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  isolation: isolate;
  transition: width var(--t-mid) var(--e-out);
}
.theme-switch-thumb {
  position: absolute; z-index: 0;
  inset-block: 0; inset-inline-start: auto; inset-inline-end: 0;
  width: var(--sw-opt); border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  /* نشانگر دقیقاً روی خانه‌ی فعال می‌نشیند و هیچ‌گاه جابه‌جا نمی‌شود */
  transform: none;
  transition: background-color var(--t-mid) var(--e-out);
}
[data-theme="dark"] .theme-switch-thumb { background: var(--surface-3); border-color: var(--line-strong); }
.theme-opt {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  width: var(--sw-opt); height: 26px;
  display: inline-grid; place-items: center;
  border: 0; padding: 0; margin: 0;
  background: transparent; color: var(--ink-3);
  cursor: pointer; border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.theme-opt:hover { color: var(--ink-2); }
/* گزینه‌ی فعال همیشه نخستین خانه است؛ یعنی روی لبه‌ی قفل‌شده و بی‌حرکت */
.theme-opt[aria-checked="true"] { color: var(--primary); order: -1; }
.theme-opt svg { width: 15px; height: 15px; display: block; }

/* ---- جمع‌شده: فقط نشان حالت فعال. با هاور (یا یک ضربه روی صفحه لمسی) هر سه حالت باز می‌شوند ---- */
.theme-switch .theme-opt:not([aria-checked="true"]) { opacity: 0; pointer-events: none; }
.theme-switch:hover,
.theme-switch.kb-focus,
.theme-switch.is-open { width: var(--sw-w3); }
.theme-switch:hover .theme-opt,
.theme-switch.kb-focus .theme-opt,
.theme-switch.is-open .theme-opt { opacity: 1; pointer-events: auto; }
/* باز که می‌شود مثل یک لایه شناور روی اجزای کنارش می‌نشیند */
.theme-switch.is-open { box-shadow: var(--sh-2), 0 0 0 3px var(--ring); }
#topbarTheme .theme-switch:hover { box-shadow: var(--sh-2); }

.theme-switch.on-dark { background: oklch(100% 0 0 / .07); border-color: oklch(100% 0 0 / .14); }
.theme-switch.on-dark .theme-switch-thumb { background: oklch(100% 0 0 / .16); border-color: oklch(100% 0 0 / .18); box-shadow: none; }
.theme-switch.on-dark .theme-opt { color: oklch(100% 0 0 / .55); }
.theme-switch.on-dark .theme-opt:hover { color: oklch(100% 0 0 / .82); }
.theme-switch.on-dark .theme-opt[aria-checked="true"] { color: oklch(100% 0 0 / 1); }

/* ======================================================== صفحه ورود */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--bg);
}
.login-aside {
  position: relative; overflow: hidden;
  z-index: 1;
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6);
  background: var(--nav-bg-deep);
  color: oklch(92% 0.02 var(--h-brand));
}
.login-aside::before {
  content: '';
  position: absolute; inset: -10%;
  background:
    linear-gradient(oklch(100% 0 0 / .05) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, oklch(100% 0 0 / .05) 1px, transparent 1px) 0 0 / 34px 100%;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 68% 32%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 72% at 68% 32%, #000 18%, transparent 78%);
  pointer-events: none;
}
.login-aside::after {
  content: '';
  position: absolute; inset-inline-start: -14%; inset-block-end: -34%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, oklch(48% 0.15 var(--h-brand) / .5), transparent 68%);
  pointer-events: none;
}
.login-aside > * { position: relative; z-index: 1; }
.login-aside-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.login-mark { display: flex; align-items: center; gap: var(--s-3); }
.login-mark img { height: 44px; width: auto; }
.login-mark-text { display: flex; flex-direction: column; line-height: 1.45; }
.login-mark-text b { font-size: var(--fs-base); font-weight: 700; letter-spacing: .01em; }
.login-mark-text span { font-size: var(--fs-xs); color: oklch(100% 0 0 / .6); }

.login-pitch h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 900; line-height: 1.55;
  margin: 0 0 var(--s-3); max-width: 24ch;
}
.login-pitch p { margin: 0; color: oklch(100% 0 0 / .68); font-size: var(--fs-md); max-width: 50ch; line-height: 1.9; text-wrap: pretty; }
.login-credit {
  margin: 2px 0 0; direction: ltr;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: oklch(100% 0 0 / .42);
}
.login-credit::before { content: ''; width: 20px; height: 1px; background: oklch(100% 0 0 / .24); }
.login-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: calc(var(--s-5) + var(--s-3)); }
/* برچسب هر آمار (پوشش کشوری / چرخه نصب / خروجی اکسل) دقیقاً وسط عنوان خودش می‌نشیند */
.login-fact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.login-fact b { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.login-fact span { font-size: var(--fs-xs); color: oklch(100% 0 0 / .55); letter-spacing: .04em; }
.login-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  font-size: var(--fs-xs); color: oklch(100% 0 0 / .42);
}

.login-main {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  padding: var(--s-6) var(--s-5); background: var(--bg);
}
.login-main::before {
  content: ''; position: absolute; inset: -8%; z-index: -2;
  background:
    linear-gradient(var(--login-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--login-grid) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 44% 48%, var(--surface) 5%, transparent 88%);
  mask-image: radial-gradient(ellipse 88% 82% at 44% 48%, var(--surface) 5%, transparent 88%);
  opacity: .9; transform: rotate(-3deg) scale(1.08);
}
.login-main::after {
  content: ''; position: absolute; z-index: -1;
  width: 54vw; height: 54vw; max-width: 720px; max-height: 720px;
  inset-inline-end: -25%; inset-block-start: -22%; border-radius: 50%;
  background: radial-gradient(circle, var(--login-glow), transparent 68%);
  pointer-events: none;
}
.login-main > * { position: relative; z-index: 1; }

/* ---- صحنه سه‌بعدی: کارت ورود روی یک سطح دارای عمق نشسته است ---- */
.login-stage {
  width: 100%;
  /* لنگر جای‌گیری برای نشان سه‌بعدی پس‌زمینه: با positioned بودن گرید، خانه‌ی «کارت»
     خودش کادر مرجع فرزند absolute می‌شود، پس نشان همیشه دقیقاً روی مرکز کارت می‌افتد
     (حتی وقتی سایدبار هیرو باز می‌شود و کارت جابه‌جا می‌شود) */
  position: relative;
  display: grid;
  grid-template-areas: 'card';
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 44%;
}
.login-stage > *, .login-stage::before { grid-area: card; }
/* هاله رنگی زیر کارت: فاصله کارت از پس‌زمینه را نشان می‌دهد */
.login-stage::before {
  content: '';
  width: min(100%, 452px); justify-self: center; align-self: stretch;
  margin-block: -10px;
  border-radius: 30px;
  background: linear-gradient(155deg,
    oklch(48% 0.150 var(--h-brand) / .42),
    oklch(58% 0.120 178 / .28) 55%,
    transparent 88%);
  filter: blur(28px);
  transform: translateY(16px);
  opacity: .8;
  pointer-events: none;
}
[data-theme="dark"] .login-stage::before { opacity: 1; }

/* ---- نشان سه‌بعدی سامانه، وسط پس‌زمینه‌ی فرم ورود (فقط نمای دسکتاپ) ----
   مثل یک واترمارک پشت کارت می‌نشیند و دو بالش از چپ و راست کارت بیرون می‌زند.
   چرا absolute و نه یک خانه‌ی گرید؟ چون این‌طور یک پیکسل هم به چیدمان دست نمی‌زند:
   ارتفاع صحنه همان ارتفاع کارت می‌ماند و هیچ چیزی جابه‌جا نمی‌شود.
   در نمای موبایل نمایش داده نمی‌شود؛ آنجا کارت تقریباً تمام عرض صفحه است و
   پس‌زمینه‌ای برای دیده شدن نمی‌ماند (و تصویر پهن می‌توانست نوار پیمایش افقی بسازد). */
.login-emblem {
  display: none;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
@media (min-width: 901px) {
  .login-emblem {
    /* لایه دقیقاً هم‌اندازه‌ی خانه‌ی «کارت» می‌شود و تصویر با place-items وسطِ آن می‌نشیند،
       پس مرکز واترمارک همیشه روی مرکز فرم ورود می‌افتد — چه سایدبار هیرو باز باشد چه
       بسته، و چه ارتفاع کارت با پیام خطا بلندتر شود.
       place-self: stretch جلوی وسط‌چینی ارثی خودِ صحنه را می‌گیرد تا این لایه دقیقاً
       کل خانه‌ی کارت را بپوشاند. */
    position: absolute; inset: 0; z-index: 0;
    place-self: stretch; width: 100%; height: 100%;
    display: grid; place-items: center;
    /* بالاتر از مرکز کارت می‌نشیند. جابه‌جایی روی همین لایه است و نه روی تصویر، پس با
       انیمیشن شنا کردنِ تصویر تداخل نمی‌کند و چون فقط transform است هیچ بازچینشی رخ
       نمی‌دهد؛ لایه همچنان دقیقاً هم‌اندازه‌ی خانه‌ی کارت می‌ماند.
       این جابه‌جایی و سقف ارتفاع تصویر (پایین‌تر) دو سرِ یک معامله‌اند: هرچه نشان بلندتر
       شود، باید کمتر بالا برود تا نوکش از لبه‌ی بالای نما بیرون نزند. این معامله عمداً به سود
       «بزرگ‌تر و بالاتر» بسته شده: عدد ۴.۵vh → ۱۱.۵vh → ۱۸.۵vh → ۲۲vh → ۳۲.۵vh
       (هر پله ۳.۵vh؛ سه پله‌ی آخر با هم) و در عوض سرِ نشان از لبه‌ی بالای نما بیرون
       می‌زند و بریده می‌شود.
       کف و سقف clamp هم به همان نسبت (۳۲.۵ ÷ ۲۲) بزرگ شدند، وگرنه روی نماهای کوتاه یا
       بلند جابه‌جایی به همان عدد قبلی گیر می‌کرد و «سه پله» دیده نمی‌شد. */
    transform: translateY(clamp(-408px, -32.5vh, -177px));
  }
  .login-emblem img {
    /* سه پله بزرگ‌تر از پیش (سقف ۱۵۶۰ ← ۲۰۴۰ پیکسل، کف ۷۶۰ ← ۱۰۰۰، سقف درصدی
       ۱۳۲٪ ← ۱۷۴٪): دو بالِ نشان بیشتر از کنارهای کارت بیرون می‌زند. درصدِ بیش از ۱۰۰
       خطر ندارد چون خودِ `.login-main` مقدار overflow: hidden دارد، پس نه نوار پیمایش
       افقی ساخته می‌شود و نه لبه‌ی تیزِ بریدگی روی بال‌ها دیده می‌شود. */
    width: clamp(1000px, 174%, 2040px);
    height: auto;
    /* روی نماهای معمول، همین سقف ارتفاع است که اندازه‌ی واقعی نشان را تعیین می‌کند (نه
       عرض)، چون نسبت تصویر ۲۵۴×۲۰۸ است. contain هم نمی‌گذارد نسبت بشکند.
       حساب جا شدن با جابه‌جایی ۳۲.۵vh: نیمه‌ی ارتفاع ۵۶vh + ۳۲.۵vh به بالا از مرکز نما →
       حدود ۳۸.۵vh از سرِ نشان بیرون از نما می‌ماند و بریده می‌شود (بهای خواستِ «بزرگ‌تر و
       بالاتر» همین است)، و لبه‌ی پایینش با ~۲۶.۵vh فاصله داخل نما می‌ماند، پس از پایین
       چیزی بریده نمی‌شود و هنوز جای بالا رفتن هست.
       اگر بریدگی بالا را نخواستید: با همین جابه‌جایی، سقف ارتفاع باید حدود ۳۵vh باشد تا
       هیچ چیز بریده نشود؛ یا سقف ۱۱۲vh را نگه دارید و جابه‌جایی را کم کنید. */
    max-height: 112vh; object-fit: contain;
    opacity: .17;
    animation: emblemFloat 11s var(--e-both) infinite alternate;
  }
  [data-theme="dark"] .login-emblem img { opacity: .27; }
}

/* ---- همان نشان در نمای موبایل: زیرِ فرم ورود ----
   در موبایل کارت تقریباً تمام عرض صفحه است و پس‌زمینه‌ای برای واترمارکِ پشتی نمی‌ماند،
   پس نشان از پشت کارت به یک ردیف تازه‌ی گرید زیرِ آن می‌رود (خانه‌ی mark). ناحیه‌ی فرم
   در موبایل خودش اسکرول دارد، پس این ردیف چیزی را نمی‌بُرد. */
@media (max-width: 900px) {
  /* نشان در ردیف دومِ صحنه می‌نشیند و این ردیف «همه‌ی فضای خالی زیر فرم» را می‌گیرد:
     صحنه با align-self: stretch تا ته ناحیه‌ی فرم کشیده می‌شود و ردیف مارک 1fr است،
     پس نشان با place-items وسطِ همان فضای خالی می‌افتد — نه چسبیده به فرم و نه چسبیده
     به لبه‌ی پایین. کف ردیف auto است (رفتار خودِ 1fr)، پس اگر ارتفاع نما کم باشد ردیف
     کوچک‌تر از خود نشان نمی‌شود و ناحیه‌ی فرم مثل قبل اسکرول می‌خورد. */
  .login-stage {
    grid-template-areas: 'card' 'mark';
    grid-template-rows: auto 1fr;
    /* صحنه باید تا ته ناحیه‌ی فرم کشیده شود، وگرنه ردیف «mark» چیزی برای گرفتن ندارد و
       نشان می‌چسبد زیر فرم. align-self تنها به مهربانی گرید (توزیع فضای آزاد بین
       ردیف‌های auto) تکیه می‌کرد؛ min-height این را قطعی می‌کند: صحنه دست‌کم هم‌ارتفاع
       ناحیه‌ی فرم است، پس هر چه از ارتفاع زیر کارت می‌ماند سهم ردیف mark می‌شود.
       اگر فرم بلندتر از نما شد، صحنه با محتوا بلند می‌شود و ناحیه‌ی فرم مثل قبل
       اسکرول می‌خورد. */
    align-self: stretch;
    min-height: 100%;
  }
  /* دو کلاسه تا از قاعده‌ی `.login-stage > *` که همه را در خانه‌ی کارت می‌نشاند جلو بزند */
  .login-stage > .login-emblem {
    grid-area: mark;
    position: static; inset: auto;
    /* کل ردیف را می‌گیرد و تصویر با place-items درست وسطِ آن می‌افتد؛ چون ردیف همان
       «فضای خالی بین فرم و لبه‌ی پایین» است، فاصله‌ی نشان از فرم و از پایین صفحه
       برابر می‌شود. align-self: stretch لازم است چون خودِ صحنه align-items: center
       دارد و بی آن، این لایه به اندازه‌ی محتوایش جمع می‌شد. */
    align-self: stretch; justify-self: stretch;
    display: grid; place-items: center;
    width: 100%; height: 100%;
    /* حداقل نفس‌کشیدن از فرم و از لبه‌ی پایین، وقتی فضای خالی خیلی کم است */
    padding-block: clamp(10px, 2.4vh, 22px);
    text-align: center;
  }
  .login-stage > .login-emblem img {
    display: inline-block;
    width: min(68%, 256px); height: auto;
    max-height: min(26vh, 208px); object-fit: contain;
    opacity: .16;
  }
  [data-theme="dark"] .login-stage > .login-emblem img { opacity: .26; }
}
/* گوشی‌های کم‌ارتفاع: جای فرم مقدم است و نشان کنار می‌رود */
@media (max-width: 900px) and (max-height: 600px) {
  .login-stage > .login-emblem { display: none; }
}
/* شنا کردن بسیار آرام: فقط transform است، پس بازچینشی رخ نمی‌دهد */
@keyframes emblemFloat {
  from { transform: translateY(-7px) scale(.994); }
  to   { transform: translateY(7px) scale(1.006); }
}
@media (prefers-reduced-motion: reduce) {
  .login-emblem img { animation: none; }
}

.login-card {
  position: relative;
  width: 100%; max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5) var(--s-5);
  transform-style: preserve-3d;
  transform:
    translateZ(var(--card-z, 0px))
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
  will-change: transform;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .7),
    0 0 0 4px var(--primary-soft),
    0 8px 16px oklch(24% 0.03 var(--h-brand) / .07),
    0 22px 44px oklch(24% 0.03 var(--h-brand) / .13);
}
/* بازتاب نوری که با حرکت اشاره‌گر روی سطح کارت می‌لغزد */
.login-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(190px circle at var(--glare-x, 50%) var(--glare-y, 0%),
    oklch(100% 0 0 / .11), transparent 72%);
  opacity: var(--glare-o, 0);
  transition: opacity .35s var(--e-out);
  transform: translateZ(1px);
  pointer-events: none;
}
.login-stage:hover .login-card { --card-z: 14px; }
.login-stage::before { transition: transform .5s var(--e-out), opacity .5s var(--e-out); }
.login-stage:hover::before { transform: translateY(24px) scale(1.02); opacity: .95; }
/* اجزای کارت در ترازهای مختلف عمق قرار می‌گیرند تا برجستگی واقعی دیده شود */
.login-card > *, .login-card form { transform-style: preserve-3d; }
/* لایه‌ی سه‌بعدی سرِ کارت، ضربه‌خوردن اشاره‌گر را در فرزندان تودرتو می‌شکست و
   دکمه‌های کلید تم کلیک‌پذیر نبودند؛ با دادن یک لایه‌ی سه‌بعدی مستقل حل می‌شود */
.login-card #loginTheme { transform: translateZ(.02px); transform-style: preserve-3d; }
.login-card #loginTheme .theme-switch { transform: translateZ(.02px); }
/* سرِ کارت ورود جای تنگی است: کلید در جای خودش می‌ماند و باز شدنش روی متن می‌آید تا
   عنوان و زیرعنوان با هر هاور جابه‌جا نشوند */
.login-card-head #loginTheme { position: relative; flex: 0 0 auto; width: 38px; height: 34px; }
.login-card-head #loginTheme .theme-switch { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 3; }
.login-card-head { transform: translateZ(28px); }
.login-field { transform: translateZ(18px); }
.login-submit { transform: translateZ(32px); }
.login-remember { transform: translateZ(24px); }
.login-hint { transform: translateZ(10px); }
.login-card-top { transform: translateZ(30px); transform-style: preserve-3d; }
.login-card-top .theme-switch { transform: translateZ(.02px); }
[data-theme="dark"] .login-card {
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .07),
    0 0 0 4px var(--primary-soft),
    0 12px 24px oklch(0% 0 0 / .42),
    0 30px 56px oklch(0% 0 0 / .34);
}
/* اگر کاربر کاهش حرکت را خواسته باشد، کارت ثابت و صاف می‌ماند */
@media (prefers-reduced-motion: reduce) {
  .login-card { transition: none; }
  .login-stage:hover .login-card { --card-z: 0px; }
  .login-stage::before, .login-stage:hover::before { transition: none; transform: translateY(16px); }
  .login-card::after { display: none; }
}
.login-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
/* نوار بالای کارت فقط در نمای موبایل معنا دارد */
.login-card-top { display: none; }
.login-title { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); line-height: 1.6; margin: 0 0 2px; }
.login-sub { color: var(--ink-3); margin: 0; font-size: var(--fs-sm); }

.login-field { margin-bottom: var(--s-3); }
.login-field > label { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 6px; }
.login-card .form-control { height: 46px; background: var(--surface-2); border-color: var(--line); color: var(--ink); font-size: var(--fs-md); }
.login-card .form-control::placeholder { color: var(--ink-3); opacity: .75; }
.btn-pass-toggle {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-3); width: 46px;
  display: inline-grid; place-items: center;
  transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.btn-pass-toggle:hover, .btn-pass-toggle:focus { color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.login-error {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-md); padding: 10px 12px;
  font-size: var(--fs-sm); margin-bottom: var(--s-3);
  animation: fadeSlide var(--t-slow) var(--e-out);
}
.login-error svg { flex: 0 0 auto; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.login-submit { width: 100%; height: 46px; font-size: var(--fs-md); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.login-submit[data-busy="true"] { pointer-events: none; opacity: .78; }
.login-submit .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid oklch(100% 0 0 / .35); border-top-color: currentColor; animation: appLoaderSpin .7s linear infinite; }
.login-hint { margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

/* ---- «مرا به خاطر بسپار» ---- */
.login-remember {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin: calc(var(--s-2) * -1) 0 var(--s-4);
}
.login-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.login-check input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0;
  border: 1.5px solid var(--line-strong, var(--line)); border-radius: 5px;
  background: var(--surface);
  transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.login-check input:checked {
  background: var(--primary) center/13px 13px no-repeat;
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.login-check input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.login-check:hover input:not(:checked) { border-color: var(--primary); }
.login-remember-note { font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 480px) { .login-remember-note { display: none; } }

/* ---- نسخه‌ی سامانه، پای منوی کنار ---- */
.sidebar-version { display: block; margin-top: 2px; opacity: .8; font-variant-numeric: tabular-nums; }


/* ---- دکمه ورود در بخش هیرو (فقط نمای موبایل) ---- */
.login-theme-hero { display: none; }
.login-hero-cta {
  display: none; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; max-width: 420px; margin-top: var(--s-6); min-height: 52px; padding: 0 var(--s-5);
  border: 1px solid oklch(100% 0 0 / .18); border-radius: var(--r-lg);
  background: oklch(100% 0 0 / .97);
  color: oklch(22% 0.050 var(--h-brand));
  font-family: inherit; font-size: var(--fs-base); font-weight: 800;
  box-shadow: 0 10px 26px oklch(0% 0 0 / .28), inset 0 -2px 0 oklch(0% 0 0 / .10);
  transition: transform var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.login-hero-cta:active { transform: translateY(1px) scale(.995); box-shadow: 0 6px 16px oklch(0% 0 0 / .26); }
.login-hero-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(100% 0 0 / .45), 0 10px 26px oklch(0% 0 0 / .28); }
.login-hero-cta svg { flex: 0 0 auto; }

/* ---- برگشت از فرم به هیرو (فقط نمای موبایل) ---- */
.login-back {
  display: none; align-items: center; gap: 6px;
  margin: 0 0 var(--s-4); padding: 6px 12px 6px 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3); font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.login-back:hover, .login-back:focus { color: var(--primary); background: var(--primary-soft); }

@media (max-width: 1100px) {
  .login-page { grid-template-columns: 1fr .9fr; }
  .login-aside { padding: var(--s-6) var(--s-5); }
}
/* در نمای موبایل تنها بخش هیرو دیده می‌شود؛ فرم ورود با دکمه هیرو باز می‌شود */
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  /* ---------------------------------------------------------------------------
     هیرو باید در «هر» ارتفاع صفحه‌ی موبایل کامل دیده شود: عبارت پایین صفحه و امضا
     دیگر زیر لبه نمی‌افتند و صفحه اسکرول نمی‌خورد. برای همین:
       • ارتفاع با svh گرفته می‌شود (کوچک‌ترین حالت نما، وقتی نوار نشانی مرورگر باز است)
       • همه‌ی اندازه‌ها با clamp روی vh/vw شنا می‌کنند، پس محتوا با صفحه کوچک می‌شود
       • فقط اگر باز هم جا نشد (مثل موبایل افقی بسیار کم‌ارتفاع) اسکرول امکان‌پذیر است
     ------------------------------------------------------------------------- */
  .login-aside {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100svh;
    justify-content: space-between; gap: clamp(6px, 1.2vh, 14px);
    padding: clamp(10px, 1.8vh, 18px) var(--s-4) calc(clamp(8px, 1.4vh, 14px) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .login-aside-top { align-items: center; flex: 0 0 auto; gap: var(--s-3); }
  .login-mark img { height: clamp(30px, 5.4vh, 44px); }
  .login-mark-text b { font-size: clamp(0.8125rem, 2vh, 0.9375rem); }
  .login-pitch { margin-block: auto; padding-block: clamp(6px, 1.6vh, 18px); }
  .login-pitch h2 {
    font-size: clamp(1.15rem, min(5.6vw, 3.1vh), 1.75rem);
    margin-bottom: clamp(6px, 1.4vh, 16px);
  }
  .login-pitch p {
    font-size: clamp(0.75rem, min(3.5vw, 1.85vh), 0.875rem);
    line-height: 1.8;
  }
  .login-facts { gap: clamp(4px, 1vh, 12px) var(--s-5); margin-top: clamp(14px, 3vh, 36px); }
  .login-fact b { font-size: clamp(0.9375rem, 2.3vh, 1.1875rem); }
  /* دکمه ورود در موبایل: کمی باریک‌تر و با فاصله‌ی بیشتر، پایین‌تر از متن معرفی */
  .login-hero-cta {
    width: min(78%, 320px); max-width: 320px; margin-inline: auto;
    margin-top: clamp(20px, 5vh, 48px);
    min-height: clamp(44px, 6.2vh, 52px);
  }
  .login-foot { flex: 0 0 auto; }
  /* کلید تم روی هیرو: جای ثابت با باز شدن روی محتوا (بدون تکان‌دادن چیدمان)
     و باز شدن به سمت راست تا از لبه‌ی صفحه بیرون نزند */
  .login-theme-hero {
    display: block; position: relative; flex: 0 0 auto;
    width: 44px; height: 38px; z-index: 3;
  }
  .login-theme-hero .theme-switch {
    position: absolute; inset-block-start: 0;
    inset-inline-start: auto; inset-inline-end: 0;
  }
  .login-hero-cta { display: flex; }
  .login-foot {
    align-items: center; text-align: center; width: 100%; gap: 1px;
    font-size: clamp(0.625rem, 1.55vh, 0.6875rem); line-height: 1.7;
  }
  .login-credit { align-self: center; margin: 0; }

  /* فرم ورود به‌صورت یک لایه تمام‌صفحه روی هیرو باز و بسته می‌شود */
  .login-main {
    position: fixed; inset: 0; z-index: 20;
    min-height: 100dvh; overflow-y: auto;
    /* در نمای شبکه‌ای، وسط‌چینی عمودی سرِ کارت را روی صفحه‌های کم‌ارتفاع می‌بُرید */
    align-items: start;
    /* ردیف صحنه تمام ارتفاع ناحیه را می‌گیرد (و نه فقط اندازه‌ی محتوایش)، تا فضای خالی
       زیر فرم داخل خودِ صحنه بماند و نشانِ زیر فرم بتواند وسط آن بنشیند */
    align-content: stretch;
    padding: clamp(16px, 4vh, 32px) var(--s-4) calc(clamp(16px, 4vh, 32px) + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden;
    transform: translateY(16px) scale(.98);
    transition: opacity .26s var(--e-out), transform .32s var(--e-out), visibility .32s;
  }
  .login-page.show-form .login-main { opacity: 1; visibility: visible; transform: none; }
  .login-page.show-form .login-aside { display: none; }

  /* بازگشت در یک سو و کلید تم روبه‌روی آن، در بالای فرم ورود */
  .login-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); margin-bottom: var(--s-4);
  }
  .login-back { display: inline-flex; margin: 0; }
  .login-card-head #loginTheme { display: none; }

  /* ---------------------------------------------------------------------------
     ریشه‌ی باگ «دکمه‌های دارک‌مود در فرم ورود موبایل کار نمی‌کند»: کارت ورود یک صحنه‌ی
     سه‌بعدی است و هر لایه با translateZ جدا می‌شود؛ روی موبایل ضربه‌ی انگشت در این
     لایه‌های تودرتو به دکمه‌های کوچک کلید تم نمی‌رسید. چرخش کارت هم فقط با ماوس معنا
     دارد، پس در نمای موبایل کل صحنه صاف می‌شود: هم ضربه درست می‌نشیند، هم سبک‌تر است.
     ------------------------------------------------------------------------- */
  .login-stage { perspective: none; }
  .login-card { transform: none !important; transform-style: flat; }
  .login-card::after { display: none; }
  .login-card > *,
  .login-card form,
  .login-card-top,
  .login-card-head,
  .login-field,
  .login-submit,
  .login-remember,
  .login-hint,
  .login-card #loginTheme,
  .login-card #loginThemeM,
  .login-card .theme-switch { transform: none; transform-style: flat; }
  .login-card-top { position: relative; z-index: 5; }
  .login-card-top #loginThemeM { position: relative; z-index: 6; }
  /* هدف ضربه‌ی انگشت روی کلید سه‌حالته‌ی تم بزرگ‌تر می‌شود */
  .login-card-top .theme-switch,
  .login-theme-hero .theme-switch { --sw-opt: 36px; }
  .login-card-top .theme-opt,
  .login-theme-hero .theme-opt { height: 32px; }
  .login-card-top .theme-opt svg,
  .login-theme-hero .theme-opt svg { width: 17px; height: 17px; }
}
@media (max-width: 420px) {
  .login-main { padding: var(--s-5) var(--s-3); }
  .login-pitch h2 { font-size: clamp(1.35rem, 6.4vw, 1.75rem); }
  .login-pitch p { font-size: var(--fs-sm); line-height: 1.85; }
  .login-facts { gap: var(--s-3) var(--s-4); }
}

/* ---------------------------------------------------------------------------
   دستگیره‌ی عمودی «درباره ما» روی مرز هیرو و فرم ورود (فقط نمای دسکتاپ)
   رفتار: هیرو مثل یک سایدبار از کنار باز و بسته می‌شود و پیش‌فرض «بسته» است، پس
   نخستین چیزی که کاربر می‌بیند خودِ فرم ورود است.
   چرا هیرو در این حالت absolute می‌شود و با transform می‌لغزد (و نه با انیمیشن width)؟
     • با width متحرک، متن معرفی در هر فریم از نو می‌شکند؛ در عرض‌های نزدیک صفر ارتفاع
       محتوا انفجاری بلند می‌شد و چون هیرو خانه‌ی همان ردیف گرید است، ارتفاع کل صفحه را
       با خودش می‌کشید. با absolute، ارتفاع هیرو همان ارتفاع صفحه است و متن هیچ‌وقت
       نمی‌شکند.
     • فرم زیر هیرو پنهان نمی‌شود: padding سمت آغاز محور افقیِ ناحیه‌ی فرم به همان اندازه
       باز می‌شود، پس کارت ورود در فضای باقی‌مانده وسط می‌ماند.
   نکته‌ها: صفحه dir="rtl" است و هیرو در سمت inline-start (راست) می‌نشیند، پس بستن آن
   translateX(100%) است. overflow صفحه بسته می‌شود تا هیروی بیرون‌رفته نوار پیمایش افقی
   نسازد، و visibility با تأخیر خاموش می‌شود تا محتوای بسته زیر دست صفحه‌خوان و کلید
   Tab نرود.
   ------------------------------------------------------------------------- */
.login-about-toggle { display: none; }
@media (min-width: 901px) {
  .login-page {
    position: relative; overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    --hero-w: clamp(340px, 46vw, 680px);
    --hero-cur: 0px;               /* جای مرز هیرو: بسته = صفر */
    /* آهنگ باز و بسته شدن سایدبار هیرو؛ همه‌ی اجزای درگیر از همین دو مقدار می‌خوانند تا
       هیرو، ناحیه‌ی فرم، دستگیره و پیکانش مو‌به‌مو هم‌گام حرکت کنند */
    --hero-t: .56s;
    --e-hero: cubic-bezier(.34, .06, .16, 1);   /* آغاز و پایانِ نرم، بدون پرش */
  }
  .login-page.hero-open { --hero-cur: var(--hero-w); }

  .login-aside {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    width: var(--hero-w); z-index: 12;
    /* overflow همان hidden پایه می‌ماند: هاله‌ی گرد ::after از لبه‌ی پایین بیرون می‌زند و
       با overflow-y: auto یک نوار پیمایش همیشگی داخل هیرو می‌ساخت */
    /* باز شدن: پنجره از همان فریم اول دیده می‌شود و فقط می‌لغزد؛ پس پیش از این که
       حرکت تمام شود کامل و بی‌محوشدگی خوانده می‌شود */
    transition:
      transform var(--hero-t) var(--e-hero),
      opacity calc(var(--hero-t) * .42) linear,
      visibility 0s;
  }
  .login-page:not(.hero-open) .login-aside {
    transform: translateX(100%);   /* راست‌چین: بیرون از لبه‌ی inline-start */
    opacity: 0; visibility: hidden; pointer-events: none;
    /* بسته شدن: تا نیمه‌ی راه کامل دیده می‌شود، بعد محو می‌شود و visibility دقیقاً در
       پایان حرکت خاموش می‌شود — پیش‌تر محتوا وسط انیمیشن ناپدید می‌شد */
    transition:
      transform var(--hero-t) var(--e-hero),
      opacity calc(var(--hero-t) * .5) linear calc(var(--hero-t) * .5),
      visibility 0s linear var(--hero-t);
  }
  /* محتوای هیرو یک گام پس از خودِ پنجره می‌نشیند؛ همین پله باز شدن را «نرم» نشان می‌دهد.
     جهت جابه‌جایی با var(--dir) حساب می‌شود، پس در چیدمان راست‌چین و چپ‌چین درست است. */
  .login-aside-top,
  .login-pitch,
  .login-foot {
    transition:
      opacity calc(var(--hero-t) * .7) var(--e-hero) var(--lat-step, 0s),
      transform calc(var(--hero-t) * .7) var(--e-hero) var(--lat-step, 0s);
  }
  .login-page.hero-open .login-aside-top { --lat-step: .07s; }
  .login-page.hero-open .login-pitch     { --lat-step: .13s; }
  .login-page.hero-open .login-foot      { --lat-step: .19s; }
  .login-page:not(.hero-open) .login-aside-top,
  .login-page:not(.hero-open) .login-pitch,
  .login-page:not(.hero-open) .login-foot {
    opacity: 0; transform: translateX(calc(var(--dir) * -14px));
  }
  .login-main {
    padding-inline-start: calc(var(--s-5) + var(--hero-cur));
    transition: padding-inline-start var(--hero-t) var(--e-hero);
  }

  /* دستگیره با transform همراه مرز هیرو می‌لغزد و نه با انیمیشن inset: حرکت روی لایه‌ی
     مرکب انجام می‌شود، پس نرم‌تر است و با خود هیرو یک‌جا جابه‌جا می‌شود. */
  .login-about-toggle {
    position: absolute; z-index: 13;
    inset-block-start: var(--s-6); inset-inline-start: 0;
    transform: translateX(calc(var(--dir) * var(--hero-cur)));
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-3);
    width: 40px; min-height: 148px; padding: var(--s-4) 0 var(--s-3);
    background-color: var(--nav-bg-deep);
    background-image:
      linear-gradient(180deg, oklch(100% 0 0 / .09), oklch(100% 0 0 / 0) 52%),
      radial-gradient(130% 62% at 50% 0%, oklch(58% 0.150 var(--h-brand) / .26), transparent 72%);
    color: oklch(88% 0.020 var(--h-brand));
    border: 1px solid var(--nav-line); border-inline-start: 0;
    border-start-start-radius: 0; border-end-start-radius: 0;
    border-start-end-radius: var(--r-xl); border-end-end-radius: var(--r-xl);
    box-shadow:
      0 12px 30px oklch(0% 0 0 / .26),
      0 2px 6px oklch(0% 0 0 / .16),
      inset 0 1px 0 oklch(100% 0 0 / .10);
    font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform var(--hero-t) var(--e-hero),
      background-color var(--t-slow) var(--e-out),
      border-color var(--t-slow) var(--e-out),
      box-shadow var(--t-slow) var(--e-out),
      color var(--t-slow) var(--e-out);
  }
  .login-about-toggle:hover {
    background-color: var(--nav-hover);
    border-color: oklch(44% 0.070 var(--h-brand));
    color: oklch(100% 0 0 / .97);
    box-shadow:
      0 16px 36px oklch(0% 0 0 / .32),
      0 2px 6px oklch(0% 0 0 / .18),
      inset 0 1px 0 oklch(100% 0 0 / .14);
  }
  .login-about-toggle:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px var(--ring),
      0 12px 30px oklch(0% 0 0 / .26),
      inset 0 1px 0 oklch(100% 0 0 / .10);
  }
  /* نوشته‌ی عمودی: خط از بالا به پایین می‌چیند و پیوستگی حروف فارسی دست‌نخورده می‌ماند
     (letter-spacing بیش از این نمی‌رود، وگرنه حروف چسبان فارسی از هم باز می‌شوند) */
  .login-about-toggle .lat-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: var(--fs-sm); font-weight: 800; letter-spacing: .02em; line-height: 1;
    white-space: nowrap;
  }
  /* پیکان در یک نشان گرد می‌نشیند، بسته به سمت باز شدن هیرو اشاره می‌کند و با باز شدن
     هم‌زمان با خود هیرو برمی‌گردد */
  .login-about-toggle .lat-chev {
    flex: 0 0 auto;
    width: 24px; height: 24px; padding: 4px;
    border-radius: var(--r-pill);
    background-color: oklch(100% 0 0 / .10);
    box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .13);
    transform: rotate(180deg);
    transition: transform var(--hero-t) var(--e-hero), background-color var(--t-slow) var(--e-out);
  }
  .login-about-toggle:hover .lat-chev { background-color: oklch(100% 0 0 / .18); }
  .login-page.hero-open .login-about-toggle .lat-chev { transform: rotate(0deg); }
  /* خط کوتاه زیر نوشته: همان نشانه‌ی آشنای «این لبه دستگیره است»، بدون افزودن نشانه‌گذاری */
  .login-about-toggle::after {
    content: ''; flex: 0 0 auto;
    width: 3px; height: 20px; border-radius: var(--r-pill);
    background-image: linear-gradient(180deg, oklch(100% 0 0 / 0), oklch(100% 0 0 / .30), oklch(100% 0 0 / 0));
    opacity: .75;
    transition: opacity var(--t-slow) var(--e-out);
  }
  .login-about-toggle:hover::after { opacity: 1; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .login-aside, .login-main, .login-about-toggle,
  .login-about-toggle .lat-chev, .login-about-toggle::after,
  .login-aside-top, .login-pitch, .login-foot { transition: none; }
}

/* ==================================================== قالب اصلی برنامه */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
}
.topbar-toggle {
  background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2);
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: none; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.topbar-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.topbar-brand { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.brand-logo { height: 38px; width: auto; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.brand-text { display: flex; flex-direction: column; line-height: 1.35; white-space: nowrap; }
.brand-title { font-weight: 800; font-size: var(--fs-md); color: var(--ink); letter-spacing: .005em; }
.brand-sub { font-size: var(--fs-xs); color: var(--ink-3); }

.topbar-center { display: flex; align-items: center; gap: var(--s-2); margin-inline: auto; max-width: 52%; min-width: 0; }
.project-label { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; letter-spacing: .04em; }
#projectSelect {
  width: 320px; max-width: 100%;
  background-color: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; padding-block: 7px; box-shadow: none;
  transition: border-color var(--t-fast) var(--e-out);
}
#projectSelect:hover { border-color: var(--primary); }
#projectSelect option { color: var(--ink); background: var(--surface); }

.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }
.topbar-sep { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
/* جای کلید تم در هدر ثابت می‌ماند و باز شدنش هدر را تکان نمی‌دهد.
   لبه‌ی چپِ کلید قفل شده است تا هنگام باز شدن «به سمت راست» گسترده شود و هرگز
   روی دکمه‌ی خروجی اکسل — که در چیدمان راست‌به‌چپ سمت چپ آن می‌نشیند — نیفتد.
   این رفتار در هر دو نمای رومیزی و موبایل یکسان است. */
#topbarTheme { position: relative; flex: 0 0 auto; width: 38px; height: 34px; }
#topbarTheme .theme-switch {
  position: absolute; inset-block-start: 0;
  inset-inline-start: auto; inset-inline-end: 0;
  z-index: 6;
}

.btn-excel {
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 7px 12px;
  font-size: var(--fs-sm); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.btn-excel:hover { background: var(--st-completed-soft); color: var(--st-completed); border-color: var(--st-completed-line); }
.btn-excel svg { flex: 0 0 auto; }

/* دکمه «نصب برنامه» در نوار بالا — هم‌خانواده‌ی دکمه اکسل، با رنگ برند */
.btn-install {
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-soft);
  border-radius: var(--r-md); padding: 7px 12px;
  font-size: var(--fs-sm); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.btn-install:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-install svg { flex: 0 0 auto; }

.user-btn {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px 4px 4px 12px;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.user-btn:hover { border-color: var(--line-strong); background: var(--surface-3); }
.user-btn::after { color: var(--ink-3); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-sm);
}

/* ------------------------------------------------------- سایدبار */
.layout { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: var(--sidebar-w);
  background: var(--nav-bg); color: var(--nav-ink);
  padding: var(--s-4) var(--s-3) var(--s-3);
  overflow-y: auto;
  display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--nav-line);
  scrollbar-color: var(--nav-hover) transparent;
}
.sidebar::-webkit-scrollbar-thumb { background: var(--nav-hover); background-clip: content-box; }
.sidebar-nav, .sidebar-date { direction: rtl; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* دامنه‌ی این قاعده‌ها مهم است: nav-item یک کلاس بوت‌استرپ هم هست (آیتم‌های nav-pills /
   nav-tabs داخل صفحه‌ها). پیش‌تر بدون دامنه نوشته شده بود و روی آن‌ها هم می‌نشست؛ نتیجه
   این بود که با رفتن ماوس روی دکمه‌های «کاربران» و «نقش‌ها و دسترسی‌ها» یک کادر تیره‌ی
   تمام‌عرض (پس‌زمینه‌ی منوی کنار) ظاهر می‌شد. حالا فقط منوی کنار هدف گرفته می‌شود. */
.sidebar-nav .nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--nav-ink);
  font-family: inherit; font-size: var(--fs-md); font-weight: 500;
  text-align: start; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.sidebar-nav .nav-item svg { flex-shrink: 0; opacity: .72; transition: opacity var(--t-fast) var(--e-out); }
.sidebar-nav .nav-item:hover { background: var(--nav-hover); color: oklch(98% 0.01 var(--h-brand)); }
.sidebar-nav .nav-item:hover svg { opacity: 1; }
.sidebar-nav .nav-item.active { background: var(--nav-active); color: oklch(99% 0.005 var(--h-brand)); font-weight: 700; padding-inline-end: 26px; }
.sidebar-nav .nav-item.active svg { opacity: 1; }
.sidebar-nav .nav-item.active::before {
  content: ''; position: absolute;
  inset-inline-end: 11px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--st-completed);
}
.sidebar-nav .nav-item .nav-badge {
  margin-inline-start: auto;
  background: oklch(100% 0 0 / .14); color: inherit;
  font-size: var(--fs-xs); font-weight: 700;
  border-radius: var(--r-pill); padding: 1px 7px;
}
.sidebar-credit {
  direction: ltr; text-align: center;
  padding: 2px 12px 4px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em;
  color: var(--nav-ink-dim); opacity: .72; white-space: nowrap;
}
.sidebar-date {
  margin-top: var(--s-3); padding: 10px 12px 6px;
  border-top: 1px solid var(--nav-line);
  color: var(--nav-ink-dim);
  font-size: var(--fs-sm); font-weight: 600;
  text-align: center; white-space: nowrap;
}
.sidebar-backdrop { display: none; }

/* ------------------------------------------------------- محتوا */
.content {
  flex: 1; min-width: 0;
  padding: var(--s-5) var(--s-5) var(--s-7);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h));
  direction: rtl;
}
.content > .page { direction: rtl; max-width: 1560px; }

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-5); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.page-title { font-size: var(--fs-xl); font-weight: 800; margin: 0; letter-spacing: -.005em; line-height: 1.4; }
.page-title small { color: var(--ink-3); font-weight: 500; font-size: var(--fs-sm); display: block; margin-top: 2px; letter-spacing: 0; }

/* ------------------------------------------------- پنل‌ها (کارت‌ها) */
.card-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.panel-title { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: var(--s-2); }
.panel-title svg { color: var(--ink-3); flex: 0 0 auto; }
.panel-meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* بدون کارت تودرتو: نوار ابزار داخل پنل چرم کارت ندارد */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-4); }
.filter-bar.card-app {
  background: var(--surface-inset); border-color: var(--line-soft);
  box-shadow: none; border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3) !important;
}
.card-app .filter-bar.card-app { background: transparent; border: 0; padding: 0 !important; margin-bottom: var(--s-3); }
.filter-bar .form-select, .filter-bar .form-control { width: auto; min-width: 132px; font-size: var(--fs-sm); border-radius: var(--r-sm); padding-block: 6px; }
.filter-label { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }

/* --- جعبه‌ی جستجو: ذره‌بین داخل کادر + نشانِ عبارتِ در حال اعمال ---
   کادر بعد از هر جستجو خالی می‌شود، پس عبارتِ اعمال‌شده باید جای دیگری دیده شود. */
.search-box { position: relative; display: inline-flex; align-items: center; }
.filter-bar .search-box .form-control { padding-inline-end: 32px; }
.search-go {
  position: absolute; inset-inline-end: 3px;
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.search-go:hover { color: var(--primary); background-color: var(--surface-inset); }
.search-go:active { transform: scale(.94); }
.search-tag {
  display: inline-flex; align-items: center; gap: 2px; max-width: 220px;
  padding-block: 3px; padding-inline: 9px 3px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--primary) 13%, transparent);
  color: var(--primary); font-size: var(--fs-xs); line-height: 1.6;
}
.search-tag[hidden] { display: none; }
.search-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-tag-x {
  display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: inherit; cursor: pointer; opacity: .7;
  transition: opacity var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.search-tag-x:hover { opacity: 1; background-color: color-mix(in oklab, var(--primary) 18%, transparent); }

/* --------------------------------------------------- کارت‌های شاخص */
.kpi-card {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4) var(--s-4);
  box-shadow: var(--sh-1); height: 100%; overflow: hidden;
  transition: border-color var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.kpi-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-2px); }
.kpi-icon {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--kpi, var(--primary));
  background: color-mix(in oklab, var(--kpi, var(--primary)) 13%, transparent);
  flex-shrink: 0;
}
.kpi-info { flex: 1; min-width: 0; }
.kpi-label { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 1px; }
.kpi-value { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; margin-top: 3px; }
.kpi-delta.up { color: var(--st-completed); }
.kpi-delta.down { color: var(--danger); }
.kpi-delta.muted { color: var(--ink-3); }
.kpi-delta.new { color: var(--primary); }
.kpi-delta small { font-weight: 400; color: var(--ink-3); margin-inline-start: 2px; }
.kpi-share { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: color-mix(in oklab, var(--kpi, var(--primary)) 20%, transparent); }
.kpi-share i { display: block; height: 100%; background: var(--kpi, var(--primary)); transition: width var(--t-slow) var(--e-out); }

.stat-card {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-1); height: 100%;
}
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.stat-card .stat-icon svg { width: 19px; height: 19px; }
.stat-card .stat-value { font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; }
.stat-card .stat-label { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 1px; }
/* واحد پول کنار عنوان کارت‌های مالی: کم‌رنگ‌تر و کوچک‌تر تا عنوان اصلی را نشکند */
.stat-card .stat-label .stat-unit { font-size: .9em; font-weight: 400; opacity: .75; white-space: nowrap; }

.ic-blue   { background: var(--st-progress-soft);  color: var(--st-progress); }
.ic-amber  { background: var(--st-pending-soft);   color: var(--st-pending); }
.ic-green  { background: var(--st-completed-soft); color: var(--st-completed); }
.ic-red    { background: var(--danger-soft);       color: var(--danger); }
.ic-indigo { background: var(--primary-soft);      color: var(--primary); }
.ic-teal   { background: var(--st-completed-soft); color: var(--st-completed); }
.ic-purple { background: color-mix(in oklab, var(--accent-1) 14%, transparent); color: var(--accent-1); }

/* ---------------------------------------------------- بج‌های وضعیت */
.badge-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.7;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge-pending     { background: var(--st-pending-soft);   color: var(--st-pending);   border-color: var(--st-pending-line); }
.badge-in_progress { background: var(--st-progress-soft);  color: var(--st-progress);  border-color: var(--st-progress-line); }
.badge-completed   { background: var(--st-completed-soft); color: var(--st-completed); border-color: var(--st-completed-line); }
.badge-paid        { background: var(--st-completed-soft); color: var(--st-completed); border-color: var(--st-completed-line); }
.badge-partial     { background: var(--st-pending-soft);   color: var(--st-pending);   border-color: var(--st-pending-line); }
.badge-unpaid      { background: var(--danger-soft);       color: var(--danger);       border-color: var(--danger-line); }
/* فاکتور بی‌مبلغ: نه «پرداخت شده»، نه «پرداخت نشده» — یک وضعیت بی‌طرف و خنثی */
.badge-no_amount   { background: var(--surface-2, rgba(128,128,128,.12)); color: var(--muted); border-color: var(--line); }

/* ---------- نوار پیشرفت آپلود فایل ---------- */
.up-row { margin-bottom: 8px; }
.up-row .up-bar { height: 6px; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: 4px; }
.up-row .progress-bar { transition: width .15s linear; background: var(--st-progress, #3057b1); }
.up-row .progress-bar.bg-success { background: var(--st-completed, #0f8774); }
.up-row .progress-bar.bg-danger  { background: var(--danger, #c0392b); }
.up-row .up-state { white-space: nowrap; }
.badge-step-done   { background: var(--st-completed-soft); color: var(--st-completed); border-color: var(--st-completed-line); }
.badge-step-done::before, .badge-status.no-dot::before { display: none; }
.badge-status svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* ------------------------------------------------------ پیشرفت */
.prog-wrap { min-width: 116px; }
.prog { flex: 1; height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; min-width: 56px; }
.prog-fill { height: 100%; background: var(--primary); border-radius: var(--r-pill); transition: width var(--t-slow) var(--e-out); }
.prog-fill[data-tone="high"] { background: var(--st-completed); }
.prog-fill[data-tone="mid"]  { background: var(--st-progress); }
.prog-fill[data-tone="low"]  { background: var(--st-pending); }
.progress-text { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* نوار توزیع وضعیت — «وضعیت کامل» به‌جای فقط تکمیل‌شده */
.statbar {
  display: flex; width: 100%; min-width: 90px;
  height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.statbar > i { display: block; height: 100%; transition: width var(--t-slow) var(--e-out); }
.statbar > i.c { background: var(--st-completed); }
.statbar > i.p { background: var(--st-progress); }
.statbar > i.w { background: var(--st-pending); }
.statbar-cell { display: flex; flex-direction: column; gap: 5px; min-width: 152px; }
.statbar-counts { display: flex; gap: var(--s-3); font-size: var(--fs-xs); justify-content: center; font-variant-numeric: tabular-nums; }
.statbar-counts span { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.statbar-counts span::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.statbar-counts b { font-weight: 700; }
.statbar-counts .c { color: var(--st-completed); }
.statbar-counts .p { color: var(--st-progress); }
.statbar-counts .w { color: var(--st-pending); }
.statbar-key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); }
.statbar-key span { display: inline-flex; align-items: center; gap: 5px; }
.statbar-key i { width: 9px; height: 9px; border-radius: 2px; }

/* ------------------------------------------------------- جدول‌ها */
.table-app {
  margin: 0;
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line-soft);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--ink);
}
.table-app thead th {
  background: var(--surface-inset); color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
  padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-app tbody td { padding: 11px 12px; vertical-align: middle; border-color: var(--line-soft); font-size: var(--fs-sm); color: var(--ink); }
.table-app tbody tr { cursor: pointer; transition: background-color var(--t-fast) var(--e-out); }
.table-app tbody tr:hover { background: var(--surface-2); }
.table-app tbody tr:last-child td { border-bottom: 0; }
.branch-name-cell { font-weight: 700; color: var(--primary); }
.table-app .no-hover tr, .table-app.no-hover tr { cursor: default; }
.table-app .no-hover tbody tr:hover, .table-app.no-hover tbody tr:hover { background: transparent; }
.table-app tfoot td { background: var(--surface-inset); font-weight: 700; border-top: 1px solid var(--line); color: var(--ink); }
/* ستون برجسته‌شده = وضعیتی که در فیلتر نمودار انتخاب شده است */
.table-app th.col-active, .table-app td.col-active { background: var(--primary-soft); }
.table-app thead th.col-active { color: var(--primary); }
.table-app th, .table-app td { vertical-align: middle; text-align: center !important; }
.table-app td[dir="ltr"] { direction: ltr; text-align: center !important; unicode-bidi: embed; }
/* ---------------------------------------------------------------------------
   سربرگ ثابت جدول‌ها هنگام اسکرول
   ظرف جدول (.table-responsive) خودش اسکرول عمودی می‌گیرد تا ردیف سربرگ بالای همان
   ظرف بچسبد؛ با اسکرول افقی هم سربرگ همراه ستون‌ها حرکت می‌کند. پس‌زمینه‌ی سربرگ
   حتماً تو‌پُر است تا ردیف‌ها از زیرش دیده نشوند.
   ------------------------------------------------------------------------- */
.table-responsive {
  overflow: auto;
  max-height: var(--table-max-h, calc(100dvh - 290px));
  overscroll-behavior: contain;
}
.table-app thead th {
  position: sticky; top: 0; z-index: 6;
  background-color: var(--surface-inset);
  background-clip: padding-box;
  box-shadow: inset 0 -1px 0 var(--line);
}
.table-app tfoot td { position: sticky; bottom: 0; z-index: 5; background-clip: padding-box; }
/* داخل پنجره‌های شناور، ظرف جدول کوتاه‌تر است تا خود پنجره هم جای اسکرول داشته باشد */
.modal .table-responsive { --table-max-h: min(52dvh, 440px); }
/* مینی‌صفحه‌ی جزئیات شعبه یک صفحه‌ی بلند است، نه یک جدول: اگر جدول تجهیزات و جدول
   فاکتورها ظرف اسکرول عمودی جداگانه داشته باشند، اسکرول صفحه با رسیدن به آن‌ها متوقف
   می‌شود (اسکرول تو‌درتو + overscroll-behavior: contain). این‌جا جدول‌ها فقط اسکرول
   افقی می‌گیرند و اسکرول عمودی همیشه به خود مینی‌صفحه می‌رسد. */
#branchModal .table-responsive {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: auto;
  overscroll-behavior-x: contain;
}
#branchModal .table-app thead th { position: static; }
.table-app .cell-progress, .table-app .cell-status { white-space: nowrap; }
.row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.table-app .row-actions { justify-content: center; }

.table-empty { padding: var(--s-7) var(--s-4); text-align: center; }
.table-empty svg { color: var(--ink-3); opacity: .45; }
.table-empty h6 { margin: var(--s-3) 0 4px; font-weight: 700; color: var(--ink-2); }
.table-empty p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }

.empty-state { padding: var(--s-7) var(--s-4); text-align: center; }
.empty-state .es-ico { width: 60px; height: 60px; margin: 0 auto var(--s-4); border-radius: var(--r-lg); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.empty-state h4 { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 var(--s-2); }
.empty-state p { color: var(--ink-3); font-size: var(--fs-md); max-width: 52ch; margin: 0 auto var(--s-4); line-height: 1.85; text-wrap: pretty; }

.btn-icon {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
  transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft-line); }
.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.btn-icon.ok:hover { background: var(--st-completed-soft); color: var(--st-completed); border-color: var(--st-completed-line); }

/* ------------------------------------------- نوار صفحه‌بندی زیر جدول */
.table-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--surface-inset);
}
.table-pager:empty { display: none; }
.pager-info b { color: var(--ink-2); font-weight: 700; }
.pager-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-controls .btn { min-width: 58px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.pager-controls .btn:disabled { opacity: .45; cursor: default; }
.pager-now { font-size: var(--fs-sm); color: var(--ink-3); padding-inline: var(--s-2); white-space: nowrap; }
.pager-size { width: auto; min-width: 104px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
/* هنگام رفتن به صفحه‌ی بعد، جدول کمی محو می‌شود تا معلوم باشد داده در راه است */
#finBody[aria-busy="true"] { opacity: .45; transition: opacity var(--t-fast) var(--e-out); }

@media (max-width: 575.98px) {
  .table-pager { flex-direction: column; align-items: stretch; }
  .pager-controls { justify-content: center; }
  .pager-controls .btn { flex: 1 1 auto; min-width: 0; }
  .pager-size { width: 100%; }
}

/* -------------------------------------------- مودال جزئیات شعبه */
.branch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.branch-head h4 { margin: 0 0 4px; font-weight: 800; font-size: var(--fs-lg); }
.branch-head .code { color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.branch-progress { text-align: center; min-width: 118px; }
.branch-progress .big { font-size: var(--fs-xl); font-weight: 900; color: var(--primary); line-height: 1.2; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-2); }
.info-cell { background: var(--surface-inset); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 9px 12px; }
.info-cell .lbl { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 2px; letter-spacing: .03em; }
.info-cell .val { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }

.section-title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin: var(--s-5) 0 var(--s-3); }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.step-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--s-2); }
.step-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 10px 12px;
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.step-item:hover { border-color: var(--primary-soft-line); }
.step-item input { width: 19px; height: 19px; accent-color: var(--st-completed); cursor: pointer; flex-shrink: 0; }
.step-item .step-name { font-weight: 700; font-size: var(--fs-sm); flex: 1; }
.step-item .step-info { font-size: var(--fs-xs); color: var(--ink-3); display: block; font-weight: 400; }
.step-item.done { background: var(--st-completed-soft); border-color: var(--st-completed-line); }
.step-item.done .step-name { color: var(--st-completed); }
.step-item.disabled { opacity: .5; cursor: not-allowed; }

.equip-total { background: var(--info-soft); border: 1px solid color-mix(in oklab, var(--info) 26%, transparent); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-sm); }
.equip-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.equip-form .form-control, .equip-form .form-select { width: auto; }
.equip-form .eq-name { min-width: 168px; flex: 1; }
.equip-form .eq-qty { width: 88px; }
.eq-inline { width: 84px !important; text-align: center; padding: 4px 6px !important; font-size: var(--fs-sm) !important; }
.eq-serial { min-width: 0 !important; width: 104px !important; }

.qty-stepper { display: inline-flex; align-items: center; gap: 2px; direction: ltr; }
.qty-stepper .step-btn {
  width: 22px; height: 27px; border: 1px solid var(--line); background: var(--surface-3);
  border-radius: var(--r-xs); font-size: 15px; font-weight: 700; color: var(--ink-2);
  cursor: pointer; display: inline-grid; place-items: center; line-height: 1; padding: 0;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.qty-stepper .step-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft-line); }
.qty-stepper .eq-inline { -moz-appearance: textfield; appearance: textfield; }
.qty-stepper .eq-inline::-webkit-inner-spin-button,
.qty-stepper .eq-inline::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------ فرم و دکمه */
.form-label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); letter-spacing: .03em; margin-bottom: 5px; }
.form-control, .form-select {
  border-radius: var(--r-sm); font-size: var(--fs-sm);
  background-color: var(--surface); border-color: var(--line-strong);
  color: var(--ink); padding-block: 7px;
}
.form-control::placeholder { color: var(--ink-3); opacity: .8; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-3); color: var(--ink-2); }
.form-check-input { border-color: var(--line-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.input-group-text { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink-2); }

.btn { border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-sm); padding: 7px 14px; transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out); }
.btn-lg { font-size: var(--fs-md); padding: 10px 18px; border-radius: var(--r-md); }
.btn-sm { border-radius: var(--r-xs); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-secondary { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink-2); }
.btn-secondary:hover { background: var(--line); border-color: var(--line-strong); color: var(--ink); }
.btn-success { background: var(--st-completed); border-color: var(--st-completed); color: var(--on-primary); }
.btn-success:hover { background: color-mix(in oklab, var(--st-completed) 86%, black); border-color: transparent; color: var(--on-primary); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 86%, black); border-color: transparent; color: var(--on-primary); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary-soft-line); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }

/* ------------------------------------------------------- مودال‌ها */
.modal-content { border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-4); }
.modal-header { border-bottom: 1px solid var(--line); padding: var(--s-4) var(--s-5); }
.modal-body { padding: var(--s-5); }
.modal-footer { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-5); }
.modal-title { font-weight: 800; font-size: var(--fs-md); }
.modal-backdrop { background: oklch(20% 0.03 var(--h-brand)); }
.modal-backdrop.show { opacity: .55; }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.confirm-icon { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }

.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-link-color: var(--ink-2);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-header-color: var(--ink-3);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  font-size: var(--fs-sm); padding: 6px;
}
.dropdown-item { border-radius: var(--r-xs); display: flex; align-items: center; gap: var(--s-2); }
.dropdown-item svg { color: var(--ink-3); flex: 0 0 auto; }
.dropdown-item:hover svg { color: var(--primary); }
.dropdown-header { font-size: var(--fs-xs); letter-spacing: .05em; font-weight: 700; }
.dropdown-divider { border-color: var(--line); }
.dropdown-item-text { color: var(--ink-3); }

/* ------------------------------------------------------- نمودارها */
.chart-box { position: relative; height: 288px; }
.chart-box.sm { height: 230px; }
/* نمودارهای دسته‌ای بلند (استان‌ها، نصاب‌ها): برچسب‌های چرخیده زیر محور جا لازم دارند،
   پس ارتفاع کمی بیشتر است. مقدار در هر نقطه‌شکست هم صریح تکرار می‌شود، وگرنه قاعده‌ی
   بعدی .chart-box (با همان وزن انتخابگر ولی جلوتر در فایل) آن را می‌پوشاند و نمودار
   روی موبایل به همان ارتفاع کوتاه جمع می‌شد. */
.chart-tall { height: 436px; }

/* ------------------------------------------------------- مالی */
.balance-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.balance-tag { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }

/* ------------------------------------------------- نقش‌ها و دسترسی */
.role-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); background: var(--surface); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 6px; }
.perm-item {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface-inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 7px 11px; font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--e-out);
}
.perm-item:hover { border-color: var(--primary-soft-line); }
.perm-item input { accent-color: var(--primary); width: 16px; height: 16px; }

/* ------------------------------------------------------ گزارش فعالیت */
.log-item { display: flex; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.log-item:last-child { border-bottom: 0; }
.log-time { color: var(--ink-3); white-space: nowrap; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------- پیوست‌های شعبه */
.bf-row { display: flex; align-items: flex-start; gap: var(--s-2); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; background: var(--surface); }
.bf-row.bf-trashed { opacity: .5; }
.bf-desc { margin-top: 2px; color: var(--ink-3); }
/* شمارِ پیوست در جدول شعب: یک دکمه‌ی کوچک که فهرست فایل‌های شعبه را باز می‌کند */
.files-chip { padding: 1px 7px; font-size: var(--fs-sm); line-height: 1.7; white-space: nowrap; }
.files-chip svg { vertical-align: -2px; }
/* نام فایل = میان‌بر «مشاهده» (همان کاری که دکمه‌ی چشم می‌کند) */
.file-name-link { cursor: pointer; }
.file-name-link:hover { color: var(--primary); text-decoration: underline; }

/* --------------------------------------------------------- خلاصه */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--s-2); }
.summary-item {
  display: flex; gap: var(--s-3); align-items: center;
  background: var(--surface-inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: var(--s-3);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.summary-item > div { flex: 1; min-width: 0; }
.summary-item b { color: var(--ink); }
.summary-item small { display: block; color: var(--ink-3); margin-top: 2px; }
.summary-item .s-ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  color: var(--tone-brand, var(--primary)); background: var(--tint-brand, var(--primary-soft));
  border: 1px solid var(--primary-soft-line); border-radius: var(--r-md);
  display: inline-grid; place-items: center;
}
.summary-item .s-ico svg { width: 22px; height: 22px; stroke-width: 2; }
.summary-item.summary-primary { background: var(--tint-teal, var(--st-completed-soft)); border-color: var(--st-completed-line); }
.summary-item.summary-primary .s-ico { color: var(--st-completed); background: var(--st-completed-soft); border-color: var(--st-completed-line); }
.summary-item.summary-best .s-ico { color: var(--tone-violet, var(--accent-1)); background: var(--tint-violet, var(--primary-soft)); }
.summary-progress { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.summary-progress .prog { height: 8px; min-width: 80px; background: var(--surface-3); }
.summary-progress .prog-fill { background: var(--st-completed); }
.summary-progress strong { color: var(--st-completed); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-item.warn { background: var(--st-pending-soft); border-color: var(--st-pending-line); color: var(--st-pending); }
.summary-item.warn b, .summary-item.warn small, .summary-item.warn .s-ico { color: inherit; }
.summary-item.warn .s-ico { background: var(--st-pending-soft); border-color: var(--st-pending-line); }
.summary-item.ok { background: var(--st-completed-soft); border-color: var(--st-completed-line); color: var(--st-completed); }
.summary-item.ok b, .summary-item.ok small, .summary-item.ok .s-ico { color: inherit; }
.summary-item.ok .s-ico { background: var(--st-completed-soft); border-color: var(--st-completed-line); }

/* =========================================================== نقشه */
.map-card { display: flex; flex-direction: column; }
.map-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-2); }
.map-head #mapHeadSlot { flex: 1 1 240px; min-width: 0; }
.iran-map { position: relative; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.iran-map svg { width: 100%; height: auto; }
.map-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.map-crumb { font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.map-crumb a { color: var(--primary); text-decoration: none; }
.map-crumb a:hover { text-decoration: underline; }
.map-crumb .sep { color: var(--ink-3); }
.map-crumb .muted, .map-legend .muted, .map-extra .muted { color: var(--ink-3); font-size: var(--fs-xs); }

.map-tools { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.map-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600;
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.map-toggle:hover { background: var(--surface-3); color: var(--ink); }
.map-toggle[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft-line); }
.map-toggle svg { width: 13px; height: 13px; flex: 0 0 auto; }

.map-back {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; padding: 5px 9px;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.map-back:hover { background: var(--primary-soft); border-color: var(--primary-soft-line); color: var(--primary); }
.map-back svg { width: 13px; height: 13px; }

.map-stage { position: relative; flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; }
.map-stage svg { width: 100%; height: clamp(400px, 40vw, 600px); max-height: none; }

.map-legend {
  position: absolute; inset-inline-end: 2px; bottom: 2px; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-xs); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 10px; max-width: 46%;
  box-shadow: var(--sh-1);
}
.map-legend .lg-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); letter-spacing: .05em; }
.map-legend .lg { display: inline-flex; align-items: center; gap: 6px; line-height: 1.6; }
.map-legend .lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.map-extra { font-size: var(--fs-xs); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.map-chip { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 9px; }

.prov-path { cursor: pointer; stroke-width: .9; transition: fill var(--t-mid) var(--e-out), opacity var(--t-slow) var(--e-out); }
.prov-path.hovered { opacity: .82; stroke: var(--ink); stroke-width: 1.8; }
.prov-path.is-dim { opacity: .26; cursor: default; }
.prov-path.is-active { opacity: 1; stroke: var(--ink-2); stroke-width: 2.2; }
svg.zoomed .prov-path.is-active { fill: var(--surface-2); }

#provLabels { pointer-events: none; transition: opacity var(--t-mid) var(--e-out); }
#provLabels.hidden { opacity: 0; }
.pl-plate { display: none; }
.pl-name {
  fill: var(--ink); font-weight: 700; font-family: Vazirmatn, Tahoma, sans-serif;
  direction: rtl; unicode-bidi: plaintext;
}
.pl-total { direction: ltr; unicode-bidi: plaintext; }
.pl-total { fill: var(--ink-3); font-family: Vazirmatn, Tahoma, sans-serif; }
.pl-track { fill: var(--surface-3); }
.pl-c { fill: var(--chart-completed); }
.pl-p { fill: var(--chart-progress); }
.pl-w { fill: var(--chart-pending); }

#cityLayer { opacity: 0; transition: opacity var(--t-slow) var(--e-out); pointer-events: none; }
#cityLayer.visible { opacity: 1; pointer-events: auto; }
.city-borders { pointer-events: none; }
.city-borders polygon { fill: none; stroke: var(--ink-3); opacity: .45; }
.city-node { cursor: pointer; }
.city-halo { opacity: .18; }
.city-node:hover .city-dot { stroke: var(--ink); }
.city-node:hover .city-halo { opacity: .34; }
.city-label { fill: var(--ink-2); stroke: var(--surface); paint-order: stroke; font-family: Vazirmatn, Tahoma, sans-serif; pointer-events: none; }
.city-label.has-data { fill: var(--ink); font-weight: 700; }

.iran-tip {
  display: none; position: fixed; z-index: var(--z-tip);
  background: var(--chart-tip-bg); color: var(--chart-tip-ink);
  font-size: var(--fs-xs); padding: 9px 11px; border-radius: var(--r-sm);
  pointer-events: none; line-height: 1.75; min-width: 176px; max-width: 236px;
  box-shadow: var(--sh-3); border: 1px solid oklch(100% 0 0 / .1);
}
.iran-tip .muted { color: oklch(100% 0 0 / .55); }
.iran-tip b { font-weight: 700; }
.iran-tip .tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid oklch(100% 0 0 / .14); }
.iran-tip .tip-pct { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iran-tip .tip-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 1px var(--s-2); align-items: center; }
.iran-tip .tip-rows i { width: 8px; height: 8px; border-radius: 2px; }
.iran-tip .tip-rows em { font-style: normal; color: oklch(100% 0 0 / .72); }
.iran-tip .tip-rows b { text-align: end; font-variant-numeric: tabular-nums; }
.chart-tip { min-width: 196px; max-width: 250px; }
.chart-tip-rows { grid-template-columns: 8px 1fr; }
.chart-tip-rows em { white-space: nowrap; }
.iran-tip .statbar { margin-top: 7px; height: 6px; background: oklch(100% 0 0 / .14); box-shadow: none; min-width: 0; }
.iran-tip .tip-foot { margin-top: 6px; font-size: var(--fs-xs); color: oklch(100% 0 0 / .5); }

/* ------------------------------------------------- نماینده استان */
.rep-toggle { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-inset); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 11px 13px; }
.rep-toggle .form-check-input { margin: 2px 0 0; flex: 0 0 auto; }
.rep-toggle label { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); margin: 0; cursor: pointer; }
.rep-toggle label small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
tr.inst-rep { background: var(--surface-2); }
tr.inst-rep td:nth-child(3) { font-weight: 800; color: var(--ink); }
.rep-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 7px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--st-completed);
  background: var(--st-completed-soft); border: 1px solid var(--st-completed-line);
  border-radius: var(--r-pill); padding: 1px 8px; vertical-align: middle;
}
.rep-badge svg { width: 11px; height: 11px; }
.inst-name-cell { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }

.phone-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.55; }
.phone-stack a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.phone-stack a:hover { color: var(--primary); text-decoration: underline; }

.project-logo { width: 52px; height: 52px; border-radius: var(--r-md); object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.project-logo-ph { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }

#dashProvFilter, #dashInstFilter, #provStatusFilter { min-width: 108px; width: 136px; }

/* --------------------------------------------------------- توست */
#toastWrap { position: fixed; bottom: var(--s-5); left: var(--s-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); }
.toast-app {
  display: flex; align-items: center; gap: 10px;
  background: var(--chart-tip-bg); color: var(--chart-tip-ink);
  border: 1px solid oklch(100% 0 0 / .1);
  border-radius: var(--r-md); padding: 11px 15px;
  font-size: var(--fs-sm); box-shadow: var(--sh-3);
  animation: toastIn var(--t-slow) var(--e-out); max-width: 348px;
}
.toast-app svg { flex: 0 0 auto; }
.toast-app.success svg { color: var(--chart-completed); }
.toast-app.error svg { color: var(--chart-pending); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ----------------------------------------- بارگذاری و اسکلتون */
.app-loader { position: fixed; inset: 0; z-index: 2100; background: var(--bg); display: grid; place-items: center; }
.app-loader-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.app-loader-logo-wrap {
  width: 114px; height: 114px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-2); display: grid; place-items: center; padding: var(--s-3);
  animation: appLoaderFloat 2.6s var(--e-both) infinite;
}
.app-loader-logo { width: 100%; height: auto; }
.app-loader-spinner { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--primary); animation: appLoaderSpin .75s linear infinite; }
.app-loader-text { color: var(--ink-2); font-size: var(--fs-md); display: flex; align-items: center; }
.app-loader-dots { display: inline-flex; margin-inline-start: 3px; }
.app-loader-dots span { display: inline-block; width: 4px; height: 4px; margin: 0 1.5px; border-radius: 50%; background: var(--ink-3); animation: appLoaderDot 1.2s infinite; }
.app-loader-dots span:nth-child(2) { animation-delay: .2s; }
.app-loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes appLoaderSpin { to { transform: rotate(360deg); } }
@keyframes appLoaderFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes appLoaderDot { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }

.sk { display: block; border-radius: var(--r-sm); background: var(--surface-3); position: relative; overflow: hidden; }
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / .3), transparent);
  transform: translateX(-100%);
  animation: skShine 1.4s var(--e-out) infinite;
}
[data-theme="dark"] .sk::after { background: linear-gradient(90deg, transparent, oklch(100% 0 0 / .07), transparent); }
@keyframes skShine { to { transform: translateX(100%); } }
.sk-title { height: 26px; width: 230px; margin-bottom: var(--s-5); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.sk-card { height: 88px; border-radius: var(--r-lg); }
.sk-panel { height: 300px; border-radius: var(--r-lg); }
.sk-panel.tall { height: 420px; }
.sk-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }
.sk-line { height: 13px; border-radius: var(--r-xs); margin-bottom: 10px; }

/* ------------------------------------------------- تقویم شمسی */
.jp-pop {
  position: absolute; z-index: 3000; width: 268px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: var(--s-3); display: none; font-size: var(--fs-sm);
}
.jp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.jp-title { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.jp-nav {
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); cursor: pointer; font-size: 15px; color: var(--ink-2);
  display: inline-grid; place-items: center; line-height: 1;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.jp-nav:hover { background: var(--primary-soft); color: var(--primary); }
.jp-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: var(--s-1); }
.jp-week span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); padding: 3px 0; }
.jp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jp-empty { padding: 6px 0; }
.jp-day { text-align: center; padding: 6px 0; border-radius: var(--r-xs); cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; transition: background-color var(--t-fast) var(--e-out); }
.jp-day:hover { background: var(--primary-soft); color: var(--primary); }
.jp-today { box-shadow: inset 0 0 0 1.5px var(--primary); font-weight: 700; color: var(--primary); }
.jp-sel { background: var(--primary); color: var(--on-primary) !important; font-weight: 700; }

/* ------------------------------------------------------- عمومی */
.muted { color: var(--ink-3); }
.text-muted { color: var(--ink-3) !important; }
.text-success { color: var(--st-completed) !important; }
.text-primary { color: var(--primary) !important; }
.text-warning { color: var(--st-pending) !important; }
.text-danger { color: var(--danger) !important; }
.alert { border-radius: var(--r-md); font-size: var(--fs-sm); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
/* فاصله‌ی قرص‌ها پیش‌تر ناخواسته از padding قاعده‌های منوی کنار می‌آمد (همان قاعده‌هایی که
   کادر تیره را هم می‌ساختند)؛ اینجا صریح تعریف می‌شود */
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary); --bs-nav-pills-link-active-color: var(--on-primary); gap: var(--s-2); }
.nav-pills .nav-link { color: var(--ink-2); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; }
hr, .dropdown-divider { border-color: var(--line); opacity: 1; }
a { color: var(--primary); }
.spinner-border { color: var(--primary); }
datalist { color: var(--ink); }

/* ================================================= واکنش‌گرایی */
@media (max-width: 1199.98px) {
  .content { padding: var(--s-4) var(--s-4) var(--s-6); }
}

@media (max-width: 991.98px) {
  .topbar-toggle { display: inline-flex; }
  .topbar { flex-wrap: wrap; min-height: auto; padding-top: 10px; gap: var(--s-2); }
  .topbar-center { order: 3; flex-basis: 100%; max-width: 100%; justify-content: flex-start; padding: 0 0 10px; }
  #projectSelect { width: 100%; }
  .topbar-actions { margin-inline-start: auto; }
  .brand-text { display: none; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: var(--z-drawer);
    transform: translateX(calc(100% * var(--dir) * -1));
    transition: transform var(--t-slow) var(--e-out);
    box-shadow: var(--sh-4);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1055;
    background: oklch(20% 0.03 var(--h-brand) / .55);
    opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--e-out);
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .content { padding: var(--s-4); height: auto; overflow: visible; }
  .page-title { font-size: var(--fs-lg); }
  .filter-bar .form-select, .filter-bar .form-control { width: 100%; }
  .filter-bar .search-box { width: 100%; }
  .branch-progress { min-width: 88px; }
  .map-stage svg { height: clamp(320px, 74vw, 460px); }
  .map-legend { max-width: min(44%, 190px); padding: 6px 8px; line-height: 1.5; }
  #toastWrap { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); }
  .toast-app { max-width: none; }
}

@media (max-width: 767.98px) {
  /* --- هدر موبایل: سه کنترل هم‌اندازه، بدون فلش و جداکننده اضافه --- */
  .topbar { padding-top: 8px; gap: 6px; }
  .topbar-actions { gap: 6px; }
  .topbar-sep { display: none; }
  .topbar-toggle { width: 36px; height: 36px; }
  .brand-logo { height: 34px; }
  .topbar-brand { margin-inline-end: auto; }
  .topbar-center { padding-bottom: 8px; }
  .project-label { display: none; }
  .theme-switch { --sw-opt: 28px; }
  .theme-opt { height: 28px; }
  #topbarTheme { width: 36px; height: 36px; }
  /* تنها دکمه‌ی اکسلِ هدر آیکونی می‌شود. اگر این قاعده به همه‌ی .btn-excel ها برسد،
     دکمه‌های «خلاصه مدیریتی» و «اکسل» داخل صفحه‌ها هم ۳۶×۳۶ می‌شوند و عنوانشان از
     کادر دکمه بیرون می‌زند؛ پس دقیقاً به هدر محدود شده است. */
  .topbar-actions .btn-excel {
    width: 36px; height: 36px; padding: 0; justify-content: center;
    border-radius: var(--r-md);
  }
  .topbar-actions .btn-excel.dropdown-toggle::after { display: none; }
  /* دکمه‌های سرِ صفحه: متن و آیکون همیشه درون کادر، بدون شکستن سطر */
  .page-actions .btn {
    width: auto; height: auto; min-height: 38px;
    padding: 8px var(--s-3); justify-content: center;
    white-space: nowrap; line-height: 1.25; font-size: var(--fs-sm);
  }
  .page-actions .btn-lg { font-size: var(--fs-md); padding: 9px var(--s-4); }
  .user-btn { padding: 2px; border-radius: 50%; }
  .user-btn.dropdown-toggle::after { display: none; }
  .user-avatar { width: 32px; height: 32px; }

  .chart-box { height: 252px; }
  .chart-box.sm { height: 208px; }
  .chart-tall { height: 380px; }
  .summary-grid { grid-template-columns: 1fr; }
  /* راهنمای نقشه از روی نقشه بیرون می‌آید تا استان‌ها را نپوشاند.
     نکته: .map-stage یک ردیف فلکس است؛ اگر راهنما از حالت absolute دربیاید به یک ستون
     کنار نقشه تبدیل می‌شود و از خود نقشه هم بزرگ‌تر می‌نماید. پس اینجا ستون می‌شود
     تا راهنما زیر نقشه و به عرض کامل بنشیند. */
  .map-stage { flex-direction: column; align-items: stretch; }
  .map-stage svg { flex: 0 0 auto; }
  .map-legend {
    position: static; inset: auto; max-width: none; width: 100%; order: 2;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 4px var(--s-3);
    margin-top: var(--s-2); box-shadow: none; padding: 7px 9px;
  }
  .map-legend .lg-title { width: 100%; text-align: center; }
  .map-bar { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .map-tools { justify-content: flex-start; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-select, .filter-bar .form-control { min-width: 0; }
  .filter-bar .search-box { min-width: 0; }
  .search-tag { max-width: 100%; }
  #dashProvFilter, #dashInstFilter, #provStatusFilter { width: 100%; min-width: 0; }
  .table-app th, .table-app td { white-space: nowrap; }
  .table-responsive { --table-max-h: calc(100dvh - 230px); }
  .table-app tbody td, .table-app thead th { padding: 9px 10px; }
  .statbar-cell { min-width: 128px; }
  .perm-grid { grid-template-columns: 1fr 1fr; }
  .modal-dialog { margin: var(--s-2); }
  .modal-dialog-scrollable .modal-content { max-height: calc(100vh - var(--s-4) * 2); }
}

@media (max-width: 575.98px) {
  .kpi-card { padding: var(--s-3); gap: var(--s-2); }
  .kpi-icon { width: 36px; height: 36px; }
  .kpi-value { font-size: var(--fs-lg); }
  .modal-body { padding: var(--s-4); }
  .modal-header, .modal-footer { padding-inline: var(--s-4); }
  .info-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .step-list { grid-template-columns: 1fr; }
  .page-header { align-items: flex-start; }
  .content { padding: var(--s-3) var(--s-3) var(--s-7); }
  .topbar { padding-inline: var(--s-3); }
  .chart-box { height: 228px; }
  .chart-tall { height: 356px; }
  .map-stage svg { height: clamp(268px, 82vw, 400px); }
}

@media (max-width: 420px) {
  .map-legend { font-size: 0.6875rem; gap: 3px var(--s-2); }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .perm-grid { grid-template-columns: 1fr; }
  .page-title { font-size: var(--fs-md); }
  .brand-logo { height: 32px; }
  .table-app tbody td, .table-app thead th { padding: 8px; font-size: var(--fs-xs); }
}

/* نمایش‌های کم‌ارتفاع (موبایل افقی): پنل دستیار و صفحه ورود باید جا شوند */
@media (max-height: 560px) and (orientation: landscape) {
  .login-main { padding-block: var(--s-4); }
  .login-aside { padding-block: var(--s-2); }
  .login-pitch { padding-block: var(--s-2); }
  .login-hero-cta { width: min(78%, 300px); margin-inline: auto; margin-top: var(--s-5); min-height: 46px; }
  .chart-box { height: 210px; }
  .chart-tall { height: 300px; }
}

/* ------------------------------------------- راهنمای نصب برنامه (PWA) */
.install-help-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--s-4);
  background: oklch(20% 0.03 var(--h-brand) / .55);
}
.install-help-card { max-width: 460px; width: 100%; padding: var(--s-4); }

/* --------------------------------------------------------- چاپ */
@media print {
  .topbar, .sidebar, .sidebar-backdrop, #toastWrap, .page-actions, .filter-bar, .map-tools,
  .pager-controls { display: none !important; }
  /* در چاپ دکمه‌های ورق زدن معنی ندارند، اما جملهٔ «نمایش ۱ تا ۵۰ از ۸۲۶۶» معنی دارد */
  .table-pager { border-top: 1px solid #ccc; background: transparent; }
  .content { height: auto; overflow: visible; padding: 0; }
  /* در چاپ، جدول‌ها کامل باز می‌شوند و سربرگ در هر صفحه تکرار می‌شود */
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .table-app thead { display: table-header-group; }
  .table-app thead th { position: static; box-shadow: none; }
  .card-app, .kpi-card, .stat-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* ============================================================================
   ۱) تم روشن — استفاده گسترده‌تر از پالت رنگی
   ----------------------------------------------------------------------------
   تم روشن قبلاً تقریباً تک‌رنگ بود (کاغذ گرم + لاجورد). این بخش همان پالت را
   پررنگ‌تر و پرکاربردتر می‌کند: هر بخش صفحه لهجه رنگی خودش را می‌گیرد، کارت‌ها
   و سرستون جدول‌ها ته‌رنگ دارند و ردیف‌های جدول بر اساس وضعیت شعبه رنگ می‌گیرند.
   همه چیز فقط داخل [data-theme="light"] است، پس تم تاریک دست‌نخورده می‌ماند.
   ========================================================================== */
[data-theme="light"] {
  /* هفت لهجه رنگی برای هفت بخش سامانه */
  --tone-brand:  oklch(48% 0.170 264);
  --tone-teal:   oklch(54% 0.115 185);
  --tone-green:  oklch(56% 0.130 150);
  --tone-amber:  oklch(62% 0.145 70);
  --tone-rose:   oklch(56% 0.170 15);
  --tone-violet: oklch(52% 0.165 305);
  --tone-sky:    oklch(56% 0.130 232);

  --tint-brand:  oklch(97% 0.028 264);
  --tint-teal:   oklch(97% 0.030 185);
  --tint-green:  oklch(97% 0.032 150);
  --tint-amber:  oklch(97.5% 0.040 75);
  --tint-rose:   oklch(97% 0.028 15);
  --tint-violet: oklch(97% 0.028 305);
  --tint-sky:    oklch(97% 0.030 232);

  /* پس‌زمینه: کاغذ گرم با یک شیب رنگی بسیار ملایم به‌جای سطح یکنواخت */
  --bg: oklch(97.8% 0.010 85);
  --bg-sunk: oklch(95.4% 0.014 264);
  --surface-2: oklch(97.4% 0.014 264);
  --surface-3: oklch(95.4% 0.020 264);
  --surface-inset: oklch(96.6% 0.016 264);
  --line: oklch(89.5% 0.016 264);
  --line-soft: oklch(93.5% 0.012 264);

  /* وضعیت‌ها اشباع بیشتری می‌گیرند تا در جدول و نمودار فوراً از هم جدا شوند */
  --st-completed:      oklch(53% 0.120 178);
  --st-completed-soft: oklch(95.5% 0.048 178);
  --st-completed-line: oklch(85% 0.075 178);
  --st-progress:       oklch(50% 0.175 264);
  --st-progress-soft:  oklch(96% 0.045 264);
  --st-progress-line:  oklch(86% 0.075 264);
  --st-pending:        oklch(57% 0.150 68);
  --st-pending-soft:   oklch(96% 0.062 75);
  --st-pending-line:   oklch(85% 0.100 75);

  --chart-completed: #0e8f79;
  --chart-progress:  #3554cf;
  --chart-pending:   #cc7a12;
  --chart-primary:   #4b3fd0;
  --chart-accent:    #8c3fc9;
  --chart-neutral:   #9aa1b4;
}

[data-theme="light"] body {
  background:
    linear-gradient(var(--login-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-grid) 1px, transparent 1px),
    radial-gradient(1100px 520px at 100% -8%, oklch(95% 0.035 264) 0%, transparent 62%),
    radial-gradient(900px 460px at -6% 104%, oklch(96% 0.030 185) 0%, transparent 60%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  background-attachment: fixed;
}

/* --- کارت‌ها: نوار رنگی بالای کارت + ته‌رنگ خیلی ملایم ------------------- */
[data-theme="light"] .card-app {
  background: linear-gradient(180deg, var(--tint-brand) 0%, var(--surface) 46px);
  border-color: var(--line);
}
[data-theme="light"] .card-app > .panel-head { border-bottom-color: oklch(88% 0.030 264); }
[data-theme="light"] .panel-title { color: var(--tone-brand); }
[data-theme="light"] .panel-title svg { color: var(--tone-brand); opacity: .85; }

/* --- تیتر صفحه: خط رنگی گرادیانی زیر عنوان ------------------------------- */
[data-theme="light"] .page-header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--tone-brand), var(--tone-violet) 34%, var(--tone-teal) 68%, var(--tone-amber)) 1;
  padding-bottom: var(--s-3);
}
[data-theme="light"] .page-title { color: var(--tone-brand); }
[data-theme="light"] .page-title small { color: var(--ink-3); }

/* --- کارت‌های آماری: هر کارت رنگ خودش را دارد --------------------------- */
[data-theme="light"] .stat-card,
[data-theme="light"] .kpi-card {
  background: linear-gradient(135deg, var(--surface) 40%, var(--tint-brand));
  border-color: oklch(89% 0.028 264);
}
[data-theme="light"] .stat-card:has(.ic-blue)   { border-color: var(--st-progress-line); background: linear-gradient(135deg, var(--surface) 40%, var(--tint-sky)); }
[data-theme="light"] .stat-card:has(.ic-green)  { border-color: var(--st-completed-line); background: linear-gradient(135deg, var(--surface) 40%, var(--tint-teal)); }
[data-theme="light"] .stat-card:has(.ic-indigo) { border-color: oklch(87% 0.055 305); background: linear-gradient(135deg, var(--surface) 40%, var(--tint-violet)); }
[data-theme="light"] .stat-card:has(.ic-amber)  { border-color: var(--st-pending-line); background: linear-gradient(135deg, var(--surface) 40%, var(--tint-amber)); }
[data-theme="light"] .stat-icon { box-shadow: inset 0 0 0 1px oklch(50% 0.10 264 / .10); }
[data-theme="light"] .stat-value { color: var(--ink); }

/* کارت خلاصه قابل کلیک = فیلتر سریع جدول */
.stat-card.stat-clickable { cursor: pointer; }
.stat-card.stat-clickable:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.stat-card.stat-clickable:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* --- جدول‌ها: سرستون رنگی و ردیف‌های رنگ‌دار بر اساس وضعیت -------------- */
[data-theme="light"] .table-app thead th {
  background: linear-gradient(180deg, oklch(95% 0.040 264), oklch(93% 0.045 264));
  color: oklch(33% 0.110 264);
  border-bottom: 1px solid oklch(85% 0.060 264);
  letter-spacing: -.01em;
}
[data-theme="light"] .table-app tbody tr:nth-child(even) { background: oklch(98.6% 0.008 264); }
[data-theme="light"] .table-app tbody tr[data-status="pending"]     { box-shadow: inset 3px 0 0 var(--st-pending); }
[data-theme="light"] .table-app tbody tr[data-status="in_progress"] { box-shadow: inset 3px 0 0 var(--st-progress); }
[data-theme="light"] .table-app tbody tr[data-status="completed"]   { box-shadow: inset 3px 0 0 var(--st-completed); }
[data-theme="light"] .table-app tbody tr:hover { background: oklch(96% 0.035 264); }
[data-theme="light"] .table-app tfoot td {
  background: linear-gradient(180deg, oklch(96% 0.032 264), oklch(94% 0.038 264));
  color: oklch(33% 0.100 264);
}

/* --- نوار فیلتر، تب‌ها و دکمه‌ها ---------------------------------------- */
[data-theme="light"] .filter-bar.card-app {
  background: linear-gradient(120deg, var(--tint-sky), var(--tint-violet));
  border-color: oklch(88% 0.035 264);
}
[data-theme="light"] .nav-pills .nav-link.active { background: linear-gradient(120deg, var(--tone-brand), var(--tone-violet)); border-color: transparent; }
[data-theme="light"] .btn-primary {
  background: linear-gradient(120deg, var(--tone-brand), oklch(45% 0.175 285));
  border-color: transparent;
}
[data-theme="light"] .btn-primary:hover { background: linear-gradient(120deg, oklch(42% 0.170 264), oklch(39% 0.170 285)); }
[data-theme="light"] .badge-status { font-weight: 700; }
[data-theme="light"] .prog { background: oklch(92% 0.020 264); }
[data-theme="light"] .role-card { background: linear-gradient(150deg, var(--surface), var(--tint-violet)); }
[data-theme="light"] .modal-content { background: linear-gradient(180deg, var(--tint-brand) 0, var(--surface) 90px); }
[data-theme="light"] .section-title { color: var(--tone-teal); }
[data-theme="light"] .branch-head { background: linear-gradient(120deg, var(--tint-sky), var(--tint-teal)); }

/* تم تاریک همان زبان رنگی و حاشیه‌های تم روشن را با سطوح مخصوص تاریکی حفظ می‌کند. */
[data-theme="dark"] {
  --tone-brand: oklch(72% 0.125 264); --tone-teal: oklch(72% 0.095 185); --tone-green: oklch(72% 0.105 150);
  --tone-amber: oklch(78% 0.120 70); --tone-rose: oklch(70% 0.135 15); --tone-violet: oklch(73% 0.125 305); --tone-sky: oklch(73% 0.105 232);
  --tint-brand: oklch(27% 0.036 264); --tint-teal: oklch(27% 0.032 185); --tint-green: oklch(27% 0.034 150);
  --tint-amber: oklch(28% 0.038 75); --tint-rose: oklch(27% 0.034 15); --tint-violet: oklch(27% 0.036 305); --tint-sky: oklch(27% 0.034 232);
}
[data-theme="dark"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--login-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
}
[data-theme="dark"] .card-app { background: linear-gradient(180deg, var(--tint-brand) 0%, var(--surface) 46px); border-color: var(--line-strong); }
[data-theme="dark"] .card-app > .panel-head { border-bottom-color: var(--primary-soft-line); }
[data-theme="dark"] .panel-title, [data-theme="dark"] .panel-title svg, [data-theme="dark"] .page-title { color: var(--tone-brand); }
[data-theme="dark"] .page-title small { color: var(--ink-3); }
[data-theme="dark"] .page-header { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--tone-brand), var(--tone-violet) 34%, var(--tone-teal) 68%, var(--tone-amber)) 1; }
[data-theme="dark"] .stat-card, [data-theme="dark"] .kpi-card { background: linear-gradient(135deg, var(--surface) 42%, var(--tint-brand)); border-color: var(--line-strong); }
[data-theme="dark"] .stat-card:has(.ic-blue) { border-color: var(--st-progress-line); background: linear-gradient(135deg, var(--surface) 42%, var(--tint-sky)); }
[data-theme="dark"] .stat-card:has(.ic-green) { border-color: var(--st-completed-line); background: linear-gradient(135deg, var(--surface) 42%, var(--tint-teal)); }
[data-theme="dark"] .stat-card:has(.ic-indigo) { border-color: oklch(42% 0.070 305); background: linear-gradient(135deg, var(--surface) 42%, var(--tint-violet)); }
[data-theme="dark"] .stat-card:has(.ic-amber) { border-color: var(--st-pending-line); background: linear-gradient(135deg, var(--surface) 42%, var(--tint-amber)); }
[data-theme="dark"] .stat-icon { box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="dark"] .table-app thead th { background: linear-gradient(180deg, oklch(30% 0.045 264), oklch(27% 0.040 264)); color: var(--tone-brand); border-bottom-color: var(--primary-soft-line); }
[data-theme="dark"] .table-app tbody tr:nth-child(even) { background: var(--surface-2); }
[data-theme="dark"] .table-app tbody tr[data-status="pending"] { box-shadow: inset 3px 0 0 var(--st-pending); }
[data-theme="dark"] .table-app tbody tr[data-status="in_progress"] { box-shadow: inset 3px 0 0 var(--st-progress); }
[data-theme="dark"] .table-app tbody tr[data-status="completed"] { box-shadow: inset 3px 0 0 var(--st-completed); }
[data-theme="dark"] .table-app tbody tr:hover { background: var(--primary-soft); }
[data-theme="dark"] .table-app tfoot td { background: var(--tint-brand); color: var(--tone-brand); }
[data-theme="dark"] .filter-bar.card-app { background: linear-gradient(120deg, var(--tint-sky), var(--tint-violet)); border-color: var(--line-strong); }
[data-theme="dark"] .nav-pills .nav-link.active, [data-theme="dark"] .btn-primary { background: linear-gradient(120deg, var(--tone-brand), var(--tone-violet)); border-color: transparent; color: var(--on-primary); }
[data-theme="dark"] .btn-primary:hover { filter: brightness(1.08); }
[data-theme="dark"] .role-card { background: linear-gradient(150deg, var(--surface), var(--tint-violet)); border-color: var(--line-strong); }
[data-theme="dark"] .modal-content { background: linear-gradient(180deg, var(--tint-brand) 0, var(--surface) 90px); border-color: var(--line-strong); }
[data-theme="dark"] .section-title { color: var(--tone-teal); }
[data-theme="dark"] .branch-head { background: linear-gradient(120deg, var(--tint-sky), var(--tint-teal)); border-color: var(--line-strong); }

/* ============================================================================
   ۲) دستیار هوشمند سامانه — ویجت شناور
   ========================================================================== */
/* کمی بالاتر از لبه پایین می‌نشیند تا روی متن انتهای صفحه نیفتد */
.asst-root { position: fixed; inset-inline-start: var(--s-5); inset-block-end: 68px; z-index: 1900; }

.asst-fab {
  width: 56px; height: 56px; border: 0; border-radius: var(--r-pill);
  display: grid; place-items: center; cursor: pointer; position: relative;
  color: #fff; background: linear-gradient(135deg, oklch(52% 0.185 285), oklch(56% 0.150 210));
  box-shadow: 0 10px 26px oklch(45% 0.15 275 / .38), inset 0 1px 0 oklch(100% 0 0 / .25);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.asst-fab:hover { transform: translateY(-3px) scale(1.04); }
.asst-fab.active { transform: rotate(-8deg) scale(.94); }
.asst-fab-dot {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: oklch(78% 0.170 145); border: 2px solid oklch(100% 0 0 / .85);
  animation: asstPulse 2.4s var(--e-both) infinite;
}
@keyframes asstPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.asst-panel {
  position: absolute; inset-block-end: 70px; inset-inline-start: 0;
  width: min(420px, calc(100vw - 2 * var(--s-4)));
  height: min(620px, calc(100vh - 210px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-4);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97);
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid);
}
.asst-panel.open { opacity: 1; visibility: visible; transform: none; }

.asst-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); color: #fff;
  background: linear-gradient(115deg, oklch(38% 0.150 280), oklch(44% 0.130 215));
}
.asst-head-id { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.asst-avatar {
  width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center;
  background: oklch(100% 0 0 / .16); flex: 0 0 auto;
}
.asst-head-txt { display: flex; flex-direction: column; min-width: 0; }
.asst-head-txt b { font-size: var(--fs-md); font-weight: 700; }
.asst-head-txt small { font-size: var(--fs-xs); opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-x {
  width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); flex: 0 0 auto;
  background: oklch(100% 0 0 / .14); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.asst-x:hover { background: oklch(100% 0 0 / .26); }

.asst-scope {
  display: none; padding: 6px var(--s-4); font-size: var(--fs-xs);
  background: var(--st-pending-soft); color: var(--st-pending);
  border-bottom: 1px solid var(--st-pending-line);
}
.asst-scope.on { display: block; }

.asst-body {
  flex: 1 1 auto; overflow-y: auto; padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--bg-sunk);
}
.asst-msg { display: flex; }
.asst-msg.me { justify-content: flex-start; }
.asst-msg.bot { justify-content: flex-end; }

.asst-bubble {
  max-width: 92%; padding: var(--s-3) var(--s-3); border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: 1.85; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-1);
}
.asst-msg.me .asst-bubble {
  background: linear-gradient(125deg, oklch(46% 0.165 280), oklch(50% 0.140 215));
  color: #fff; border-color: transparent; border-end-start-radius: var(--r-xs);
}
.asst-msg.bot .asst-bubble { border-end-end-radius: var(--r-xs); }
.asst-bubble.denied { background: var(--danger-soft); border-color: var(--danger-line); color: var(--ink); }

.asst-deny-head {
  display: flex; align-items: center; gap: 6px; font-weight: 700;
  color: var(--danger); margin-bottom: 6px; font-size: var(--fs-sm);
}
.asst-text { display: flex; flex-direction: column; gap: 2px; white-space: pre-wrap; }
.asst-hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.asst-list-title {
  margin: var(--s-3) 0 6px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-3); text-transform: none; letter-spacing: .01em;
}
.asst-list { display: flex; flex-direction: column; gap: 4px; }
.asst-item {
  text-align: start; width: 100%; display: block; padding: 7px var(--s-3);
  border-radius: var(--r-sm); border: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--ink); font: inherit;
}
.asst-item b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.asst-item small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.asst-item.clickable { cursor: pointer; transition: background-color var(--t-fast) var(--e-out); }
.asst-item.clickable:hover { background: var(--primary-soft); border-color: var(--primary-soft-line); }
.asst-more { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }

.asst-goto {
  margin-top: var(--s-3); width: 100%; padding: 7px; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--primary-soft-line);
  background: var(--primary-soft); color: var(--primary-ink);
  font-size: var(--fs-sm); font-weight: 700; font-family: inherit;
}
.asst-goto:hover { background: var(--surface-3); }

.asst-typing { display: flex; gap: 5px; align-items: center; padding: 12px var(--s-4); }
.asst-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: asstBounce 1.3s infinite; }
.asst-typing i:nth-child(2) { animation-delay: .18s; }
.asst-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes asstBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.asst-chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s-2) var(--s-3) 0;
  background: var(--surface); max-height: 96px; overflow-y: auto;
}
.asst-chip {
  border: 1px solid var(--primary-soft-line); background: var(--primary-soft);
  color: var(--primary-ink); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: var(--fs-xs); cursor: pointer; font-family: inherit;
}
.asst-chip:hover { background: var(--surface-3); }

.asst-form {
  display: flex; gap: var(--s-2); align-items: center;
  padding: var(--s-3); background: var(--surface); border-top: 1px solid var(--line);
}
.asst-input {
  flex: 1 1 auto; min-width: 0; padding: 9px var(--s-3);
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--surface-inset); color: var(--ink);
  font-family: inherit; font-size: var(--fs-sm);
}
.asst-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.asst-send {
  width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, oklch(48% 0.175 280), oklch(52% 0.145 215));
}
.asst-send:disabled { opacity: .5; cursor: default; }
.asst-send svg { transform: scaleX(-1); }

/* اندازه و جای دستیار روی صفحه‌های کوچک در بخش ۶ همین شیت تعیین می‌شود */
@media print { .asst-root { display: none !important; } }


/* ============================================================================
   ۳) بازبینی کامل نمای موبایل — واکنش‌گرایی سراسری
   ----------------------------------------------------------------------------
   این بخش آخرین بخش شیت است تا بر قواعد پیشین اولویت داشته باشد. هدف: هیچ بخشی از
   سامانه در موبایل از عرض صفحه بیرون نزند، هیچ متنی از کادرش بیرون نیفتد، هدف ضربه‌ی
   انگشت به‌اندازه‌ی کافی بزرگ باشد و لایه‌های شناور (دراپ‌داون، تقویم، مودال، دستیار)
   داخل نما بمانند.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* هیچ چیز عرض نما را نمی‌شکند */
  html { -webkit-text-size-adjust: 100%; }
  img, svg, canvas, table { max-width: 100%; }
  .content, .content > .page { max-width: 100%; min-width: 0; }
  .page-title, .panel-title, .kpi-label, .kpi-value, .asst-bubble { overflow-wrap: anywhere; }

  /* کشوی ناوبری روی صفحه‌های باریک تمام‌عرض نمی‌شود تا پس‌زمینه دیده و لمس شود */
  .sidebar { width: min(var(--sidebar-w), 84vw); }
  .sidebar-nav { overflow-y: auto; }

  /* لایه‌های شناور همیشه داخل نما */
  .dropdown-menu {
    max-width: calc(100vw - var(--s-5));
    max-height: min(70vh, 70dvh); overflow-y: auto;
  }
  .jp-pop { width: min(268px, calc(100vw - var(--s-5))); }

  /* جدول‌ها با ضربه‌ی نرم افقی اسکرول می‌شوند و ستون‌ها فشرده نمی‌شوند */
  .table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* مودال‌ها با ارتفاع واقعی نما (نوار نشانی مرورگر حساب می‌شود) */
  .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - var(--s-4) * 2); }
  .modal-body { max-height: none; }

  /* فرم‌های داخل مودال: ورودی‌ها تمام‌عرض و بدون سرریز */
  .equip-form { flex-wrap: wrap; }
  .equip-form .eq-name { min-width: 140px; }
  .eq-serial { width: 100% !important; }

  /* جزئیات شعبه — جدول تجهیزات: «سریال» کامل دیده می‌شود و ستون‌های
     «ارسال‌شده / برگشتی / مانده» به اندازه‌ی چهار رقم جمع می‌شوند تا جدول جا شود. */
  .table-app th.eq-col-serial, .table-app td.eq-cell-serial {
    width: auto !important; min-width: calc(15ch + 26px); white-space: nowrap;
  }
  .table-app td.eq-cell-serial .eq-serial {
    width: 100% !important; min-width: calc(15ch + 10px) !important; text-overflow: clip;
  }
  .table-app th.eq-col-qty, .table-app td.eq-cell-qty { width: 1% !important; min-width: 0; white-space: nowrap; }
  .table-app td.eq-cell-qty .qty-stepper .eq-inline {
    width: calc(4ch + 20px) !important; min-width: 0 !important; padding-left: 2px !important; padding-right: 2px !important;
  }

  /* بخش سوراخ کاری گاوصندوق: فیلد «تعداد» به اندازه‌ی دو رقم */
  #sd_count {
    width: calc(2ch + 24px) !important; max-width: calc(2ch + 24px) !important; min-width: 0 !important;
    padding-left: 2px !important; padding-right: 2px !important; text-align: center;
  }

  /* پیام‌ها بالای ناحیه‌ی امن دستگاه می‌نشینند (چیدمان دستیار در بخش ۶ تعیین می‌شود) */
  #toastWrap { bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 767.98px) {
  /* سرِ هر صفحه: عنوان بالا، دکمه‌ها زیر آن و تمام‌عرض — متن هرگز از کادر بیرون نمی‌زند */
  .page-header { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }

  /* هدف ضربه: کنترل‌های فیلتر و دکمه‌های کوچک */
  .filter-bar .form-select, .filter-bar .form-control { min-height: 40px; }
  .btn-sm, .btn-icon { min-height: 34px; }
}

@media (max-width: 575.98px) {
  /* iOS با ورودی کوچک‌تر از ۱۶px صفحه را زوم می‌کند و چیدمان به‌هم می‌ریزد */
  .form-control, .form-select, .login-card .form-control, .asst-input, textarea {
    font-size: 16px;
  }
  .login-card { padding: var(--s-5) var(--s-4) var(--s-4); }
  .login-main { align-items: flex-start; }
  /* دکمه‌های مودال در یک ردیف جا نمی‌شوند: کنار هم و هم‌اندازه */
  .modal-footer { gap: var(--s-2); }
  .modal-footer .btn { flex: 1 1 auto; margin: 0; }
}


/* ============================================================================
   ۴) هیرو در نمای موبایل: «یک صفحه، بدون اسکرول»
   ----------------------------------------------------------------------------
   خواسته: روی هر گوشی با هر ارتفاع صفحه‌ای، لوگو در بالا و امضای سایت در پایین،
   هر دو در یک نما دیده شوند و صفحه هیچ اسکرولی نداشته باشد.
   راه‌حل: ارتفاع دقیقاً به اندازه‌ی نمای واقعی (dvh/svh) بسته می‌شود، سر و ته
   (لوگو و امضا) اندازه‌ی خودشان را می‌گیرند و «متن معرفی» تنها بخش کشسان است:
   با ارتفاع باقی‌مانده کوچک می‌شود و اگر جا نبود سطرهایش کم می‌شود، نه این‌که
   امضا را زیر لبه‌ی صفحه براند.
   ========================================================================== */
@media (max-width: 900px) {
  html, body { overscroll-behavior-y: none; }

  .login-page:not(.show-form) { min-height: 0; height: 100dvh; overflow: hidden; }

  .login-aside {
    /* svh = کوچک‌ترین حالت نما (نوار نشانی باز) و dvh = حالت واقعی لحظه‌ای */
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    gap: clamp(4px, 0.9vh, 12px);
    padding:
      calc(clamp(8px, 1.5vh, 18px) + env(safe-area-inset-top, 0px))
      max(var(--s-4), env(safe-area-inset-right, 0px))
      calc(clamp(8px, 1.3vh, 14px) + env(safe-area-inset-bottom, 0px))
      max(var(--s-4), env(safe-area-inset-left, 0px));
  }

  /* شبکه‌ی شطرنجی تزئینی در نمای موبایل هم نمایش داده می‌شود؛ ماسک شعاعی برای قاب
     باریک بازتر و خطوط کمی روشن‌تر تنظیم شده تا روی پس‌زمینه‌ی تیره پیدا باشند. */
  .login-aside::before {
    display: block;
    inset: -6%;
    background:
      linear-gradient(oklch(100% 0 0 / .075) 1px, transparent 1px) 0 0 / 100% 30px,
      linear-gradient(90deg, oklch(100% 0 0 / .075) 1px, transparent 1px) 0 0 / 30px 100%;
    -webkit-mask-image: radial-gradient(ellipse 125% 80% at 50% 28%, #000 24%, transparent 84%);
    mask-image: radial-gradient(ellipse 125% 80% at 50% 28%, #000 24%, transparent 84%);
  }
  .login-aside::after { inset-block-end: -30%; width: 82%; }

  /* سر و ته ثابت می‌مانند */
  .login-aside-top,
  .login-foot { flex: 0 0 auto; }

  /* تنها بخش کشسان: با ارتفاع باقی‌مانده شنا می‌کند */
  .login-pitch {
    flex: 1 1 auto;
    min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    margin-block: 0;
    padding-block: clamp(2px, 1vh, 12px);
  }
  .login-pitch h2 {
    font-size: clamp(1.05rem, min(5.2vw, 2.9vh), 1.6rem);
    margin-bottom: clamp(4px, 1.2vh, 14px);
  }
  /* متن معرفی: به‌جای سرریز و اسکرول، سطرهایش با ارتفاع نما کم می‌شود */
  .login-pitch p {
    font-size: clamp(0.6875rem, min(3.3vw, 1.7vh), 0.875rem);
    line-height: 1.75;
    max-width: none;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 8; overflow: hidden;
  }
  .login-facts {
    gap: clamp(3px, 0.8vh, 10px) var(--s-4);
    margin-top: clamp(12px, 2.6vh, 32px);
  }
  .login-hero-cta {
    width: min(78%, 320px); max-width: 320px; margin-inline: auto;
    margin-top: clamp(16px, 4vh, 40px);
    min-height: clamp(42px, 5.8vh, 52px);
  }
  .login-foot { font-size: clamp(0.5625rem, 1.45vh, 0.6875rem); }
}

/* گوشی‌های کم‌ارتفاع (و حالت زوم‌شده‌ی مرورگر): متن کوتاه‌تر می‌شود تا امضا سرِ جایش بماند */
@media (max-width: 900px) and (max-height: 740px) {
  .login-pitch p { -webkit-line-clamp: 6; }
}
@media (max-width: 900px) and (max-height: 660px) {
  .login-pitch p { -webkit-line-clamp: 4; }
  .login-facts { margin-top: clamp(4px, 1vh, 12px); }
}
@media (max-width: 900px) and (max-height: 580px) {
  .login-pitch p { -webkit-line-clamp: 3; }
  .login-fact span { display: none; }
}
/* موبایل افقی: ارتفاع واقعاً کم است؛ اینجا اسکرول نرم مجاز می‌شود تا چیزی بریده نشود */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .login-page:not(.show-form) { height: auto; overflow: visible; }
  .login-aside { height: auto; min-height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .login-pitch p { -webkit-line-clamp: 3; }
}

/* ============================================================================
   ۵) دکمه «ورود به سامانه» در هیرو — هم‌رنگ با پالت سامانه
   لاجورد (رنگ کنش) با گذر نرم به فیروزه (رنگ تکمیل)، همان دو رنگی که کل سامانه
   با آن‌ها ساخته شده. پیش از این یک دکمه‌ی سپید بی‌هویت بود.
   ========================================================================== */
.login-hero-cta {
  border: 1px solid oklch(100% 0 0 / .16);
  background:
    linear-gradient(135deg,
      oklch(56% 0.170 var(--h-brand)) 0%,
      oklch(53% 0.150 240) 55%,
      oklch(58% 0.105 190) 100%);
  color: oklch(99% 0.006 var(--h-brand));
  letter-spacing: .01em;
  box-shadow:
    0 10px 28px oklch(30% 0.130 var(--h-brand) / .48),
    inset 0 1px 0 oklch(100% 0 0 / .22),
    inset 0 -2px 0 oklch(20% 0.08 var(--h-brand) / .22);
}
.login-hero-cta:hover {
  background:
    linear-gradient(135deg,
      oklch(60% 0.175 var(--h-brand)) 0%,
      oklch(57% 0.155 240) 55%,
      oklch(62% 0.110 190) 100%);
  box-shadow:
    0 14px 32px oklch(30% 0.130 var(--h-brand) / .55),
    inset 0 1px 0 oklch(100% 0 0 / .26);
}
.login-hero-cta:active {
  transform: translateY(1px) scale(.995);
  box-shadow: 0 6px 16px oklch(30% 0.130 var(--h-brand) / .42), inset 0 1px 0 oklch(100% 0 0 / .18);
}
.login-hero-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(100% 0 0 / .38), 0 0 0 6px oklch(56% 0.170 var(--h-brand) / .35), 0 10px 26px oklch(30% 0.13 var(--h-brand) / .45);
}
.login-hero-cta svg { opacity: .92; }

/* ============================================================================
   ۶) کادر و حاشیه‌ی دستیار — بدون اختلال با فضای سامانه
   ----------------------------------------------------------------------------
   سه ایرادی که برطرف شد:
     • z-index دستیار (۱۹۰۰) از مودال‌ها بالاتر بود، پس دکمه‌اش روی پنجره‌های باز
       سامانه می‌افتاد. الان زیر نوار بالا و مودال‌ها می‌نشیند و وقتی مودالی باز است
       کامل کنار می‌رود.
     • ارتفاع با vh حساب می‌شد؛ روی موبایل، نوار نشانی مرورگر پنل را از کادر بیرون
       می‌زد. الان با dvh/svh و ناحیه‌ی امن دستگاه بسته می‌شود.
     • حاشیه‌ی تک‌خطی در تم تیره گم و در تم روشن خشک بود. الان یک لبه‌ی نرم دولایه
       است که از پس‌زمینه جدا می‌شود بی‌آنکه توی چشم بزند.
   ========================================================================== */
.asst-root {
  --asst-fab: 56px;
  z-index: 1035; /* زیر نوار بالای چسبان (۱۰۴۰) و زیر مودال‌ها */
  inset-inline-start: max(var(--s-4), env(safe-area-inset-left, 0px));
  inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
/* وقتی پنجره‌ای از سامانه باز است، دستیار کامل کنار می‌رود */
body.modal-open .asst-root,
body.sidebar-open .asst-root {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
}
.asst-fab { width: var(--asst-fab); height: var(--asst-fab); }

.asst-panel {
  inset-block-end: calc(var(--asst-fab) + var(--s-3));
  width: min(400px, calc(100vw - 2 * var(--s-4)));
  height: min(600px, calc(100dvh - var(--topbar-h) - var(--asst-fab) - 88px));
  max-height: calc(100dvh - var(--topbar-h) - var(--asst-fab) - 56px);
  /* لبه‌ی دولایه: یک خط ظریف + یک هاله‌ی بسیار کم‌رنگ، جای حاشیه‌ی تخت قبلی */
  border: 1px solid var(--line-strong);
  box-shadow:
    0 0 0 1px oklch(50% 0.02 var(--h-brand) / .06),
    0 2px 6px oklch(24% 0.03 var(--h-brand) / .06),
    0 22px 56px oklch(24% 0.03 var(--h-brand) / .20);
  overscroll-behavior: contain;
  /* رسم پنل از بقیه‌ی صفحه جدا می‌شود: اسکرول گفت‌وگو، چیدمان سامانه را بازمحاسبه نمی‌کند */
  contain: layout paint style;
}
[data-theme="dark"] .asst-panel {
  border-color: oklch(42% 0.024 var(--h-brand));
  box-shadow:
    0 0 0 1px oklch(100% 0 0 / .05),
    0 22px 56px oklch(0% 0 0 / .55);
}
.asst-body { overscroll-behavior: contain; }
.asst-chips { overscroll-behavior: contain; }

/* روی گوشی، پنل به یک «برگه‌ی پایین» تمام‌عرض تبدیل می‌شود که هرگز از نما بیرون نمی‌زند */
@media (max-width: 575.98px) {
  .asst-root { --asst-fab: 50px; inset-inline-start: max(var(--s-3), env(safe-area-inset-left, 0px)); inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
  .asst-panel {
    position: fixed;
    inset-inline: max(var(--s-3), env(safe-area-inset-left, 0px)) max(var(--s-3), env(safe-area-inset-right, 0px));
    inset-block-end: calc(var(--s-4) + var(--asst-fab) + var(--s-2) + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: min(70dvh, calc(100dvh - var(--topbar-h) - var(--asst-fab) - 64px));
    max-height: calc(100dvh - var(--topbar-h) - var(--asst-fab) - 40px);
    border-radius: var(--r-xl);
  }
}
@media (max-width: 420px) {
  .asst-root { --asst-fab: 46px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .asst-panel { height: min(78dvh, 400px); max-height: 78dvh; }
}


/* ============================================================================
   ۴) منوی کشویی نسخه رومیزی (ویندوز/مک) — حالت بسته: فقط آیکون صفحه‌ها
   ----------------------------------------------------------------------------
   دکمه‌ی همبرگری هدر منو را جمع/باز می‌کند و انتخاب کاربر ذخیره می‌شود. در حالت جمع‌شده
   تنها آیکون‌ها دیده می‌شوند و با رفتن اشاره‌گر روی آن‌ها منو باز می‌شود. عرضِ اشغال‌شده
   ثابت می‌ماند (حاشیه‌ی منفی)، پس منو روی محتوا شناور می‌شود و صفحه هیچ تکانی نمی‌خورد.
   ========================================================================== */
@media (min-width: 992px) {
  :root { --rail-w: 66px; }

  .topbar-toggle { display: inline-flex; }
  body.nav-rail .topbar-toggle { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); }

  .sidebar {
    transition: width var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
  }
  .nav-label { min-width: 0; white-space: nowrap; overflow: hidden; }
  .nav-label, .nav-badge, .sidebar-date, .sidebar-credit,
  .sidebar-nav .nav-item.active::before { transition: opacity var(--t-fast) var(--e-out); }

  /* منوی جمع‌شده روی محتوا شناور می‌شود، نه کنار آن. پیش‌تر هنگام باز شدن، هم عرض منو و
     هم حاشیه‌ی منفی‌اش با هم انیمیت می‌شدند تا مجموع ثابت بماند؛ ولی مرورگر در هر فریم
     ناچار بود ستون محتوا را از نو چیدمان کند و به‌خاطر container query روی .content
     همه‌ی شکست‌های چیدمان و اندازه‌ی بوم نمودارها را دوباره بسنجد — همان کندی و تکان
     لحظه‌ی باز شدن منو. حالا جای منو در چیدمان با padding رزرو می‌شود و فقط عرض خودِ
     منو تغییر می‌کند: محتوا حتی یک پیکسل هم جابجا نمی‌شود. */
  .layout { position: relative; }
  body.nav-rail .layout { padding-inline-start: var(--rail-w); }
  body.nav-rail .sidebar {
    position: absolute;
    inset-block: 0; inset-inline-start: 0;
    z-index: var(--z-sticky);
    width: var(--rail-w);
    overflow-x: hidden;
  }
  /* آیکون‌ها در هر دو حالت دقیقاً یک جا می‌ایستند؛ فقط متن محو/ظاهر می‌شود */
  body.nav-rail .nav-label,
  body.nav-rail .nav-badge,
  body.nav-rail .sidebar-date,
  body.nav-rail .sidebar-credit,
  body.nav-rail .sidebar-nav .nav-item.active::before { opacity: 0; }

  body.nav-rail .sidebar:hover,
  body.nav-rail .sidebar.kb-focus {
    width: var(--sidebar-w);
    box-shadow: var(--sh-4);
  }
  body.nav-rail .sidebar:hover .nav-label,
  body.nav-rail .sidebar:hover .nav-badge,
  body.nav-rail .sidebar:hover .sidebar-date,
  body.nav-rail .sidebar:hover .sidebar-credit,
  body.nav-rail .sidebar:hover .sidebar-nav .nav-item.active::before,
  body.nav-rail .sidebar.kb-focus .nav-label,
  body.nav-rail .sidebar.kb-focus .nav-badge,
  body.nav-rail .sidebar.kb-focus .sidebar-date,
  body.nav-rail .sidebar.kb-focus .sidebar-credit,
  body.nav-rail .sidebar.kb-focus .sidebar-nav .nav-item.active::before { opacity: 1; }
}

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

/* --- الف) دستیار همیشه روی منو --- */
.asst-root {
  /* بالاتر از منوی رومیزی (۱۰۴۰) و کشوی ناوبری موبایل (۱۰۶۰)، پایین‌تر از مودال‌ها (۱۰۷۰) */
  z-index: 1065;
}
/* با باز بودن کشوی ناوبری هم دستیار سر جایش می‌ماند؛ فقط مودال‌ها کنارش می‌زنند */
body.sidebar-open:not(.modal-open) .asst-root {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

/* --- ب) کلید تم: در حالت جمع‌شده فقط یک لبه --- */
.theme-switch-thumb {
  transition: background-color var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out),
              opacity var(--t-mid) var(--e-out);
}
.theme-switch:not(:hover):not(.kb-focus):not(.is-open) .theme-switch-thumb {
  opacity: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}


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

/* --- الف/ب) ستون محتوا: هم واحد سنجش واکنش‌گرایی، هم تمام‌عرض در حالت بسته --- */
.content { container-type: inline-size; container-name: appmain; }
.content > .page { width: 100%; min-width: 0; }

@media (min-width: 992px) {
  body.nav-rail .content { padding-inline: clamp(var(--s-4), 1.2vw, var(--s-5)); }
  body.nav-rail .content > .page { max-width: none; }   /* حالت بسته: تمام صفحه */
  body:not(.nav-rail) .content > .page { max-width: 1560px; margin-inline: auto; }
}

/* --- ج) شبکه‌ی داشبورد: نسبت‌های دلخواه به‌جای ستون‌های ثابت بوت‌استرپ --- */
.dash-grid { display: grid; gap: var(--s-4); align-items: stretch; }
.dash-grid > .dash-cell { min-width: 0; }
.dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* میله‌ای‌ها سهم بزرگ‌تر می‌گیرند، همسایه‌ها کف عرض دارند */
.dash-split-a { grid-template-columns: minmax(250px, 34fr) minmax(0, 66fr); }   /* دونات | مراحل نصب */
.dash-split-b { grid-template-columns: minmax(0, 58fr) minmax(330px, 42fr); }   /* استان‌ها | نقشه */
.dash-split-c { grid-template-columns: minmax(0, 64fr) minmax(280px, 36fr); }   /* نصاب‌ها | ماهانه */

@container appmain (max-width: 1280px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-split-a { grid-template-columns: minmax(230px, 38fr) minmax(0, 62fr); }
  .dash-split-b { grid-template-columns: minmax(0, 55fr) minmax(300px, 45fr); }
  .dash-split-c { grid-template-columns: minmax(0, 60fr) minmax(260px, 40fr); }
}
@container appmain (max-width: 1040px) {
  .dash-split-b, .dash-split-c { grid-template-columns: minmax(0, 1fr); }
}
@container appmain (max-width: 900px) {
  .dash-split-a { grid-template-columns: minmax(0, 1fr); }
}
@container appmain (max-width: 540px) {
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* مرورگرهای بدون container query: همان شکست‌ها بر پایه عرض پنجره */
@supports not (container-type: inline-size) {
  @media (max-width: 1400px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 1199.98px) { .dash-split-b, .dash-split-c { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 991.98px) { .dash-split-a { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 575.98px) { .dash-kpis { grid-template-columns: minmax(0, 1fr); } }
}

/* ارتفاع کادر نمودار هم با عرض محتوا نفس می‌کشد (فقط رومیزی؛ نمای موبایل دست‌نخورده) */
@media (min-width: 992px) {
  .dash-split .chart-tall { height: clamp(390px, 29cqi, 520px); }
  .dash-split .chart-box:not(.chart-tall) { height: clamp(272px, 19cqi, 350px); }
}

/* --- د) آیکون‌های سه‌بعدی منو در حالت بسته --- */
.nav-ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; perspective: 420px; }
.nav-ico-face {
  width: 100%; height: 100%; display: grid; place-items: center;
  border-radius: 9px; transform-style: preserve-3d; backface-visibility: hidden;
  background: transparent; box-shadow: none;
  transition: transform var(--t-slow) var(--e-out), background-color var(--t-slow) var(--e-out),
              box-shadow var(--t-slow) var(--e-out);
}
.nav-ico-face svg { transition: filter var(--t-slow) var(--e-out); }

@media (min-width: 992px) {
  :root { --rail-w: 78px; }   /* جا برای کاشی سه‌بعدی، بدون بریدگی */

  /* در حالت بسته آیکون وسط ریل می‌نشیند */
  body.nav-rail .sidebar:not(:hover):not(.kb-focus) .nav-item {
    padding-inline: max(6px, calc((var(--rail-w) - 2 * var(--s-3) - 32px) / 2));
  }
  body.nav-rail .sidebar:not(:hover):not(.kb-focus) .nav-ico-face {
    background:
      linear-gradient(150deg, oklch(100% 0 0 / .20) 0%, oklch(100% 0 0 / .05) 55%, oklch(100% 0 0 / .12) 100%);
    box-shadow:
      inset 0 1px 0 oklch(100% 0 0 / .30),
      inset 0 -1px 0 oklch(0% 0 0 / .28),
      0 3px 0 oklch(0% 0 0 / .34),
      0 7px 14px oklch(0% 0 0 / .34);
    animation: navIco3d 5.6s var(--e-both) infinite;
  }
  body.nav-rail .sidebar:not(:hover):not(.kb-focus) .nav-item svg {
    opacity: 1;
    filter: drop-shadow(0 1px 1px oklch(0% 0 0 / .45));
  }
  /* صفحه‌ی فعال کاشی برندی و برجسته‌تر دارد */
  body.nav-rail .sidebar:not(:hover):not(.kb-focus) .nav-item.active .nav-ico-face {
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--on-primary);
    box-shadow:
      inset 0 1px 0 oklch(100% 0 0 / .38),
      0 3px 0 oklch(0% 0 0 / .42),
      0 9px 18px oklch(52% 0.150 var(--h-brand) / .48);
    animation-duration: 4.4s;
  }
  body.nav-rail .sidebar:not(:hover):not(.kb-focus) .nav-item.active { background: transparent; }

  /* موج ملایم: هر آیکون با تأخیر خودش می‌چرخد */
  body.nav-rail .sidebar-nav .nav-item:nth-child(2) .nav-ico-face { animation-delay: -.7s; }
  body.nav-rail .sidebar-nav .nav-item:nth-child(3) .nav-ico-face { animation-delay: -1.4s; }
  body.nav-rail .sidebar-nav .nav-item:nth-child(4) .nav-ico-face { animation-delay: -2.1s; }
  body.nav-rail .sidebar-nav .nav-item:nth-child(5) .nav-ico-face { animation-delay: -2.8s; }
  body.nav-rail .sidebar-nav .nav-item:nth-child(6) .nav-ico-face { animation-delay: -3.5s; }
  body.nav-rail .sidebar-nav .nav-item:nth-child(7) .nav-ico-face { animation-delay: -4.2s; }
  body.nav-rail .sidebar-nav .nav-item:nth-child(8) .nav-ico-face { animation-delay: -4.9s; }

  /* وقتی مودالی باز است (سنگین‌ترین لحظه‌ی صفحه)، چرخش تزئینی آیکون‌ها متوقف می‌شود تا
     پردازنده و کارت گرافیک درگیر کار بی‌فایده نباشند */
  body.nav-rail.modal-open .sidebar .nav-ico-face { animation-play-state: paused; }
}

@keyframes navIco3d {
  0%   { transform: rotateX(14deg) rotateY(-18deg) translateZ(0) scale(1); }
  35%  { transform: rotateX(-4deg) rotateY(16deg) translateZ(7px) scale(1.05); }
  70%  { transform: rotateX(10deg) rotateY(6deg) translateZ(3px) scale(1.02); }
  100% { transform: rotateX(14deg) rotateY(-18deg) translateZ(0) scale(1); }
}

/* کاربرانی که انیمیشن کمتر می‌خواهند: کاشی سه‌بعدی می‌ماند، چرخش نه */
@media (prefers-reduced-motion: reduce) {
  body.nav-rail .sidebar:not(:hover):not(.kb-focus) .nav-ico-face {
    animation: none; transform: rotateX(12deg) rotateY(-14deg);
  }
}

/* --- ب-۲) ستون‌های بوت‌استرپِ کارت‌ها هم به عرض محتوا واکنش می‌دهند، نه به عرض پنجره ---
   بوت‌استرپ فقط عرض پنجره را می‌بیند؛ پس با باز شدن منو کارت‌ها فشرده می‌شدند بی‌آنکه
   چیدمان بشکند. این چند قاعده همان شکست‌ها را بر پایه‌ی عرض ستون محتوا انجام می‌دهد.
   (تنها شبکه‌های کارتی هدف‌گیری شده‌اند؛ فرم‌ها و مودال‌ها دست‌نخورده‌اند.) */
@container appmain (max-width: 1200px) {
  .content .row > .col-6.col-xl-3,
  .content .row > .col-md-6.col-xl-4 { flex: 0 0 auto; width: 50%; }
}
@container appmain (max-width: 860px) {
  .content .row > .col-6.col-xl-3,
  .content .row > .col-md-6.col-xl-4,
  .content .row > .col-lg-6 { flex: 0 0 auto; width: 100%; }
}

/* ============================================================================
   بارگذاری گروهی شعب از اکسل (مودال #branchImportModal)
   همه‌ی رنگ‌ها از توکن‌های سیستم طراحی می‌آیند، پس تم تاریک خودش درست می‌شود.
   ========================================================================== */
.imp-drop {
  border: 2px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.imp-drop:hover, .imp-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.imp-drop.over { border-color: var(--primary); background: var(--primary-soft); transform: scale(1.01); }
.imp-drop.has-file { padding: 14px; }
.imp-drop-ic { color: var(--primary); margin-bottom: 6px; }
.imp-drop-t { font-weight: 500; margin-bottom: 2px; }

.imp-meta { line-height: 1.9; }

.imp-sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.imp-sum-item {
  flex: 1 1 110px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 10px 12px;
  text-align: center;
}
.imp-sum-v { font-size: 20px; font-weight: 700; line-height: 1.2; }
.imp-sum-l { font-size: 12px; color: var(--ink-2); }
.imp-sum-item.imp-create { background: var(--st-completed-soft); border-color: var(--st-completed-line); }
.imp-sum-item.imp-update { background: var(--st-progress-soft); border-color: var(--st-progress-line); }
.imp-sum-item.imp-skip   { background: var(--st-pending-soft);   border-color: var(--st-pending-line); }
.imp-sum-item.imp-error  { background: var(--danger-soft);       border-color: var(--danger-line); }

.imp-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.imp-badge.imp-create { background: var(--st-completed-soft); border-color: var(--st-completed-line); color: var(--st-completed); }
.imp-badge.imp-update { background: var(--st-progress-soft);  border-color: var(--st-progress-line);  color: var(--st-progress); }
.imp-badge.imp-skip   { background: var(--st-pending-soft);   border-color: var(--st-pending-line);   color: var(--st-pending); }
.imp-badge.imp-error  { background: var(--danger-soft);       border-color: var(--danger-line);       color: var(--danger); }

/* جدول گزارش می‌تواند صدها ردیف باشد؛ سقف ارتفاع و سربرگ چسبان از همان قاعده‌ی مشترک
   .modal .table-responsive می‌آید و این‌جا فقط کادر دور جدول اضافه می‌شود */
.imp-table { border: 1px solid var(--line); border-radius: 12px; }