@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;
  /* رنگ برند — این توکن پنج جا استفاده می‌شد و **هیچ‌جا تعریف نشده
     بود**. نتیجه‌اش این بود که دکمهٔ «انتخاب فایل» روی hover
     `color:#fff` می‌گرفت ولی `background: var(--brand)` بی‌مقدار
     می‌ماند: متنِ سفید روی زمینهٔ شفاف با حاشیهٔ سفید — یعنی دکمه
     دقیقاً وقتی موس رویش می‌رفت ناپدید می‌شد. */
  --brand: #004b9b;
  --brand-contrast: #ffffff;

  --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;
  --brand: #3b82f6;
  --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: 9rem;
  display: flex; flex-direction: column;
}

/* فهرست تعویض هم باید بتواند کوتاه شود و خودش اسکرول بخورد.
   `flex: 0 0 auto` بود — یعنی هرگز کوتاه نمی‌شد. تا وقتی سازمان‌ها
   ۵ تا ۹ سیستم داشتند جا می‌شد؛ اولین سازمانی که همهٔ ماژول‌ها را
   روشن کرد (۱۵ سیستم) کل ۶۹۴ پیکسلِ nav را گرفت و درختِ سیستمِ باز
   به ارتفاع **صفر** رسید — سرتیترش هم از ۴۲ به ۹ پیکسل له شد. کاربر
   سایدباری می‌دید با فهرست نام سیستم‌ها و هیچ زیرمنویی.

   پس درخت کفِ تضمین‌شده می‌گیرد و فهرست تعویض سقف؛ هیچ‌کدام دیگری
   را حذف نمی‌کند. */
.sd-sidebar__nav > .sd-nav-switch {
  flex: 1 1 auto; min-block-size: 4.5rem;
  overflow-y: auto; overscroll-behavior: contain;
}

/* سقف ۴۵٪ فقط وقتی معنا دارد که درختی هم باز باشد و باید جا بگیرد.
   `.sd-nav-current` فقط برای سیستمِ جاری رندر می‌شود، پس روی داشبورد
   اصلاً وجود ندارد — و سقفِ بی‌قید، فهرست ۱۵ سیستمی را روی ۸ تا
   می‌برید در حالی که نیمهٔ پایین سایدبار خالی بود. */
.sd-sidebar__nav > .sd-nav-current + .sd-nav-switch { max-block-size: 45%; }
.sd-sidebar__nav > .sd-nav-switch::-webkit-scrollbar { width: 3px; }
.sd-sidebar__nav > .sd-nav-switch::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.35); border-radius: 99px;
}

/* آیتم منو — 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;
  scroll-padding-block: 0.5rem;   /* آیتم فعال زیر محو لبه‌ها نرود */
  /* محو ملایم لبه‌ها؛ قبلاً ۰.۹rem پایین نصف آیتم را می‌بلعید */
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.3rem,
              #000 calc(100% - 0.3rem), 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--row` یک ردیفِ فلکس است و برای سه‌چهار فیلترِ بالای
 * جدول ساخته شده: هر کدام `flex:1` می‌گیرند و عرض را تقسیم می‌کنند.
 * همان کلاس روی فرمی با دوازده فیلد، هر فیلد را به هشت درصدِ عرض
 * می‌رساند — کادرهایی که نه برچسبشان جا می‌شود نه محتوایشان. فرم به
 * شبکه نیاز دارد: هر فیلد کف عرض دارد و وقتی جا نبود به سطر بعد
 * می‌رود. */
.sd-form-grid {
  display: grid; gap: 0.75rem 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}
.sd-form-grid > label { display: block; margin: 0; min-width: 0; }
.sd-form-grid .sd-span-2 { grid-column: span 2; }
.sd-form-grid .sd-span-all { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .sd-form-grid { grid-template-columns: 1fr; }
  .sd-form-grid .sd-span-2 { grid-column: 1 / -1; }
}
/* گروهِ فیلدها — عنوانِ کوچکِ بالای هر دسته، تا فرمِ بلند خوانده شود. */
.sd-form-group { border-block-start: 1px solid var(--line); padding-block-start: 0.7rem; margin-block-start: 0.2rem; }
.sd-form-group:first-of-type { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.sd-form-group__title {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 700; color: var(--text-2);
  margin-block-end: 0.55rem;
}
.sd-form-group__title i, .sd-form-group__title svg { width: .85rem; height: .85rem; opacity: .7; }
.sd-form-actions {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  border-block-start: 1px solid var(--line); padding-block-start: 0.75rem; margin-block-start: 0.9rem;
}
.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"],
/* `time` و `datetime-local` از فهرست جا مانده بودند: ورودیِ ساعتِ
   «قرائت وضعیت» بی‌قاب و بی‌پس‌زمینه کنار بقیهٔ فیلدها می‌نشست و
   به‌نظر می‌رسید اصلاً استایل ندارد. هر فرمِ دیگری که ساعت بگیرد
   همین را می‌دید. */
.sd-content input[type="time"],
.sd-content input[type="datetime-local"],
.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[type="time"], .dark .sd-content input[type="datetime-local"],
.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%; min-height: 38px;
  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: 36px; 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.
 *
 * ردیف‌های کاتالوگ بعد از `SpTomSelectKit.initAll` با جاوااسکریپت
 * ساخته می‌شوند، پس هرگز Tom Select نمی‌گیرند و کشوی خامِ مرورگر
 * می‌ماندند — وصله‌ای وسط قالب. نمونه‌سازی Tom Select برای ۲۴ ردیف در
 * هر رندر هم سنگین است و همان کندی‌ای را می‌آورد که نمی‌خواهیم؛ پس
 * ظاهر را با CSS یکی می‌کنیم و کشوی بومی سر جایش می‌ماند: باز شدنش
 * آنی است. */
.sales-filter-tom-field > select:not(.tomselected),
.sw-cart-item select.row-ptd {
  width: 100%; min-height: 38px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: 0.375rem; background: var(--card-bg);
  color: var(--text-1); font-family: inherit; font-size: 0.8125rem; font-weight: 500;
  padding-block: 0.35rem; padding-inline: 0.6rem 1.7rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: left 0.85rem top calc(50% - 1px), left calc(0.85rem - 5px) top calc(50% - 1px);
  background-repeat: no-repeat;
}
.sales-filter-tom-field--compact > select:not(.tomselected) { min-height: 32px; font-size: 0.75rem; }
.sales-filter-tom-field > select:not(.tomselected):hover { border-color: var(--line-strong); }
.sales-filter-tom-field > select:not(.tomselected):focus-visible {
  outline: 2px solid rgb(var(--color-primary) / 0.45); outline-offset: 1px; border-color: rgb(var(--color-primary));
}
.dark .sales-filter-tom-field > select:not(.tomselected) { background-color: rgb(var(--color-darkmode-800)); border-color: var(--line-strong); }
/* کشوییِ فشرده پس از ارتقا هم باید همان اندازه بماند، وگرنه ردیف در
   لحظهٔ کلیک تکان می‌خورد: کشوی بومی ۳۲ پیکسل است و کنترل Tom Select
   ۳۸. کاربر کلیک می‌کند و جدول زیر دستش جابه‌جا می‌شود. */
.sales-filter-tom-field--compact .ts-wrapper { min-height: 32px; }
.sales-filter-tom-field--compact .ts-control {
  min-height: 30px; font-size: 0.75rem; padding-block: 0.2rem;
}
.sales-filter-tom-field--compact .ts-dropdown { font-size: 0.75rem; }

/* فلش کشویی — تم وندورشدهٔ 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; }
/* قاعدهٔ دوّمِ هم‌سلکتورِ کشویی بومی از این‌جا برداشته شد: نسخهٔ
   کامل‌ترش بالاتر است (با فلش و فضای کنارش) و این یکی چون بعدتر
   می‌آمد، حالت فشرده را بی‌صدا خنثی می‌کرد — کشویی ۳۲ پیکسلی ۳۸
   پیکسل می‌شد و به‌محض ارتقا به Tom Select چهار پیکسل می‌پرید. */
/* 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); }

/* ظرفِ دکمه‌های سرصفحه. `sd-page-head__actions` در پنج صفحه استفاده
   می‌شد و **هیچ‌جا تعریف نشده بود**؛ هر کدام با `style` اینلاین و
   `gap:.4rem` خودش را سرپا نگه می‌داشت، پس فاصلهٔ دکمه‌ها در آن پنج
   صفحه با بقیهٔ پنل یکی نبود. */
.sp-ops-actions,
.sd-page-head__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* آیکنِ داخل دکمه همیشه ۱rem.
   lucide بدون کلاسِ اندازه، SVG را ۲۴×۲۴ می‌کشد و دکمه از ۳۷px به
   ۴۰px می‌رود. در ۱۷۲ جای پروژه `h-4 w-4` فراموش شده بود، پس همان
   دکمه در صفحه‌های مختلف دو قد داشت. این‌جا بسته می‌شود تا نوشتن یا
   نوشتنِ کلاس، دیگر فرقی نکند. */
.sp-ops-btn svg, .sp-ops-btn [data-lucide] {
  width: 1rem; height: 1rem; flex: none;
}
.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;
  /* پایهٔ خنثی — تا `<button>` و `<a>` یک‌شکل باشند.
   *
   * این کلاس برای لینک نوشته شده بود و رنگ و قاب فقط در حالت‌های
   * `--primary` و `--secondary` تعریف می‌شد. نتیجه‌اش این بود که
   * `<button class="sp-ops-btn">` بی‌حالت، استایلِ پیش‌فرضِ مرورگر را
   * نگه می‌داشت: جعبهٔ خاکستریِ قاب‌دار کنارِ لینک‌هایی که فقط متن و
   * آیکون بودند — «چاپ / PDF» و «کپی برای خودم» دقیقاً همین بودند. */
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent; background: transparent; color: var(--text-1);
}
.sp-ops-btn:not([class*="sp-ops-btn--"]):hover { background: var(--tint); }
.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; }

/* ورودیِ محتوای لاتین در صفحهٔ راست‌به‌چپ.
 *
 * نشانی و نام مدل و نام متغیر محیطی همه لاتین‌اند؛ در ورودیِ RTL
 * وارونه چیده می‌شوند و بلندش از کادر بیرون می‌زند. `direction: ltr`
 * به‌تنهایی کافی نیست: تراز متن هم باید از چپ باشد وگرنه نشانیِ کوتاه
 * به لبهٔ راست می‌چسبد و با برچسبِ فارسی قاطی می‌شود. */
.sd-input--latin {
  direction: ltr; text-align: left; unicode-bidi: plaintext;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem;
}
.sd-input--latin::placeholder { text-align: left; opacity: .55; }

/* اقدامِ داخل حالتِ خالی — «هیچی نیست» بدون راهِ بعدی، بن‌بست است. */
.sd-empty__action {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-block-start: 0.45rem;
  font-size: 0.75rem; font-weight: 600; color: rgb(var(--color-primary));
  text-decoration: none;
}
.sd-empty__action:hover { text-decoration: underline; }
.sd-empty__action i, .sd-empty__action svg { width: .9rem; height: .9rem; }

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

.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) {
  /* در حالت کارتی، جدول دیگر جدول نیست.
     بدون این، `table` عرضِ طبیعیِ ستون‌هایش را نگه می‌داشت (۳۰۷px در
     صفحهٔ ۳۷۵px) و از کادر بیرون می‌زد؛ `td` هم با `width:100%` به
     عرضِ ستون حساب می‌شد نه به عرضِ کارت، پس مقدارها در نواری باریک
     وسطِ صفحه می‌نشستند و بقیه خالی می‌ماند. */
  .survey-table, .survey-table tbody { display: block; width: 100%; min-width: 0; }
  .survey-table-scroll { overflow-x: visible; }
  .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: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; width: 100% !important; border: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0.4rem 0.65rem; text-align: start;
  }
  .survey-table tbody td::before {
    content: attr(data-label);
    flex: none; font-size: 0.7rem; font-weight: 600;
    color: var(--text-2); white-space: nowrap;
  }
  /* سلولِ بی‌برچسب (دکمه‌های عملیات) تمامِ عرض را می‌گیرد. */
  .survey-table tbody td:not([data-label]) { justify-content: flex-start; }
  .survey-table tbody td:not([data-label])::before { content: none; }
  /* مقدارِ بلند باید بشکند، نه این‌که از کادر بزند بیرون. */
  .survey-table tbody td > * { min-width: 0; }
  .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); }

