@charset "UTF-8";
/* ============================================================
   SData Design System — دیزاین‌سیستم اس دیتا (AIRP)
   RTL-first · IRANYekan · توکنی · دارک‌مود · موبایل کارت-ردیفی
   بر اساس قرارداد فصل ۱۲ PRD
   ============================================================ */

/* ── فونت: IRANYekan XFaNum ── */
@font-face { font-family: "IRANYekan"; font-style: normal; font-weight: 300;
  src: url("../fonts/iranyekan/woff2/IRANYekanXFaNum-Light.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IRANYekan"; font-style: normal; font-weight: 400;
  src: url("../fonts/iranyekan/woff2/IRANYekanXFaNum-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IRANYekan"; font-style: normal; font-weight: 500;
  src: url("../fonts/iranyekan/woff2/IRANYekanXFaNum-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IRANYekan"; font-style: normal; font-weight: 600;
  src: url("../fonts/iranyekan/woff2/IRANYekanXFaNum-DemiBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IRANYekan"; font-style: normal; font-weight: 700;
  src: url("../fonts/iranyekan/woff2/IRANYekanXFaNum-Bold.woff2") format("woff2"); font-display: swap; }

/* ── توکن‌ها ── */
:root {
  --sdata-blue: #004b9b;
  --sdata-blue-rgb: 0 75 155;
  --sdata-navy: 3 4 94;

  --color-theme-1: 3 4 94;          /* ابتدای گرادیان هدر */
  --color-theme-2: 0 75 155;        /* انتهای گرادیان — آبی برند */
  --color-primary: 3 4 94;
  --color-secondary: 226 232 240;
  --color-success: 13 148 136;
  --color-info: 8 145 178;
  --color-warning: 202 138 4;
  --color-pending: 194 65 12;
  --color-danger: 185 28 28;
  --color-light: 241 245 249;
  --color-dark: 30 41 59;

  /* پالت خنثی */
  --line: rgb(226 232 240);
  --hairline: rgb(241 245 249);
  --tint: rgb(248 250 252);
  --text-1: #1e293b;
  --text-2: #64748b;
  --text-3: #94a3b8;
  --text-mid: rgb(51 65 85);
  --line-strong: rgb(203 213 225);
  --card-bg: #ffffff;
  --page-bg: #f1f5f9;

  --shadow-card: 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-pop: 0 12px 32px rgb(15 23 42 / 0.15);

  --sidebar-w: 275px;
  --sidebar-w-mini: 100px;
  --header-h: 64px;
}

.dark {
  --color-primary: 37 99 235;
  --page-bg: #070b14;
  --card-bg: #101827;
  --line: rgb(37 99 235 / 0.25);
  --hairline: rgb(51 65 85 / 0.5);
  --tint: #0d1524;
  --text-1: #ffffff;
  --text-2: #e2e8f0;
  --text-3: #94a3b8;
  --text-mid: #cbd5e1;
  --line-strong: #334155;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.4);

  --color-darkmode-300: 53 69 103;
  --color-darkmode-400: 48 61 93;
  --color-darkmode-600: 40 51 78;
  --color-darkmode-700: 35 45 69;
  --color-darkmode-800: 27 37 59;
}

/* ── ریست و پایه ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IRANYekan", Tahoma, sans-serif;
  font-size: 0.875rem;
  color: var(--text-1);
  background: var(--page-bg);
  min-height: 100vh;
}
a { color: inherit; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
.tabular-nums { font-variant-numeric: tabular-nums; }
[data-lucide] { stroke: currentColor; fill: none; }
.h-3\.5 { height: 0.875rem; } .w-3\.5 { width: 0.875rem; }
.h-4 { height: 1rem; } .w-4 { width: 1rem; }
.h-5 { height: 1.25rem; } .w-5 { width: 1.25rem; }

/* ════════════════ پوستهٔ پنل (Shell) — عیناً مطابق کاریلو ════════════════ */

.sd-shell { min-height: 100vh; }

/* ── هدر گرادیانی تمام‌عرض (۶۵px) ── */
.sd-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 55;
  height: 65px;
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0 1.1rem;
  background: linear-gradient(to left, rgb(var(--color-theme-1)), rgb(var(--color-theme-2)));
  color: #fff;
  box-shadow: 0 3px 14px rgb(3 4 94 / 0.28);
}
.dark .sd-header { background: linear-gradient(to left, #0a1228, #10254d); border-bottom: 1px solid rgb(37 99 235 / 0.3); box-shadow: 0 3px 14px rgb(0 0 0 / 0.5); }

/* بَج نشان — زمینهٔ روشن عمدی است.
   نشان اس دیتا آبی و مشکی است؛ روی سربرگ و سایدبارِ تیره، بخش مشکی
   عملاً ناپدید می‌شود. پس نشان داخل یک پلیت روشن می‌نشیند تا کامل
   خوانده شود، به‌جای اینکه نیمی از لوگو گم شود. */
.sd-logo-badge {
  display: flex; align-items: center; justify-content: center;
  height: 34px; width: 34px; flex: none;
  border-radius: 0.5rem; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  transition: transform 0.3s ease;
}
.sd-logo-badge:hover { transform: rotate(-8deg); }
.sd-logo-img {
  display: block; max-inline-size: 78%; max-block-size: 78%;
  inline-size: auto; block-size: auto; object-fit: contain;
}
.sd-header__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; }
.sd-header__brand-name { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.sd-header__brand-sub { font-size: 0.62rem; color: rgb(255 255 255 / 0.66); white-space: nowrap; }

/* دکمهٔ آیکنی هدر (hover حلقهٔ شیشه‌ای — الگوی icon_hover کاریلو) */
.sd-header__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  transition: background 0.2s ease;
}
.sd-header__icon-btn:hover { background: rgb(255 255 255 / 0.14); }
.sd-header__icon-btn [data-lucide] { width: 1.15rem; height: 1.15rem; stroke-width: 1.3; }

/* جستجوی هدر */
.sd-header__search {
  display: none; align-items: center; gap: 0.45rem;
  min-width: 15rem; max-width: 21rem; flex: 1;
  background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 0.55rem; padding: 0.38rem 0.7rem;
  color: rgb(255 255 255 / 0.85);
}
@media (min-width: 1024px) { .sd-header__search { display: flex; } }
.sd-header__search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: #fff; font-size: 0.78rem; font-family: inherit;
}
.sd-header__search input::placeholder { color: rgb(255 255 255 / 0.55); }

.sd-header__chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.15rem; padding: 0.2rem 0.7rem;
  border-radius: 9999px; border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.1); color: #fff;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.sd-header__chip:hover { background: rgb(255 255 255 / 0.2); }
.sd-header__chip [data-lucide] { width: 0.95rem; height: 0.95rem; }

/* آواتار ۳۶px با حلقه — الگوی کاریلو */
.sd-header__avatar {
  width: 36px; height: 36px; border-radius: 9999px; overflow: hidden; flex: none;
  border: 3px solid rgb(255 255 255 / 0.25); cursor: pointer;
  background: #e2e8f0; color: #475569;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sd-header__avatar [data-lucide] { width: 1.1rem; height: 1.1rem; stroke-width: 1.2; }

.sd-header__spacer { flex: 1; }

.sd-dropdown {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0;
  min-width: 14rem; z-index: 9999; display: none;
  background: var(--card-bg); color: var(--text-1);
  border: 1px solid transparent; border-radius: 0.5rem;
  box-shadow: 0 3px 10px #00000017; overflow: hidden;
  padding: 0.5rem;
}
.dark .sd-dropdown { background: rgb(var(--color-darkmode-600)); box-shadow: 0 3px 10px rgb(0 0 0 / 0.4); }
.sd-dropdown.is-open { display: block; animation: sd-pop 0.15s ease; }
@keyframes sd-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sd-dropdown__item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem; border-radius: 0.375rem;
  color: var(--text-1); text-decoration: none; font-size: 0.8125rem;
  border: 0; background: none; width: 100%; text-align: start; cursor: pointer;
  transition: background 0.3s ease;
}
.sd-dropdown__item:hover { background: rgb(226 232 240 / 0.6); }
.dark .sd-dropdown__item:hover { background: rgb(var(--color-darkmode-400)); }
.sd-dropdown__item.is-active { color: rgb(var(--color-primary)); font-weight: 700; }
.dark .sd-dropdown__item.is-active { color: #93c5fd; }
.sd-dropdown__item [data-lucide] { width: 1rem; height: 1rem; stroke-width: 1.2; }
.sd-dropdown__sep { height: 1px; background: rgb(226 232 240 / 0.6); margin: 0.5rem -0.5rem; }
.dark .sd-dropdown__sep { background: rgb(var(--color-darkmode-400)); }

/* ── سایدبار سفید کاریلو (۲۷۵px → ۱۰۰px) ── */
.sd-sidebar {
  position: fixed; top: 65px; bottom: 0; inset-inline-start: 0;
  width: 275px; z-index: 50;
  background: var(--card-bg);
  border-inline-end: 1px dotted rgb(148 163 184 / 0.6);
  display: flex; flex-direction: column;
  transition: width 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.dark .sd-sidebar { background: rgb(var(--color-darkmode-600)); border-inline-end-color: rgb(var(--color-darkmode-400)); }
.sd-shell.is-mini .sd-sidebar { width: 100px; }
.sd-shell.is-mini .sd-sidebar:hover { width: 275px; box-shadow: -6px 0 12px -4px #0000000f; }

.sd-sidebar__brand {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.1rem 0.5rem;
}
.sd-sidebar__org { font-size: 0.72rem; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sidebar__org-sub { font-size: 0.6rem; color: var(--text-3); white-space: nowrap; }
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-sidebar__brand { display: none; }

/* ستون عمودی: درختِ سیستمِ باز فضای باقی‌مانده را می‌گیرد و فهرست
   سیستم‌ها همیشه ته سایدبار می‌ماند. `min-height:0` لازم است وگرنه
   فرزندِ flex کوچک‌تر از محتوایش نمی‌شود و اسکرول داخلی کار نمی‌کند. */
.sd-sidebar__nav {
  flex: 1; min-block-size: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  padding: 0.4rem 1.1rem 1.25rem;
  scrollbar-width: thin; scrollbar-color: rgb(148 163 184 / 0.4) transparent;
}
/* اگر بیش از یک درخت باز شود (نباید، ولی منو داده است و داده می‌تواند
   غافلگیر کند) هرکدام سهم خودش را می‌گیرد و هیچ‌کدام بیرون نمی‌زند. */
.sd-sidebar__nav > .sd-nav-current {
  flex: 1 1 auto; min-block-size: 0;
  display: flex; flex-direction: column;
}
.sd-sidebar__nav > .sd-nav-switch { flex: 0 0 auto; }

/* آیتم منو — side-menu__link کاریلو */
.sd-nav-group { margin-bottom: 0.1rem; }
.sd-nav-group__head {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.55rem 0.65rem; border: 0; border-radius: 0.55rem;
  background: transparent; color: var(--text-mid); cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; text-align: start; font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}
.dark .sd-nav-group__head { color: #cbd5e1; }
.sd-nav-group__head:hover { background: rgb(226 232 240 / 0.5); }
.dark .sd-nav-group__head:hover { background: rgb(var(--color-darkmode-400) / 0.6); }
.sd-nav-group__head [data-lucide] { width: 1.25rem; height: 1.25rem; flex: none; stroke-width: 1; }
.sd-nav-group__head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-nav-group__chev { margin-inline-start: auto; transition: transform 0.2s ease; width: 1.1rem !important; height: 1.1rem !important; }
.sd-nav-group.is-open .sd-nav-group__chev { transform: rotate(180deg); }
.sd-nav-group.is-open > .sd-nav-group__head { color: rgb(var(--color-primary)); }
.dark .sd-nav-group.is-open > .sd-nav-group__head { color: #93c5fd; }
.sd-nav-group__items { display: none; padding: 0.1rem 0 0.2rem; }
.sd-nav-group.is-open .sd-nav-group__items { display: block; }

/* جستجوی منو — هم درخت سیستم جاری را می‌گردد هم کلید تعویض سیستم‌ها */
/* بدون این، display:flex آیتم‌ها بر [hidden] مرورگر غلبه می‌کند و فیلتر
   جستجو در DOM اعمال می‌شود ولی هیچ‌چیز از دید کاربر پنهان نمی‌شود. */
.sd-sidebar__nav [hidden] { display: none !important; }
.sd-nav-search {
  position: relative; display: flex; align-items: center; gap: 0.45rem;
  margin-block: 0.15rem 0.55rem; padding-inline: 0.6rem;
  border: 1px solid var(--line); border-radius: 0.55rem;
  background: var(--tint); height: 2.1rem;
}
.dark .sd-nav-search { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.09); }
.sd-nav-search i { width: 0.95rem; height: 0.95rem; color: var(--text-3); flex: none; }
.sd-nav-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 12.5px; color: var(--text-1);
}
.dark .sd-nav-search input { color: #e2e8f0; }
.sd-nav-search input::placeholder { color: var(--text-3); }
.sd-nav-search input::-webkit-search-cancel-button { display: none; }
.sd-nav-search__clear {
  border: 0; background: transparent; cursor: pointer; flex: none;
  color: var(--text-3); font-size: 1.05rem; line-height: 1; padding: 0 0.15rem;
}
.sd-nav-search__clear:hover { color: var(--text-1); }

/* ابزارهای داخل نوار جستجو — ویرایش منو، تأیید، لغو.
   کاری که کاربر گاه‌به‌گاه می‌کند و ردیف کاملِ همیشه‌حاضر برایش،
   ارتفاع منو را از آیتم‌های واقعی می‌گرفت. */
.sd-nav-search__tools { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.sd-nav-search__tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45rem; height: 1.45rem; padding: 0; flex: none;
  border: 0; border-radius: 0.35rem; cursor: pointer;
  background: transparent; color: var(--text-3);
  transition: background 0.15s ease, color 0.15s ease;
}
.sd-nav-search__tool:hover { background: rgb(148 163 184 / 0.18); color: var(--text-1); }
.sd-nav-search__tool:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.45); outline-offset: 1px; }
.sd-nav-search__tool i, .sd-nav-search__tool svg { width: 0.85rem; height: 0.85rem; }
.sd-nav-search__tool.is-ok { color: #059669; }
.sd-nav-search__tool.is-ok:hover { background: rgb(16 185 129 / 0.18); }
.sd-nav-search__tool.is-danger { color: #e11d48; }
.sd-nav-search__tool.is-danger:hover { background: rgb(244 63 94 / 0.16); }
.dark .sd-nav-search__tool { color: #94a3b8; }
.dark .sd-nav-search__tool:hover { background: rgb(255 255 255 / 0.08); color: #e2e8f0; }
/* در حالت ویرایش، قلم جایش را به تأیید/لغو می‌دهد — نوار پهن‌تر نمی‌شود
   چون هر سه دکمه یک اندازه‌اند و هم‌زمان بیش از دو تا دیده نمی‌شود. */
.sd-nav-noresult {
  padding: 0.6rem 0.65rem; font-size: 12px; color: var(--text-3); text-align: center;
}

/* ── سایدبار دوسطحی (الگوی سپیدار): سیستم جاری بالا، تعویض سیستم پایین ── */
.sd-nav-current {
  margin-block: 0.5rem 0.15rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--line);
}
.dark .sd-nav-current { border-block-end-color: rgb(255 255 255 / 0.07); }
.dark .sd-nav-current__body {
  background:
    linear-gradient(var(--card-bg) 30%, rgb(0 0 0 / 0)) center top / 100% 1rem no-repeat local,
    linear-gradient(rgb(0 0 0 / 0), var(--card-bg) 70%) center bottom / 100% 1rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0)) center top / 100% 0.6rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0)) center bottom / 100% 0.6rem no-repeat scroll;
}
.sd-nav-current__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.65rem; margin-inline-start: 0;
  font-size: 13.5px; font-weight: 700; color: rgb(var(--color-primary));
  white-space: nowrap;
}
.dark .sd-nav-current__head { color: #93c5fd; }
.sd-nav-current__head i { width: 1.15rem; height: 1.15rem; }
.sd-nav-current__head .sd-nav-switch__n { margin-inline-start: auto; }

/* ناحیهٔ ویژگی‌های سیستم باز: پنج آیتم دیده می‌شود، بقیه اسکرول.
   بدون سقف، «مالی» با ۳۵ آیتم بقیهٔ سیستم‌ها را از صفحه بیرون می‌راند
   و کاربر برای رفتن به سیستم دیگر باید کل فهرست را رد کند. */
.sd-nav-current__body {
  /* ارتفاع از فضای واقعیِ سایدبار می‌آید، نه از عددی ثابت.
     پیش‌تر روی «۵ آیتم» قفل بود: سیستمی با ۱۱ آیتم شش‌تایش را پنهان
     می‌کرد حتی وقتی نیمِ سایدبار خالی بود — و کاربر فکر می‌کرد آن
     بخش‌ها اصلاً وجود ندارند. حداقل پنج آیتم تضمین می‌شود تا روی
     صفحهٔ کوتاه هم درخت به یک نوار باریک تبدیل نشود. */
  --sd-nav-row: 2.05rem;          /* ارتفاع تقریبی هر آیتم */
  --sd-nav-visible: 5;
  /* `min-block-size: 0` اجباری است، نه سلیقه‌ای: فرزندِ flex به‌طور
     پیش‌فرض کوچک‌تر از محتوایش نمی‌شود، و اگر کفِ ارتفاع بگذاریم روی
     سایدبارِ کوتاه از قاب خودش بیرون می‌زند و روی بقیهٔ منو می‌افتد.
     رشد تا فضای موجود از `flex-grow` می‌آید و کف، از `flex-basis`. */
  flex: 1 1 calc(var(--sd-nav-row) * var(--sd-nav-visible) + 1.6rem);
  min-block-size: 0;
  overflow-y: auto;
  /* سایهٔ اسکرول — تنها نشانهٔ «ادامه دارد».
     روی مک نوار اسکرول تا وقتی کاربر اسکرول نکند نامرئی است، پس فهرستِ
     بریده «تمام‌شده» به‌نظر می‌رسید و کاربر فکر می‌کرد آن بخش‌ها وجود
     ندارند. `background-attachment: local` برای لایه‌های سفید یعنی با
     محتوا حرکت کنند و `scroll` برای سایه‌ها یعنی سرجایشان بمانند —
     نتیجه: سایه فقط وقتی دیده می‌شود که واقعاً چیزی بیرون از دید باشد،
     و در دو سرِ فهرست خودبه‌خود محو می‌شود. بدون یک خط جاوااسکریپت. */
  background:
    linear-gradient(var(--card-bg) 30%, rgb(255 255 255 / 0)) center top / 100% 1rem no-repeat local,
    linear-gradient(rgb(255 255 255 / 0), var(--card-bg) 70%) center bottom / 100% 1rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(15 23 42 / 0.16), rgb(15 23 42 / 0)) center top / 100% 0.6rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(15 23 42 / 0.16), rgb(15 23 42 / 0)) center bottom / 100% 0.6rem no-repeat scroll;
  overscroll-behavior: contain;   /* اسکرول به بدنهٔ صفحه سرریز نکند */
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184 / 0.5) transparent;
  scrollbar-gutter: stable;
  /* محوشدگی لبه‌ها: نشانهٔ بصری «ادامه دارد» بدون افزودن هیچ عنصر */
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.6rem,
              #000 calc(100% - 0.9rem), transparent 100%);
}
.sd-nav-current__body::-webkit-scrollbar { inline-size: 6px; }
.sd-nav-current__body::-webkit-scrollbar-track { background: transparent; }
.sd-nav-current__body::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.45); border-radius: 999px;
}
.sd-nav-current__body::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / 0.75); }
.dark .sd-nav-current__body::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.22); }
/* اسکرول‌بار فقط وقتی نشانه می‌دهد که ماوس داخل ناحیه است — آرام‌تر */
.sd-nav-current__body:not(:hover)::-webkit-scrollbar-thumb { background: rgb(148 163 184 / 0.22); }
@media (prefers-reduced-motion: no-preference) {
  .sd-nav-current__body { scroll-behavior: smooth; }
}