/* میز پرداخت 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; }

/* دکمهٔ بستنِ مودال. دو نام در قالب‌ها بود و هیچ‌کدام تعریف نشده:
   `__x` (علامت ×) و `__close` (آیکن lucide). هر دو همین‌جا. */
.sp-ops-modal__x,
.sp-ops-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  border: 1px solid transparent; border-radius: 0.375rem;
  background: transparent; color: var(--text-2);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.sp-ops-modal__x:hover,
.sp-ops-modal__close:hover { background: var(--tint); color: var(--text-1); }
.sp-ops-modal__x svg,
.sp-ops-modal__close svg { width: 1rem; height: 1rem; }

/* ورودیِ متنیِ استاندارد — در پنج صفحهٔ پلتفرم استفاده می‌شد و
   تعریف نداشت، پس ورودی‌ها بدون کادر و با قلمِ پیش‌فرضِ مرورگر
   دیده می‌شدند. */
.sd-input {
  width: 100%; border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.45rem 0.6rem; font: inherit; font-size: 0.8125rem;
  background: var(--card-bg); color: var(--text-1);
}
.sd-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sd-input--latin { direction: ltr; text-align: start; }

/* ستونِ دکمهٔ «اعمال» کنار فیلترها — باید هم‌تراز کفِ کادرها بنشیند،
   نه وسطشان. برچسبِ نامرئی بالای دکمه همین کار را می‌کرد ولی بدون
   این چیدمان بی‌اثر بود. */
.sw-store-picker-action { display: flex; flex-direction: column; justify-content: flex-end; }

/* عنوانِ سکشن باید بتواند کوتاه شود، وگرنه عنوانِ بلند کنارِ آیکن
   از کادر بیرون می‌زند. */
.sp-section-header-text { min-width: 0; flex: 1 1 auto; }
.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; }

/* کاشیِ گزارش — پنلِ کوچکِ همان صفحهٔ گزارش، نه نمودارِ لخت روی سفید.
 *
 * نسخهٔ اول فقط یک خط خاکستری بود: بی‌کارت آماری، بی‌جدول، با محورِ
 * «۲۰۰۰۰۰۰۰۰۰۰۰» بدون جداکننده. کاشیِ گزارش باید همان سلسله‌مراتبی را
 * داشته باشد که صفحهٔ گزارش دارد — عدد، بعد روند، بعد جزئیات. */
.sd-dash-tile--panel { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.95rem 1rem 0.8rem; }
.sd-dash-tile--panel .sd-dash-tile__head {
  justify-content: space-between; margin-block-end: 0;
  padding-block-end: 0.6rem; border-block-end: 1px solid var(--line);
}
.sd-dash-tile__name { display: inline-flex; align-items: center; gap: 0.45rem; }
.sd-dash-tile__more {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.7rem; font-weight: 500; color: var(--color-theme-2, #004b9b);
  text-decoration: none; white-space: nowrap; opacity: .85;
}
.sd-dash-tile__more:hover { opacity: 1; text-decoration: underline; }
.sd-dash-tile__more i, .sd-dash-tile__more svg { width: .8rem; height: .8rem; }

/* کارت‌های آماری داخل کاشی: ریزتر از صفحهٔ گزارش، چون عرضِ کاشی
   می‌تواند یک‌چهارمِ صفحه باشد. */
.sd-dash-tile__kpis {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.sd-dash-tile__kpis .sd-kpi-tile { padding: 0.55rem 0.65rem; border-radius: 0.6rem; }
/* `min-width:0` لازم است: `__body` یک آیتمِ فلکس است و بی این، عددِ
   بلند به‌جای کوچک‌شدن از کاشی بیرون می‌زند و رقمِ اولش بریده می‌شود. */
.sd-dash-tile__kpis .sd-kpi-tile__body { min-width: 0; }
.sd-dash-tile__kpis .sd-kpi-tile__value {
  font-size: 1rem; min-width: 0; flex-wrap: wrap;
}
.sd-dash-tile__kpis .sd-kpi-tile__label { overflow-wrap: anywhere; }
.sd-dash-tile__kpis .sd-kpi-tile__label { font-size: 0.68rem; }
.sd-dash-tile__kpis .sd-kpi-tile__icon { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; }
.sd-dash-tile__kpis .sd-kpi-tile__icon i, .sd-dash-tile__kpis .sd-kpi-tile__icon svg {
  width: .9rem; height: .9rem;
}

.sd-dash-tile__chart { min-height: 230px; }
.sd-dash-tile__table { max-height: 260px; overflow: auto; }
.sd-dash-tile__table .survey-table { font-size: 0.75rem; }
.sd-dash-tile__table thead th {
  position: sticky; inset-block-start: 0; z-index: 1; background: var(--card-bg);
}
.sd-dash-tile__foot { margin: 0; font-size: 0.68rem; }

/* پیوستِ سند — شبکهٔ کارت‌ها با پیش‌نمایشِ تصویر. */
.sd-attach-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sd-attach {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 0.6rem; background: var(--card-bg);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.sd-attach:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.sd-attach__body {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.65rem;
  text-decoration: none; color: var(--text-1); min-width: 0; flex: 1;
}
.sd-attach__icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 0.5rem;
  background: rgb(var(--color-primary) / .08); color: rgb(var(--color-primary));
}
.sd-attach__icon i, .sd-attach__icon svg { width: 1.15rem; height: 1.15rem; }
.sd-attach--image img {
  width: 3.2rem; height: 3.2rem; object-fit: cover; flex: none;
  border-radius: 0.45rem; background: var(--tint);
}
.sd-attach__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sd-attach__meta b {
  font-size: 0.75rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-attach__meta span { font-size: 0.68rem; color: var(--text-3); }
.sd-attach__caption { color: var(--text-2) !important; overflow-wrap: anywhere; }
.sd-attach__remove {
  display: flex; align-items: center; padding-inline-end: 0.4rem; flex: none;
}
.sd-attach-form { margin-block-start: 0.9rem; }
.sd-attach-form input[type="file"] {
  width: 100%; font-size: 0.75rem; padding: 0.35rem;
  border: 1px dashed var(--line-strong); border-radius: 0.4rem; background: var(--tint);
}

/* ورودی فایل در فرم‌های پنل ────────────────────────────────────────
   مرورگر برای `input[type=file]` دکمهٔ خودش را می‌گذارد با متنِ
   انگلیسیِ «Choose File / No file chosen» و چیدمانِ چپ‌چین. وسط یک
   صفحهٔ فارسیِ راست‌چین، این هم بیگانه دیده می‌شود هم نامفهوم.

   راه‌حل بدون جاوااسکریپت: خودِ ورودی کادرِ خط‌چین می‌شود و
   `::file-selector-button` به دکمهٔ هم‌شکلِ بقیهٔ دکمه‌های پنل بدل
   می‌شود. متنِ «فایلی انتخاب نشده» را مرورگر می‌نویسد و قابلِ
   ترجمه نیست؛ `.sd-file__hint` کنارش توضیح فارسی می‌دهد. */
.sd-file {
  width: 100%; font-size: 0.78rem; color: var(--text-2);
  padding: 0.5rem; border: 1px dashed var(--line-strong);
  border-radius: 0.5rem; background: var(--tint); cursor: pointer;
}
.sd-file:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sd-file::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer;
  margin-inline-end: 0.6rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--line); border-radius: 0.375rem;
  background: var(--card-bg); color: var(--text-1);
}
.sd-file::file-selector-button:hover {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.sd-file__hint {
  display: block; margin-block-start: 0.35rem;
  font-size: 0.7rem; color: var(--text-3, var(--text-2));
}

/* انتخابگر فایل با متنِ فارسی.
   متنِ «Choose File / No file chosen» را خودِ مرورگر می‌نویسد و با CSS
   ترجمه‌شدنی نیست — در یک پنلِ فارسیِ راست‌چین بیگانه می‌نشیند. پس
   ورودیِ اصلی پنهان می‌شود (نه `display:none`، تا فوکوس و اعتبارسنجی
   مرورگر سرِ جایش بماند) و برچسب، خودش دکمه می‌شود. */
.sd-filepick {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem; border: 1px dashed var(--line-strong);
  border-radius: 0.5rem; background: var(--tint); cursor: pointer;
}
.sd-filepick input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.sd-filepick__btn {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  padding: 0.42rem 0.9rem; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 0.375rem;
  background: var(--card-bg); color: var(--text-1);
}
.sd-filepick:hover .sd-filepick__btn,
.sd-filepick input[type="file"]:focus-visible ~ .sd-filepick__btn {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.sd-filepick__name {
  font-size: 0.78rem; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-filepick.is-chosen .sd-filepick__name { color: var(--text-1); font-weight: 600; }
.sd-filepick.is-chosen { border-style: solid; border-color: var(--brand); }

/* فرم‌های ساده‌ای که شبکهٔ دوستونه می‌خواهند و کارتِ کامل نه.
   کلاس‌های `bf-*` در چهار قالب استفاده شده بودند و **هیچ‌جا تعریف
   نشده بودند** — یعنی فرم بی‌فاصله و بی‌چیدمان رندر می‌شد. */
.sd-simple-form { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, 1fr); }
.sd-simple-form > .sd-span-full { grid-column: 1 / -1; }
.sd-simple-form label > span:first-child {
  display: block; margin-block-end: 0.3rem;
  font-size: 0.72rem; font-weight: 600; color: var(--text-2);
}
.sd-simple-form input:not([type="file"]),
.sd-simple-form select, .sd-simple-form 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);
}
@media (max-width: 720px) { .sd-simple-form { grid-template-columns: 1fr; } }

/* گیج: حلقه و دو چیپِ زیرش. */
.sd-dash-tile__chart--gauge { min-height: 170px; }
.sd-gauge-facts {
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; flex-wrap: wrap; margin-block-start: -0.2rem;
}
.sd-gauge-fact {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.5rem; border-radius: 0.4rem;
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sd-gauge-fact--value { background: rgb(79 70 229 / .1); color: #4338ca; }
.sd-gauge-fact--target { background: rgb(13 148 136 / .1); color: #0f766e; }
.dark .sd-gauge-fact--value { background: rgb(79 70 229 / .22); color: #c7d2fe; }
.dark .sd-gauge-fact--target { background: rgb(13 148 136 / .22); color: #99f6e4; }

/* کارت انتخاب — فهرست مقصدهایی که کاربر یکی را برمی‌گزیند
   (انتخاب انبار برای نمای سه‌بعدی، انتخاب کانال فروش و مانند آن). */
.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; }
/* برچسب فیلد در فرم‌های پنل.
 *
 * این کلاس در سه قالب نوشته شده بود و **هیچ‌جا تعریف نداشت**: یک
 * `span` خالیِ inline با فونت متنِ صفحه. inline بودن یعنی عرض ستونِ
 * گرید را رعایت نمی‌کرد، پس برچسب از کادر بیرون می‌زد و تا لبهٔ کارت
 * کشیده می‌شد — پهن‌تر از خودِ ورودی‌ای که برچسبش بود. دقیقاً همان
 * چیزی که «استایل ندارد» دیده می‌شود.
 *
 * اندازه و رنگش همان `.sp-ops-field__label` است تا دو جور برچسب در
 * یک فرم نداشته باشیم. */
.sd-label {
  display: block; margin-bottom: 0.3rem; line-height: 1.7;
  font-size: 0.6875rem; font-weight: 500; color: var(--text-2);
}
.sd-label b { font-weight: 700; }
/* دکمه داخل شبکهٔ فیلد نباید کشیده شود.
   `.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); }

/* تاگل داخل ردیفِ فیلتر و شبکهٔ فرم.
 *
 * هر دو ظرف `> label { display: block }` می‌دهند و ویژگی‌شان از
 * `.sp-ops-toggle` بالاتر است، پس `display: flex`ِ خودِ تاگل را
 * می‌شکستند: برچسب و کلید روی هم می‌افتادند به‌جای اینکه کنار هم
 * بنشینند. چهار صفحهٔ دیگر هم همین را داشتند (صندوق‌ها، اعتبار
 * سفارش، پروفایل اعتباری، سرنخ) — یعنی ایرادِ ظرف بود نه قالب. */
.sp-ops-filters.sp-ops-filters--row > label.sp-ops-toggle,
.sd-form-grid > label.sp-ops-toggle {
  display: flex; align-items: center; justify-content: space-between;
}
/* ارتفاعش با ورودی‌های کنارش یکی شود — وگرنه در ردیفِ فیلتر کوتاه‌تر
   می‌ماند و خط پایه به هم می‌ریزد. */
.sd-form-grid > label.sp-ops-toggle { min-height: 2.3rem; }

/* چیپ چندانتخابی */
.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); }
/* **حالت انتخاب باید از خودِ ورودی بیاید، نه از کلاسِ دست‌نوشته.**
   تا امروز فقط `.is-on` این ظاهر را می‌داد و آن کلاس در قالب ثابت
   نوشته شده بود؛ یعنی کلیک‌کردن هیچ چیزی را عوض نمی‌کرد و «جای
   داده» اصلاً قابل انتخاب به‌نظر نمی‌رسید. کانال‌ها هم همین بودند و
   فقط چون پیش‌فرضشان در HTML علامت داشت، سالم به‌نظر می‌رسیدند. */
.industry-card.is-on, .channel-card.is-on,
.industry-card:has(input:checked), .channel-card:has(input:checked) {
  border-color: rgb(var(--color-primary) / .45);
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / .12);
  background: rgb(var(--color-primary) / .04);
}
/* تیکِ داخلِ مربع فقط وقتی دیده شود که واقعاً انتخاب شده باشد. */
.channel-card:has(input:checked) .channel-card__mark,
.industry-card:has(input:checked) .channel-card__mark {
  background: rgb(var(--color-primary)); color: #fff;
  border-color: rgb(var(--color-primary));
}
/* دسترسی با صفحه‌کلید: ورودی پنهان است، پس قاب باید فوکوس را نشان دهد. */
.channel-card:has(input:focus-visible), .industry-card:has(input:focus-visible) {
  outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px;
}
.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; } }

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

/* بنرهای اطلاع/هشدار/خطا ─────────────────────────────────────────
   هر سه بلوکِ ساده بودند و آیکنِ `<i>` داخلشان inline می‌نشست: در
   یک جملهٔ دوخطی، آیکن وسطِ خطِ اول می‌افتاد و با متن هم‌تراز نبود.
   در تمام‌صفحه که عرض زیاد می‌شود، فاصلهٔ آیکن تا متن هم کش می‌آمد.

   این‌جا هر سه یک چیدمان می‌گیرند: آیکنِ هم‌اندازه و بدون کشیدگی،
   هم‌ترازِ خطِ اول، و متنی که عرضِ خواندنی‌اش از دست نرود. ۵۷ قالب
   از این سه کلاس استفاده می‌کنند. */
.sw-alert-info, .sd-warn-banner, .sd-error-banner, .sw-store-error {
  display: flex; align-items: flex-start; gap: 0.5rem;
  border-radius: 0.5rem; padding: 0.65rem 0.85rem;
  font-size: 0.8125rem; line-height: 1.7;
}
.sw-alert-info > [data-lucide], .sd-warn-banner > [data-lucide],
.sd-error-banner > [data-lucide], .sw-store-error > [data-lucide],
.sw-alert-info > svg, .sd-warn-banner > svg,
.sd-error-banner > svg, .sw-store-error > svg {
  width: 1.05rem; height: 1.05rem; flex: none;
  /* نیم‌خطِ بالا، تا آیکن روی خطِ اول بنشیند نه بالاتر از آن. */
  margin-block-start: 0.2rem;
}
.sw-alert-info { max-width: 78ch; }
.sd-warn-banner, .sd-error-banner { max-width: 78ch; }