.sd-nav-switch { margin-block-start: 0.7rem; padding-block-start: 0.55rem; }
.sd-nav-switch__label {
  padding-inline: 0.65rem; margin-block-end: 0.3rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-3);
}
.sd-nav-switch__item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.44rem 0.65rem; border-radius: 0.5rem;
  color: var(--text-mid); text-decoration: none;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dark .sd-nav-switch__item { color: #cbd5e1; }
.sd-nav-switch__item:hover { background: rgb(226 232 240 / 0.5); color: var(--text-1); }
/* سیستم باز در فهرست پایین هم برجسته می‌شود — وگرنه کاربر نمی‌داند
   ویژگی‌های بالا مال کدام سیستم است. */
.sd-nav-switch__item.is-current {
  background: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary)); font-weight: 700;
}
.dark .sd-nav-switch__item.is-current { background: rgb(147 197 253 / 0.14); color: #93c5fd; }
.dark .sd-nav-switch__item:hover { background: rgb(var(--color-darkmode-400) / 0.6); color: #fff; }
.sd-nav-switch__item i { width: 1rem; height: 1rem; opacity: 0.75; }
.sd-nav-switch__n {
  margin-inline-start: auto; font-size: 10.5px; font-weight: 600;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}

/* سرتیتر زیربخش سایدبار — الگوی سپیدار/راهکاران: عملیات / فهرست / تعاریف */
.sd-nav-section {
  margin-inline-start: 1.1rem;
  margin-block: 0.55rem 0.18rem;
  padding-inline: 0.65rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-3); text-transform: none; white-space: nowrap;
}
.sd-nav-section:first-child { margin-block-start: 0.15rem; }
.dark .sd-nav-section { color: #64748b; }

.sd-nav-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.48rem 0.65rem; margin-inline-start: 1.1rem;
  border-radius: 0.55rem; color: var(--text-mid); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.dark .sd-nav-item { color: #cbd5e1; }
.sd-nav-item:hover { background: rgb(226 232 240 / 0.5); color: var(--text-1); }
.dark .sd-nav-item:hover { background: rgb(var(--color-darkmode-400) / 0.6); color: #fff; }
.sd-nav-item.is-active {
  background: rgb(var(--color-primary) / 0.08);
  color: rgb(var(--color-primary)); font-weight: 700;
  box-shadow: inset 3px 0 0 rgb(var(--color-primary));
}
.dark .sd-nav-item.is-active { color: #93c5fd; box-shadow: inset 3px 0 0 #60a5fa; background: rgb(37 99 235 / 0.15); }
.sd-nav-item [data-lucide] { width: 1rem; height: 1rem; flex: none; stroke-width: 1; opacity: 0.8; }
.sd-nav-item span { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }

/* ── نوار ابزار ویرایش منو ── */
.sd-nav-toolbar {
  display: flex; align-items: center; gap: 0.3rem;
  margin: 0.15rem 0 0.45rem; padding-inline: 0.15rem;
}
.sd-nav-toolbar__btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.55rem; border: 0; border-radius: 0.45rem;
  background: rgb(148 163 184 / 0.12); color: var(--text-2);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sd-nav-toolbar__btn:hover { background: rgb(148 163 184 / 0.22); color: var(--text-1); }
.sd-nav-toolbar__btn i, .sd-nav-toolbar__btn svg { width: 0.9rem; height: 0.9rem; flex: none; }
.sd-nav-toolbar__btn.is-ok { background: rgb(16 185 129 / 0.14); color: #059669; }
.sd-nav-toolbar__btn.is-ok:hover { background: rgb(16 185 129 / 0.24); }
.sd-nav-toolbar__btn.is-danger { background: rgb(244 63 94 / 0.12); color: #e11d48; }
.sd-nav-toolbar__btn.is-danger:hover { background: rgb(244 63 94 / 0.2); }
.dark .sd-nav-toolbar__btn { background: rgb(255 255 255 / 0.06); color: #94a3b8; }
.dark .sd-nav-toolbar__btn:hover { background: rgb(255 255 255 / 0.1); color: #e2e8f0; }
.dark .sd-nav-toolbar__btn.is-ok { background: rgb(16 185 129 / 0.18); color: #34d399; }
.dark .sd-nav-toolbar__btn.is-danger { background: rgb(244 63 94 / 0.16); color: #fb7185; }

/* ── پین‌شده‌ها ── */
.sd-nav-pins {
  margin-block: 0.35rem 0.55rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px dashed rgb(148 163 184 / 0.45);
}
.dark .sd-nav-pins { border-block-end-color: rgb(255 255 255 / 0.1); }
.sd-nav-pins__label {
  padding-inline: 0.65rem; margin-block-end: 0.2rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-3);
}
.sd-nav-pins .sd-nav-item { margin-inline-start: 0; }
.sd-nav-item.is-pinned-src { opacity: 0.92; }
.sd-nav-item__pin,
.sd-nav-item__grip {
  display: none;
  align-items: center; justify-content: center;
  flex: none; width: 1.25rem; height: 1.25rem; padding: 0; border: 0;
  border-radius: 0.35rem; background: transparent; color: var(--text-3);
  cursor: pointer;
}
.sd-nav-item__grip { cursor: grab; color: rgb(148 163 184 / 0.85); }
.sd-nav-item__grip:active { cursor: grabbing; }
.sd-nav-item__pin.is-on { color: #d97706; }
.dark .sd-nav-item__pin.is-on { color: #fbbf24; }
.sd-nav-item__pin:hover, .sd-nav-item__grip:hover {
  background: rgb(148 163 184 / 0.18); color: var(--text-1);
}

/* حالت ویرایش: نشانه‌های درگ و پین + لرزش ملایم */
.sd-sidebar__nav.is-editing .sd-nav-item__pin { display: inline-flex; }
.sd-sidebar__nav.is-editing .is-sortable .sd-nav-item__grip { display: inline-flex; }
.sd-sidebar__nav.is-editing .sd-nav-item,
.sd-sidebar__nav.is-editing .sd-nav-switch__item {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.sd-sidebar__nav.is-editing .sd-nav-item.is-dragging,
.sd-sidebar__nav.is-editing .sd-nav-switch__item.is-dragging {
  opacity: 0.35;
  cursor: grabbing;
}
.sd-nav-placeholder {
  height: 2.05rem;
  margin: 0.1rem 0.65rem 0.1rem 1.1rem;
  border-radius: 0.55rem;
  border: 1.5px dashed rgb(var(--color-primary) / 0.55);
  background: rgb(var(--color-primary) / 0.08);
  pointer-events: none;
}
.sd-nav-pins .sd-nav-placeholder,
.sd-nav-switch .sd-nav-placeholder { margin-inline-start: 0.65rem; }
.sd-nav-ghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.18);
  background: var(--bg-1, #fff);
  border-radius: 0.55rem;
  width: var(--sd-ghost-w, 220px);
  transform: translate(-50%, -50%) rotate(1.5deg);
}
.dark .sd-nav-ghost { background: rgb(var(--color-darkmode-600)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.45); }
.sd-sidebar__nav.is-sorting .sd-nav-item,
.sd-sidebar__nav.is-sorting .sd-nav-switch__item { animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .sd-sidebar__nav.is-editing:not(.is-sorting) .sd-nav-item,
  .sd-sidebar__nav.is-editing:not(.is-sorting) .sd-nav-switch__item {
    animation: sd-nav-wiggle 0.55s ease-in-out infinite;
  }
  .sd-sidebar__nav.is-editing:not(.is-sorting) .sd-nav-item:nth-child(even),
  .sd-sidebar__nav.is-editing:not(.is-sorting) .sd-nav-switch__item:nth-child(even) {
    animation-delay: 0.12s;
  }
}
@keyframes sd-nav-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-0.7deg) translateY(-0.5px); }
  75% { transform: rotate(0.7deg) translateY(0.5px); }
}

.sd-nav-divider {
  margin: 0.6rem 0.65rem 0.25rem; padding-top: 0.55rem;
  border-top: 1px dotted rgb(148 163 184 / 0.5);
  font-size: 0.68rem; font-weight: 600; color: var(--text-3);
}

/* حالت مینی: فقط آیکن‌ها (تا hover) */
/* حالت جمع‌شده: فقط آیکون. قواعد قبلی به کلاس‌های نسخهٔ پیشین سایدبار
   (sd-nav-group__*) اشاره می‌کردند که دیگر وجود ندارند، پس عنوان بخش‌ها،
   نام سیستم و جعبهٔ جستجو همچنان دیده می‌شدند و نوار به‌هم‌ریخته بود. */
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-item span,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-current__head span,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-switch__item span,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-section,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-switch__label,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-pins__label,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-toolbar,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-search input,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-search__clear,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-noresult,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-divider { display: none; }
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-item,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-switch__item,
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-current__head {
  margin-inline-start: 0;
  justify-content: center;
  padding-inline: 0;
}
/* جعبهٔ جستجو به یک دکمهٔ ذره‌بین جمع می‌شود، نه اینکه کادر خالی بماند */
.sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-search {
  justify-content: center;
  padding-inline: 0;
}

/* ── ناحیهٔ اصلی ── */
.sd-main {
  min-width: 0;
  margin-inline-start: 275px;
  margin-top: 65px;
  transition: margin 0.3s ease;
  display: flex; flex-direction: column;
  min-height: calc(100vh - 65px);
  background: var(--page-bg);
}
.sd-shell.is-mini .sd-main { margin-inline-start: 100px; }
/* صفحه‌های بی‌سایدبار (مثل «دسترسی بسته») — وگرنه جای خالی ۲۷۵ پیکسلی
   می‌ماند. `!important` لازم است تا حالت is-mini هم آن را برنگرداند. */
.sd-shell--no-sidebar .sd-main { margin-inline-start: 0 !important; }

.sd-content { padding: 1.25rem; flex: 1; }
@media (min-width: 640px) { .sd-content { padding: 1.4rem 1.6rem; } }

/* ── موبایل: off-canvas + backdrop سیاه کاریلو ── */
.sd-sidebar-overlay { position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / 0.8); display: none; opacity: 0; transition: opacity 0.3s ease; }
@media (max-width: 1279px) {
  .sd-sidebar { transform: translateX(100%); width: 275px !important; top: 0; padding-top: 0; z-index: 60; }
  .sd-shell.is-mobile-open .sd-sidebar { transform: none; box-shadow: -8px 0 24px rgb(0 0 0 / 0.25); }
  .sd-shell.is-mobile-open .sd-sidebar-overlay { display: block; opacity: 1; }
  .sd-main { margin-inline-start: 0 !important; }
  .sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-group__head span,
  .sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-item span,
  .sd-shell.is-mini .sd-sidebar:not(:hover) .sd-nav-group__chev { display: initial; }
  .sd-shell.is-mini .sd-sidebar .sd-nav-item { margin-inline-start: 1.1rem; justify-content: flex-start; }
}

/* ════════════════ کارت صفحه ════════════════ */

.survey-public-page { width: 100%; }
.survey-public-card {
  width: 100%; max-width: 100%; overflow: visible; box-sizing: border-box;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
@media (min-width: 640px) { .survey-public-card { padding: 1.25rem 1.5rem; } }

/* هدر صفحه */
.sd-page-head { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.sd-page-head h1 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--text-1); }
.sd-page-head p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--text-2); }

/* ════════════════ سکشن ════════════════ */

.sp-section { margin-bottom: 1.5rem; }
.sp-section-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card-bg); }
/* همان دام sw-card: پنل، فهرست کشویی بیرون‌زده را می‌بُرد. */
.sp-section-panel:has(.sales-filter-tom-field) { overflow: visible; }
.sp-section-header {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--hairline);
  background: linear-gradient(to left, var(--tint) 0%, var(--card-bg) 100%);
}
.sp-section-header-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; border-radius: 0.625rem;
  border: 1px solid rgb(var(--color-primary) / 0.15);
  background: rgb(var(--color-primary) / 0.08);
  color: rgb(var(--color-primary));
}
.dark .sp-section-header-icon { color: #93c5fd; border-color: rgb(37 99 235 / 0.4); background: rgb(37 99 235 / 0.15); }
.sp-section-header-icon [data-lucide] { width: 1.05rem; height: 1.05rem; }
.sp-section-title { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--text-1); }
.sp-section-desc { margin: 0.2rem 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--text-2); }
.sp-section-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.1rem 1.1rem; }

/* ════════════════ KPI ════════════════ */

.sp-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1280px) { .sp-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sp-kpi-grid { grid-template-columns: 1fr; } }

.sp-sales-kpi {
  --kpi-accent: #0c4a6e;
  position: relative; overflow: hidden;
  display: flex; flex-direction: row; align-items: center; gap: 0.75rem;
  border-radius: 0.75rem; border: 1px solid var(--line);
  border-inline-start: 3px solid var(--kpi-color);
  background: var(--card-bg); padding: 0.9rem 1rem;
  text-align: right; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.sp-sales-kpi:hover { border-color: color-mix(in srgb, var(--kpi-accent) 40%, var(--line)); transform: translateY(-1px); }
a.sp-sales-kpi.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-accent) 35%, transparent); }
.sp-sales-kpi--month  { --kpi-accent: #0c4a6e; }
.sp-sales-kpi--year   { --kpi-accent: #4f46e5; }
.sp-sales-kpi--target { --kpi-accent: #0d9488; }
.sp-sales-kpi--gap    { --kpi-accent: #d97706; }
.sp-sales-kpi--violet { --kpi-accent: #7c3aed; }
.sp-sales-kpi--rose   { --kpi-accent: #e11d48; }
.sp-sales-kpi--teal   { --kpi-accent: #0f766e; }
.dark .sp-sales-kpi--month  { --kpi-accent: #60a5fa; }
.dark .sp-sales-kpi--year   { --kpi-accent: #818cf8; }
.dark .sp-sales-kpi--target { --kpi-accent: #2dd4bf; }
.dark .sp-sales-kpi--gap    { --kpi-accent: #fbbf24; }
.dark .sp-sales-kpi--violet { --kpi-accent: #c084fc; }
.dark .sp-sales-kpi--rose   { --kpi-accent: #fb7185; }
.dark .sp-sales-kpi--teal   { --kpi-accent: #34d399; }
.sp-sales-kpi-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.55rem;
  background: color-mix(in srgb, var(--kpi-accent) 16%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 22%, #e2e8f0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
  color: var(--kpi-accent);
}
.dark .sp-sales-kpi-icon {
  background: color-mix(in srgb, var(--kpi-accent) 22%, #0b1220);
  border-color: color-mix(in srgb, var(--kpi-accent) 35%, #334155);
  box-shadow: none;
}
.sp-sales-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.sp-sales-kpi-value { font-size: 1.2rem; line-height: 1.25; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--kpi-accent); }
.sp-sales-kpi-label { font-size: 0.75rem; line-height: 1.4; color: var(--text-2); font-weight: 500; }

/* ════════════════ تولبار و فیلترها ════════════════ */

.sp-ops-toolbar { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
.sp-ops-filters-box {
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--tint); padding: 0.75rem;
  position: relative; overflow: visible;
}
.sp-ops-filters-box__title { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-1); }
.sp-ops-filters-box__label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--text-2); }
.sp-ops-filters.sp-ops-filters--row {
  display: flex; flex-wrap: nowrap; align-items: flex-end;
  gap: 0.65rem 0.75rem; width: 100%; overflow: visible;
  border: 0; background: transparent; padding: 0; margin: 0;
}
.sp-ops-filters.sp-ops-filters--row > label { flex: 1 1 0; min-width: 0; margin: 0; display: block; }
.sp-ops-filters.sp-ops-filters--row > label:has(input[type="search"]) { flex: 1.35 1 0; }
/* استایل پایهٔ ورودی — عمدا بدون نیاز به کلاس یا ظرف خاص.
   پیش‌تر فقط ورودیِ داخل .sp-ops-filters استایل می‌گرفت و ۳۳ ورودی در
   ۱۹ قالب (از جمله «مقدار هدف» شاخص‌ها و فرم ورود) با ظاهر پیش‌فرض
   مرورگر رندر می‌شدند. ظرف‌های خاص همچنان می‌توانند بازنویسی کنند. */
.sd-content input[type="text"],
.sd-content input[type="search"],
.sd-content input[type="number"],
.sd-content input[type="tel"],
.sd-content input[type="email"],
.sd-content input[type="password"],
.sd-content input[type="date"],
.sd-content input:not([type]),
.sd-content textarea,
.sp-ops-filters input, .sp-ops-filters textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.4rem 0.55rem; font-size: 0.8125rem; background: var(--card-bg); color: var(--text-1);
}
/* ورودی‌هایی که خودشان قاب دارند یا داخل ویجت‌اند، دست‌نخورده بمانند. */
.sd-content .ts-control input,
.sd-content .sd-nav-search input,
.sd-content input[type="checkbox"],
.sd-content input[type="radio"] {
  width: auto; border: 0; border-radius: 0; padding: 0; background: transparent;
}
.dark .sd-content input[type="text"], .dark .sd-content input[type="search"],
.dark .sd-content input[type="number"], .dark .sd-content input[type="tel"],
.dark .sd-content input[type="email"], .dark .sd-content input[type="password"],
.dark .sd-content input:not([type]), .dark .sd-content textarea,
.dark .sp-ops-filters input, .dark .sp-ops-filters textarea {
  background: rgb(var(--color-darkmode-800)); border-color: var(--line-strong); color: #fff;
}
/* ── select خام ──
   محصول همیشه select را داخل Tom Select می‌پیچید، پس هیچ استایل پایه‌ای
   برایش نوشته نشده بود و هر select بدون آن پوشش، لخت و ناهمخوان رندر
   می‌شد. این قاعده همان ظاهر ورودی‌ها را می‌دهد؛ جایی که Tom Select
   سوار می‌شود، خودش `select` را پنهان می‌کند و این بی‌اثر می‌ماند. */
.sd-content select,
.sp-ops-filters select {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.4rem 2rem 0.4rem 0.55rem; font-size: 0.8125rem;
  background: var(--card-bg); color: var(--text-1);
  cursor: pointer; appearance: none;
  /* فلش سفارشی تا در هر دو تم یک شکل باشد؛ فلشِ پیش‌فرض سیستم در تم
     تیره سیاه می‌ماند و دیده نمی‌شود. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.6rem center;
}
.dark .sd-content select, .dark .sp-ops-filters select {
  background-color: rgb(var(--color-darkmode-800));
  border-color: var(--line-strong); color: #fff;
}
.sd-content select:focus, .sp-ops-filters select:focus {
  outline: none; border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
}
.sd-content select:disabled { opacity: .6; cursor: not-allowed; }
/* select هایی که Tom Select تحویل گرفته، خودشان پنهان‌اند — ولی محض
   احتیاط قاب دوم نگیرند. */
.sd-content .ts-wrapper select, .sd-content select.tomselected { background-image: none; }

.sd-content input:focus, .sd-content textarea:focus,
.sp-ops-filters input:focus {
  outline: none; border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
}
.sd-content .ts-control input:focus { box-shadow: none; }
@media (max-width: 767px) {
  .sp-ops-filters.sp-ops-filters--row { flex-wrap: wrap; }
  .sp-ops-filters.sp-ops-filters--row > label { flex: 1 1 calc(50% - 0.4rem); }
  .sp-ops-filters.sp-ops-filters--row > label:has(input[type="search"]) { flex: 1 1 100%; }
}
@media (max-width: 479px) { .sp-ops-filters.sp-ops-filters--row > label { flex: 1 1 100%; } }

/* ── Tom Select ── */
.sales-filter-tom-field { position: relative; width: 100%; overflow: visible; }
.sales-filter-tom-field:has(.dropdown-active),
.sales-filter-tom-field:has(.ts-wrapper.focus) { z-index: 10052; }
.sales-filter-tom-field .tom-select.ts-wrapper,
.sales-filter-tom-field .ts-wrapper {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem; background: var(--card-bg);
}
.dark .sales-filter-tom-field .ts-wrapper { background: rgb(var(--color-darkmode-800)); border-color: var(--line-strong); }
.sales-filter-tom-field .ts-control {
  min-height: 38px; font-size: 0.8125rem; border: 0; background: transparent;
  padding-block: 0.35rem; color: var(--text-1); display: flex; align-items: center;
}
.sales-filter-tom-field .ts-control > input { margin-inline: 0 !important; }
.dark .sales-filter-tom-field .ts-control, .dark .ts-control input { color: #fff; }
.sales-filter-tom-field .ts-dropdown {
  z-index: 10050; border-radius: 0.5rem; box-shadow: var(--shadow-pop);
  border: 1px solid var(--line); background: var(--card-bg); color: var(--text-1);
  font-size: 0.8125rem; direction: rtl; text-align: start;
}
.sales-filter-tom-field .ts-dropdown .option { padding: 0.45rem 0.65rem; }

/* فلش کشویی — تم وندورشدهٔ Tom Select قاعدهٔ پایهٔ کارت را ندارد و تنها
   قاعدهٔ RTL موجود سلکتور شکسته‌ای دارد (.ts-control داخل .ts-control که
   هرگز وجود ندارد). نتیجه: هیچ کشویی فلش نداشت و از یک ورودی متنی
   قابل تشخیص نبود. */
.ts-wrapper.single .ts-control {
  padding-inline: 0.65rem 1.75rem;   /* شروع: فاصله از لبه · پایان: جای فلش */
  position: relative;
}
/* Tom Select کلاس rtl را روی wrapper می‌گذارد، نه روی control. پس گاردِ
   وندور «.ts-control:not(.rtl)» در RTL هم فعال می‌شود و یک padding-right
   مخصوص LTR اعمال می‌کند که متغیرهایش (--ts-pr-*) تعریف نشده‌اند؛ مقدار
   نامعتبر به صفر می‌رسد و متن به لبهٔ راست می‌چسبد. این قاعده همان خاصیت
   فیزیکی را با specificity بالاتر پس می‌گیرد. */
.ts-wrapper.rtl .ts-control:not(.rtl) { padding-right: 0.65rem !important; }
.ts-wrapper.single .ts-control::after {
  content: ""; position: absolute; inset-inline-end: 0.7rem; inset-block-start: 50%;
  width: 0.42rem; height: 0.42rem; margin-block-start: -0.28rem;
  /* حاشیه عمداً فیزیکی است نه منطقی: جهت فلش هندسی است و نباید با RTL
     برعکس شود. با border-inline-end در RTL فلش به چپ اشاره می‌کرد. */
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg); transition: transform .15s ease;
  pointer-events: none;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  transform: rotate(-135deg); margin-block-start: -0.1rem;
}
.ts-wrapper.single.disabled .ts-control::after { opacity: .4; }

/* شعاع داخلی با قاب بیرونی هم‌خوان شود — پیش‌تر قاب ۶px و کنترل ۳px بود. */
.sales-filter-tom-field .ts-control { border-radius: 0.375rem; }
.sales-filter-tom-field .ts-control > .item { padding-inline: 0; margin-inline: 0; }

/* حالت فوکوس مثل بقیهٔ ورودی‌ها، نه حاشیهٔ خاکستری وندور. */
.sales-filter-tom-field .ts-wrapper.focus,
.sales-filter-tom-field .ts-wrapper.dropdown-active {
  border-color: rgb(var(--color-primary) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1);
}
.sales-filter-tom-field .ts-dropdown .option.active {
  background: rgb(var(--color-primary) / 0.12); color: rgb(var(--color-primary) / 1);
}
.dark .sales-filter-tom-field .ts-dropdown .option.active { color: #93c5fd; }
.sales-filter-tom-field > select:not(.tomselected) {
  width: 100%; min-height: 38px; border: 1px solid var(--line);
  border-radius: 0.375rem; background: var(--card-bg); font-size: 0.8125rem; color: var(--text-1);
  padding: 0.35rem 0.5rem;
}
.dark .sales-filter-tom-field > select:not(.tomselected) { background: rgb(var(--color-darkmode-800)); border-color: var(--line-strong); }
/* clipping fix زنجیره */
.sp-ops-filters, .sp-filters, .sp-ops-toolbar, .sp-ops-panel,
.sp-section-panel:has(.sales-filter-tom-field),
.sp-section-body:has(.sales-filter-tom-field),
.field-grid:has(.sales-filter-tom-field) { overflow: visible; }
.sp-section-panel:has(.dropdown-active),
.sp-section-panel:has(.ts-wrapper.focus) { position: relative; z-index: 40; }
body > .ts-dropdown { z-index: 10080 !important; position: absolute !important; right: auto !important; }

/* ════════════════ تب و دکمه ════════════════ */

.sp-ops-tabs {
  display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto;
  margin-bottom: 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.65rem;
}
.sp-ops-tab {
  white-space: nowrap; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.45rem 0.9rem; font-size: 0.8125rem; font-weight: 600;
  color: var(--text-mid); background: var(--card-bg); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sp-ops-tab:hover { border-color: rgb(var(--color-primary) / 0.3); }
.sp-ops-tab.is-active {
  border-color: rgb(var(--color-primary) / 0.35);
  background: rgb(var(--color-primary) / 0.08);
  color: rgb(var(--color-primary));
}
.dark .sp-ops-tab.is-active { color: #93c5fd; background: rgb(37 99 235 / 0.18); }

.sp-ops-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sp-ops-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-radius: 0.375rem; padding: 0.45rem 0.8rem; font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sp-ops-btn:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.45); outline-offset: 2px; }
.sp-ops-btn--primary   { border: 1px solid rgb(var(--color-primary) / 0.25); background: rgb(var(--color-primary)); color: #fff; }
.sp-ops-btn--primary:hover { filter: brightness(1.12); }
.dark .sp-ops-btn--primary { background: #2563eb; box-shadow: 0 0 16px rgb(37 99 235 / 0.35); }
.sp-ops-btn--secondary { border: 1px solid var(--line); background: var(--card-bg); color: var(--text-mid); }
.sp-ops-btn--secondary:hover { border-color: var(--line-strong); }
.dark .sp-ops-btn--secondary { background: #1e3a5f; border-color: #60a5fa; color: #e2e8f0; }
.sp-ops-btn--ghost { border: 1px solid var(--line); background: var(--card-bg); color: rgb(var(--color-primary)); padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.dark .sp-ops-btn--ghost { background: rgb(255 255 255 / 0.08); color: #93c5fd; border-color: var(--line-strong); }
.sp-ops-btn--danger { border: 1px solid rgb(254 202 202); background: rgb(254 242 242); color: rgb(185 28 28); }
.dark .sp-ops-btn--danger { background: rgb(185 28 28 / 0.18); border-color: rgb(185 28 28 / 0.5); color: #fb7185; }
.sp-ops-btn--details { padding: 0.25rem 0.5rem; font-size: 0.75rem; background: rgb(124 58 237 / 0.14); border: 1px solid rgb(167 139 250 / 0.7); color: #5b21b6; }
.dark .sp-ops-btn--details { color: #c084fc; background: rgb(124 58 237 / 0.2); }
.sp-ops-btn--icon { justify-content: center; padding: 0.35rem; min-width: 2rem; min-height: 2rem; line-height: 0; }
.sp-ops-btn--compact { padding: 0.25rem 0.55rem; font-size: 0.75rem; }
.sp-ops-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ════════════════ جدول ════════════════ */

.survey-table-panel {
  border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden;
  background: var(--card-bg);
  container-type: inline-size; container-name: pf10-table-panel;
}
.survey-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.survey-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: auto; }
.survey-table th, .survey-table td {
  border: 1px solid var(--line);
  padding: 0.3rem 0.45rem; vertical-align: middle;
  font-size: 0.75rem; line-height: 1.35; color: var(--text-1);
}
.survey-table td { text-align: center; }
.survey-table td:first-child { color: var(--text-mid); }
/* سربرگ جدول یکسان برای همهٔ صفحات.
   پیش‌تر جدولِ بدون data-karo-table سربرگ سرمه‌ای پررنگ می‌گرفت و جدولِ با آن
   سربرگ روشن — نتیجه ۱۰۵ صفحه با یک ظاهر و ۷۶ صفحه با ظاهر دیگر. صفت
   data-karo-table فقط باید مرتب‌سازی را روشن کند، نه رنگ را عوض کند. */
.survey-table thead th {
  background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; font-weight: 600;
  white-space: nowrap; font-size: 0.75rem; text-align: center; overflow-wrap: anywhere;
}
.survey-table[data-karo-table] thead th.karo-sortable { cursor: pointer; user-select: none; }
.survey-table[data-karo-table] thead th.karo-sortable:hover { background: #d8e0ea; }
.survey-table tbody tr:nth-child(even) { background: var(--tint); }
.survey-table tbody tr:hover { background: rgb(var(--color-primary) / 0.05); }
.dark .survey-table tbody td { color: #fff; background: #1e293b; font-weight: 500; }
.dark .survey-table tbody tr:nth-child(even) td { background: #0f172a; }
.dark .survey-table tbody tr:hover td { background: rgb(12 74 110 / 0.45); }
.dark .survey-table thead th { color: #fff !important; background: #334155 !important; border-color: #334155; }
.dark .survey-table[data-karo-table] thead th.karo-sortable:hover { background: #3e4d63 !important; }
.dark .survey-table th, .dark .survey-table td { border-color: #334155; }

.karo-filter-row th { padding: 0.2rem 0.3rem; background: var(--tint) !important; }
.karo-col-filter {
  width: 100%; border: 1px solid var(--line); border-radius: 0.35rem;
  font-size: 0.7rem; padding: 0.25rem 0.35rem; text-align: center;
  font-family: inherit; background: var(--card-bg); color: var(--text-1);
}
.dark .karo-col-filter { background: rgb(var(--color-darkmode-800)); border-color: #334155; }
.karo-sort-mark { font-size: 0.6rem; opacity: 0.7; margin-inline-start: 0.2rem; }

/* کارت‌شدن موبایل */
@container pf10-table-panel (max-width: 720px) {
  .survey-table thead { display: none; }
  .survey-table tbody tr {
    display: block; margin: 0.5rem; border: 1px solid var(--line);
    border-radius: 0.5rem; overflow: hidden; background: var(--card-bg);
  }
  .survey-table tbody td {
    display: block; width: 100% !important; border: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0.45rem 0.6rem; text-align: center;
  }
  .survey-table tbody td::before {
    content: attr(data-label);
    display: block; font-size: 0.65rem; font-weight: 600;
    color: var(--text-2); margin-bottom: 0.3rem; text-align: center;
  }
  .dark .survey-table tbody td { background: #1e293b; }
}

/* لودینگ */
.sp-dashboard--pending .survey-table-panel,
.sp-dashboard--pending .sp-kpi-grid,
.sp-dashboard--pending .sp-ops-filters-box { visibility: hidden; }
.sp-dashboard--loading, .sp-ajax-filter-loading { opacity: 0.55; pointer-events: none; }

/* ════════════════ صفحه‌بندی ════════════════ */

.sp-ops-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: 0.75rem; padding: 0.65rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem; background: var(--tint);
}
.sp-ops-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-ops-pagination-info { font-size: 0.75rem; color: var(--text-2); }
.sp-ops-pagination-actions { display: flex; gap: 0.5rem; }

/* ════════════════ چیپ وضعیت و آیکن عملیات ════════════════ */

.sl-status {
  --st-accent: #0c4a6e;
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.2rem 0.6rem; border-radius: 0.45rem;
  font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--st-accent);
  background: color-mix(in srgb, var(--st-accent) 16%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--st-accent) 22%, #e2e8f0);
}
.dark .sl-status {
  background: color-mix(in srgb, var(--st-accent) 22%, #0b1220);
  border-color: color-mix(in srgb, var(--st-accent) 35%, #334155);
}
.sl-status [data-lucide] { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }
/* هفت کلاس معنایی + کدهای رایج */
.sl-status--open, .sl-status--draft            { --st-accent: #0c4a6e; }
.sl-status--pending, .sl-status--pending_sales { --st-accent: #d97706; }
.sl-status--mid, .sl-status--approved_sales    { --st-accent: #2563eb; }
.sl-status--final, .sl-status--approved        { --st-accent: #0f766e; }
.sl-status--done, .sl-status--sent, .sl-status--won { --st-accent: #15803d; }
.sl-status--rejected, .sl-status--failed, .sl-status--lost { --st-accent: #e11d48; }
.sl-status--cancelled, .sl-status--archived    { --st-accent: #c2410c; }
.dark .sl-status--open, .dark .sl-status--draft { --st-accent: #93c5fd; }
.dark .sl-status--pending, .dark .sl-status--pending_sales { --st-accent: #fbbf24; }
.dark .sl-status--mid, .dark .sl-status--approved_sales { --st-accent: #93c5fd; }
.dark .sl-status--final, .dark .sl-status--approved { --st-accent: #34d399; }
.dark .sl-status--done, .dark .sl-status--sent, .dark .sl-status--won { --st-accent: #4ade80; }
.dark .sl-status--rejected, .dark .sl-status--failed, .dark .sl-status--lost { --st-accent: #fb7185; }
.dark .sl-status--cancelled, .dark .sl-status--archived { --st-accent: #fdba74; }

.sp-ai-badge { --st-accent: #7c3aed; }
.dark .sp-ai-badge { --st-accent: #c084fc; }

/* sl-row-accent: نوار رنگی + تینت ظریف کنار ردیف جدول — روی همان کلاس معنایی sl-status--* که --st-accent را ست می‌کند */
tr.sl-row-accent {
  border-inline-start: 3px solid var(--st-accent, transparent);
  background: color-mix(in srgb, var(--st-accent, transparent) 7%, transparent);
}

.sl-ops { display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center; }
.sl-icon {
  --op-accent: #0c4a6e;
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: 0 0 1.5rem;
  width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem;
  padding: 0; margin: 0; overflow: visible; position: relative;
  border-radius: 0.35rem; color: var(--op-accent);
  background: color-mix(in srgb, var(--op-accent) 16%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--op-accent) 22%, #e2e8f0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.sl-icon:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--op-accent) 24%, #ffffff); }
.dark .sl-icon {
  background: color-mix(in srgb, var(--op-accent) 22%, #0b1220);
  border-color: color-mix(in srgb, var(--op-accent) 35%, #334155);
  box-shadow: none;
}
.dark .sl-icon:hover { background: color-mix(in srgb, var(--op-accent) 32%, #0b1220); }
.sl-icon:focus-visible { outline: 2px solid color-mix(in srgb, var(--op-accent) 55%, transparent); outline-offset: 2px; }
.sl-icon::before { content: ''; position: absolute; inset: -0.35rem; }
@media (pointer: coarse) { .sl-icon::before { inset: -0.625rem; } }
.sl-icon.is-off { opacity: 0.35; pointer-events: none; }
.sl-icon [data-lucide] { width: 0.875rem; height: 0.875rem; }
.sl-icon--view       { --op-accent: #0c4a6e; }
.sl-icon--factor     { --op-accent: #d97706; }
.sl-icon--edit       { --op-accent: #2563eb; }
.sl-icon--ok         { --op-accent: #0f766e; }
.sl-icon--no         { --op-accent: #e11d48; }
.sl-icon--back       { --op-accent: #c2410c; }
.sl-icon--return     { --op-accent: #be123c; }
.sl-icon--commission { --op-accent: #0f766e; }
.sl-icon--delete     { --op-accent: #e11d48; }
.dark .sl-icon--view { --op-accent: #60a5fa; }
.dark .sl-icon--factor { --op-accent: #fbbf24; }
.dark .sl-icon--edit { --op-accent: #93c5fd; }
.dark .sl-icon--ok { --op-accent: #34d399; }
.dark .sl-icon--no, .dark .sl-icon--delete { --op-accent: #fb7185; }
.dark .sl-icon--back { --op-accent: #fdba74; }
.dark .sl-icon--return { --op-accent: #fb7185; }
.dark .sl-icon--commission { --op-accent: #2dd4bf; }

/* تاریخ دوسطری و مبلغ */
.sl-dt { display: inline-flex; flex-direction: column; line-height: 1.35; }
.sl-dt small { font-size: 0.6875rem; color: var(--text-2); }
.sl-money { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.7rem; }

/* ════════════════ پیل کانال ════════════════ */

.so-channel-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.so-channel-pills .channel-pill {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem;
  border: 1px solid var(--line); border-radius: 9999px;
  padding: 0.25rem 0.85rem; font-size: 0.8125rem; font-weight: 600;
  color: var(--text-mid); background: var(--card-bg); text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  cursor: pointer;
}
.channel-pill.is-on, .so-channel-pills .channel-pill.is-on {
  border-color: rgb(var(--color-primary)); background: rgb(var(--color-primary)); color: #fff;
}
.channel-pill:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.45); outline-offset: 2px; }
.sw-channel .channel-pill {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 4.5rem; padding: 0.25rem 0.85rem;
  border: 1px solid var(--line); border-radius: 9999px;
  background: var(--card-bg); color: var(--text-mid);
  font-size: 0.75rem; font-weight: 600; line-height: 1.2; cursor: pointer;
}

/* ════════════════ ویزارد ════════════════ */

.sw-stepper { border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card-bg); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.sw-stepper__track { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.25rem; }
.sw-step { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; background: none; border: 0; cursor: default; padding: 0; }
.sw-step.is-done { cursor: pointer; }
.sw-step__icon {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--text-2); transition: all 0.2s;
}
.sw-step__icon [data-lucide] { width: 1.05rem; height: 1.05rem; }
.sw-step.is-active .sw-step__icon {
  border-color: rgb(var(--color-primary)); background: rgb(var(--color-primary));
  color: #fff; box-shadow: 0 2px 10px rgb(var(--color-primary) / 0.35);
}
.sw-step.is-done .sw-step__icon { border-color: #0d9488; background: #0d9488; color: #fff; }
.sw-step__label { font-size: 0.6875rem; margin-top: 0.4rem; color: var(--text-2); text-align: center; font-weight: 500; }
.sw-step.is-active .sw-step__label { color: rgb(var(--color-primary)); font-weight: 700; }
.dark .sw-step.is-active .sw-step__label { color: #93c5fd; }
.sw-stepper__line { flex: 1; height: 2px; background: var(--line); margin-top: 1.2rem; border-radius: 999px; }
.sw-stepper__line.is-done { background: #0d9488; }
@media (max-width: 640px) { .sw-step { min-width: 3.25rem; } .sw-step__label { font-size: 0.625rem; } }

.sw-card { border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card-bg); overflow: hidden; margin-bottom: 1rem; }
/* overflow:hidden برای گردکردن گوشه‌هاست، ولی فهرست کشویی را که از
   کارت بیرون می‌زند می‌بُرد — کاربر فقط ردیف اول را می‌دید. همان
   الگوی field-grid: جایی که کشویی هست، برش برداشته می‌شود. */
.sw-card:has(.sales-filter-tom-field) { overflow: visible; }
.sw-card:has(.sales-filter-tom-field) .sw-card__head { border-start-start-radius: 0.5rem; border-start-end-radius: 0.5rem; }
.sw-card__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hairline); background: var(--tint);
}
.sw-card__head-title { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 700; color: var(--text-1); }
.sw-card__head-icon {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: rgb(var(--color-primary)); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sw-card__head-icon [data-lucide] { width: 0.95rem; height: 0.95rem; }
.sw-card__body { padding: 1rem; }

.sw-total-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid rgb(191 219 254); background: rgb(239 246 255); color: rgb(29 78 216);
  border-radius: 9999px; padding: 0.35rem 0.85rem; font-size: 0.75rem; font-weight: 700;
}
.dark .sw-total-badge { background: rgb(37 99 235 / 0.18); border-color: rgb(37 99 235 / 0.45); color: #93c5fd; }
.sw-total-badge--subtotal { border-color: var(--line); background: var(--tint); color: var(--text-mid); }

.sw-desk-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem;
  background: var(--tint); border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.7rem 0.8rem; margin-bottom: 1rem;
}
@media (max-width: 720px) { .sw-desk-strip { grid-template-columns: repeat(2, 1fr); } }
.sw-desk-strip__label { font-size: 0.6875rem; color: var(--text-2); display: block; margin-bottom: 0.2rem; }
.sw-desk-strip__value { font-size: 0.8125rem; font-weight: 700; color: var(--text-1); }

.sw-stock-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-stock-qty.is-out { color: rgb(185 28 28); }
.sw-stock-qty.is-low { color: rgb(180 83 9); }
.sw-stock-qty.is-ok  { color: rgb(15 118 110); }
.dark .sw-stock-qty.is-out { color: #fb7185; }
.dark .sw-stock-qty.is-low { color: #fbbf24; }
.dark .sw-stock-qty.is-ok  { color: #34d399; }

.sw-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0.4rem; }
.sw-cat-btn {
  width: 100%; min-height: 2.5rem; border: 1px solid var(--line); border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 600; color: var(--text-mid); background: var(--card-bg); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sw-cat-btn.is-active { border-color: rgb(var(--color-primary)); background: rgb(var(--color-primary)); color: #fff; }

.sw-product-cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1200px) { .sw-product-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .sw-product-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .sw-product-cards-grid { grid-template-columns: 1fr; } }
.sw-price-bulk { color: rgb(var(--color-primary)); font-weight: 800; font-variant-numeric: tabular-nums; }
.dark .sw-price-bulk { color: #93c5fd; }
.sw-price-single { color: #0f766e; font-weight: 700; font-variant-numeric: tabular-nums; }
.dark .sw-price-single { color: #34d399; }

/* سبد کشویی */
.sw-cart-overlay { position: fixed; inset: 0; z-index: 65; display: none; background: rgb(15 23 42 / 0.45); backdrop-filter: blur(2px); }
.sw-cart-overlay.is-open { display: block; }
.sw-cart-sheet {
  position: fixed; top: 0; left: 0; height: 100%; width: min(100%, 26rem); z-index: 66;
  background: var(--card-bg); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.25s ease;
  box-shadow: 8px 0 24px rgb(15 23 42 / 0.12);
}
.sw-cart-overlay.is-open .sw-cart-sheet { transform: translateX(0); }
.sw-cart-sheet__head {
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.85));
  color: #fff; display: flex; align-items: center; justify-content: space-between;
}
.sw-cart-sheet__body { flex: 1; overflow-y: auto; padding: 1rem; }
.sw-cart-sheet__foot { padding: 0.85rem 1rem; border-top: 1px solid var(--hairline); background: var(--tint); }
.sw-cart-badge {
  position: absolute; top: -0.4rem; inset-inline-end: -0.4rem;
  min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem;
  background: #fff; color: rgb(var(--color-primary));
  border: 1px solid rgb(var(--color-primary)); border-radius: 9999px;
  font-size: 0.5625rem; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.sw-cart-badge.is-visible { display: inline-flex; }

/* میز پرداخت POS */
.sw-pay-desk { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; }
@media (max-width: 900px) { .sw-pay-desk { grid-template-columns: 1fr; } }
.sw-tenders { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
@media (max-width: 767px) { .sw-tenders { grid-template-columns: 1fr; } }
.sw-tender {
  min-height: 5.75rem; border: 1px solid var(--line-strong); border-radius: 0.75rem;
  background: var(--card-bg); cursor: pointer; padding: 0.8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sw-tender__label { font-size: 1.125rem; font-weight: 700; color: var(--text-1); }
.sw-tender.is-on {
  border-color: rgb(var(--color-primary));
  background: rgb(var(--color-primary) / 0.08);
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
}
.sw-till__remain strong.is-ok { color: rgb(13 148 136); }
.sw-till button, .sw-till .sp-ops-btn { min-height: 2.75rem; }
.sw-receipt { border: 1px dashed var(--line-strong); border-radius: 0.5rem; padding: 0.85rem; background: var(--card-bg); }
.sw-receipt__row { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px dotted var(--line); font-size: 0.75rem; }
.sw-receipt__row:last-child { border-bottom: 0; font-weight: 700; }

/* ════════════════ مودال ════════════════ */

body.sp-ops-modal-open { overflow: hidden; }
.sp-ops-modal {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgb(15 23 42 / 0.55); backdrop-filter: blur(2px);
}
.sp-ops-modal.is-open { display: flex; }
.sp-ops-modal__card {
  width: 100%; max-width: 38rem; max-height: calc(100vh - 2rem);
  border-radius: 0.75rem; background: var(--card-bg); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  animation: sd-pop 0.18s ease;
}
.sp-ops-modal__card--sm { max-width: 30rem; }
.sp-ops-modal__head { padding: 0.85rem 1rem; border-bottom: 1px solid var(--hairline); font-size: 0.9375rem; font-weight: 700; color: var(--text-1); display: flex; align-items: center; justify-content: space-between; }
.sp-ops-modal__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; overflow-y: auto; }
.sp-ops-modal__foot {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.85rem 1rem; border-top: 1px solid var(--hairline); background: var(--tint);
}
.sp-ops-modal__card:has(.dropdown-active) .sp-ops-modal__body,
.sp-ops-modal__card:has(.ts-wrapper.focus) .sp-ops-modal__body { overflow: visible; }

/* ════════════════ فرم ════════════════ */

/* نوار زنجیرهٔ سند — مقصدهای بالادست و پایین‌دست، قابل کلیک.
   پیش از این هر سند بن‌بست بود: از ۳۷ صفحهٔ سند فقط ۳ تا به ماژول
   دیگری لینک داشتند. */
.sd-chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.65rem 0.75rem; margin-block-end: 0.85rem;
  background: var(--tint); border: 1px solid var(--line); border-radius: 0.65rem;
}
.dark .sd-chain { background: rgb(255 255 255 / .04); border-color: var(--line-strong); }
.sd-chain__chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.6rem; border-radius: 0.5rem;
  background: var(--card-bg); border: 1px solid var(--line);
  font-size: 0.75rem; font-weight: 500; color: var(--text-mid);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.dark .sd-chain__chip { background: rgb(var(--color-darkmode-700)); color: #cbd5e1; }
a.sd-chain__chip:hover {
  border-color: rgb(var(--color-primary) / .45); color: rgb(var(--color-primary));
}
.sd-chain__chip i, .sd-chain__chip svg { width: 0.85rem; height: 0.85rem; opacity: .8; }
.sd-chain__chip.is-current {
  background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary));
  color: #fff; font-weight: 700;
}
.sd-chain__chip.is-ok { border-color: rgb(13 148 136 / .4); }
.sd-chain__chip.is-warn { border-color: rgb(202 138 4 / .45); color: rgb(161 98 7); }
.dark .sd-chain__chip.is-warn { color: #fcd34d; }
.sd-chain__no {
  font-size: 0.68rem; opacity: .75;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.sd-chain__arrow { color: var(--text-3); font-size: 0.7rem; }

/* شبکهٔ داشبوردساز — ۱۲ ستونه، مثل قرارداد چیدمان ویجت‌ها.
   در عرض کم هر کاشی تمام‌عرض می‌شود تا محتوا فشرده نشود. */
.sd-dash-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem; margin-block-start: 0.5rem;
}
.sd-dash-cell { grid-column: span var(--w, 3); }
@media (max-width: 900px) { .sd-dash-cell { grid-column: 1 / -1; } }
.sd-dash-tile {
  height: 100%; background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 0.75rem; padding: 0.9rem 1rem; box-shadow: var(--shadow-card);
}
.sd-dash-tile__head {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-1);
  margin-block-end: 0.6rem;
}
.sd-dash-tile__head i, .sd-dash-tile__head svg { width: 1rem; height: 1rem; opacity: .75; }
.sd-dash-tile.is-error { border-color: rgb(185 28 28 / .35); background: rgb(254 242 242); }
.dark .sd-dash-tile.is-error { background: rgb(185 28 28 / .12); }
.sd-dash-tile__err { font-size: 0.75rem; color: rgb(185 28 28); margin: 0; }
.dark .sd-dash-tile__err { color: #fca5a5; }

/* کارت انتخاب — فهرست مقصدهایی که کاربر یکی را برمی‌گزیند
   (انتخاب انبار برای نمای سه‌بعدی، انتخاب کانال فروش و مانند آن). */
.sp-card-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.sp-hub-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; text-decoration: none;
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 0.75rem; box-shadow: var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sp-hub-card:hover {
  border-color: rgb(var(--color-primary) / 0.45);
  box-shadow: 0 6px 18px -8px rgb(15 23 42 / 0.25);
  transform: translateY(-1px);
}
.dark .sp-hub-card { background: rgb(var(--color-darkmode-700)); border-color: var(--line-strong); }
.sp-hub-card__icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.6rem;
  display: grid; place-items: center;
  background: rgb(var(--color-primary) / 0.09); color: rgb(var(--color-primary));
}
.dark .sp-hub-card__icon { background: rgb(255 255 255 / 0.08); color: #93c5fd; }
.sp-hub-card__icon i, .sp-hub-card__icon svg { width: 1.15rem; height: 1.15rem; }
.sp-hub-card__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.sp-hub-card__title { font-size: 0.875rem; font-weight: 600; color: var(--text-1); }
.dark .sp-hub-card__title { color: #e2e8f0; }
.sp-hub-card__sub { font-size: 0.75rem; color: var(--text-2); }
.sp-hub-card > i, .sp-hub-card > svg:last-child {
  flex: none; width: 1rem; height: 1rem; color: var(--text-3);
}

.sp-ops-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sp-ops-field__label { font-size: 0.6875rem; color: var(--text-2); font-weight: 500; }
.sp-ops-field__label .req { color: rgb(185 28 28); margin-inline-start: 0.15rem; }
/* دکمه داخل شبکهٔ فیلد نباید کشیده شود.
   `.sp-ops-field` فلکسِ ستونی است و `.field-grid` گرید؛ هر دو فرزندشان
   را تمام‌عرض می‌کنند. نتیجه یک نوار تیرهٔ سرتاسری به‌جای دکمه بود —
   دقیقاً چیزی که کاربر «استایل ندارد» می‌خواندش، چون شبیه دکمه نبود. */
.sp-ops-field > .sp-ops-btn { align-self: start; }
.field-grid > .sp-ops-btn { justify-self: start; align-self: start; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .field-grid, .field-grid--3 { grid-template-columns: 1fr; } .field-span-2 { grid-column: auto; } }
.field-grid input[type="text"], .field-grid input[type="number"], .field-grid input[type="search"],
.field-grid input[type="password"], .field-grid input[type="email"], .field-grid input[type="tel"],
.field-grid select:not(.tomselected):not(.ts-hidden-accessible),
.field-grid textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.45rem 0.6rem; font-size: 0.8125rem; background: var(--card-bg); color: var(--text-1);
}
.dark .field-grid input, .dark .field-grid select:not(.tomselected):not(.ts-hidden-accessible), .dark .field-grid textarea {
  background: rgb(var(--color-darkmode-800)); border-color: var(--line-strong);
}
.field-grid input:focus,
.field-grid select:not(.tomselected):not(.ts-hidden-accessible):focus,
.field-grid textarea:focus {
  outline: none; border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
}
.hint { font-size: 0.72rem; color: var(--text-3); line-height: 1.55; margin-top: 0.2rem; }
.field-error { font-size: 0.75rem; color: rgb(185 28 28); }
.field-grid .is-invalid { border-color: rgb(185 28 28) !important; }
label.is-extra { background: rgb(var(--color-primary) / 0.04); border: 1px dashed rgb(var(--color-primary) / 0.4); border-radius: 0.5rem; padding: 0.5rem; }

/* ── تاگل ── */
.sp-ops-toggle-grid { display: grid; gap: 0.6rem; }
.sp-ops-toggle-grid--single { max-width: 16rem; }
.sp-ops-toggle-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .sp-ops-toggle-grid--2 { grid-template-columns: 1fr; } }
.sp-ops-toggle {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 0.65rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--tint); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.sp-ops-toggle__label { font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.sp-ops-toggle input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sp-ops-toggle__switch {
  flex-shrink: 0; width: 2.35rem; height: 1.3rem; border-radius: 999px;
  background: var(--line-strong); position: relative; transition: background 0.2s;
}
.sp-ops-toggle__switch::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.18); transition: transform 0.2s;
}
.sp-ops-toggle input:checked + .sp-ops-toggle__switch { background: #0d9488; }
.sp-ops-toggle input:checked + .sp-ops-toggle__switch::after {
  transform: translateX(calc(-1 * (2.35rem - 1.05rem - 4px)));
}
.sp-ops-toggle:has(input:checked) { border-color: rgb(13 148 136 / 0.35); background: rgb(13 148 136 / 0.06); }

/* چیپ چندانتخابی */
.sp-check-group { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sp-check-chip {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line); border-radius: 9999px; background: var(--card-bg);
  padding: 0.35rem 0.8rem; font-size: 0.75rem; font-weight: 600; color: var(--text-mid);
  cursor: pointer; transition: all 0.15s;
}
.sp-check-chip input { position: absolute; opacity: 0; }
.sp-check-chip:has(input:checked) {
  border-color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / 0.08);
  color: rgb(var(--color-primary));
}
.dark .sp-check-chip:has(input:checked) { color: #93c5fd; }

/* ════════════════ کیت راه‌اندازی ════════════════ */

.sp-help {
  display: flex; gap: 0.75rem; align-items: flex-start;
  border: 1px solid rgb(186 230 253); background: rgb(240 249 255);
  border-radius: 0.65rem; padding: 0.8rem 0.95rem; margin-bottom: 1rem;
}
.dark .sp-help { background: rgb(8 47 73 / 0.5); border-color: rgb(14 165 233 / 0.35); }
.sp-help__icon {
  flex: none; width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: rgb(14 165 233 / .15); color: #0369a1;
  display: grid; place-items: center; font-weight: 800;
}
.dark .sp-help__icon { color: #7dd3fc; }
.sp-help p { margin: 0; font-size: 0.8125rem; line-height: 1.7; color: #334155; }
.dark .sp-help p { color: #e2e8f0; }

.split-note {
  display: flex; gap: 0.75rem; margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem; border-radius: 0.55rem;
  background: var(--tint); border: 1px dashed var(--line-strong);
  font-size: 0.75rem; color: var(--text-mid); line-height: 1.65;
}

/* ریل مراحل: در عرض کم به‌جای اسکرول افقی، سطربندی می‌شود.
   با overflow-x قبلی گام‌ها از لبه بریده می‌شدند و کاربر نمی‌فهمید
   گام بعدی وجود دارد — اسکرول افقی در RTL هم کشف‌ناپذیر است. */
.sp-setup-rail {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1.1rem; padding-bottom: 0.25rem;
}
.sp-setup-step {
  flex: 1 1 9rem; min-width: 9rem; border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--card-bg); padding: 0.65rem 0.75rem; text-align: start;
  font-size: 0.75rem; color: var(--text-mid); cursor: pointer; text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem; line-height: 1.35;
  transition: border-color .15s, background .15s;
}
.sp-setup-step:hover { border-color: rgb(var(--color-primary) / .35); }
.sp-setup-step.is-done { border-color: rgb(13 148 136 / .35); background: rgb(240 253 250); }
.dark .sp-setup-step.is-done { background: rgb(13 148 136 / 0.12); }
.sp-setup-step.is-on { border-color: rgb(var(--color-primary) / .4); background: rgb(var(--color-primary) / .06); }
.sp-setup-num {
  flex: none;
  width: 1.45rem; height: 1.45rem; border-radius: 999px; display: grid; place-items: center;
  background: #e2e8f0; color: #334155; font-size: 0.7rem; font-weight: 800;
}
.sp-setup-step.is-on .sp-setup-num, .sp-setup-step.is-done .sp-setup-num { background: rgb(var(--color-primary)); color: #fff; }

.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1100px) { .industry-grid, .channel-grid { grid-template-columns: 1fr; } }
.industry-card, .channel-card {
  position: relative; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card-bg);
  padding: 0.9rem 0.85rem; text-align: start; min-height: 8.2rem; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  /* کارت کانال در لانچر یک <a> است؛ بدون این، تمام متنش زیرخط‌دار
     می‌شد و کارت مثل چند لینک خام کنار هم دیده می‌شد. */
  text-decoration: none; display: block; color: inherit;
}
.industry-card:hover, .channel-card:hover { text-decoration: none; }
.channel-card { min-height: 7.2rem; }
.industry-card:hover, .channel-card:hover { border-color: rgb(var(--color-primary) / 0.35); }
.industry-card.is-on, .channel-card.is-on {
  border-color: rgb(var(--color-primary) / .45);
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / .12);
  background: rgb(var(--color-primary) / .04);
}
.industry-card__icon {
  width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; margin-bottom: 0.5rem;
  background: rgb(var(--color-primary) / 0.08); color: rgb(var(--color-primary));
  display: grid; place-items: center;
}
.dark .industry-card__icon { color: #93c5fd; }
.industry-card__title { font-size: 0.875rem; font-weight: 700; color: var(--text-1); margin: 0 0 0.25rem; }
.industry-card__hint { font-size: 0.72rem; color: var(--text-2); line-height: 1.6; margin: 0; }
.channel-card__mark {
  position: absolute; top: 0.7rem; inset-inline-end: 0.7rem;
  width: 1.2rem; height: 1.2rem; border-radius: 0.3rem;
  border: 1.5px solid var(--line-strong); background: var(--card-bg); color: transparent;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 800;
}
.channel-card__go {
  position: absolute; top: 0.75rem; inset-inline-end: 0.75rem;
  width: 1.4rem; height: 1.4rem; border-radius: 0.4rem;
  display: grid; place-items: center; color: var(--text-3);
  background: var(--tint); transition: background .15s, color .15s;
}
.channel-card:hover .channel-card__go {
  background: rgb(var(--color-primary) / 0.1); color: rgb(var(--color-primary));
}
.channel-card__go i, .channel-card__go svg { width: 0.85rem; height: 0.85rem; }
.dark .channel-card__go { background: rgb(255 255 255 / .06); }

.channel-card.is-on .channel-card__mark { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); color: #fff; }

/* ════════════════ طراح گردش‌کار ════════════════ */

.canvas-wrap {
  position: relative; overflow: auto; min-height: 420px; flex: 1;
  border: 1px solid var(--line); border-radius: 0.65rem;
  background: repeating-linear-gradient(0deg, transparent 0 22px, var(--hairline) 22px 23px),
              repeating-linear-gradient(90deg, transparent 0 22px, var(--hairline) 22px 23px);
}
.flow-track { display: flex; align-items: center; gap: 0; padding: 1.25rem; min-width: max-content; }
.flow-stage {
  flex: 0 0 158px; width: 158px;
  border: 1px solid var(--line); border-radius: 0.65rem;
  background: var(--card-bg); padding: 0.7rem 0.75rem;
  cursor: grab; user-select: none;
  box-shadow: 0 4px 12px rgb(15 23 42 / .06); text-align: start;
}
.flow-stage.is-sel { border-color: rgb(var(--color-primary) / .5); box-shadow: 0 0 0 3px rgb(var(--color-primary) / .12); background: rgb(var(--color-primary) / .05); }
.flow-stage.is-reject { border-color: #fecaca; background: #fef2f2; }
.dark .flow-stage.is-reject { background: rgb(185 28 28 / 0.15); border-color: rgb(185 28 28 / 0.4); }
.flow-arrow { flex: 0 0 32px; display: grid; place-items: center; color: rgb(var(--color-primary)); font-size: 1.2rem; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #0d9488; display: inline-block; }
.flow-stage.is-reject .dot { background: #e11d48; }
.flow-stage__title { font-size: 0.75rem; font-weight: 700; color: var(--text-1); margin: 0.3rem 0 0.15rem; }
.flow-stage__meta { font-size: 0.65rem; color: var(--text-2); }
.flow-mini { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 0.5rem 0.25rem; }
.flow-mini .flow-stage { flex: 0 0 132px; width: 132px; cursor: default; }

/* ════════════════ توست، کانبان، نمودار ════════════════ */

.toast {
  position: fixed; bottom: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%);
  background: #0f172a; color: #fff; border-radius: 0.55rem; padding: 0.55rem 0.9rem;
  font-size: 0.8125rem; display: none; z-index: 80; box-shadow: 0 10px 24px rgb(15 23 42 / .25);
}
.toast.is-on { display: block; animation: sd-pop 0.2s ease; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1100px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--tint); min-height: 16rem; padding: 0.6rem; }
.kanban-col__head { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.35rem 0.6rem; font-size: 0.8125rem; font-weight: 700; color: var(--text-1); }
.kanban-col__sum { font-size: 0.7rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.kanban-card {
  border: 1px solid var(--line); border-radius: 0.55rem; background: var(--card-bg);
  padding: 0.65rem 0.7rem; text-align: start; margin-bottom: 0.5rem; width: 100%;
  cursor: pointer; transition: box-shadow 0.15s, transform 0.15s;
}
.kanban-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }

.sp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1023px) { .sp-grid-2, .sp-grid-3 { grid-template-columns: 1fr; } }
.sp-card { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card-bg); overflow: hidden; }
.sp-card:has(.sales-filter-tom-field) { overflow: visible; }
.sp-card-head { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hairline); background: var(--tint); font-size: 0.8125rem; font-weight: 700; color: var(--text-1); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sp-card-body { padding: 0.9rem; }
.sp-chart { width: 100%; min-height: 280px; direction: ltr; }
@media (max-width: 1023px) { .sp-chart { min-height: 240px; } }

/* فیلترهای گزارش */
.sp-filters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem; background: var(--tint);
  padding: 0.75rem; margin-bottom: 1rem;
}
@media (max-width: 1023px) { .sp-filters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sp-filters { grid-template-columns: 1fr; } }

/* ════════════════ پیام‌ها ════════════════ */

.sw-alert-info {
  border: 1px solid rgb(186 230 253); background: rgb(240 249 255); color: rgb(12 74 110);
  border-radius: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.8125rem; line-height: 1.7;
}
.dark .sw-alert-info { background: rgb(8 47 73 / 0.5); border-color: rgb(14 165 233 / 0.35); color: #bae6fd; }
.sw-store-error, .sd-error-banner {
  display: none; margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  background: rgb(254 242 242); color: rgb(185 28 28); font-size: 0.8125rem;
}
.dark .sw-store-error, .dark .sd-error-banner { background: rgb(185 28 28 / 0.15); color: #fb7185; }
.sw-store-error.is-visible, .sd-error-banner.is-visible { display: block; }
.sd-warn-banner {
  border: 1px solid rgb(253 230 138); background: rgb(255 251 235); color: rgb(146 64 14);
  border-radius: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.8125rem;
}
.dark .sd-warn-banner { background: rgb(202 138 4 / 0.15); border-color: rgb(202 138 4 / 0.4); color: #fbbf24; }
.sd-empty { text-align: center; padding: 2rem 1rem; color: var(--text-2); font-size: 0.8125rem; }
.sd-empty a { color: rgb(var(--color-primary)); font-weight: 600; }
.dark .sd-empty a { color: #93c5fd; }

/* ════════════════ چت دستیار AI ════════════════ */

.sd-ai-fab {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 64;
  width: 3.25rem; height: 3.25rem; border-radius: 9999px; border: 0;
  background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 30px rgb(124 58 237 / 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sd-ai-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 36px rgb(124 58 237 / 0.5); }
.sd-ai-msg { display: flex; margin-bottom: 0.65rem; }
.sd-ai-msg__bubble {
  max-width: 85%; border-radius: 0.75rem; padding: 0.55rem 0.8rem;
  font-size: 0.8125rem; line-height: 1.7;
}
.sd-ai-msg--user { justify-content: flex-start; }
.sd-ai-msg--user .sd-ai-msg__bubble { background: rgb(var(--color-primary) / 0.1); color: var(--text-1); }
.sd-ai-msg--ai .sd-ai-msg__bubble { background: var(--tint); color: var(--text-1); border: 1px solid var(--hairline); }
.sd-ai-typing span { display: inline-block; width: 5px; height: 5px; margin: 0 1px; border-radius: 999px; background: var(--text-3); animation: sd-blink 1s infinite; }
.sd-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.sd-ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sd-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ════════════════ متفرقه ════════════════ */

.sd-reveal { animation: sd-fade-up 0.3s ease; }
@keyframes sd-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sd-scroll-thin { scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .sd-sidebar, .sd-header, .sd-ai-fab, .sp-ops-actions, .sp-ops-filters-box, .sp-ops-pagination { display: none !important; }
  .sd-main { margin: 0 !important; }
  body { background: #fff; }
}

/* همبرگر فقط موبایل؛ دکمهٔ جمع‌کردن فقط دسکتاپ */
.sd-header__hamburger { display: none; }
@media (max-width: 1279px) {
  .sd-header__hamburger { display: inline-flex; }
  .sd-header__search { display: none !important; }
  [data-sidebar-toggle]:not(.sd-header__hamburger) { display: none; }
}

/* ── فیلد تاریخ شمسی (قرارداد کاریلو) ── */
.karo-jalali-date-wrap { position: relative; width: 100%; }
.karo-jalali-date-icon {
  position: absolute; inset-block: 0; inset-inline-start: 0.6rem;
  display: flex; align-items: center; color: var(--text-3); pointer-events: none;
}
.karo-jalali-date-input {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.45rem 0.6rem; padding-inline-start: 2.1rem;
  font-size: 0.8125rem; background: var(--card-bg); color: var(--text-1);
  cursor: pointer; font-family: inherit;
}
.dark .karo-jalali-date-input { background: rgb(var(--color-darkmode-800)); border-color: var(--line-strong); color: #fff; }
.karo-jalali-date-input:focus { outline: none; border-color: rgb(var(--color-primary)); box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12); }
.karo-jalali-calendar { z-index: 10090 !important; font-family: "IRANYekan", Tahoma, sans-serif !important; }
.dark .karo-jalali-calendar { background: rgb(var(--color-darkmode-600)) !important; color: #fff !important; border-color: var(--line-strong) !important; }

/* ── طراح گردش‌کار (پالت/بوم/بازرس — الگوی کاریلو) ── */
.designer { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 0.85rem; }
.designer.is-palette-off { grid-template-columns: minmax(0, 1fr) 300px; }
.designer.is-inspector-off { grid-template-columns: 220px minmax(0, 1fr); }
.designer.is-palette-off.is-inspector-off { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .designer { grid-template-columns: 1fr !important; } }
.designer-shell.is-fs {
  position: fixed; inset: 0; z-index: 75; background: var(--page-bg);
  padding: 1rem; overflow: auto;
}
body.is-designer-fs { overflow: hidden; }
.palette { border: 1px solid var(--line); border-radius: 0.65rem; background: var(--card-bg); padding: 0.7rem; align-self: start; }
.palette__title { font-size: 0.75rem; font-weight: 700; color: var(--text-2); margin-bottom: 0.5rem; }
.palette-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  border: 1px dashed var(--line-strong); border-radius: 0.55rem; background: var(--tint);
  padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; cursor: grab;
  font-size: 0.75rem; font-weight: 600; color: var(--text-mid); font-family: inherit; text-align: start;
}
.palette-item:hover { border-color: rgb(var(--color-primary) / 0.5); color: rgb(var(--color-primary)); }
.palette-item[data-reject="1"]:hover { border-color: #fca5a5; color: #e11d48; }
.flow-lane { display: flex; align-items: stretch; gap: 0; padding: 0.85rem; min-width: max-content; }
.flow-lane__label { font-size: 0.68rem; font-weight: 700; color: var(--text-2); padding: 0.5rem 0.85rem 0; }
.flow-stage { cursor: grab; }
.flow-stage:active { cursor: grabbing; }
.flow-stage.drag-over { outline: 2px dashed rgb(var(--color-primary) / 0.6); outline-offset: 2px; }
.flow-stage__badges { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.35rem; }
.flow-stage__badges .sl-status { font-size: 0.58rem; padding: 0.1rem 0.35rem; }
.inspector { border: 1px solid var(--line); border-radius: 0.65rem; background: var(--card-bg); padding: 0.8rem; align-self: start; max-height: 75vh; overflow-y: auto; }
.inspector__title { font-size: 0.8125rem; font-weight: 700; color: var(--text-1); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.inspector .sp-ops-field { margin-bottom: 0.55rem; }
.inspector input[type="text"], .inspector input[type="number"], .inspector select, .inspector textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.38rem 0.5rem; font-size: 0.75rem; background: var(--card-bg); color: var(--text-1); font-family: inherit;
}
.dark .inspector input, .dark .inspector select, .dark .inspector textarea { background: rgb(var(--color-darkmode-800)); border-color: var(--line-strong); }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip-item {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--tint);
  padding: 0.18rem 0.55rem; font-size: 0.65rem; font-weight: 600; color: var(--text-mid);
}
.chip-item button { border: 0; background: none; color: #e11d48; cursor: pointer; font-size: 0.7rem; padding: 0; line-height: 1; }

/* پنل‌های تب الگوی O */
.sp-ops-panel { display: none; }
.sp-ops-panel.is-active { display: block; }

/* ════════════════════════════════════════════════════════════
   کیت اضافه — سطح داشبورد (sd-*): کاشی KPI غنی، هدر گرادیانی، توضیح جمع‌شونده
   افزودنی خالص روی کیت موجود — کلاس‌های sp-* و sl-* بالا دست‌نخورده می‌مانند.
   ════════════════════════════════════════════════════════════ */

/* ── sd-kpi-tile: کارت آماری ──
   عیناً همان طرح کارت لیست سفارشات کاریلو که از قبل به‌صورت .sp-sales-kpi
   در همین فایل پورت شده بود: افقی، جعبهٔ آیکون کنار، عدد بالای برچسب.
   این کلاس فقط همان را با افزودنی‌های ما (دلتا، «؟»، یادداشت) بازتولید می‌کند. */
.sd-kpi-tile {
  --kpi-color: #0c4a6e;
  position: relative; overflow: hidden;
  display: flex; flex-direction: row; align-items: center; gap: 0.75rem;
  border-radius: 0.75rem; border: 1px solid var(--line);
  background: var(--card-bg); padding: 0.9rem 1rem;
  text-align: right; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  opacity: 0; transform: translateY(8px);
  animation: sd-kpi-in 0.35s ease forwards;
  animation-delay: calc(var(--kpi-i, 0) * 55ms);
}
@keyframes sd-kpi-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .sd-kpi-tile { animation: none; opacity: 1; transform: none; }
}

/* accent توکنی — همان پالت .sp-sales-kpi--* ؛ بدون این‌ها همهٔ کاشی‌ها
   به رنگ پیش‌فرض می‌افتادند و داشبورد تک‌رنگ دیده می‌شد. */
.sd-kpi-tile--blue   { --kpi-color: #0c4a6e; }
.sd-kpi-tile--indigo { --kpi-color: #4f46e5; }
.sd-kpi-tile--teal   { --kpi-color: #0d9488; }
.sd-kpi-tile--amber  { --kpi-color: #d97706; }
.sd-kpi-tile--violet { --kpi-color: #7c3aed; }
.sd-kpi-tile--rose   { --kpi-color: #e11d48; }
.sd-kpi-tile--green  { --kpi-color: #0f766e; }
.dark .sd-kpi-tile--blue   { --kpi-color: #60a5fa; }
.dark .sd-kpi-tile--indigo { --kpi-color: #818cf8; }
.dark .sd-kpi-tile--teal   { --kpi-color: #2dd4bf; }
.dark .sd-kpi-tile--amber  { --kpi-color: #fbbf24; }
.dark .sd-kpi-tile--violet { --kpi-color: #a78bfa; }
.dark .sd-kpi-tile--rose   { --kpi-color: #fb7185; }
.dark .sd-kpi-tile--green  { --kpi-color: #34d399; }

/* جعبهٔ آیکون — تینت accent، مثل کارت کاریلو */
.sd-kpi-tile__icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem;
  border-radius: 0.55rem; overflow: hidden;
  /* جعبهٔ آیکون پررنگ: گرادیان accent با آیکون سفید — هر کارت رنگ خودش را دارد */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kpi-color) 92%, #ffffff),
    var(--kpi-color));
  border: 1px solid color-mix(in srgb, var(--kpi-color) 70%, #000000);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--kpi-color) 32%, transparent);
  color: #ffffff;
}
.sd-kpi-tile__icon [data-lucide], .sd-kpi-tile__icon svg { width: 1.25rem; height: 1.25rem; display: block; }
.dark .sd-kpi-tile__icon {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kpi-color) 70%, #0b1220),
    color-mix(in srgb, var(--kpi-color) 95%, #0b1220));
  border-color: color-mix(in srgb, var(--kpi-color) 55%, #334155);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--kpi-color) 28%, transparent);
  color: #ffffff;
}

.sd-kpi-tile__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sd-kpi-tile__value {
  font-size: 1.2rem; line-height: 1.25; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--kpi-color);
  display: flex; align-items: baseline; gap: 0.25rem;
}
.dark .sd-kpi-tile__value { color: color-mix(in srgb, var(--kpi-color) 45%, #f1f5f9); }
.sd-kpi-tile__unit { font-size: 0.68rem; font-weight: 500; color: var(--text-3); }
.sd-kpi-tile__top { display: block; }
.sd-kpi-tile__label {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; line-height: 1.4; color: var(--text-2); font-weight: 500;
}
.sd-kpi-tile__dot { display: none; width: 0.45rem; height: 0.45rem; border-radius: 999px; flex: none; background: var(--kpi-color); }
.sd-kpi-tile.is-ok .sd-kpi-tile__dot,
.sd-kpi-tile.is-warn .sd-kpi-tile__dot,
.sd-kpi-tile.is-danger .sd-kpi-tile__dot { display: inline-block; }
.sd-kpi-tile.is-ok      .sd-kpi-tile__dot { background: #0d9488; }
.sd-kpi-tile.is-warn    .sd-kpi-tile__dot { background: #d97706; }
.sd-kpi-tile.is-danger  .sd-kpi-tile__dot { background: #e11d48; }
.dark .sd-kpi-tile.is-ok      .sd-kpi-tile__dot { background: #34d399; }
.dark .sd-kpi-tile.is-warn    .sd-kpi-tile__dot { background: #fbbf24; }
.dark .sd-kpi-tile.is-danger  .sd-kpi-tile__dot { background: #fb7185; }

.sd-kpi-tile__delta {
  margin-top: 0.1rem; font-size: 0.66rem; font-weight: 600;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.sd-kpi-tile__delta.is-up   { color: #0f766e; }
.dark .sd-kpi-tile__delta.is-up   { color: #34d399; }
.sd-kpi-tile__delta.is-down { color: #be123c; }
.dark .sd-kpi-tile__delta.is-down { color: #fb7185; }
.sd-kpi-tile__note { margin-top: 0.1rem; font-size: 0.63rem; line-height: 1.5; color: var(--text-3); }

/* حالت لینک — همان hover/active کارت کاریلو */
.sd-kpi-tile--link { cursor: pointer; }
.sd-kpi-tile--link:hover { border-color: color-mix(in srgb, var(--kpi-color) 40%, var(--line)); transform: translateY(-1px); }
.sd-kpi-tile--link:focus-visible {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-color) 45%, transparent);
}
.sd-kpi-tile.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-color) 35%, transparent); }
.sd-kpi-tile__go {
  position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.55rem;
  color: var(--text-3); opacity: 0; transition: opacity 0.15s ease;
  display: inline-flex; pointer-events: none;
}
.sd-kpi-tile__go [data-lucide], .sd-kpi-tile__go svg { width: 0.85rem; height: 0.85rem; }
.sd-kpi-tile--link:hover .sd-kpi-tile__go,
.sd-kpi-tile--link:focus-visible .sd-kpi-tile__go { opacity: 1; }

/* دکمهٔ «؟» فرمول */
.sd-kpi-tile__tip {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--tint); color: var(--text-3);
  font-size: 0.6rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
}
.sd-kpi-tile__tip:hover, .sd-kpi-tile__tip:focus-visible, .sd-kpi-tile__tip.is-open {
  border-color: var(--kpi-color); color: var(--kpi-color); outline: none;
}
.sd-kpi-tile__tip-pop {
  display: none; position: absolute; z-index: 40; top: calc(100% + 6px);
  inset-inline-end: 0; width: min(230px, 72vw);
  padding: 0.55rem 0.65rem; border-radius: 0.55rem;
  background: #0f172a; color: #f8fafc; font-size: 0.7rem; font-weight: 500; line-height: 1.65;
  text-align: right; box-shadow: 0 10px 24px rgb(15 23 42 / 0.3); pointer-events: none;
}
.sd-kpi-tile__tip:hover .sd-kpi-tile__tip-pop,
.sd-kpi-tile__tip:focus-visible .sd-kpi-tile__tip-pop,
.sd-kpi-tile__tip.is-open .sd-kpi-tile__tip-pop { display: block; }
.dark .sd-kpi-tile__tip-pop { background: #020617; }
.dark .sd-kpi-tile__tip { background: rgb(var(--color-darkmode-600)); border-color: var(--line-strong); }
.sd-kpi-tile:has(.sd-kpi-tile__tip.is-open),
.sd-kpi-tile:has(.sd-kpi-tile__tip:hover) { overflow: visible; }

.sd-kpi-grid-2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1280px) { .sd-kpi-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sd-kpi-grid-2 { grid-template-columns: 1fr; } }

/* ── sd-hero-banner: هدر گرادیانی داشبورد — آواتار/آیکن + عنوان + پیل وضعیت زنده + آمار درون‌خطی ── */
.sd-hero-banner {
  position: relative; overflow: hidden; border-radius: 1rem; margin-bottom: 0.9rem;
  background: linear-gradient(120deg, rgb(var(--color-theme-1)) 0%, rgb(var(--color-theme-2)) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 14px 34px rgb(9 17 43 / 0.25);
}
.dark .sd-hero-banner { box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 14px 34px rgb(0 0 0 / 0.5); }
.sd-hero-banner__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 240px at 8% -10%, rgb(255 255 255 / 0.18), transparent 60%),
    radial-gradient(420px 200px at 100% 120%, rgb(13 148 136 / 0.35), transparent 55%),
    radial-gradient(300px 160px at 55% 0%, rgb(255 255 255 / 0.08), transparent 60%);
}
.sd-hero-banner__inner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.85rem 1.1rem; padding: 1.1rem 1.3rem;
}
.sd-hero-banner__id { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.sd-hero-banner__icon {
  flex: none; width: 3rem; height: 3rem; border-radius: 0.85rem; overflow: hidden;
  background: rgb(255 255 255 / 0.16); border: 2px solid rgb(255 255 255 / 0.3);
  display: grid; place-items: center; color: #fff;
}
.sd-hero-banner__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-hero-banner__text { min-width: 0; }
.sd-hero-banner__title { margin: 0 0 0.2rem; font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; line-height: 1.3; }
.sd-hero-banner__subtitle { margin: 0; font-size: 0.78rem; color: rgb(255 255 255 / 0.8); }
.sd-hero-banner__pill {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem;
  padding: 0.24rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
}
.sd-hero-banner__pill.is-ok   { background: rgb(45 212 191 / 0.18); color: #99f6e4; border: 1px solid rgb(45 212 191 / 0.32); }
.sd-hero-banner__pill.is-warn { background: rgb(251 191 36 / 0.2);  color: #fde68a; border: 1px solid rgb(251 191 36 / 0.35); }
.sd-hero-banner__pill-dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor; flex: none; animation: sd-hero-pulse 1.6s ease-in-out infinite; }
@keyframes sd-hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sd-hero-banner__pill-dot { animation: none; } }
.sd-hero-banner__stats { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sd-hero-banner__stat {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem;
  padding: 0.4rem 0.75rem; min-width: 5.5rem; border-radius: 0.6rem;
  background: rgb(255 255 255 / 0.95); box-shadow: 0 4px 14px rgb(6 15 40 / 0.18);
}
.sd-hero-banner__stat strong { font-size: 0.92rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sd-hero-banner__stat span { font-size: 0.62rem; font-weight: 600; color: #64748b; }
@media (max-width: 768px) {
  .sd-hero-banner__inner { flex-direction: column; align-items: stretch; }
  .sd-hero-banner__stats { justify-content: flex-start; }
}

/* ── sd-help-collapse: پنل توضیح جمع‌شونده (الگوی carilo rfm_help) — تعریف شاخص‌ها + راهنمای رنگ ── */
.sd-help-collapse { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card-bg); overflow: hidden; }
.sd-help-collapse > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 0.95rem; font-size: 0.8rem; font-weight: 700; color: var(--text-1);
}
.sd-help-collapse > summary::-webkit-details-marker { display: none; }
.sd-help-collapse > summary::before {
  content: "›"; display: inline-block; font-size: 1rem; color: var(--text-3); transition: transform 0.15s ease;
}
.sd-help-collapse[open] > summary::before { transform: rotate(90deg); }
.sd-help-collapse__body { padding: 0 0.95rem 0.95rem; border-top: 1px solid var(--hairline); padding-top: 0.75rem; }
.sd-help-collapse__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.9rem; margin-bottom: 0.7rem; }
@media (max-width: 720px) { .sd-help-collapse__grid { grid-template-columns: 1fr; } }
.sd-help-collapse__item { font-size: 0.74rem; line-height: 1.7; color: var(--text-2); }
.sd-help-collapse__item b { color: var(--text-1); }
.sd-help-collapse__legend { display: flex; flex-wrap: wrap; gap: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.sd-help-collapse__legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--text-2); }
.sd-help-collapse__legend-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; flex: none; }
.sd-help-collapse__legend-dot.is-ok     { background: #0d9488; }
.sd-help-collapse__legend-dot.is-warn   { background: #d97706; }
.sd-help-collapse__legend-dot.is-danger { background: #e11d48; }
.dark .sd-help-collapse__legend-dot.is-ok     { background: #34d399; }
.dark .sd-help-collapse__legend-dot.is-warn   { background: #fbbf24; }
.dark .sd-help-collapse__legend-dot.is-danger { background: #fb7185; }

/* ── sd-attn-list: فهرست «نیازمند توجه» — ردیف کلیک‌پذیر واقعی به هر ماژول ── */
.sd-attn-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sd-attn-row {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--line); border-radius: 0.65rem; background: var(--card-bg);
  padding: 0.65rem 0.85rem; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
a.sd-attn-row:hover { border-color: rgb(var(--color-primary) / 0.35); background: var(--tint); transform: translateX(-2px); }
.dark a.sd-attn-row:hover { transform: translateX(2px); }
.sd-attn-row__icon {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 0.55rem;
  background: rgb(217 119 6 / 0.12); color: #b45309; display: grid; place-items: center;
}
.dark .sd-attn-row__icon { background: rgb(251 191 36 / 0.15); color: #fbbf24; }
.sd-attn-row__icon [data-lucide] { width: 1.05rem; height: 1.05rem; }
.sd-attn-row__text { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-1); }
.sd-attn-row__go { flex: none; color: var(--text-3); }
.sd-attn-empty {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem;
  border: 1px dashed var(--line-strong); border-radius: 0.65rem; background: var(--tint);
  color: var(--text-2); font-size: 0.8125rem;
}
.sd-attn-empty [data-lucide] { color: #0d9488; }

/* ── acc-tree: درختوارهٔ کدینگ حساب حسابداری (گروه ← کل ← معین) — نقطهٔ رنگی هر سطح + چیپ تعداد ── */
.acc-tree-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.85rem; }
.acc-tree-legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--text-2); }
.acc-tree-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: none; display: inline-block; }
.acc-tree-dot--group { background: #004b9b; }
.acc-tree-dot--kol   { background: #0d9488; }
.acc-tree-dot--moein { background: #7c3aed; }
.dark .acc-tree-dot--group { background: #93c5fd; }
.dark .acc-tree-dot--kol   { background: #34d399; }
.dark .acc-tree-dot--moein { background: #c4b5fd; }

.acc-tree-node {
  border: 1px solid var(--line); border-inline-start: 3px solid #004b9b; border-radius: 0.75rem;
  margin-bottom: 0.75rem; background: var(--card-bg); overflow: hidden;
}
.dark .acc-tree-node { border-inline-start-color: #93c5fd; }
.acc-tree-node > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; font-weight: 700; color: var(--text-1);
}
.acc-tree-node > summary::-webkit-details-marker { display: none; }
.acc-tree-node > summary::before { content: "›"; display: inline-block; font-size: 1rem; color: var(--text-3); transition: transform 0.15s ease; }
.acc-tree-node[open] > summary::before { transform: rotate(90deg); }
.acc-tree-node__body { padding: 0.25rem 1.5rem 0.85rem; border-top: 1px solid var(--hairline); }
.acc-tree-node--kol {
  margin: 0.4rem 0; border-radius: 0.6rem; border-inline-start: 3px solid #0d9488;
}
.dark .acc-tree-node--kol { border-inline-start-color: #34d399; }
.acc-tree-node--kol > summary { padding: 0.5rem 0.85rem; font-weight: 600; }
.acc-tree-node--kol > .acc-tree-node__body { padding: 0.35rem 0.85rem 0.6rem; }
.acc-tree-count { font-size: 0.68rem; }
.dark .sd-attn-empty [data-lucide] { color: #34d399; }

/* ══════════════════════════════════════════════════════════════
   لایهٔ پلتفرم — پالت فرمان، واگرد، انتخاب گروهی، ویرایش درجا
   ══════════════════════════════════════════════════════════════ */

/* ── پالت فرمان ── */
.sd-pal { position: fixed; inset: 0; z-index: 3000; display: none; }
.sd-pal.is-open { display: block; }
.sd-pal__scrim {
  position: absolute; inset: 0; background: rgb(15 23 42 / .45);
  backdrop-filter: blur(2px); animation: sd-pal-fade .12s ease;
}
.dark .sd-pal__scrim { background: rgb(2 6 23 / .62); }
.sd-pal__box {
  position: relative; margin: 9vh auto 0; width: min(620px, calc(100% - 2rem));
  background: var(--card-bg); border: 1px solid var(--line); border-radius: .8rem;
  box-shadow: 0 24px 60px -20px rgb(15 23 42 / .45); overflow: hidden;
  animation: sd-pal-pop .14s cubic-bezier(.2,.8,.3,1);
}
@keyframes sd-pal-fade { from { opacity: 0 } }
@keyframes sd-pal-pop { from { opacity: 0; transform: translateY(-8px) scale(.985) } }
.sd-pal__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem .95rem; border-bottom: 1px solid var(--line);
}
.sd-pal__head [data-lucide] { width: 1.1rem; height: 1.1rem; color: var(--text-3); flex: none; }
.sd-pal__input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: .95rem; color: var(--text-1);
}
.sd-pal__input::placeholder { color: var(--text-3); }
.sd-pal__kbd, .sd-pal__foot kbd {
  font-family: ui-monospace, monospace; font-size: .62rem; padding: .12rem .35rem;
  border: 1px solid var(--line); border-radius: .25rem; color: var(--text-3);
  background: var(--tint); direction: ltr; flex: none;
}
.sd-pal__list { max-height: 52vh; overflow-y: auto; padding: .35rem; }
.sd-pal__grp {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); padding: .5rem .6rem .25rem;
}
.sd-pal__row {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem;
  border-radius: .4rem; text-decoration: none; color: var(--text-1); font-size: .82rem;
}
.sd-pal__row [data-lucide] { width: 1rem; height: 1rem; flex: none; color: var(--text-3); stroke-width: 1.6; }
.sd-pal__row.is-action [data-lucide] { color: rgb(var(--color-primary)); }
.sd-pal__row-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-pal__row-s {
  margin-inline-start: auto; font-size: .7rem; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.sd-pal__row.is-on { background: var(--tint); }
.sd-pal__row.is-on [data-lucide] { color: rgb(var(--color-primary)); }
.sd-pal__empty { padding: 2.2rem 1rem; text-align: center; color: var(--text-3); }
.sd-pal__empty [data-lucide] { width: 1.8rem; height: 1.8rem; stroke-width: 1.2; opacity: .5; }
.sd-pal__empty-t { font-size: .85rem; font-weight: 700; color: var(--text-2); margin: .5rem 0 .2rem; }
.sd-pal__empty-s { font-size: .75rem; margin: 0; }
.sd-pal__foot {
  display: flex; gap: 1rem; flex-wrap: wrap; padding: .5rem .8rem;
  border-top: 1px solid var(--line); background: var(--tint);
  font-size: .68rem; color: var(--text-3);
}
.sd-pal__foot span { display: flex; align-items: center; gap: .25rem; }

/* ── نوار واگرد ── */
.sd-undo-host {
  position: fixed; inset-inline: 0; bottom: 1.1rem; z-index: 2900;
  display: flex; justify-content: center; pointer-events: none; padding: 0 1rem;
}
.sd-undo {
  pointer-events: auto; display: flex; align-items: center; gap: .6rem;
  background: #0f172a; color: #f1f5f9; border-radius: .55rem;
  padding: .6rem .75rem .6rem .95rem; font-size: .8rem;
  box-shadow: 0 12px 32px -12px rgb(15 23 42 / .6);
  animation: sd-undo-in .18s cubic-bezier(.2,.8,.3,1); max-width: 100%;
}
.dark .sd-undo { background: #1e293b; border: 1px solid var(--line); }
@keyframes sd-undo-in { from { opacity: 0; transform: translateY(10px) } }
.sd-undo [data-lucide] { width: 1rem; height: 1rem; color: #4ade80; flex: none; }
.sd-undo__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-undo__btn {
  background: transparent; border: 1px solid rgb(255 255 255 / .35); color: #f1f5f9;
  border-radius: .3rem; padding: .18rem .55rem; font-family: inherit;
  font-size: .74rem; font-weight: 700; cursor: pointer; flex: none;
}
.sd-undo__btn:hover:not(:disabled) { background: rgb(255 255 255 / .12); }
.sd-undo__btn:disabled { opacity: .55; cursor: default; }
.sd-undo__x {
  background: transparent; border: 0; color: rgb(241 245 249 / .55);
  font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 .15rem; flex: none;
}
.sd-undo__x:hover { color: #f1f5f9; }

/* ── انتخاب گروهی ── */
.sd-bulk-cell { width: 2.2rem; text-align: center !important; }
.sd-bulk-cell input { width: .95rem; height: .95rem; accent-color: rgb(var(--color-primary)); cursor: pointer; }
.survey-table tbody tr.is-picked { background: var(--tint) !important; }
.sd-bulk-bar {
  position: sticky; bottom: .75rem; z-index: 20; display: none;
  margin: .75rem 0 0; padding: .55rem .8rem; border-radius: .5rem;
  background: #0f172a; color: #f1f5f9; align-items: center; gap: .7rem; flex-wrap: wrap;
  box-shadow: 0 12px 30px -14px rgb(15 23 42 / .55);
}
.dark .sd-bulk-bar { background: #1e293b; border: 1px solid var(--line); }
.sd-bulk-bar.is-on { display: flex; }
.sd-bulk-bar__n { font-size: .8rem; font-weight: 700; }
.sd-bulk-bar__n b { font-variant-numeric: tabular-nums; }
.sd-bulk-bar form { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.sd-bulk-bar button, .sd-bulk-bar .sd-bulk-x {
  background: transparent; border: 1px solid rgb(255 255 255 / .3); color: #f1f5f9;
  border-radius: .3rem; padding: .22rem .6rem; font-family: inherit;
  font-size: .75rem; font-weight: 600; cursor: pointer;
}
.sd-bulk-bar button:hover, .sd-bulk-bar .sd-bulk-x:hover { background: rgb(255 255 255 / .12); }
.sd-bulk-bar .sd-bulk-x { margin-inline-start: auto; border-color: transparent; opacity: .7; }

/* ── ویرایش درجای سلول ── */
.sd-edit { cursor: text; position: relative; border-radius: .25rem; }
.sd-edit:hover { box-shadow: inset 0 0 0 1px var(--line); }
.sd-edit:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: -2px; }
.sd-edit::after {
  content: ""; position: absolute; inset-inline-end: .25rem; top: 50%;
  width: .3rem; height: .3rem; border-radius: 50%; background: var(--text-3);
  opacity: 0; transform: translateY(-50%); transition: opacity .12s;
}
.sd-edit:hover::after { opacity: .45; }
.sd-edit.is-editing { box-shadow: inset 0 0 0 2px rgb(var(--color-primary)); }
.sd-edit__in {
  width: 100%; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: inherit; color: var(--text-1);
  font-variant-numeric: tabular-nums; padding: 0;
}
.sd-edit.is-saving { opacity: .55; }
.sd-edit.is-saved { animation: sd-edit-ok .9s ease; }
@keyframes sd-edit-ok { 0%, 40% { background: rgb(34 197 94 / .18) } 100% { background: transparent } }
.sd-edit.is-err { animation: sd-edit-no .9s ease; }
@keyframes sd-edit-no { 0%, 40% { background: rgb(225 29 72 / .18) } 100% { background: transparent } }

@media (prefers-reduced-motion: reduce) {
  .sd-pal__box, .sd-pal__scrim, .sd-undo { animation: none !important; }
  .sd-edit.is-saved, .sd-edit.is-err { animation: none !important; }
}

/* ── دکمهٔ جستجو/فرمان هدر (جای input قبلی) ── */
.sd-header__search--btn {
  cursor: pointer; font-family: inherit; text-align: start;
  color: rgb(255 255 255 / .85);
}
.sd-header__search--btn:hover { background: rgb(255 255 255 / .18); }
.sd-header__search-ph { flex: 1; font-size: .8rem; opacity: .8; }
.sd-header__search-kbd {
  font-family: ui-monospace, monospace; font-size: .6rem; padding: .1rem .3rem;
  border: 1px solid rgb(255 255 255 / .3); border-radius: .22rem;
  opacity: .75; direction: ltr; flex: none;
}
@media (max-width: 767px) { .sd-header__search-kbd { display: none; } }

/* ── شواهد تحویل (POD) و وصولی راننده در ردیف توقف ─────────────────
   عکس و امضای تحویل تا امروز فقط نوشته می‌شدند و هیچ‌جا خوانده
   نمی‌شدند؛ شاهدی که دیده نشود ارزش شاهد بودن ندارد. */
.sd-pod {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-block-start: 0.3rem;
  padding-inline-start: 0.4rem;
  border-inline-start: 2px solid var(--line);
}
.sd-pod small { color: var(--text-2); font-size: 0.72rem; line-height: 1.5; }
.sd-pod__photo {
  display: inline-block;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-start: 0.2rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.sd-pod__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sd-pod__photo:hover { border-color: var(--primary); }
.sd-pod__pay {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 0.25rem;
  font-size: 0.72rem;
  color: var(--text-2);
}
.sd-pod__pay i { inline-size: 0.85rem; block-size: 0.85rem; }

/* ── دلیل تصمیم اعتباری ──────────────────────────────────────────
   outcomes از ابتدا پیام فارسی داشت و هیچ‌جا رندر نمی‌شد: کاربر
   «مسدود» را می‌دید بدون اینکه بداند کدام قانون آن را مسدود کرده. */
.sd-reason {
  margin-block-start: 0.3rem;
  padding: 0.25rem 0.45rem;
  border-radius: 5px;
  border-inline-start: 3px solid var(--line-strong);
  font-size: 0.73rem;
  line-height: 1.6;
  color: var(--text-2);
  text-align: start;
  white-space: normal;
}
.sd-reason--rejected { border-inline-start-color: #e11d48; }
.sd-reason--pending { border-inline-start-color: #d97706; }

/* ── تاریخچهٔ تغییرات مسترها ──────────────────────────────────────
   ActivityLog تا این نشست نوشته هم نمی‌شد. changes تغییر فیلد‌به‌فیلد
   را نگه می‌دارد، پس نمایش هم باید «از چه به چه» را نشان دهد. */
.sd-activity { display: flex; flex-direction: column; gap: 0.6rem; }
.sd-activity__item {
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--page-bg);
}
.sd-activity__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-2);
}
.sd-activity__when { margin-inline-start: auto; font-size: 0.72rem; }
.sd-activity__change {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-block-start: 0.3rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid var(--line);
  font-size: 0.75rem;
}
.sd-activity__field { font-weight: 600; color: var(--text-1); }
.sd-activity__from { color: var(--text-2); text-decoration: line-through; }
.sd-activity__to { color: var(--text-1); }

/* سطر فرعی رسید — ریز اقلامی که زیر یک جمع می‌نشینند (مثل اقساط وام
   زیر «کسر اقساط وام»). بدون تورفتگی، خواننده جمع و اجزا را یکی
   می‌بیند و رسید دوبار حساب‌شده به نظر می‌رسد. */
.sw-receipt__row--sub {
  padding-inline-start: 1.2rem;
  font-size: 0.78rem;
  color: var(--text-2);
}

/* ── ساخت درجای طرف‌حساب در ویزارد ───────────────────────────────
   عیناً الگوی کاریلو (.sw-party-create در master-data.css): بازشوندهٔ
   details با شبکهٔ فیلد. تفاوت‌ها عمدی‌اند: متغیر رنگ و خصوصیت منطقی
   به‌جای رنگ ثابت و left/right. */
.sw-party-create {
  margin-block: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-bg);
}
.sw-party-create summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
}
.sw-party-create summary::-webkit-details-marker { display: none; }
.sw-party-create summary::before {
  content: "+";
  display: inline-block;
  inline-size: 1.1rem;
  font-weight: 700;
}
.sw-party-create[open] summary::before { content: "−"; }
.sw-party-create[open] summary { margin-block-end: 0.75rem; }
.sw-party-create .field-grid { margin-block-start: 0.5rem; }

/* ورودی تعداد روی خط رسید صندوق — کاریلو set_quantity دارد و ما فقط
   افزودنِ یکی‌یکی داشتیم. عرض کوچک عمدی است تا نام کالا جا بماند. */
.sw-till-qty { display: inline-flex; }
.sw-till-qty input[type="number"] {
  inline-size: 3.2rem;
  padding: 0.1rem 0.25rem;
  font-size: 0.72rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-bg);
  color: var(--text-1);
}

/* ── نوار جرنی توزیع ────────────────────────────────────────────────
   بر پایهٔ همان sd-chain زنجیرهٔ سند تا «مسیر حرکت» در کل پنل یک شکل
   باشد. فقط برچسب گروه و جداکننده اضافه می‌شود. */
.sd-journey { flex-wrap: wrap; margin-block-end: 0.85rem; }
.sd-journey__group {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .02em;
  padding-inline-end: 0.15rem;
}
.sd-journey__sep {
  inline-size: 1px;
  block-size: 1.1rem;
  background: var(--line-strong);
  margin-inline: 0.35rem;
}



/* میان‌بر «فروش حضوری» در ویزارد: کانالی که ویزارد ندارد و به صندوق
   می‌رود. ظاهرش عمداً با pill های کانال فرق دارد تا کاربر نپندارد
   کانال سند را عوض می‌کند. */
.channel-pill--go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-style: dashed !important;
}

/* ── انتخاب لوکیشن تحویل در ویزارد سفارش ────────────────────────────
   تنها راهِ ثبت مختصات، پین‌گذاری سرِ سفر توزیع بود؛ یعنی سفارش
   بی‌مقصد ثبت می‌شد و بار پیداکردن آدرس روی دوش توزیع می‌افتاد. */
.sw-geo {
  margin-block-start: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
}
.sw-geo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: var(--page-bg);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-1);
}
.sw-geo__head i, .sw-geo__head svg { inline-size: 0.9rem; block-size: 0.9rem; }
.sw-geo__state { font-weight: 500; font-size: 0.72rem; color: var(--text-2); }
.sw-geo__map { block-size: 16rem; inline-size: 100%; }
@media (max-width: 640px) { .sw-geo__map { block-size: 12rem; } }

/* ابزارهای انتخابگر لوکیشن: جستجو + موقعیت فعلی + نشانگر SVG.
   نشانگر پیش‌فرض leaflet به images/marker-icon.png اشاره می‌کند که در
   بستهٔ وندورشده نیست و روی صفحه تصویر شکسته دیده می‌شد. */
.sw-geo__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-block-end: 1px solid var(--line);
  flex-wrap: wrap;
}
.sw-geo__search {
  position: relative;
  flex: 1 1 14rem;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.sw-geo__search i, .sw-geo__search svg {
  position: absolute;
  inset-inline-start: 0.55rem;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  opacity: .55;
  pointer-events: none;
}
.sw-geo__search input {
  inline-size: 100%;
  padding: 0.45rem 0.6rem;
  padding-inline-start: 1.9rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  font-size: 0.8125rem;
  background: var(--card-bg);
  color: var(--text-1);
}
.sw-geo__results {
  max-block-size: 12rem;
  overflow-y: auto;
  border-block-end: 1px solid var(--line);
  background: var(--card-bg);
}
.sw-geo__result {
  display: block;
  inline-size: 100%;
  text-align: start;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-block-end: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-1);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.6;
  cursor: pointer;
}
.sw-geo__result:hover { background: var(--page-bg); }
.sw-geo__empty { padding: 0.6rem 0.7rem; font-size: 0.78rem; color: var(--text-2); }
.sw-geo-pin { background: none; border: 0; }
.sw-geo-pin svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }

/* دکمهٔ «ثبت سفارش از این فرصت» روی کارت pipeline — حلقهٔ CRM به فروش.
   فرصت برنده می‌شد و رویدادش را کسی گوش نمی‌داد. */
.crm-kanban-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-block-start: 0.4rem;
  padding: 0.32rem 0.5rem;
  border: 1px dashed rgb(var(--color-primary) / .45);
  border-radius: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(var(--color-primary));
  text-decoration: none;
}
.crm-kanban-card__cta:hover { background: rgb(var(--color-primary) / .08); }
.crm-kanban-card__cta i, .crm-kanban-card__cta svg { inline-size: .8rem; block-size: .8rem; }

/* برنامهٔ امروز روی صفحهٔ ویزیتور — همان واژگان صفحهٔ برنامه‌ریزی. */
.vp-progress { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 0.75rem; }
.vp-progress__bar {
  flex: 1; block-size: 0.45rem; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.vp-progress__bar > span { display: block; block-size: 100%; background: #0d9488; }
.vp-progress__text { font-size: 0.75rem; color: var(--text-2); white-space: nowrap; }
.vp-next {
  padding: 0.6rem 0.7rem; border: 1px solid rgb(var(--color-primary) / .3);
  border-radius: 0.5rem; background: rgb(var(--color-primary) / .05);
}
.vp-next__label { display: block; font-size: 0.68rem; color: var(--text-2); margin-block-end: 0.15rem; }
.vp-stop { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-block-end: 1px solid var(--hairline); font-size: 0.8rem; }
.vp-stop:last-child { border-block-end: 0; }
.vp-stop.is-done .vp-stop__name { color: var(--text-2); text-decoration: line-through; }
.vp-seq {
  inline-size: 1.5rem; block-size: 1.5rem; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgb(var(--color-primary) / .12);
  color: rgb(var(--color-primary)); font-weight: 700; font-size: 0.72rem;
}
.vp-stop.is-done .vp-seq { background: rgb(13 148 136 / .15); color: #0d9488; }
.vp-stop__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── نوار دامنهٔ گزارش ────────────────────────────────────────────────
   فیلتر مشترک صفحات تحلیلی. تا امروز هر صفحه فیلتر خودش را می‌ساخت،
   پس یک عدد در دو صفحه با دو تعریف محاسبه می‌شد. */
.sd-scope {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.75rem;
  margin-block-end: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--card-bg);
}
.sd-scope__field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 9rem; flex: 1 1 9rem; }
.sd-scope__field .sp-ops-field__label { font-size: 0.7rem; color: var(--text-2); font-weight: 500; }
.sd-scope__actions { display: flex; align-items: center; gap: 0.4rem; margin-inline-start: auto; }
@media print { .sd-scope { display: none !important; } }

/* ── استپر مرور حساب (گروه ← کل ← معین ← تفصیلی ← گردش) ──
   مدل انتخاب مطابق راهکاران/رستاموتور: کاربر همیشه می‌بیند کجای
   زنجیره ایستاده و چه چیزی هنوز قابل کلیک نیست. */
.acc-stepper {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem;
  margin-block-end: 0.85rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.7rem; background: var(--card-bg);
}
.acc-step {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.65rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-2);
  text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.acc-step:hover:not(.is-disabled) { background: rgb(148 163 184 / 0.14); color: var(--text-1); }
.acc-step.is-active { background: rgb(var(--color-primary) / 0.12); color: rgb(var(--color-primary)); }
.acc-step.is-done { color: #0f766e; }
/* مرحلهٔ غیرفعال کم‌رنگ می‌شود نه پنهان: کاربر باید کل مسیر را ببیند */
.acc-step.is-disabled { opacity: 0.42; cursor: not-allowed; }
.acc-step__badge {
  display: inline-grid; place-items: center;
  inline-size: 1.35rem; block-size: 1.35rem; border-radius: 999px;
  background: rgb(148 163 184 / 0.2); font-size: 0.7rem; font-weight: 700;
}
.acc-step.is-active .acc-step__badge { background: rgb(var(--color-primary)); color: #fff; }
.acc-step.is-done .acc-step__badge { background: rgb(13 148 136 / 0.16); color: #0f766e; }
.acc-step__icon { inline-size: 0.95rem; block-size: 0.95rem; }
.acc-step__arrow { inline-size: 0.85rem; block-size: 0.85rem; opacity: 0.35; flex: none; }
.dark .acc-step.is-active { background: rgb(147 197 253 / 0.16); color: #93c5fd; }

.acc-trail {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem;
  margin-block-end: 0.75rem; font-size: 0.78rem;
}
.acc-trail__label { color: var(--text-2); font-weight: 700; }
.acc-trail__link { color: rgb(var(--color-primary)); text-decoration: none; }
.acc-trail__link:hover { text-decoration: underline; }
.acc-trail__link.is-current { color: var(--text-1); font-weight: 700; }
.acc-trail__sep { color: var(--text-2); opacity: 0.5; }

@media (max-width: 640px) {
  /* در موبایل برچسبِ مرحلهٔ غیرفعال جا نمی‌شود؛ نشان و آیکون کافی است */
  .acc-step.is-disabled .acc-step__label { display: none; }
}

/* ── سطر کلیک‌پذیر ──
   کل سطر هدف کلیک است. عمداً هیچ خط زیر متنی نمی‌گذارد: زیرخط،
   سلول‌های عددی را شلوغ می‌کند و ستون مبلغ را ناخوانا. نشانهٔ
   کلیک‌پذیری، تغییر زمینه و مکان‌نمای دست است. */
tr.sd-row-drill { cursor: pointer; transition: background 0.12s ease; }
tr.sd-row-drill:hover > td { background: rgb(var(--color-primary) / 0.06); }
tr.sd-row-drill:focus-visible {
  outline: 2px solid rgb(var(--color-primary) / 0.55); outline-offset: -2px;
}
tr.sd-row-drill > td, tr.sd-row-drill:hover > td { text-decoration: none; }
.dark tr.sd-row-drill:hover > td { background: rgb(147 197 253 / 0.09); }

/* ── نوار هشدار پایان مدت دسترسی ─────────────────────────────────── */
.sd-access-banner {
  display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem;
  padding: .7rem .85rem; border-radius: .6rem; font-size: .82rem;
  background: rgb(202 138 4 / 0.1); border: 1px solid rgb(202 138 4 / 0.35);
  color: #92400e;
}
.sd-access-banner.is-urgent {
  background: rgb(225 29 72 / 0.09); border-color: rgb(225 29 72 / 0.35);
  color: #9f1239;
}
.sd-access-banner > i { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.sd-access-banner__body { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.sd-access-banner__body strong { font-weight: 700; }
.sd-access-banner__body span { color: inherit; opacity: .8; line-height: 1.6; }
.sd-access-banner__x {
  flex: none; background: none; border: 0; color: inherit; opacity: .55;
  cursor: pointer; padding: .1rem; border-radius: .3rem; line-height: 0;
}
.sd-access-banner__x:hover { opacity: 1; }
.sd-access-banner__x i { width: 1rem; height: 1rem; }
.dark .sd-access-banner { color: #fbbf24; background: rgb(202 138 4 / 0.14); }
.dark .sd-access-banner.is-urgent { color: #fda4af; background: rgb(225 29 72 / 0.14); }

/* ── پنل قفل‌شده «بخشی از قرارداد سرویس» ──────────────────────────── */
.lk-panel {
  display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem;
  padding: .9rem 1rem; border-radius: .7rem;
  background: var(--card-bg); border: 1px solid var(--line);
  border-inline-start: 3px solid rgb(var(--color-primary) / .55);
}
.lk-panel__icon {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: .55rem;
  display: grid; place-items: center;
  background: rgb(var(--color-primary) / .1); color: rgb(var(--color-primary));
}
.lk-panel__icon i { width: 1.1rem; height: 1.1rem; }
.lk-panel__body { min-width: 0; }
.lk-panel__title { margin: 0 0 .2rem; font-weight: 700; font-size: .87rem; color: var(--text-1); }
.lk-panel__text { margin: 0; font-size: .8rem; color: var(--text-2); line-height: 1.75; }
.lk-panel__tier { margin: .5rem 0 0; font-size: .78rem; color: var(--text-2); }
.lk-panel__tier strong { color: rgb(var(--color-primary)); }
.lk-panel__tier span { color: var(--text-3); }

/* حالت فقط-خواندنیِ کلیدها و کارت‌ها */
.is-readonly { opacity: .72; }
.is-readonly input, .is-readonly button:not([data-keep]) { pointer-events: none; }

/* ── عکس آیتم منو ──────────────────────────────────────────────── */
.ph-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .6rem;
}
.ph-card {
  position: relative; margin: 0; border: 1px solid var(--line);
  border-radius: .65rem; overflow: hidden; background: var(--surface-2);
  aspect-ratio: 4 / 3;
}
.ph-card.is-primary { border-color: rgb(var(--color-primary) / .6);
                      box-shadow: 0 0 0 2px rgb(var(--color-primary) / .18); }
.ph-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-badge {
  position: absolute; inset-block-start: .35rem; inset-inline-start: .35rem;
  display: inline-flex; align-items: center; gap: .2rem;
  background: rgb(var(--color-primary)); color: #fff;
  font-size: .65rem; font-weight: 700; border-radius: 999px; padding: .1rem .45rem;
}
.ph-badge i { width: .75rem; height: .75rem; }
/* اقدام‌ها همیشه دیده می‌شوند نه با hover: روی تبلت و لمس، hover وجود ندارد. */
.ph-actions {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; gap: .25rem; justify-content: flex-end;
  padding: .3rem .35rem;
  background: linear-gradient(0deg, rgb(0 0 0 / .55), transparent);
}
.ph-actions .sl-icon { background: rgb(255 255 255 / .92); border-color: transparent; }
.dark .ph-actions .sl-icon { background: rgb(20 24 33 / .92); }

/* ── ورودی فایل فشرده (لوگوی کسب‌وکار) ───────────────────────────────
   ClearableFileInput پیش‌فرض جنگو سه بلوکِ روی‌هم می‌سازد و چک‌باکسِ
   «پاک کردن» بی‌برچسب زیر یک لینکِ تمام‌عرض می‌افتد. این‌جا همه در یک
   ردیف می‌نشیند و نام فایل کوتاه و کم‌رنگ می‌ماند. */
.op-file { display: flex; flex-direction: column; gap: .4rem; }
.op-file__row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .72rem; color: var(--text-3); min-width: 0;
}
.op-file__name {
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-2); text-decoration: none;
  border-bottom: 1px dashed var(--line); direction: ltr; unicode-bidi: plaintext;
}
.op-file__name:hover { color: rgb(var(--color-primary)); }
.op-file__clear {
  display: inline-flex; align-items: center; gap: .25rem;
  cursor: pointer; white-space: nowrap;
}
.op-file__clear input { margin: 0; }

/* ── لیست کشویی تک‌انتخابی: هرگز دوخطی نشود ─────────────────────────
   `.ts-control` وندور `flex-wrap: wrap` دارد و `> input` هم
   `min-width: 7rem`. وقتی متن گزینهٔ انتخاب‌شده بلند باشد (مثل
   «CO0001 — مشتری حضوری»)، مجموع آن و ورودی از عرض کنترل بیشتر
   می‌شود و ورودی به خط دوم می‌افتد: یک سطر خالیِ آمادهٔ تایپ زیر
   چیزی که همین الان انتخاب شده. کاربر آن را «یک اینتر خورد»
   می‌بیند — و حق دارد.

   در حالت تک‌انتخابی اصلاً نباید شکسته شود: متن بلند با سه‌نقطه
   کوتاه می‌شود و ورودی وقتی فوکوس نیست جمع می‌شود. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ts-wrapper.single .ts-control > input {
  min-width: 0 !important; flex: 1 1 2rem;
}
/* با یک گزینهٔ انتخاب‌شده و بدون فوکوس، ورودی جا نمی‌گیرد. */
.ts-wrapper.single.has-items:not(.focus) .ts-control > input {
  flex: 0 0 0 !important; width: 0 !important; opacity: 0;
}