.sw-alert-info {
  border: 1px solid rgb(186 230 253); background: rgb(240 249 255); color: rgb(12 74 110);
}
.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` در نمایش هم
     باید flex شود، وگرنه آیکن دوباره inline می‌افتد. */
  display: none; margin-top: 0.5rem;
  border: 1px solid rgb(254 202 202);
  background: rgb(254 242 242); color: rgb(185 28 28);
}
.sw-store-error.is-open, .sd-error-banner.is-open,
.sw-store-error[style*="flex"], .sd-error-banner[style*="flex"] { display: flex; }
.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);
}
.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 ════════════════ */

/* دکمهٔ دستیار: رنگ از برند (`--color-primary`)، نه بنفشِ ثابت —
   ایسون، بندو و اس دیتا هر کدام رنگ خودشان را می‌گیرند. */
.sd-ai-fab {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 64;
  width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; border: 0;
  background: linear-gradient(145deg, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.78));
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 28px rgb(var(--color-primary) / 0.38), inset 0 1px 0 rgb(255 255 255 / 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-radius 0.18s ease;
}
.sd-ai-fab svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.9; }
.sd-ai-fab:hover { transform: translateY(-2px); border-radius: 1.25rem;
  box-shadow: 0 14px 34px rgb(var(--color-primary) / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.sd-ai-fab:focus-visible { outline: 3px solid rgb(var(--color-primary) / 0.45); outline-offset: 3px; }
.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-msg__file {
  display: flex; align-items: center; gap: 0.3rem;
  margin-block-start: 0.4rem; padding-block-start: 0.4rem;
  border-block-start: 1px solid rgb(var(--color-primary) / 0.18);
  font-size: 0.7rem; color: var(--text-2); overflow-wrap: anywhere;
}
.sd-ai-msg__file i, .sd-ai-msg__file svg { width: .8rem; height: .8rem; flex: none; opacity: .75; }
.sd-ai-msg__file b { font-weight: 600; color: var(--text-3); }
.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; }
}

/* ── چاپ و خروجی PDF ──
 *
 * «ذخیره به PDF» همان چاپِ مرورگر است، پس یک چیدمانِ چاپ هر دو را
 * می‌دهد و به کتابخانهٔ PDF روی سرور نیاز نیست.
 *
 * قاعده‌ها از کاغذ می‌آیند نه از صفحه: A4، سربرگ با نامِ کسب‌وکار و
 * دوره، سرستونِ جدول روی هر صفحه تکرار شود، ردیف وسطِ صفحه نشکند، و
 * رنگ‌ها واقعاً چاپ شوند (مرورگر پیش‌فرض پس‌زمینه‌ها را حذف می‌کند و
 * کاشی‌های رنگی سفیدِ بی‌معنا درمی‌آیند). */
.sd-print-only { display: none; }

@media print {
  @page { size: A4; margin: 12mm 10mm 14mm; }

  .sd-sidebar, .sd-header, .sd-ai-fab, .sd-ai-panel, .sp-ops-actions,
  .sp-ops-filters-box, .sp-ops-pagination, .sp-ops-tabs, .bk-row,
  .sd-help-collapse, .karo-table-filters, .sd-dash-tile__more,
  [data-print-page], .messages, .sd-breadcrumbs { display: none !important; }
  .sd-main { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .survey-public-page, .survey-public-card, .sp-section, .sp-section-panel {
    box-shadow: none !important; border: 0 !important; padding: 0 !important;
    margin: 0 !important; background: #fff !important;
  }

  /* رنگِ کاشی و نمودار باید چاپ شود؛ وگرنه کارت‌ها سفیدِ خالی می‌شوند. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .sd-print-only { display: block; }
  .sd-print-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; padding-block-end: 6px; margin-block-end: 10px;
    border-block-end: 1.5px solid #0f172a; font-size: 10pt;
  }
  .sd-print-head b { display: block; font-size: 12pt; }
  .sd-print-head__title { text-align: center; }
  .sd-print-head__meta { display: flex; flex-direction: column; gap: 1px;
                         font-size: 8.5pt; color: #475569; text-align: end; }

  /* جدول: سرستون روی هر صفحه، ردیف نشکند. */
  thead { display: table-header-group; }
  tr, .sd-kpi-tile, .sd-dash-tile { break-inside: avoid; page-break-inside: avoid; }
  .survey-table-scroll, .sd-dash-tile__table { overflow: visible !important; max-height: none !important; }
  .survey-table { width: 100%; font-size: 9pt; }
  .survey-table th, .survey-table td { padding: 3px 5px !important; }

  /* شبکهٔ داشبورد روی کاغذ: دو ستون، نه دوازده. */
  .sd-dash-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6mm !important; }
  .sd-dash-cell { grid-column: span 1 !important; }
  .sd-dash-cell:has(.sd-dash-tile--panel) { grid-column: 1 / -1 !important; }
  .sp-kpi-grid, .sd-kpi-grid-2 {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4mm !important;
  }
  /* کارت‌های داخل یک کاشی هرچندتا که باشند عرض را بین خودشان تقسیم
     می‌کنند؛ شبکهٔ چهارستونهٔ ثابت برای سه کارت یک ستون خالی می‌گذاشت
     و عدد را دوخطی می‌کرد. */
  .sd-dash-tile__kpis { display: flex !important; gap: 4mm !important; }
  .sd-dash-tile__kpis > * { flex: 1 1 0; min-width: 0; }
  .sd-kpi-tile { border: 1px solid #cbd5e1 !important; box-shadow: none !important; }
  .sp-chart { min-height: 0 !important; break-inside: avoid; }
  .sd-section-break { break-before: page; }
  a[href]::after { content: none !important; }
}

/* همبرگر فقط موبایل؛ دکمهٔ جمع‌کردن فقط دسکتاپ */
.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; bottom: 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-dash-cell:has(.sd-kpi-tile__tip.is-open),
.sd-dash-cell:has(.sd-kpi-tile__tip:hover) { overflow: visible; z-index: 5; }

.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(--brand); }
.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(--brand);
  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__fix {
  font: inherit; font-weight: 600; cursor: pointer;
  color: var(--danger, #e11d48); background: none; border: 0;
  padding: 0 .15rem; text-decoration: underline;
}
.sw-geo__fix:hover { opacity: .8; }
.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(--tint);
  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;
}


/* دکمهٔ ارسال دستیار — آیکن در RTL آینه می‌شود.
   `send-horizontal` هواپیمای کاغذیِ رو به راست است؛ در صفحهٔ راست‌به‌چپ
   یعنی «به عقب»، و کاربر دنبال دکمهٔ دیگری می‌گردد. */
[dir="rtl"] .sd-ai-send [data-lucide],
[dir="rtl"] .sd-ai-send svg { transform: scaleX(-1); }

/* حالت ضبط دستیار — دکمه باید در نگاه اول بگوید «الان در حال ضبط است».
   بدون نشانهٔ دیداری، کاربر دوباره می‌زند و ضبط را از اول شروع می‌کند. */
.sd-ai-spin { animation: sd-ai-spin 1s linear infinite; }
@keyframes sd-ai-spin { to { transform: rotate(360deg); } }
#sd-ai-mic.is-recording {
  background: rgb(var(--color-danger));
  border-color: rgb(var(--color-danger));
  color: #fff;
  animation: sd-ai-pulse 1.4s ease-in-out infinite;
}
@keyframes sd-ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--color-danger) / 0.45); }
  50% { box-shadow: 0 0 0 6px rgb(var(--color-danger) / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-ai-spin, #sd-ai-mic.is-recording { animation: none; }
}

/* ════════════════ کارت پیش‌نویس دستیار ════════════════

   پیش‌نویس سفارش یک جدولِ قابل‌ویرایش است، نه یک جملهٔ چت. حبابی که
   کارت دارد از سقف ۸۵٪ آزاد می‌شود، وگرنه ستون‌های تعداد و قیمت روی
   هم می‌افتند و همان چیزی می‌شود که قرار بود جایش را بگیرد. */

.sd-ai-msg__bubble:has(.sd-draft) { max-width: 100%; width: 100%; }

.sd-draft { display: flex; flex-direction: column; gap: 0.55rem; }
.sd-draft.is-busy { opacity: 0.55; pointer-events: none; }
.sd-draft__head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sd-draft__code { color: var(--text-2); font-size: 0.68rem; margin-inline-start: 0.35rem; }
.sd-draft__warn {
  color: rgb(var(--color-danger)); font-size: 0.7rem; font-weight: 600;
  margin-inline-start: 0.35rem;
}
.sd-draft__asks {
  margin: 0; padding: 0.4rem 1.1rem; list-style: disc;
  background: rgb(var(--color-warning) / 0.08);
  border: 1px solid rgb(var(--color-warning) / 0.25);
  border-radius: 0.5rem; font-size: 0.72rem; line-height: 1.9;
}

.sd-draft__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.sd-draft__fields label { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.sd-draft__fields label > span { font-size: 0.68rem; color: var(--text-2); }
.sd-draft__wide { grid-column: 1 / -1; }
.sd-draft__fields select,
.sd-draft__fields input {
  inline-size: 100%; border: 1px solid var(--line); border-radius: 0.45rem;
  padding: 0.3rem 0.45rem; font-size: 0.75rem; font-family: inherit;
  background: var(--card-bg); color: var(--text-1);
}

.sd-draft__scroll { overflow-x: auto; }

/* جدولِ سند حسابداری — چهار ستون، در همین عرض جا می‌شود. */
.sd-draft__lines { inline-size: 100%; border-collapse: collapse; font-size: 0.72rem; }
.sd-draft__lines th {
  text-align: center; font-weight: 600; color: var(--text-2);
  padding: 0.25rem 0.3rem; border-block-end: 1px solid var(--line); white-space: nowrap;
}
.sd-draft__lines td { padding: 0.3rem; border-block-end: 1px solid var(--hairline); text-align: center; }
.sd-draft__cell-title { text-align: start !important; min-inline-size: 7rem; }

/* ردیف‌های سفارش کارت‌اند: هفت ستون در کشوی ۳۵۶ پیکسلی جا نمی‌شد. */
.sd-draft__items { display: flex; flex-direction: column; gap: 0.35rem; }
.sd-draft__item {
  border: 1px solid var(--hairline); border-radius: 0.5rem;
  padding: 0.4rem 0.5rem; background: var(--card-bg);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.sd-draft__item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.4rem; }
.sd-draft__item-top b { font-size: 0.76rem; line-height: 1.5; }
.sd-draft__item-nums { display: flex; align-items: flex-end; gap: 0.35rem; flex-wrap: wrap; }
.sd-draft__item-nums label {
  display: flex; flex-direction: column; gap: 0.1rem;
  font-size: 0.64rem; color: var(--text-2);
}
.sd-draft__item-sum { margin-inline-start: auto; font-size: 0.7rem; color: var(--text-2); }
.sd-draft__money { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-1); }
.sd-draft__item input {
  inline-size: 3.1rem; border: 1px solid var(--line); border-radius: 0.35rem;
  padding: 0.2rem 0.25rem; font-size: 0.72rem; text-align: center;
  background: var(--card-bg); color: var(--text-1); font-family: inherit;
}
.sd-draft__x {
  border: 0; background: transparent; color: rgb(var(--color-danger));
  cursor: pointer; padding: 0.15rem; line-height: 0; flex: none;
}
.sd-draft__x svg { inline-size: 0.9rem; block-size: 0.9rem; }

.sd-draft__add { display: flex; align-items: flex-end; gap: 0.35rem; flex-wrap: wrap; }
.sd-draft__add select {
  /* با افزوده‌شدن «تک»، چهار کنترل در یک ردیف جا نمی‌شود؛ انتخابگر
     می‌پیچد و کامل می‌ماند تا نام کالا بریده نشود. */
  flex: 1 1 8rem; min-inline-size: 0; border: 1px solid var(--line); border-radius: 0.45rem;
  padding: 0.3rem 0.4rem; font-size: 0.72rem; font-family: inherit;
  background: var(--card-bg); color: var(--text-1);
}
.sd-draft__add label {
  display: flex; flex-direction: column; gap: 0.1rem;
  font-size: 0.64rem; color: var(--text-2);
}
.sd-draft__add input {
  inline-size: 2.9rem; border: 1px solid var(--line); border-radius: 0.35rem;
  padding: 0.2rem 0.25rem; font-size: 0.72rem; text-align: center;
  background: var(--card-bg); color: var(--text-1); font-family: inherit;
}
.sd-draft__add button { flex: none; padding: 0.3rem 0.5rem; }

.sd-draft__total {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  flex-wrap: wrap; font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.sd-draft__recent { font-size: 0.72rem; }
.sd-draft__recent summary { cursor: pointer; color: var(--text-2); }
.sd-draft__recent ul { margin: 0.3rem 0 0; padding-inline-start: 1rem; line-height: 1.9; }
.sd-draft__acts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

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

/* ردیف اصلاحِ کارت پیش‌نویس — میکروفون، متن، اعمال. */
.sd-draft__amend { display: flex; align-items: center; gap: 0.35rem; }
.sd-draft__amend input {
  flex: 1; min-inline-size: 0; border: 1px solid var(--line); border-radius: 0.45rem;
  padding: 0.32rem 0.5rem; font-size: 0.72rem; font-family: inherit;
  background: var(--card-bg); color: var(--text-1);
}
.sd-draft__amend button { flex: none; padding: 0.3rem 0.5rem; }
.sd-draft__mic {
  border: 1px solid var(--line); border-radius: 0.45rem; background: var(--card-bg);
  color: var(--text-1); cursor: pointer; padding: 0.32rem 0.45rem; line-height: 0;
}
.sd-draft__mic.is-recording {
  background: rgb(var(--color-danger) / 0.12);
  border-color: rgb(var(--color-danger) / 0.5);
  color: rgb(var(--color-danger));
  animation: sd-ai-pulse 1.1s ease-in-out infinite;
}
@keyframes sd-ai-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .sd-draft__mic.is-recording { animation: none; } }

/* ════════ گام کالای ویزارد — هم‌ریختِ کاریلو ════════

   کلاس‌ها و اندازه‌ها از ویزارد کاریلو گرفته شده‌اند تا همان صفحه
   باشد، نه چیزی شبیهش. رنگ‌های ثابتِ کاریلو به توکن‌های اس‌دیتا
   ترجمه شده‌اند — وگرنه حالت تیره و برندهای دیگر می‌شکستند. */

.sw-stage-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 0; margin-bottom: 0.25rem;
  border-block-end: 1px solid var(--hairline);
}
.sw-stage-head__main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; min-width: 0; }
.sw-stage-head__store { font-size: 0.8125rem; color: var(--text-1); font-weight: 600; }
.sw-stage-head__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.sw-stage-tabs-row .sw-stage-tabs { margin-bottom: 0; }
.sw-stage-head__actions .sp-ops-btn.is-active { box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.2); }
/* روی گوشی نوار عملیات باید بپیچد، نه اینکه از لبهٔ صفحه بیرون بزند:
 * `nowrap` یعنی «پایان ویرایش» — آخرین دکمه — اصلاً در دسترس نباشد.
 * چیدمان دسکتاپ دست‌نخورده می‌ماند. */
@media (max-width: 767px) {
  .sw-stage-head__actions { flex-wrap: wrap; }
  .sw-stage-head__actions #proceedPayment { flex: 1 1 100%; justify-content: center; }
  /* هدف لمس ۴۴ پیکسل — استاندارد لمسی، نه اندازهٔ ماوس */
  .sw-stage-head__actions .sp-ops-btn { min-height: 2.75rem; }
  .sw-stage-head__actions .sp-ops-btn--icon { min-width: 2.75rem; }
}

.sw-cat-count {
  display: inline-block; margin-inline-start: 0.25rem;
  font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.85;
}
.sw-desk-strip__item strong { font-size: 0.8125rem; color: var(--text-1); font-variant-numeric: tabular-nums; }

.sw-products-view.hidden,
#productsFilterBody.hidden,
#loadMoreProducts.hidden { display: none !important; }

/* ── سلول کالا و قیمت دوگانه ── */
.sw-product-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; text-align: center; min-width: 0;
}
.sw-product-cell__title { font-weight: 600; color: var(--text-1); line-height: 1.35; overflow-wrap: anywhere; }
.sw-price-stack {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; text-align: center;
}
.sw-price-bulk { color: rgb(var(--color-primary)); font-weight: 800; font-size: 0.8125rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
.sw-price-single { color: rgb(15 118 110); font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
.dark .sw-price-single { color: rgb(94 234 212); }

/* ── شمارندهٔ تعداد ── */
.sp-qty-stepper {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 0.375rem;
  background: var(--card-bg); overflow: hidden;
}
.sp-qty-stepper__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; min-width: 2rem; height: 2rem; flex-shrink: 0;
  border: 0; background: var(--tint); color: var(--text-2);
  cursor: pointer; padding: 0; font-size: 0.95rem; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.sp-qty-stepper__btn + .sp-qty-stepper__input,
.sp-qty-stepper__input + .sp-qty-stepper__btn { border-inline-start: 1px solid var(--line); }
.sp-qty-stepper__btn:hover { background: rgb(var(--color-primary) / 0.08); color: rgb(var(--color-primary)); }
.sp-qty-stepper__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sp-qty-stepper__input {
  width: 3.25rem; min-width: 3rem; height: 2rem; border: 0; margin: 0;
  padding: 0 0.25rem; text-align: center; font-size: 0.8125rem;
  font-family: inherit; font-variant-numeric: tabular-nums;
  background: var(--card-bg); color: var(--text-1); -moz-appearance: textfield;
}
.sp-qty-stepper__input::-webkit-outer-spin-button,
.sp-qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-qty-stepper__input:focus { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--color-primary) / 0.2); }
.dark .sp-qty-stepper__btn { background: rgb(var(--color-darkmode-700)); color: rgb(203 213 225); }

/* دکمهٔ افزودن پس از موفقیت سبز می‌ماند — تأییدِ دیداری بدون توست. */
.add-product-btn.is-added,
.quick-add-btn.is-added {
  background: rgb(5 150 105) !important; border-color: rgb(5 150 105) !important;
  color: #fff !important; box-shadow: 0 0 0 3px rgb(5 150 105 / 0.22); cursor: default;
}

/* ── کارت کالا ── */
.sw-product-card-item { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.sw-product-card-box {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card-bg);
}
.sw-product-card-head {
  padding: 0.5rem 0.9rem; border-block-end: 1px solid var(--hairline);
  background: var(--tint); font-size: 0.8125rem; font-weight: 600;
  color: var(--text-1); line-height: 1.45;
}
.sw-product-card-body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.9rem; }
.sw-product-card-code,
.sw-product-card-meta { font-size: 0.75rem; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sw-product-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: auto; padding-top: 0.35rem;
}
.sw-product-card-item .sp-ops-field { margin: 0; }
.sw-product-card-item .sp-ops-field__label { font-size: 0.6875rem; }

/* ── سبد ── */
.sw-cart-item {
  border: 1px solid var(--hairline); border-radius: 0.6rem;
  padding: 0.6rem 0.7rem; margin-bottom: 0.55rem; background: var(--card-bg);
}
.sw-cart-item__title { font-size: 0.8125rem; font-weight: 700; color: var(--text-1); }
.sw-cart-item__meta { font-size: 0.7rem; color: var(--text-2); margin-top: 0.15rem; }
.sw-cart-item__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: 0.4rem; font-size: 0.75rem;
}
.sw-cart-item__sum { font-weight: 700; }
/* کالاهای انتخاب‌شده، بالای فهرست کاتالوگ */
.sw-selected-head td {
  background: rgb(var(--color-primary) / 0.08); color: rgb(var(--color-primary));
  font-weight: 800; font-size: 0.78rem; padding-block: 0.4rem;
}
.sw-selected-head td svg { width: 0.9rem; height: 0.9rem; vertical-align: -0.15rem; }
.sw-selected-head__note { font-weight: 600; font-size: 0.7rem; opacity: 0.8; }
.sw-selected-cards-head {
  display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem;
  font-weight: 800; font-size: 0.78rem; color: rgb(var(--color-primary));
}
.sw-selected-cards-head svg { width: 0.9rem; height: 0.9rem; }
tr.is-selected-line { background: rgb(var(--color-primary) / 0.04); }
tr.is-selected-line .sw-line-sum {
  display: block; font-size: 0.68rem; color: var(--text-3); margin-block-start: 0.15rem;
}
tr.is-selected-line .sl-num { inline-size: 7rem; text-align: center; }
/* ردیفی که در حال ذخیره است — بازخورد آنی بدون انتظار برای سرور */
tr.is-saving, .sw-cart-item.is-saving { opacity: 0.55; transition: opacity 0.12s ease; }

/* ── ویرایشِ درجای یک قلم ──
 *
 * هر قلم یک ردیف دارد و همان ردیف دو حالت: نمایش (ویرایش/حذف) و
 * ویرایش (ثبت/انصراف/حذف). پیش‌تر ورودی‌ها همیشه باز بودند و هر
 * دست‌کاری بی‌درنگ می‌رفت؛ حالا تا «تیک» زده نشود چیزی ثبت نمی‌شود،
 * پس حالتِ باز باید دیده شود. */
.sw-line-acts { display: inline-flex; align-items: center; gap: 0.3rem; }
.sw-line-qty { font-weight: 700; font-size: 0.8rem; color: var(--text-1); }
.sw-line-hint {
  display: block; font-size: 0.62rem; color: var(--text-3); margin-block-start: 0.2rem;
}
.sw-line-flag {
  display: inline-block; margin-inline-start: 0.3rem; font-size: 0.6rem; font-weight: 700;
  padding: 0.05rem 0.3rem; border-radius: 999px;
  background: rgb(var(--color-warning) / 0.14); color: rgb(var(--color-warning));
}
tr.is-selected-line.is-editing, .sw-cart-item.is-editing {
  background: rgb(var(--color-primary) / 0.09);
  box-shadow: inset 0 0 0 1px rgb(var(--color-primary) / 0.35);
}
tr.is-selected-line.is-editing .sp-qty-stepper { margin-inline: auto; }
/* «ثبت شد» — یک پلکِ کوتاه، نه پیامی که باید بسته شود. */
tr.is-saved-flash, .sw-cart-item.is-saved-flash { animation: sw-line-flash 0.9s ease; }
@keyframes sw-line-flash {
  0%   { background: rgb(var(--color-success) / 0.28); }
  100% { background: rgb(var(--color-primary) / 0.04); }
}
@media (prefers-reduced-motion: reduce) {
  tr.is-saved-flash, .sw-cart-item.is-saved-flash { animation: none; }
}
.sw-cart-item__field {
  display: block; margin-top: 0.5rem; font-size: 0.7rem; color: var(--text-2);
}
.sw-cart-item__field > span { display: block; margin-bottom: 0.25rem; }
.sw-cart-item__unit { font-size: 0.72rem; color: var(--text-2); }
/* جفتِ کارتن و تک — فقط وقتی راه‌اندازی فروش کارتن را روشن کرده باشد. */
.sw-qty-pair { display: flex; align-items: flex-end; gap: 0.4rem; justify-content: center; }
.sw-qty-pair label { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.sw-qty-pair label > span { font-size: 0.62rem; color: var(--text-2); }
.sw-qty-pair input {
  inline-size: 4.5rem; text-align: center; font-family: inherit; font-size: 0.8rem;
  border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.22rem 0.3rem;
  background: var(--card-bg); color: var(--text-1);
}
.sw-qty-pair input::-webkit-outer-spin-button,
.sw-qty-pair input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* سبدِ درون‌صفحه — حالت ویرایش سفارش. همان کارت‌های کشو، ولی شبکه‌ای
   تا شش قلم یک‌جا دیده شود نه در ستون بلند. */
.sw-cart-inline {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.sw-cart-inline .sw-cart-item {
  border: 1px solid var(--line); border-radius: 0.7rem; padding: 0.7rem; background: var(--card-bg);
}
/* کالایی که در سبد هست، در کاتالوگ هم نشان بگیرد */
tr.is-in-cart, .sw-product-card-item.is-in-cart {
  background: rgb(var(--color-primary) / 0.05);
}

.sw-cart-item__acts { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
/* قیمت دستی ردیف سبد — فقط برای کاربرِ مجاز رندر می‌شود */
.sw-cart-item__price {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem;
  font-size: 0.7rem; color: var(--text-2);
}
.sw-cart-item__price input {
  flex: 1; min-inline-size: 0; text-align: center; font-family: inherit;
  border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.22rem 0.3rem;
  background: var(--card-bg); color: var(--text-1); font-size: 0.75rem;
}
.sw-cart-item__price em {
  flex: none; font-style: normal; font-size: 0.62rem; font-weight: 700;
  padding: 0.1rem 0.35rem; border-radius: 999px;
  background: rgb(var(--color-primary) / 0.08); color: rgb(var(--color-primary));
}
.sw-cart-foot-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 0.75rem; }
/* نشان تعداد روی دکمهٔ سبد.
 *
 * دکمه باید خودش «positioned» باشد وگرنه نشان نسبت به نزدیک‌ترین
 * نیای positioned جا می‌گیرد — یعنی جایی بیرون از دکمه. قالب کلاس
 * `relative` را می‌گذاشت که در این پوستهٔ CSS هیچ تعریفی نداشت
 * (بازماندهٔ Tailwind)، پس عدد روی دکمه دیده نمی‌شد. */
.sw-cart-host { position: relative; }
.sw-cart-badge {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; border-radius: 999px;
  background: rgb(var(--color-danger)); color: #fff; border: 2px solid var(--card-bg);
  font-size: 0.62rem; font-weight: 800; line-height: 1; text-align: center;
  display: none; align-items: center; justify-content: center; pointer-events: none;
}
.sw-cart-badge.is-visible { display: inline-flex; }

/* ── ثبت سریع ── */
#quickAddRows tr.is-saved { opacity: 0.78; }
#quickAddTable td { vertical-align: middle; }
.sw-modal-qty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

/* آیکنِ داخل فیلد نباید زیر متن برود.
   قانون عمومیِ `.sd-content input[type=search]` ویژگیِ بالاتری دارد و
   با `padding` کوتاه، پدینگِ سمتِ آیکن را پاک می‌کرد؛ نتیجه‌اش این بود
   که ذره‌بین دقیقاً روی حرف اولِ placeholder می‌نشست. */
.sd-content .sw-geo__search input[type="search"] { padding-inline-start: 2rem; }
.sd-content input.karo-jalali-date-input { padding-inline-start: 2.1rem; }


/* ════════════════ دستیار هوشمند — پنل ════════════════
   سرِ پنل پیش‌تر دکمهٔ بستنِ هدرِ صفحه (`sd-header__toggle`) را قرض
   می‌گرفت: خاکستری روی گرادیان رنگی، بی‌حالت فوکوس و کوچک برای لمس.
   حالا دکمه‌های خودش را دارد — شیشه‌ای روی رنگ برند، ۳۶ پیکسل. */
.sd-ai-panel { width: min(100%, 27rem); transition: transform 0.25s ease, width 0.2s ease; }
.sd-ai-panel.is-wide { width: min(100%, 44rem); }
.sd-ai-head {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.9rem 0.85rem 0.75rem;
  background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.82));
  color: #fff;
}
.sd-ai-head__avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; flex: none;
  display: grid; place-items: center; background: rgb(255 255 255 / 0.18);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.sd-ai-head__avatar svg { width: 1.35rem; height: 1.35rem; }
.sd-ai-head__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.sd-ai-head__text strong { font-size: 0.95rem; font-weight: 800; }
.sd-ai-head__text span { font-size: 0.7rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ai-head__acts { display: flex; gap: 0.3rem; }
.sd-ai-iconbtn {
  width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgb(255 255 255 / 0.14);
  transition: background 0.15s ease, transform 0.15s ease;
}
.sd-ai-iconbtn svg { width: 1.1rem; height: 1.1rem; }
.sd-ai-iconbtn:hover { background: rgb(255 255 255 / 0.28); }
.sd-ai-iconbtn:active { transform: scale(0.94); }
.sd-ai-iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sd-ai-panel.is-wide [data-ai-wide] svg { transform: scaleX(-1); }
@media (max-width: 767px) { .sd-ai-only-desktop { display: none; } }

/* ── تمام‌صفحه ──
 *
 * کشوی کناری برای «فروش این ماه چقدر بود؟» بس است. برای کاری که
 * چند مرحله دارد — جدولِ مغایرت، پیش‌نویسِ چندردیفی، گزارشی که باید
 * خوانده شود — بیست‌وهفت رم پهنا یعنی همه‌چیز در ستون‌های باریک
 * می‌شکند. این حالت همان پنل است، تمام‌صفحه، با متنی که به عرض
 * خوانا محدود می‌ماند: خطِ صد کاراکتری هم به اندازهٔ ستونِ باریک
 * بد خوانده می‌شود. */
.sd-ai-panel.is-full {
  width: 100%; max-width: 100%; inset-inline: 0; border-radius: 0;
  box-shadow: none;
}
.sd-ai-panel.is-full .sd-ai-body,
.sd-ai-panel.is-full .sd-ai-foot > * { max-width: 56rem; margin-inline: auto; width: 100%; }
.sd-ai-panel.is-full .sd-ai-body { padding-inline: 1.25rem; }
.sd-ai-panel.is-full .sd-ai-head { padding-inline: 1.25rem; }
.sd-ai-panel.is-full .sd-ai-head__text,
.sd-ai-panel.is-full .sd-ai-head__avatar { flex: none; }
.sd-ai-panel.is-full .sd-ai-head__text { flex: 1; max-width: 56rem; }
.sd-ai-panel.is-full [data-ai-full] svg { transform: rotate(180deg); }
/* در تمام‌صفحه، «پهن‌تر/باریک‌تر» معنایی ندارد. */
.sd-ai-panel.is-full [data-ai-wide] { display: none; }

/* «چه کرد؟» — ردِ کارِ دستیار، جمع‌شده.
 *
 * وقتی دستیار خودش رفته و چند جا را نگاه کرده، کاربر باید بتواند
 * وارسی کند از کجا آمده. باز نمایش داده نمی‌شود چون جوابْ چیزی است
 * که خوانده می‌شود و ردِ کار چیزی که *گاهی* لازم می‌شود. */
.sd-ai-trace { margin-top: 0.6rem; border-top: 1px dashed var(--hairline); padding-top: 0.45rem; }
.sd-ai-trace > summary {
  cursor: pointer; font-size: 0.68rem; color: var(--text-3); font-weight: 600;
  list-style: none; user-select: none;
}
.sd-ai-trace > summary::-webkit-details-marker { display: none; }
.sd-ai-trace > summary::before { content: '▸ '; }
.sd-ai-trace[open] > summary::before { content: '▾ '; }
.sd-ai-trace__row {
  font-size: 0.68rem; color: var(--text-2); padding: 0.2rem 0 0.2rem 0.6rem;
  border-inline-start: 2px solid rgb(var(--color-primary) / 0.3); margin-top: 0.3rem;
}
.sd-ai-trace__row.is-bad { border-inline-start-color: rgb(var(--color-danger) / 0.5); }

/* دکمهٔ ارسال وقتی کاری در جریان است: مربعِ توقف.
   رنگ عوض می‌شود تا از «ارسال» جدا دیده شود — شکلِ تنها، روی دکمهٔ
   گرد و کوچک، به‌اندازهٔ کافی گویا نیست. */
.sd-ai-send.is-stop { background: rgb(var(--color-danger)); }
.sd-ai-send.is-stop svg { width: 0.95rem; height: 0.95rem; }

/* ── پیوست فایل ── */
.sd-ai-clip { background: transparent; color: var(--text-2); }
.sd-ai-clip:hover { background: rgb(var(--color-primary) / 0.1); color: rgb(var(--color-primary)); }
.sd-ai-clip:disabled { opacity: 0.5; cursor: progress; }
/* `hidden` باید برنده باشد.
 *
 * صفت `hidden` از شیوه‌نامهٔ مرورگر `display:none` می‌گیرد و هر
 * قاعدهٔ کلاسی از آن قوی‌تر است — پس نوارِ خالیِ پیوست روی صفحه
 * می‌ماند: یک کادر خالی با یک «×» بالای جعبهٔ پرسش. */
.sd-ai-attach[hidden] { display: none; }
.sd-ai-attach {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem;
  padding: 0.35rem 0.55rem; border-radius: 0.5rem; font-size: 0.72rem;
  background: rgb(var(--color-primary) / 0.08); color: var(--text-1);
  border: 1px solid rgb(var(--color-primary) / 0.2);
}
.sd-ai-attach svg { width: 0.85rem; height: 0.85rem; flex: none; color: rgb(var(--color-primary)); }
.sd-ai-attach__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-ai-attach__meta { color: var(--text-2); flex: 1; white-space: nowrap; }
.sd-ai-attach__drop {
  border: 0; background: transparent; cursor: pointer; color: var(--text-2);
  font-size: 1rem; line-height: 1; padding: 0 0.2rem; flex: none;
}
.sd-ai-attach__drop:hover { color: rgb(var(--color-danger)); }

/* ── گفتگوهای پیشین ──
   روی پنل می‌نشیند، نه کنارش: در ۲۷ رمِ کشو ستونِ جدا جا نمی‌شود. */
.sd-ai-chats[hidden] { display: none; }
.sd-ai-chats {
  display: flex; flex-direction: column; max-height: 55%;
  border-bottom: 1px solid var(--hairline); background: var(--card-bg);
}
.sd-ai-chats__head {
  padding: 0.5rem 0.9rem; font-size: 0.72rem; font-weight: 700; color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
}
.sd-ai-chats__list { overflow-y: auto; padding: 0.35rem; }
.sd-ai-chats__empty { padding: 1rem; text-align: center; font-size: 0.72rem; color: var(--text-3); }
.sd-ai-chat-row { display: flex; align-items: stretch; gap: 0.2rem; }
.sd-ai-chat-open {
  flex: 1; min-width: 0; text-align: start; border: 0; cursor: pointer;
  background: transparent; padding: 0.45rem 0.6rem; border-radius: 0.45rem;
  display: flex; flex-direction: column; gap: 0.12rem; font-family: inherit;
}
.sd-ai-chat-open:hover { background: rgb(var(--color-primary) / 0.08); }
.sd-ai-chat-title {
  font-size: 0.75rem; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-ai-chat-meta { font-size: 0.65rem; color: var(--text-3); }
.sd-ai-chat-drop {
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
  font-size: 1rem; padding: 0 0.45rem; border-radius: 0.45rem;
}
.sd-ai-chat-drop:hover { color: rgb(var(--color-danger)); background: rgb(var(--color-danger) / 0.08); }

/* گام‌های زنده — همان لحظه‌ای که ابزار صدا زده می‌شود.
   بالای پاسخ می‌نشیند و بعد از پایان، جایش را به «چه کرد؟» جمع‌شده
   می‌دهد. کاربر باید بداند دستیار سراغ چه چیزی رفته، نه اینکه بیست
   ثانیه سه نقطه ببیند. */
.sd-ai-live-steps { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
.sd-ai-live-step {
  font-size: 0.68rem; color: var(--text-2); padding: 0.2rem 0.5rem;
  border-radius: 0.4rem; background: rgb(var(--color-primary) / 0.07);
  border-inline-start: 2px solid rgb(var(--color-primary) / 0.35);
}
.sd-ai-live-step.is-bad { border-inline-start-color: rgb(var(--color-danger) / 0.6); }

/* کارتِ پیشنهاد — کاری که هنوز انجام نشده.
   عمداً شبیه کارتِ نتیجه نیست: کاربر باید در یک نگاه بفهمد این چیزی
   است که *می‌تواند* بشود، نه چیزی که شده. */
.sd-ai-plan {
  margin-top: 0.7rem; border: 1px solid rgb(var(--color-primary) / 0.35);
  border-radius: 0.6rem; background: rgb(var(--color-primary) / 0.05);
  padding: 0.6rem 0.7rem;
}
.sd-ai-plan__head {
  display: flex; align-items: center; gap: 0.35rem; font-weight: 800;
  font-size: 0.78rem; color: rgb(var(--color-primary)); margin-bottom: 0.45rem;
}
.sd-ai-plan__head svg { width: 0.95rem; height: 0.95rem; }
.sd-ai-plan__row {
  display: flex; justify-content: space-between; gap: 0.6rem;
  font-size: 0.72rem; padding: 0.18rem 0; border-top: 1px dashed var(--hairline);
}
.sd-ai-plan__row span { color: var(--text-2); }
.sd-ai-plan__row b { text-align: start; }
.sd-ai-plan__foot {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--hairline);
}
.sd-ai-plan__hint { font-size: 0.66rem; color: var(--text-3); }
.sd-ai-plan__ok { font-size: 0.72rem; font-weight: 700; color: rgb(var(--color-success)); }
.sd-ai-plan.is-done { border-color: rgb(var(--color-success) / 0.45); background: rgb(var(--color-success) / 0.06); }
/* پس‌زمینهٔ تار زیر پنلِ تمام‌صفحه دیده نمی‌شود و فقط هزینهٔ رندر است. */
.sd-ai-overlay:has(.sd-ai-panel.is-full) { background: transparent; backdrop-filter: none; }

.sd-ai-body { flex: 1; overflow-y: auto; padding: 1rem 0.9rem; background: var(--page-bg, var(--tint)); scrollbar-width: thin; }
.sd-ai-msg__bubble p { margin: 0 0 0.35rem; }
.sd-ai-msg__bubble p:last-child { margin-bottom: 0; }
.sd-ai-md-list { margin: 0.25rem 0 0.35rem; padding-inline-start: 1.1rem; display: grid; gap: 0.2rem; }
.sd-ai-md-list li::marker { color: rgb(var(--color-primary)); }
.sd-ai-md-h { font-weight: 800; margin: 0.35rem 0 0.15rem; }
.sd-ai-msg__bubble code { font-size: 0.75rem; background: var(--tint); padding: 0 0.25rem; border-radius: 0.25rem; }
.sd-ai-msg--ai .sd-ai-msg__bubble { background: var(--card-bg); box-shadow: 0 1px 2px rgb(15 23 42 / 0.05); }
.sd-ai-msg--user .sd-ai-msg__bubble { background: rgb(var(--color-primary)); color: #fff; border-end-start-radius: 0.25rem; }
.sd-ai-welcome .sd-ai-msg__bubble { max-width: 100%; }
.sd-ai-error { color: var(--color-danger-text, #b91c1c); }
.dark .sd-ai-error { color: #fca5a5; }
.sd-ai-link {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
  font-size: 0.72rem; font-weight: 700; color: rgb(var(--color-primary)); text-decoration: none;
}
.sd-ai-link svg { width: 0.95rem; height: 0.95rem; }
.sd-ai-link:hover { text-decoration: underline; }

.sd-ai-foot { padding: 0.65rem 0.8rem 0.7rem; border-top: 1px solid var(--hairline); background: var(--card-bg); }
.sd-ai-chips { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
.sd-ai-chips::-webkit-scrollbar { display: none; }
.sd-ai-chip {
  flex: none; border: 1px solid var(--line); background: var(--card-bg); color: var(--text-2);
  border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.72rem; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sd-ai-chip:hover { border-color: rgb(var(--color-primary) / 0.5); color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / 0.06); }
.sd-ai-composer {
  display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.35rem;
  border: 1px solid var(--line); border-radius: 1.1rem; background: var(--card-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sd-ai-composer:focus-within { border-color: rgb(var(--color-primary) / 0.6); box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14); }
.sd-ai-composer textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--text-1);
  font: inherit; font-size: 0.85rem; line-height: 1.6; padding: 0.4rem 0.5rem; max-height: 140px; min-height: 2.25rem;
}
.sd-ai-roundbtn {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center; transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.sd-ai-roundbtn svg { width: 1.1rem; height: 1.1rem; }
.sd-ai-roundbtn:active { transform: scale(0.93); }
.sd-ai-roundbtn:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.sd-ai-send { background: rgb(var(--color-primary)); color: #fff; }
.sd-ai-send svg { transform: scaleX(-1); }
.sd-ai-send:hover { background: rgb(var(--color-primary) / 0.88); }
.sd-ai-mic { background: rgb(var(--color-primary) / 0.1); color: rgb(var(--color-primary)); }
.sd-ai-mic:hover { background: rgb(var(--color-primary) / 0.18); }
.sd-ai-panel.is-listening .sd-ai-mic { background: #dc2626; color: #fff; animation: sd-ai-pulse 1.4s ease-out infinite; }
.sd-ai-panel.is-listening .sd-ai-composer { border-color: rgb(220 38 38 / 0.5); box-shadow: 0 0 0 3px rgb(220 38 38 / 0.12); }
@keyframes sd-ai-pulse { 0% { box-shadow: 0 0 0 0 rgb(220 38 38 / 0.45); } 100% { box-shadow: 0 0 0 12px rgb(220 38 38 / 0); } }
.sd-ai-foot__hint { margin-top: 0.4rem; font-size: 0.66rem; color: var(--text-3); text-align: center; }

.sd-ai-live {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; padding: 0.35rem 0.6rem;
  border-radius: 0.7rem; background: rgb(220 38 38 / 0.08); color: var(--text-1); font-size: 0.72rem;
  --sd-ai-level: 0.2;
}
.sd-ai-live[hidden] { display: none; }
.sd-ai-live__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #dc2626; animation: sd-blink 1s infinite; }
.sd-ai-live__wave { display: inline-flex; align-items: center; gap: 2px; height: 1rem; }
.sd-ai-live__wave i {
  width: 3px; border-radius: 2px; background: #dc2626; height: calc(0.25rem + var(--sd-ai-level) * 0.75rem);
  transition: height 0.08s linear;
}
.sd-ai-live__wave i:nth-child(2), .sd-ai-live__wave i:nth-child(4) { height: calc(0.2rem + var(--sd-ai-level) * 0.5rem); }
.sd-ai-live__label { flex: 1; font-weight: 700; }
.sd-ai-live__clock { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sd-ai-live__cancel {
  border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 0.72rem;
  cursor: pointer; padding: 0.15rem 0.4rem; border-radius: 0.4rem;
}
.sd-ai-live__cancel:hover { background: rgb(15 23 42 / 0.06); color: var(--text-1); }

/* کارت فرم عمومی */
.sd-draft__kv { display: grid; gap: 0.3rem; margin: 0; }
.sd-draft__kv > div { display: flex; gap: 0.5rem; justify-content: space-between; padding: 0.3rem 0.5rem;
  border-radius: 0.45rem; background: var(--tint); font-size: 0.75rem; }
.sd-draft__kv dt { color: var(--text-2); }
.sd-draft__kv dd { margin: 0; font-weight: 700; text-align: left; }

/* فرمی که دستیار پر کرده */
.sd-ai-filled { box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.45) !important; background-color: rgb(var(--color-primary) / 0.04) !important; }
.sd-ai-prefill-note {
  display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.9rem; padding: 0.65rem 0.8rem;
  border-radius: 0.7rem; border: 1px solid rgb(var(--color-primary) / 0.3); background: rgb(var(--color-primary) / 0.07);
  color: var(--text-1); font-size: 0.8rem;
}
.sd-ai-prefill-note svg { color: rgb(var(--color-primary)); flex: none; }
.sd-ai-prefill-note div { display: flex; flex-direction: column; }
.sd-ai-prefill-note span { color: var(--text-2); font-size: 0.72rem; }
.sd-ai-caret { display: inline-block; width: 0.45rem; height: 0.95rem; margin-inline-start: 0.15rem;
  vertical-align: -0.15rem; border-radius: 2px; background: rgb(var(--color-primary)); animation: sd-blink 1s infinite; }


/* شمارندهٔ کوچکِ روی گیرهٔ پیوست — تا کاربر بی‌بازکردنِ صفحه بفهمد
   مدرکی هست یا نه. عدد کنارِ آیکن می‌نشیند، نه روی آن: روی آیکن،
   در فهرستِ فشرده خوانده نمی‌شد. */
.sd-attach-count {
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  margin-inline-start: .15rem;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════ گفتگوی تمام‌صفحه ═══════════════════════
 *
 * زبانِ دیداری عمداً همان کشوی دستیار است: همان هدرِ گرادیانی، همان
 * حبابِ پیام، همان نوارِ نوشتنِ قرص‌شکل. کاربر نباید حس کند وارد
 * نرم‌افزار دیگری شده — فقط همان دستیار، در اتاقِ بزرگ‌ترِ خودش.
 *
 * ارتفاع با `dvh` و نه `vh`: روی موبایل نوارِ نشانی مرورگر جمع و باز
 * می‌شود و با `vh` جعبهٔ نوشتن زیر آن گم می‌شد. */
.sd-chat {
  display: grid;
  grid-template-columns: 19.5rem minmax(0, 1fr);
  gap: 0.85rem;
  height: calc(100dvh - 9.5rem);
  min-height: 30rem;
  /* بافتِ موقعیت برای نشانگرِ «فایل را این‌جا رها کنید». */
  position: relative;
}
/* سایدبارِ جمع‌شده یعنی **یک ستون**، نه ستونی با پهنای صفر.
 *
 * با `0 minmax(0,1fr)` و سایدبارِ `display:none`، تنها فرزندِ باقی‌مانده
 * در ستونِ اول می‌نشست — ستونی که پهنایش صفر بود — و کلِ صفحه ناپدید
 * می‌شد. */
.sd-chat.is-side-hidden { grid-template-columns: minmax(0, 1fr); }
.sd-chat.is-side-hidden .sd-chat__side { display: none; }
.sd-chat__side-open { display: none; }
.sd-chat.is-side-hidden .sd-chat__side-open { display: grid; }

.sd-chat__side, .sd-chat__main {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

/* ── سایدبار ── */
.sd-chat__side-head {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 0.7rem 0.6rem;
}
.sd-chat__new {
  flex: 1; justify-content: center; gap: 0.35rem;
  border-radius: 0.8rem; font-weight: 700;
}
.sd-chat__search {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0.7rem 0.6rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.8rem;
  background: var(--tint);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sd-chat__search:focus-within {
  border-color: rgb(var(--color-primary) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
  background: var(--card-bg);
}
/* آیکن **کنارِ** ورودی می‌نشیند نه رویش.
 *
 * با موقعیتِ مطلق و `padding-inline-start`، شیوه‌نامهٔ عمومیِ
 * `input` پدینگ را بازنویسی می‌کرد و ذره‌بین روی حرفِ اولِ متن
 * می‌افتاد. چیدمانِ فلکس این وابستگی را از بین می‌برد. */
.sd-chat__search > i, .sd-chat__search > svg {
  width: 0.95rem; height: 0.95rem; flex: none; opacity: 0.5;
}
.sd-chat__search input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent; box-shadow: none;
  padding: 0.45rem 0; font: inherit; font-size: 0.78rem; color: var(--text-1);
}
.sd-chat__folder-new { margin: 0 0.7rem 0.55rem; }
.sd-chat__folder-new > summary {
  display: flex; align-items: center; gap: 0.35rem; cursor: pointer;
  padding: 0.35rem 0.1rem; font-size: 0.75rem; font-weight: 600; color: var(--text-2);
  list-style: none;
}
.sd-chat__folder-new > summary::-webkit-details-marker { display: none; }
.sd-chat__folder-new > summary:hover { color: rgb(var(--color-primary)); }
.sd-chat__folder-new > summary i, .sd-chat__folder-new > summary svg { width: .9rem; height: .9rem; }
.sd-chat__folder-new form { display: flex; gap: 0.35rem; padding-top: 0.35rem; }
.sd-chat__folder-new input { flex: 1; min-width: 0; font-size: 0.76rem; border-radius: 0.6rem; }
.sd-chat__folder-new button { border-radius: 0.6rem; }

.sd-chat__list { flex: 1; overflow-y: auto; padding: 0 0.5rem 0.5rem; scrollbar-width: thin; }
.sd-chat__group { margin-block-end: 0.5rem; }
.sd-chat__group-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.45rem; font-size: 0.7rem; font-weight: 800;
  color: var(--text-3); cursor: pointer; letter-spacing: .01em;
  list-style: none;
}
.sd-chat__group-head::-webkit-details-marker { display: none; }
.sd-chat__group-head i, .sd-chat__group-head svg { width: 0.85rem; height: 0.85rem; }
.sd-chat__group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-chat__count {
  font-size: 0.65rem; padding: 0.05rem 0.35rem; border-radius: 999px;
  background: rgb(var(--color-primary) / 0.1); color: rgb(var(--color-primary));
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.sd-chat__group-ops { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.45rem 0.4rem; }
.sd-chat__group-ops form { display: flex; align-items: center; gap: 0.25rem; }
.sd-chat__group-ops input { font-size: 0.72rem; max-width: 8rem; border-radius: 0.5rem; }
.sd-chat__empty-line { padding: 0.5rem 0.55rem; font-size: 0.72rem; color: var(--text-3); }

.sd-chat__row {
  display: flex; align-items: center; gap: 0.15rem;
  border-radius: 0.7rem; padding-inline-end: 0.2rem;
  transition: background .12s ease;
}
.sd-chat__row:hover { background: var(--tint); }
.sd-chat__row.is-active {
  background: rgb(var(--color-primary) / 0.1);
  box-shadow: inset 2px 0 0 rgb(var(--color-primary)) ;
}
[dir="rtl"] .sd-chat__row.is-active { box-shadow: inset -2px 0 0 rgb(var(--color-primary)); }
.sd-chat__row-link {
  flex: 1; min-width: 0; display: block; padding: 0.45rem 0.55rem;
  color: var(--text-1); text-decoration: none;
}
.sd-chat__row-title {
  display: block; font-size: 0.78rem; font-weight: 600; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-chat__row-meta { display: block; font-size: 0.65rem; color: var(--text-3); }
/* کارها روی hover ظاهر می‌شوند ولی روی لمسی همیشه هستند: آن‌جا
   hover وجود ندارد و کاربر راهی به «بایگانی» پیدا نمی‌کرد. */
.sd-chat__row-ops { display: flex; align-items: center; gap: 0.1rem; flex: none; opacity: 0; transition: opacity .12s; }
.sd-chat__row:hover .sd-chat__row-ops,
.sd-chat__row.is-active .sd-chat__row-ops,
.sd-chat__row:focus-within .sd-chat__row-ops { opacity: 1; }
@media (hover: none) { .sd-chat__row-ops { opacity: 1; } }
.sd-chat__row-ops .sl-icon { width: 1.5rem; height: 1.5rem; border-radius: 0.45rem; }
.sd-chat__row-ops i, .sd-chat__row-ops svg { width: 0.8rem; height: 0.8rem; }

.sd-chat__side-foot { padding: 0.55rem 0.75rem; border-block-start: 1px solid var(--hairline); }
.sd-chat__archive-link {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.73rem; color: var(--text-2); text-decoration: none;
}
.sd-chat__archive-link:hover { color: rgb(var(--color-primary)); }
.sd-chat__archive-link i, .sd-chat__archive-link svg { width: 0.85rem; height: 0.85rem; }

/* ── سرِ نخِ گفتگو: همان هدرِ گرادیانیِ دستیار ── */
.sd-chat__head { gap: 0.6rem; padding: 0.7rem 0.85rem; }
.sd-chat__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sd-chat__title strong { font-size: 0.95rem; font-weight: 800; }
.sd-chat__title span { font-size: 0.7rem; opacity: 0.85; }
/* ورودیِ عنوان روی گرادیان: تا وقتی دست نخورده، متنِ ساده به نظر
   می‌رسد؛ با فوکوس، جعبه می‌شود. */
.sd-chat__title input {
  border: 1px solid transparent; background: rgb(255 255 255 / 0.12);
  color: #fff; font: inherit; font-size: 0.95rem; font-weight: 800;
  border-radius: 0.55rem; padding: 0.2rem 0.45rem; width: 100%;
  transition: background .15s ease, border-color .15s ease;
}
.sd-chat__title input::placeholder { color: rgb(255 255 255 / 0.6); }
.sd-chat__title input:hover { background: rgb(255 255 255 / 0.2); }
.sd-chat__title input:focus { outline: 0; background: rgb(255 255 255 / 0.25); border-color: rgb(255 255 255 / 0.45); }
.sd-chat__rename { display: flex; align-items: center; gap: 0.3rem; }
.sd-chat__head-ops { display: flex; align-items: center; gap: 0.3rem; flex: none; }
.sd-chat__move { display: flex; align-items: center; gap: 0.25rem; }
.sd-chat__move select {
  font-size: 0.72rem; max-width: 8.5rem; border-radius: 0.55rem;
  background: rgb(255 255 255 / 0.16); color: #fff;
  border: 1px solid rgb(255 255 255 / 0.25); padding: 0.25rem 0.4rem;
}
.sd-chat__move select option { color: var(--text-1); background: var(--card-bg); }
/* متنِ کاملِ گفتگو برای کپی — دیده نمی‌شود ولی `display:none` نباشد،
   وگرنه راهِ قدیمیِ کپی (execCommand) روی آن کار نمی‌کند. */
.sd-chat__plain {
  position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.sd-chat__thread {
  flex: 1; overflow-y: auto; padding: 1rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--page-bg, var(--tint)); scrollbar-width: thin;
}
.sd-chat__thread .sd-ai-msg { position: relative; display: flex; }
/* پیامِ کاربر سمتِ مقابلِ پاسخ می‌نشیند — بی این، هر دو از یک لبه
   شروع می‌شوند و معلوم نیست کدام پرسش است کدام پاسخ. */
.sd-chat__thread .sd-ai-msg--user { justify-content: flex-end; }
.sd-chat__thread .sd-ai-msg--ai { justify-content: flex-start; }
.sd-chat__thread .sd-ai-msg__bubble {
  max-width: min(48rem, 86%); font-size: 0.83rem; border-radius: 1rem;
  padding: 0.6rem 0.85rem;
}
.sd-chat__thread .sd-ai-msg--user .sd-ai-msg__bubble { border-end-end-radius: 0.3rem; }
.sd-chat__thread .sd-ai-msg--ai .sd-ai-msg__bubble { border-end-start-radius: 0.3rem; }
.sd-chat__copy {
  position: absolute; inset-block-start: 0.2rem; inset-inline-end: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 0.5rem;
  border: 1px solid var(--line); background: var(--card-bg);
  color: var(--text-3); cursor: pointer; opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.sd-ai-msg:hover .sd-chat__copy, .sd-chat__copy:focus-visible { opacity: 1; }
.sd-chat__copy:hover { color: rgb(var(--color-primary)); border-color: rgb(var(--color-primary) / 0.4); }
.sd-chat__copy i, .sd-chat__copy svg { width: 0.8rem; height: 0.8rem; }
.sd-chat__copy.is-done { color: rgb(var(--color-success)); border-color: rgb(var(--color-success) / 0.5); opacity: 1; }
.sd-chat__copy.is-failed { color: rgb(var(--color-danger)); opacity: 1; }
.sd-chat__thread .sd-ai-msg--user .sd-chat__copy { inset-inline-end: auto; inset-inline-start: 0.25rem; }

/* جدولِ داخل پاسخ — مدل مقایسه را جدولی می‌نویسد و بی این، ردیف‌ها
   به هم می‌چسبند و خوانده نمی‌شوند. */
.sd-chat__table-wrap { overflow-x: auto; margin-block: 0.45rem; }
.sd-chat__table { border-collapse: collapse; font-size: 0.75rem; width: 100%; }
.sd-chat__table th, .sd-chat__table td {
  border: 1px solid var(--hairline); padding: 0.3rem 0.5rem; text-align: start;
}
.sd-chat__table th { background: var(--tint); font-weight: 700; }
.sd-chat__table td { font-variant-numeric: tabular-nums; }
.sd-ai-msg--user .sd-chat__table th, .sd-ai-msg--user .sd-chat__table td { border-color: rgb(255 255 255 / 0.3); }
.sd-ai-msg--user .sd-chat__table th { background: rgb(255 255 255 / 0.15); }
.sd-ai-msg__bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.sd-chat__welcome { margin: auto; text-align: center; max-width: 36rem; color: var(--text-2); }
.sd-chat__welcome-avatar {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 0.75rem; border-radius: 1.1rem;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.75));
  box-shadow: 0 6px 18px rgb(var(--color-primary) / 0.28);
}
.sd-chat__welcome-avatar i, .sd-chat__welcome-avatar svg { width: 1.5rem; height: 1.5rem; }
.sd-chat__welcome h2 { margin: 0 0 0.3rem; font-size: 1.1rem; font-weight: 800; color: var(--text-1); }
.sd-chat__welcome p { margin: 0 0 1rem; font-size: 0.78rem; }
.sd-chat__samples { display: grid; gap: 0.45rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sd-chat__sample {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.85rem;
  background: var(--card-bg); color: var(--text-1); font-size: 0.78rem;
  cursor: pointer; text-align: start; transition: border-color .15s, background .15s, transform .15s;
}
.sd-chat__sample i, .sd-chat__sample svg { width: 0.9rem; height: 0.9rem; color: rgb(var(--color-primary)); flex: none; }
.sd-chat__sample:hover {
  border-color: rgb(var(--color-primary) / 0.45); background: rgb(var(--color-primary) / 0.05);
  transform: translateY(-1px);
}

.sd-chat__composer-wrap { padding: 0.7rem 0.9rem 0.8rem; border-block-start: 1px solid var(--hairline); background: var(--card-bg); }
.sd-chat__composer { max-width: 52rem; margin: 0 auto; }
.sd-chat__composer textarea { max-height: 13.75rem; }
.sd-chat__hint { max-width: 52rem; margin: 0.4rem auto 0; font-size: 0.66rem; color: var(--text-3); text-align: center; }

@media (max-width: 62rem) {
  .sd-chat { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 8rem); position: relative; }
  .sd-chat__side { position: absolute; inset: 0; z-index: 20; }
  .sd-chat__side-open { display: grid; }
  .sd-chat.is-side-hidden .sd-chat__side-open { display: grid; }
}

/* نوارِ پیوست روی صفحهٔ گفتگو — همان شکلِ کشو، با عرضِ همین صفحه. */
.sd-chat__attach { max-width: 52rem; margin: 0 auto 0.5rem; }

/* شماره‌گذاری مجددِ اسناد — دو انتخابگر و یک دکمه در یک ردیف، کنار
   «سند جدید». بی این، selectهای عریضِ پیش‌فرض ردیفِ اکشن‌ها را
   می‌شکستند و دکمه به خط بعد می‌افتاد. */
.sd-renumber {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.sd-renumber select {
  inline-size: auto;
  min-inline-size: 7.5rem;
  margin: 0;
  padding-block: .4rem;
  font-size: .8125rem;
}

/* کشیدن‌ورهاکردنِ فایل روی دستیار — بازخوردِ دیداری لازم است، وگرنه
   کاربر نمی‌داند اصلاً جایی برای رهاکردن هست یا نه. */
.sd-chat.is-dropping,
#sd-ai-sheet.is-dropping {
  outline: 2px dashed var(--sd-accent, #2f9e8f);
  outline-offset: -6px;
}
.sd-chat.is-dropping::after,
#sd-ai-sheet.is-dropping::after {
  content: "فایل را این‌جا رها کنید";
  position: absolute;
  inset-block-end: 5.5rem;
  inset-inline: 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--sd-accent, #2f9e8f);
  pointer-events: none;
}

/* تصویرِ ساخته‌شده در گفتگو — کلیک، اندازهٔ کامل. */
.sd-ai-img { display: inline-block; max-inline-size: 100%; margin-block: .5rem; }
.sd-ai-img img {
  max-inline-size: min(22rem, 100%);
  block-size: auto;
  border-radius: .75rem;
  border: 1px solid var(--sd-line, rgba(0,0,0,.08));
}

/* چرخانهٔ دکمه — جایگزینِ متنِ «در حال ثبت…».
   رنگ را از خودِ دکمه می‌گیرد، پس روی دکمهٔ اصلی، ثانویه و خطرناک
   هر سه درست دیده می‌شود. */
.sd-spinner {
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: sd-spin .7s linear infinite;
  vertical-align: -.2em;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }
button.is-busy { cursor: progress; }

/* متنی که فقط صفحه‌خوان می‌خواند. چرخانه برای کسی که نمی‌بیند هیچ
   معنایی ندارد، پس معنی‌اش کنارش می‌ماند. */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sd-spinner { animation-duration: 2.4s; }
}

/* نشانیِ بلند در گفتگو نباید از حباب بزند بیرون.
   لینک‌های ترب و ایمالز فارسی‌اند و percent-encode می‌شوند، پس یک
   «کلمه»ی سیصد نویسه‌ای می‌سازند که هیچ جای شکستنی ندارد. */
.sd-ai-msg__bubble a,
.sd-chat__msg a {
  word-break: break-all;
  overflow-wrap: anywhere;
}
.sd-ai-msg__bubble,
.sd-chat__msg {
  overflow-wrap: anywhere;
  min-inline-size: 0;
}
.sd-ai-msg__bubble pre,
.sd-ai-msg__bubble code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* جداکنندهٔ فیزیکی/سیستمی در کارت کالا. */
.sw-stock-sep { opacity: .45; margin-inline: .3rem; }

/* دکمهٔ بسته — شکلِ دکمه را دارد ولی کاری نمی‌کند.
   بی این، «ویرایش بسته است» متنی بی‌شکل وسط ردیفِ دکمه‌ها بود. */
.sp-ops-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* کارت پیش‌بینی */
.sd-forecast {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .9rem 1rem; border-radius: 1rem;
  border: 1px solid var(--sd-line, rgba(0,0,0,.08));
  background: var(--card-bg, #fff);
}
.sd-forecast__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sd-forecast__title { font-weight: 700; }
.sd-forecast__value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sd-forecast__value small { font-size: .75rem; font-weight: 500; opacity: .7; margin-inline-start: .25rem; }
.sd-forecast__delta { font-size: .8125rem; opacity: .8; }
.sd-forecast__delta.is-up { color: #15803d; }
.sd-forecast__delta.is-down { color: #b91c1c; }
.sd-forecast__band, .sd-forecast__note, .sd-forecast__meta { font-size: .75rem; opacity: .7; }
/* پیش‌بینیِ کم‌اعتماد باید **دیده** شود که کم‌اعتماد است. */
.sd-forecast.is-shaky { border-color: #f59e0b; background: rgb(245 158 11 / .06); }
.sd-forecast__warn { font-size: .78125rem; color: #b45309; display: flex; align-items: center; gap: .3rem; }
.sd-forecast__warn i { inline-size: 1rem; block-size: 1rem; }


/* ثبت چک از روی راس چک سفارش — فرم درون‌ردیفی، نه صفحهٔ جدا. */
.sl-cheque-reg { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.sl-cheque-reg input {
  border: 1px solid var(--line); border-radius: .375rem;
  padding: .3rem .45rem; font-size: .75rem; width: 7.5rem;
  background: var(--card-bg); color: var(--text-1);
}
.sl-cheque-reg button { padding: .3rem .6rem; font-size: .75rem; }
@media (max-width: 640px) { .sl-cheque-reg input { width: 100%; } }

/* نمونهٔ رنگِ مقدار دادهٔ مرجع — رنگ از `metadata.color` می‌آید، پس
   به‌صورت متغیر inline تزریق می‌شود و کلاس فقط شکل را می‌دهد. */
.sd-swatch {
  display: inline-block; width: 1.15rem; height: 1.15rem; border-radius: 0.3rem;
  background: var(--swatch, #6b7280);
  border: 1px solid color-mix(in srgb, var(--swatch, #6b7280) 55%, #0f172a);
  vertical-align: middle;
}

/* چیپِ برچسبِ کار — رنگ از `metadata.color` دادهٔ مرجع می‌آید، پس inline
   تزریق می‌شود و کلاس فقط شکل و خوانایی را می‌دهد. متنِ روی چیپ از
   خودِ رنگ مشتق می‌شود تا روی رنگ تیره و روشن هر دو خوانا بماند. */
.sd-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding-inline: .45rem; padding-block: .1rem; border-radius: .4rem;
  font-size: .7rem; font-weight: 700; line-height: 1.6;
  background: color-mix(in srgb, var(--tag, #6b7280) 16%, #ffffff);
  color: color-mix(in srgb, var(--tag, #6b7280) 78%, #0f172a);
  border: 1px solid color-mix(in srgb, var(--tag, #6b7280) 32%, #ffffff);
}
.dark .sd-tag {
  background: color-mix(in srgb, var(--tag, #6b7280) 26%, #0b1220);
  color: color-mix(in srgb, var(--tag, #6b7280) 45%, #ffffff);
  border-color: color-mix(in srgb, var(--tag, #6b7280) 45%, #0b1220);
}
.sd-tag-row { display: flex; flex-wrap: wrap; gap: .25rem; }

/* نوار «ورود با کاربر دیگر» — عمداً پررنگ و همیشگی.
   کاربری که فراموش کند از چشم چه کسی می‌بیند، گزارش غلط می‌دهد. */
.sd-impersonation-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-block-end: 1rem; padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, #d97706 45%, transparent);
  border-inline-start: 4px solid #d97706;
  border-radius: 0.6rem;
  background: color-mix(in srgb, #d97706 12%, var(--card-bg));
  color: var(--text-1); font-size: 0.82rem; font-weight: 600;
}
.sd-impersonation-bar [data-lucide] { width: 1rem; height: 1rem; flex: none; vertical-align: -2px; }
.sd-impersonation-bar form { margin: 0; }

/* ── انتخابگر رنگ با پالت آماده ──
   رنگ‌های آماده کنار انتخابگرند نه به‌جایش: کسی که رنگ سازمانی خاصی
   دارد باید بتواند بگذاردش، و کسی که فقط «یک آبیِ مرتب» می‌خواهد
   نباید دنبال کدِ هگز بگردد. */
.sd-color-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sd-color-field input[type="color"] {
  inline-size: 3rem; block-size: 2.35rem; padding: .15rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: .5rem; background: var(--surface);
}
.sd-color-swatches { display: flex; gap: .3rem; flex-wrap: wrap; }
.sd-color-swatch {
  inline-size: 1.5rem; block-size: 1.5rem; border-radius: .4rem; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .15); padding: 0;
}
.sd-color-swatch:hover { transform: scale(1.12); }
.sd-color-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }