/* ================================================================
   خاموت — سیستم طراحی هم‌خانواده‌ی DentalSuite، با رنگ‌بندیِ زرد
   دودیِ گرمِ تیره برای قاب، زردِ طلایی برای کنش و انتخاب، قرمز فقط برای خطا و دیرکرد.
   توکن‌ها عیناً همان DentalSuite است؛ نام‌های قدیمی خاموت (molten، paper، card…) پایین‌تر به
   همین‌ها نگاشت شده‌اند تا بخش‌های کارکردی (فرم سفارش، پلاک، ورود، چاپ) بی‌تغییر رنگ تازه بگیرند.
   ================================================================ */
:root {
  /* رنگ‌بندیِ زرد (مهر ۱۴۰۵): زردِ طلاییِ میانه برای کنش و تأکید، دودیِ گرمِ تیره برای منو و سربرگ.
     نام‌های navy/cyan از طرحِ DentalSuite مانده‌اند تا قاعده‌ها دست نخورند؛ مقدارشان زرد و قهوه‌ای است. */
  --ground: #F5F3EC;
  --surface: #FFFFFF;
  --surface-2: #F9F7F1;
  --ink: #1D1A14;
  --ink-2: #4A4539;
  --ink-3: #6B6556;   /* 5.25:1 روی ground */
  --line: #E3DDCE;
  --line-strong: #C8BFA9;

  /* متنِ تأکیدی، لینک و عنوان — قهوه‌ایِ طلاییِ تیره */
  --navy-950: #1A160E;
  --navy-900: #2B2415;
  --navy-800: #4A3B17;
  --navy-700: #8A6100;  /* لینک روی سفید 5.55:1 */

  /* زردِ برند: انتخاب، نشانگرِ فعال، نوارها */
  --cyan-500: #EAB308;
  --cyan-400: #F0BD1F;
  --cyan-300: #F6D264;
  --cyan-100: #FBEAB0;
  --cyan-50: #FEF7DF;

  --alert-700: #9F1D13;
  --alert-600: #B42318;
  --alert-200: #F4B7B0;
  --alert-50: #FEF3F1;
  /* «amber» حالا نارنجی است: هشدار و «در انتظار تایید» نباید با زردِ برند یکی دیده شود */
  --amber-700: #9A3F0C;  /* 6.8:1 روی سفید */
  --amber-500: #F08A24;
  --amber-100: #FDDCBF;
  --amber-50: #FFF3E8;
  --ok-700: #1A6B3E;
  --ok-50: #EBF6EF;
  /* «ارسال شده»: خاکستریِ فولادی — کار تمام شده، نباید با زردِ «در جریان» رقابت کند */
  --slate-500: #8A94A0;
  --slate-700: #3E4A57;
  --slate-50: #EEF1F4;

  --font: "Vazirmatn FD", "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-s: 0.875rem;
  --fs-m: 0.96875rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-pill: 999px;

  --ring: 0 0 0 3px rgb(234 179 8 / 0.45);
  --sidebar-w: 15.5rem;

  /* «سطحِ پُر» = دکمه‌ی اصلی و انتخاب: زرد با متنِ تیره (سفید روی زرد خوانده نمی‌شود) */
  --fill: #EAB308;
  --fill-strong: #D9A406;
  --fill-mid: #E2AD07;
  --fill-deep: #C69404;
  --fill-ink: #1F1A0B;
  --danger-fill: #B42318;
  --danger-fill-strong: #9F1D13;
  --ok-fill: #1A6B3E;

  /* قابِ تیره: منوی کناری، سربرگ‌ها، نوارِ پنلِ مشتری */
  --chrome-deep: #17140E;
  --chrome-mid: #221D14;
  --chrome-strong: #2C261A;
  /* متن روی قابِ تیره */
  --on-dark-1: #F4EFE3;
  --on-dark-2: #E2DBC9;
  --on-dark-3: #BDB39D;
  --on-dark-4: #A69C85;
  --on-dark-accent: #E9C75A;
  /* زرد روی قابِ تیره */
  --accent: #EAB308;
  --accent-hover: #F4C73A;
  --accent-soft: #F3CD4A;
  --accent-ink: #1F1A0B;

  --shadow-hue: 40 30 10;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --ground: #13110C;
  --surface: #1C1A14;
  --surface-2: #23201A;
  --ink: #EFEADD;
  --ink-2: #CBC3B0;
  --ink-3: #9E957F;
  --line: #332E25;
  --line-strong: #4D463A;

  --navy-950: #FBF3D9;
  --navy-900: #F6E7B8;
  --navy-800: #EFD68A;
  --navy-700: #F2C94C;

  --cyan-500: #EAB308;
  --cyan-400: #F2C12E;
  --cyan-300: #6B5410;
  --cyan-100: #4A3A0B;
  --cyan-50: #2A2209;

  --alert-700: #FFB4A8;
  --alert-600: #E5584A;
  --alert-200: #6B2A22;
  --alert-50: #34160F;
  --amber-700: #FDBA74;
  --amber-500: #F08A24;
  --amber-100: #5A2E0E;
  --amber-50: #2E1A0A;
  --ok-700: #86D9A6;
  --ok-50: #102E1D;
  --slate-500: #7D8894;
  --slate-700: #C5CDD6;
  --slate-50: rgb(255 255 255 / 0.08);

  --fill: #EAB308;
  --fill-strong: #F2C12E;
  --fill-mid: #E2AD07;
  --fill-deep: #D29F05;
  --fill-ink: #1F1A0B;
  --danger-fill: #C0392B;
  --danger-fill-strong: #A32C20;
  --ok-fill: #1F7A48;

  --chrome-deep: #0E0C08;
  --chrome-mid: #19150F;
  --chrome-strong: #221D14;

  --shadow-hue: 0 0 0;
  --ring: 0 0 0 3px rgb(234 179 8 / 0.45);
}

/* ---------- نام‌های قدیمی خاموت ← توکن‌های تازه ---------- */
:root, [data-bs-theme="dark"] {
  --paper: var(--ground);
  --card: var(--surface);
  --muted: var(--ink-3);
  --row-alt: var(--surface-2);
  --row-hover: var(--cyan-50);
  --head-bg: var(--surface-2);
  --molten: var(--navy-700);
  --molten-light: var(--cyan-400);
  --molten-dark: var(--fill-strong);
  --molten-surface: var(--fill);
  --molten-hover: var(--fill-strong);
  --molten-on-light: var(--navy-700);
  --molten-tint: var(--cyan-50);
  --ok: var(--ok-700);
  --warn: var(--amber-500);
  --info: var(--cyan-500);
  --danger: var(--alert-600);
  --ok-text: var(--ok-700);
  --warn-text: var(--amber-700);
  --info-text: var(--navy-700);
  --danger-text: var(--alert-600);
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px;
  --r-sm: var(--r-s); --r-md: var(--r-m); --r-lg: var(--r-l); --r-xl: 20px;
  --sh-sm: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
  --sh-md: 0 0.75rem 1.75rem -1.25rem rgb(var(--shadow-hue) / 0.45);
  --sh-lg: 0 10px 30px rgb(var(--shadow-hue) / 0.18);
  --sh-focus: var(--ring);
  --glow-molten: var(--sh-md); --glow-ok: var(--sh-md); --glow-warn: var(--sh-md);
  --glow-info: var(--sh-md); --glow-danger: var(--sh-md);
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-bounce: var(--ease);
  --t-fast: .15s; --t-base: .2s;
  --touch: 44px;

  /* بوت‌استرپ از همین پالت بخواند (مودال، دراپ‌داون، جدول، متن کم‌رنگ) */
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-3);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-m);
  --bs-border-radius-sm: var(--r-s);
  --bs-border-radius-lg: var(--r-l);
  --bs-heading-color: inherit;
}

/* ================================================================
   بخش‌های کارکردی — از نسخه‌ی قبلی خاموت، بدون تغییر
   (رنگ‌هایشان از نگاشتِ نام‌های قدیمی بالا می‌آید)
   ================================================================ */

/* ---------- تایم‌لاین وضعیت به شکل خاموت ---------- */
.khamoot-track { display: flex; align-items: center; margin: .8rem 0 1rem; }
.khamoot-track .node { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 84px; }
.khamoot-track .dot {
  width: 22px; height: 22px; border-radius: 6px; border: 3px solid var(--line);
  background: var(--card); position: relative;
}
.khamoot-track .node.done .dot { border-color: var(--molten); background: var(--molten); }
.khamoot-track .node.done .dot::after {
  content: "✓"; color: #fff; font-size: .75rem; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.khamoot-track .lbl { font-size: .74rem; color: var(--muted); }
.khamoot-track .node.done .lbl { color: var(--molten); font-weight: 700; }
.khamoot-track .bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; margin: 0 -20px 22px; }
.khamoot-track .bar.done { background: var(--molten); }

/* ---------- فرم سفارش ---------- */
.item-row { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--sp-md); margin-bottom: var(--sp-sm); }
.est-badge { font-variant-numeric: tabular-nums; }

/* شکل شماتیک محصول */
.shape-box { width: 54px; height: 42px; border: 3px solid var(--molten); border-radius: 5px; position: relative; }
.shape-box::before, .shape-box::after {
  content: ""; position: absolute; width: 12px; height: 3px; background: var(--molten);
  top: -3px; inset-inline-start: -6px; transform: rotate(-38deg);
}
.shape-box::after { top: 4px; transform: rotate(38deg); }
.shape-line { width: 54px; height: 3px; background: var(--molten); position: relative; margin: 20px 0; }
.shape-line::before, .shape-line::after {
  content: ""; position: absolute; width: 10px; height: 3px; background: var(--molten);
}
.shape-line::before { inset-inline-start: -2px; top: -7px; transform: rotate(50deg); }
.shape-line::after { inset-inline-end: -2px; top: -7px; transform: rotate(-50deg); }

/* ---------- عمومی ---------- */
.badge-status { font-size: .78rem; padding: .38em .7em; }
.overdue { color: #d33 !important; font-weight: 700; }
a { text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: linear-gradient(160deg, var(--chrome-deep) 0%, var(--chrome-strong) 100%); }
.login-card { width: 100%; max-width: 400px; }

/* ---------- پرینت ---------- */
@media print {
  .no-print, .sidebar, .topbar { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff !important; }
  .card { border: none !important; box-shadow: none !important; }
  .print-sheet { font-size: 13px; }
}
.print-sheet table { border-collapse: collapse; width: 100%; }
.print-sheet th, .print-sheet td { border: 1px solid #444; padding: 6px 8px; text-align: center; }



.price-input { max-width: 130px; }
::placeholder { color: var(--muted) !important; opacity: 1; }
.sms-check { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--sp-sm) var(--sp-md); margin-bottom: var(--sp-sm); }

/* دراپ‌داون جستجوی مشتری */
.cust-dropdown {
  position: absolute; top: 100%; inset-inline: 0; z-index: 1050;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); max-height: 260px; overflow-y: auto; margin-top: var(--sp-xs);
}
.cust-item { padding: .55rem .8rem; cursor: pointer; font-size: .92rem; }
.cust-item:hover { background: rgba(232,93,31,.08); }
.form-control.is-valid { border-color: #2f9e63; background-image: none; }


/* ---------- صفحه پیگیری ---------- */
.track-body { background: var(--paper); min-height: 100vh; }
.track-header {
  background: linear-gradient(140deg, var(--chrome-strong), var(--chrome-deep));
  color: #fff; padding: .9rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
}

/* بند انگشتی عکس محصول در فرم سفارش */
.pt-thumb { height: 31px; width: 38px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }


/* احترام به تنظیم «کاهش حرکت» سیستم کاربر */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* نوار سابقه مشتری در فرم سفارش */
.cust-info {
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md); font-size: .88rem;
}



/* ---------- آیکون‌های SVG (جایگزین ایموجی) ---------- */
.icon {
  display: inline-block; vertical-align: -.18em; flex: 0 0 auto;
}
.sidebar nav a {
  display: flex; align-items: center; gap: .55rem;
}
.sidebar nav a .icon { opacity: .85; }
.sidebar nav a.active .icon,
.sidebar nav a:hover .icon { opacity: 1; }
.btn .icon { vertical-align: -.2em; }


/* ---------- پیام‌های شناور ---------- */
.toast-stack {
  position: fixed; inset-block-start: 1rem; inset-inline-end: 1rem;
  z-index: 1080; display: flex; flex-direction: column; gap: .5rem;
  max-width: min(420px, calc(100vw - 2rem));
}
.app-toast {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .7rem .9rem; border-radius: var(--r-md);
  background: var(--card, #fff); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  animation: toast-in .22s ease-out;
}
.app-toast .icon { margin-top: .12rem; }
.app-toast.toast-ok { border-inline-start-color: var(--ok); }
.app-toast.toast-ok .icon { color: var(--ok); }
.app-toast.toast-err { border-inline-start-color: var(--danger); }
.app-toast.toast-err .icon { color: var(--danger); }
.toast-text { flex: 1; font-size: .9rem; line-height: 1.55; }
.toast-close {
  background: none; border: 0; color: var(--muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 .15rem;
}
.toast-close:hover { color: var(--danger); }
.toast-hide { opacity: 0; transform: translateY(-6px); transition: .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
@media print { .toast-stack { display: none; } }


/* ---------- صفحه‌بندی مشترک ---------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  justify-content: center; padding-top: var(--sp-md);
}
.pager a, .pager .current {
  min-width: 2rem; padding: .25rem .55rem; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; font-size: .88rem;
}
.pager a { color: inherit; }
.pager a:hover { background: var(--paper); border-color: var(--molten); }
.pager .current { background: var(--molten); border-color: var(--molten); color: #fff; font-weight: 700; }
.pager-info { margin-inline-start: auto; color: var(--muted); font-size: .82rem; }


/* ---------- تقویم شمسی ---------- */
.datepicker-plot-area { font-family: "Vazirmatn", Tahoma, sans-serif !important; }
[data-bs-theme="dark"] .datepicker-plot-area {
  background: var(--surface-2) !important; color: #e7edf3 !important;
}
[data-bs-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span,
[data-bs-theme="dark"] .datepicker-plot-area .datepicker-header .btn-today,
[data-bs-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn { color: #e7edf3 !important; }



/* ---------- دکمه شناور «ثبت سریع» ---------- */
.fab-wrap {
  /* سایدبار در RTL سمت inline-start (راست) است و z-index:1030 دارد؛
     دکمه شناور باید سمت مقابل بنشیند وگرنه کامل زیرش پنهان می‌شود. */
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px;
  z-index: 1000; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
}
.fab-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--molten-light), var(--molten-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(232, 93, 31, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease;
}
.fab-btn:hover { box-shadow: 0 10px 28px rgba(232, 93, 31, .55); }
.fab-wrap.open .fab-btn { transform: rotate(45deg); }
.fab-menu {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sm);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease-out;
}
.fab-wrap.open .fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.fab-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  background: var(--card); color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px; text-decoration: none;
  box-shadow: var(--sh-md); font-size: .85rem; font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fab-item:hover { border-color: var(--molten); color: var(--molten-dark); }
.fab-item .icon { color: var(--molten); }
@media print { .fab-wrap { display: none; } }


/* ================================================================
   دسترس‌پذیری — طبق ممیزی ui-ux-pro-max
   ================================================================ */

/* ---------- ۱) حلقه فوکوس سراسری (WCAG 2.4.7 / 2.4.11) ----------
   قبلا فقط فیلدهای فرم و btn-molten حلقه فوکوس داشتند؛ لینک‌ها، دکمه‌های
   جدول، سایدبار، صفحه‌بندی و دکمه شناور با کیبورد قابل تشخیص نبودند. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--molten-on-light);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* بوت‌استرپ ۵.۳ روی .btn/.nav-link/.btn-close مقدار outline:0 می‌گذارد و با specificity
   بالاتر قاعده بالا را خنثی می‌کند — این‌ها را صریح برمی‌گردانیم. */
.btn:focus-visible,
.nav-link:focus-visible,
.btn-close:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.dropdown-item:focus-visible,
.btn-check:focus-visible + .btn {
  outline: 3px solid var(--molten-on-light) !important;
  outline-offset: 2px;
}
/* روی زمینه تیره سایدبار، حلقه نارنجی کم‌کنتراست است */
.sidebar :where(a, button):focus-visible,
.fab-btn:focus-visible {
  outline-color: #ffb38a;
}
/* مرورگرهای قدیمی که focus-visible ندارند حداقل فوکوس معمولی را نشان دهند */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ---------- ۲) فوکوس نباید زیر نوار چسبان پنهان شود (WCAG 2.4.11) ---------- */
html { scroll-padding-top: 4.5rem; }

/* ---------- ۳) حداقل اندازه هدف اشاره‌گر ۲۴×۲۴ (WCAG 2.5.8) ----------
   دکمه‌های ریز ویرایش/حذف محموله زیر این حد بودند. */
.btn-sm.py-0 { min-height: 28px; min-width: 28px; }
.table td .btn-sm { min-height: 30px; }
.toast-close { min-width: 28px; min-height: 28px; }
.pager a, .pager .current { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- ۴) نارنجی به‌عنوان متن: نسخه کنتراست‌دار ---------- */
.khamoot-track .node.done .lbl,
.fab-item:hover,
.text-molten { color: var(--molten-on-light); }

/* ---------- ۵) وضعیت غیرفعال خوانا (MD: opacity 0.38–0.5) ---------- */
.btn:disabled, .btn.disabled, :disabled { opacity: .55; cursor: not-allowed; }

/* ---------- ۶) نشانگر ردیف جدول با کیبورد ---------- */
.table-hover tbody tr:focus-within { background: rgba(232,93,31,.08); }

/* ---------- ۷) احترام به تم سیستم در اولین بازدید ----------
   تم ذخیره‌شده کاربر (data-bs-theme روی html) همیشه اولویت دارد. */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme]) body { background: #14191f; color: #e7edf3; }
}

/* ---------- ۸) قرمز خطر: کنتراست در هر دو زمینه ----------
   قرمز بوت‌استرپ روی سایدبار سرمه‌ای فقط ۳.۳۵:۱ بود و توکن --danger
   روی کارت سفید ۴.۲۵:۱ — هر دو رد می‌شدند. */
/* سایدبار همیشه زمینه تیره دارد، پس در هر دو تم قرمز روشن لازم است */
.sidebar .text-danger,
.sidebar a.text-danger { color: #ef7168 !important; }   /* 5.22:1 روی سایدبار */
.overdue { color: var(--danger-text) !important; }      /* توکن تم‌آگاه */

/* لینک خروج سایدبار: هدف اشاره‌گر زیر ۲۴px بود */
.sidebar .foot a { padding: 6px 10px; display: inline-flex; align-items: center;
  min-height: 28px; border-radius: var(--r-sm); }
.sidebar .foot a:hover { background: rgba(239,113,104,.14); }

/* ---------- ۹) دکمه‌های outline بوت‌استرپ ----------
   رنگ متن پیش‌فرض بوت‌استرپ در هیچ‌کدام از دو تم به ۴.۵:۱ نمی‌رسد:
   outline-danger روی item-row روشن ۴.۱۴ و روی کارت تیره ۳.۴۶؛
   outline-secondary روی کارت تیره ۳.۳۴. با توکن تم‌آگاه جایگزین شد. */
.btn-outline-danger { --bs-btn-color: var(--danger-text); --bs-btn-border-color: var(--danger-text); }
.btn-outline-secondary { --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line-strong); }
.btn-outline-primary { --bs-btn-color: var(--molten-on-light); --bs-btn-border-color: var(--molten-on-light); }
.btn-outline-success { --bs-btn-color: var(--ok-text); --bs-btn-border-color: var(--ok-text); }
.btn-outline-success:hover { --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; }
/* روی حالت hover متن سفید روی زمینه پر می‌نشیند — آنجا مشکلی نیست */
.btn-outline-danger:hover { --bs-btn-hover-bg: var(--danger-text); --bs-btn-hover-border-color: var(--danger-text); }
.btn-outline-primary:hover { --bs-btn-hover-bg: var(--molten-surface); --bs-btn-hover-border-color: var(--molten-surface); }

/* ---------- ۱۰) لینک‌های متنی ----------
   آبی پیش‌فرض بوت‌استرپ روی زمینه‌های alert به ۴.۵:۱ نمی‌رسد (۳.۵۰ روی alert-secondary).
   لینک درون alert رنگ متن خود alert را به ارث می‌برد — کنتراستش تضمین‌شده است —
   و زیرخط می‌گیرد تا رنگ تنها نشانه‌ی لینک بودن نباشد (قاعده color-not-only). */
/* بوت‌استرپ ۵.۳ رنگ لینک را از --bs-link-color-rgb می‌خواند، نه --bs-link-color.
   (a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1)) }) */
:root {
  --bs-link-color: #b8430f;       --bs-link-color-rgb: 184, 67, 15;
  --bs-link-hover-color: #8f330a; --bs-link-hover-color-rgb: 143, 51, 10;
}
[data-bs-theme="dark"] {
  --bs-link-color: #f2703a;       --bs-link-color-rgb: 242, 112, 58;
  --bs-link-hover-color: #ff8b52; --bs-link-hover-color-rgb: 255, 139, 82;
}

/* ردیف «فوری»: بوت‌استرپ .table-warning را در تم تاریک تطبیق نمی‌دهد و زرد روشن
   می‌ماند؛ لینک و دکمه‌های تم تاریک روی آن ناخوانا می‌شوند.
   لایه hover بوت‌استرپ هم برای این ردیف رنگ ثابت روشن (#ece1be) دارد که با
   box-shadow روی سلول کشیده می‌شود؛ در تم تاریک متن روشن رویش گم می‌شد. */
[data-bs-theme="dark"] .table-warning > td {
  --bs-table-color: #f3e6c4;
  --bs-table-bg: #3a2f14;
  /* تیره‌تر از خود ردیف، نه روشن‌تر: موعد قرمز (#ef7168) روی نسخه روشن‌تر به ۳.۷:۱ می‌افتاد.
     روی این رنگ: متن 11.8:1، قرمز 5.08:1، لینک 9.1:1 */
  --bs-table-hover-bg: #30270f;
  --bs-table-hover-color: #f3e6c4;
  background: #3a2f14; color: #f3e6c4;
}
[data-bs-theme="dark"] .table-warning > td a { color: #ffc06b; }
[data-bs-theme="dark"] .table-warning > td .btn-outline-secondary { --bs-btn-color: #e0cfa4; --bs-btn-border-color: #8a7742; }

/* :not(.btn) مهم است — وگرنه رنگ متن دکمه داخل alert هم عوض می‌شود و ناخوانا می‌گردد */
.alert a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
/* لینک درون پاراگراف و متن راهنما هم باید بدون تکیه بر رنگ قابل تشخیص باشد */
.content p a:not(.btn), .form-text a, .alert a:not(.btn) { text-decoration: underline; }


/* ---------- حالت خالی ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-sm); text-align: center;
  padding: var(--sp-xl) var(--sp-lg); color: var(--muted);
}
.empty-state .icon { width: 40px; height: 40px; color: var(--line-strong); }
.empty-state .es-title { font-weight: 700; color: inherit; font-size: .95rem; }
.empty-state .es-hint { font-size: .84rem; max-width: 46ch; line-height: 1.7; }
td > .empty-state { padding-block: var(--sp-lg); }


/* سرستون‌های قابل مرتب‌سازی */
.th-sort {
  display: inline-flex; align-items: center; gap: .25rem;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.th-sort::after {
  content: "↕"; font-size: .8em; opacity: .35; line-height: 1;
}
.th-sort:hover { color: var(--molten-on-light); }
.th-sort:hover::after { opacity: .7; }
.th-sort.desc, .th-sort.asc { color: var(--molten-on-light); }
.th-sort.desc::after { content: "↓"; opacity: 1; }
.th-sort.asc::after  { content: "↑"; opacity: 1; }

/* ---------- بازخورد ثبت فرم ---------- */
.btn .spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-start-color: transparent;
  display: inline-block; vertical-align: -2px; margin-inline-end: .4rem;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .spin { animation-duration: 2s; } }


/* ---------- ۱۱) رنگ‌های معنایی متن بوت‌استرپ ----------
   .text-success و .text-danger پیش‌فرض بوت‌استرپ در تم تاریک (۳.۴۶) و حتی روی
   راه‌راه تم روشن (۴.۲۹) رد می‌شوند. با توکن تم‌آگاه جایگزین شدند.
   سایدبار استثناست چون همیشه زمینه تیره دارد و بالاتر جدا تنظیم شده. */
.text-success { color: var(--ok-text) !important; }
/* زرد بوت‌استرپ روی سفید ۱.۶۳:۱ بود؛ در چاپ سیاه‌وسفید هم تقریبا سفید درمی‌آمد */
.text-warning { color: var(--warn-text) !important; }
:not(.sidebar) > .text-danger,
.table .text-danger,
.content .text-danger { color: var(--danger-text) !important; }

/* ---------- ۱۲) چک‌باکس و رادیو ----------
   پیش‌فرض بوت‌استرپ ۱۶×۱۶px است و از حداقل ۲۴×۲۴ (WCAG 2.5.8) کمتر می‌ماند.
   در کارگاه با دست دستکش‌دار هم زدنش سخت است. به ۲۴px می‌رسانیم و
   فاصله‌های .form-check را متناسبش می‌کنیم. */
.form-check { padding-inline-start: 2rem; min-height: 1.5rem; }
.form-check .form-check-input { width: 1.5rem; height: 1.5rem; margin-inline-start: -2rem; margin-top: 0; }
.form-check-label { padding-top: .15rem; cursor: pointer; }
.form-check-input { cursor: pointer; }
/* چک‌باکس داخل جدول نباید ردیف را بلند کند */
.table .form-check { margin-bottom: 0; }

/* ---------- ۱۳) گزارش‌ها ---------- */
.range-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  background: var(--card); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--molten-surface);
  border-radius: var(--r-md); padding: .5rem .8rem; margin-bottom: var(--sp-md);
  font-size: .88rem;
}
.range-banner .icon { color: var(--molten-on-light); }
/* جداکننده تزئینی است؛ رنگش را به muted می‌بریم و از درخت دسترس‌پذیری هم حذفش می‌کنیم */
.range-banner .sep { color: var(--muted); }
.kpi-row .stat-card .num { font-size: 1.45rem; }
.kpi-row .stat-card .lbl { font-size: .78rem; line-height: 1.5; }

/* سربرگ مخصوص چاپ — روی صفحه پنهان، فقط در پرینت دیده می‌شود */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .report-print-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid #222; padding-bottom: 6px; margin-bottom: 10px;
  }
  .report-print-head h2 { margin: 0; font-size: 16px; }
  .kpi-row .stat-card { border: 1px solid #999 !important; }
  /* جدول‌ها هنگام چاپ نباید وسط ردیف بشکنند */
  .table tr { break-inside: avoid; }
  thead { display: table-header-group; }
}

/* ---------- پیش‌نمایش پنل ورود در صفحه پروفایل ---------- */
.login-preview {
  position: relative; overflow: hidden; color: #fff; min-height: 240px;
  padding: 1.25rem; margin: 0 1rem 1rem; border-radius: var(--r-md);
  background:
    radial-gradient(500px 260px at 88% -12%, rgba(232,93,31,.28), transparent 62%),
    linear-gradient(158deg, #16212c 0%, #1b2733 45%, #24384a 100%);
}
.login-preview .lp-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .15;
}
.login-preview .lp-content { position: relative; z-index: 1; }
.login-preview .lp-logo { max-height: 40px; max-width: 130px; object-fit: contain; margin-bottom: .5rem; }
.login-preview .lp-name { font-weight: 800; font-size: 1.05rem; }
.login-preview .lp-tag { color: #cfdae5; font-size: .82rem; line-height: 1.8; margin-top: .25rem; }
.login-preview .lp-points { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .35rem; }
.login-preview .lp-points li { display: flex; align-items: center; gap: .4rem; color: #dfe8f0; font-size: .8rem; }
.login-preview .lp-points .icon { color: var(--molten-light); flex-shrink: 0; }
.login-preview .lp-site {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-pill);
  padding: .3rem .7rem; font-size: .78rem;
}

/* ---------- ۱۵) سهم درصدی در تاپ محصول‌ها ---------- */
.share { color: var(--muted); font-size: .78rem; margin-inline-start: .3rem; }
.share-bar {
  height: 4px; background: var(--line); border-radius: 2px;
  margin-top: .3rem; overflow: hidden; max-width: 120px;
}
.share-bar span { display: block; height: 100%; background: var(--molten-surface); border-radius: 2px; }

/* ---------- متغیرهای قابل درج در متن پیامک ---------- */
.tpl-ph {
  display: inline-block; cursor: pointer; user-select: none;
  margin: 2px 2px 2px 0; padding: 2px 7px;
  background: var(--row-alt); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--molten-on-light);
  font-size: .82em; font-family: inherit;
}
.tpl-ph:hover { border-color: var(--molten); background: var(--card); }
.tpl-ph:focus-visible { outline: 2px solid var(--molten); outline-offset: 1px; }

/* ---------- اندازه تیتر بخش‌ها ---------- */
/* تیتر هر کارت از نظر معنایی h2 است (زیر h1 صفحه در نوار بالا) ولی
   اندازه‌اش باید همان h6 قبلی بماند وگرنه بوتسترپ خیلی بزرگش می‌کند. */
.content h2:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6),
.modal-title {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: .5rem;
}
.content h2:last-child { margin-bottom: 0; }
/* تیترهایی که کلاس اندازه بوتسترپ دارند اندازه خودشان را نگه می‌دارند */

/* ---------- فهرست ثبت ارسال (جریان موبایل) ---------- */
.ship-list { display: grid; gap: 10px; }
.ship-card {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; min-height: 76px; text-decoration: none; color: inherit;
  box-shadow: var(--sh-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ship-card:hover { border-color: var(--molten); box-shadow: var(--glow-molten); }
.ship-card:focus-visible { outline: 2px solid var(--molten); outline-offset: 2px; }
.ship-card:active { background: var(--row-alt); }
.ship-main { min-width: 0; }
.ship-code { font-weight: 800; font-size: 1.05rem; }
.ship-cust { font-weight: 600; }
.ship-proj { color: var(--muted); font-size: .85rem; }
.ship-side { text-align: start; flex: none; }
.ship-kg { font-weight: 700; margin-top: .35rem; }
.ship-hint { color: var(--muted); font-size: .72rem; }

/* ---------- مقایسه دوره ---------- */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cmp { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.cmp-l { display: block; font-size: .78rem; color: var(--muted); }
.cmp-n { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.cmp-n small { font-size: .62em; font-weight: 400; color: var(--muted); }
.cmp-d { display: block; font-size: .85rem; font-weight: 700; }
.cmp-b { display: block; font-size: .72rem; color: var(--muted); }

/* ---------- کارنامه مشتری ---------- */
.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.scorecard > div { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.scorecard span { display: block; font-size: .76rem; color: var(--muted); }
.scorecard b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ---------- تفکیک وزن بر اساس سایز میلگرد ---------- */
.size-split-title {
  font-size: .78rem; color: var(--muted); margin: .7rem 0 .35rem;
}
.size-split { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 6px 12px;
}
.size-chip .ss-name { font-size: .82rem; color: var(--muted); }
.size-chip .ss-kg { font-weight: 700; }
.size-chip .ss-pct { font-size: .76rem; color: var(--molten-on-light); }

/* در صفحه سفارش، ستون وزن واقعی کنار تقریبی */
.size-table td.actual { font-weight: 700; }
.size-table td.est { color: var(--muted); }


/* ---------- پلاک خودرو ---------- */
/* ظاهر پلاک واقعی: نوار آبی «ایران» در چپ، بعد دو رقم، حرف، سه رقم و کد شهر.
   رنگ‌ها ثابت‌اند (سفید و مشکی) چون پلاک در تم تاریک هم پلاک است. */
.plate-input, .plate {
  display: inline-flex; align-items: stretch; direction: ltr;
  border: 2px solid #111; border-radius: 8px; background: #fff; overflow: hidden;
  font-variant-numeric: tabular-nums; max-width: 100%;
}
.plate-ir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #16357a; color: #fff; padding: 3px 5px; flex: none;
}
.plate-ir .flag { display: flex; flex-direction: column; width: 15px; height: 10px; border: 1px solid rgba(255,255,255,.5); }
.plate-ir .flag i { flex: 1; }
.plate-ir .flag .g { background: #239f40; }
.plate-ir .flag .w { background: #fff; }
.plate-ir .flag .r { background: #da0000; }
.plate-ir b { font-size: .55rem; line-height: 1; font-weight: 700; }
.plate-box {
  border: 0; border-radius: 0; background: #fff; color: #111;
  text-align: center; font-weight: 800; font-size: 1.2rem; padding: .3rem .2rem; min-width: 0;
}
.plate-box:focus { outline: 2px solid var(--molten); outline-offset: -2px; }
.plate-left, .plate-region { width: 3.1rem; }
.plate-middle { width: 4.1rem; }
.plate-letter { width: 3.4rem; font-size: 1.15rem; text-align: center; appearance: none; -webkit-appearance: none; cursor: pointer; }
.plate-div { width: 2px; background: #111; flex: none; }
/* نمایش فقط‌خواندنی — همان ظاهر، کوچک‌تر */
.plate-view .plate-cell {
  display: inline-flex; align-items: center; justify-content: center;
  color: #111; font-weight: 800; font-size: .95rem; padding: .15rem .3rem; min-width: 1.6rem;
}
.plate-view .plate-cell-letter { min-width: 1.9rem; }
.plate-view .plate-ir b { font-size: .5rem; }
/* در چاپ، نوار آبی و پس‌زمینه سفید باید واقعا چاپ شوند */
@media print {
  .plate, .plate-input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- جایگذاری پلاک در فرم ---------- */
/* ویجت باید مثل بقیه فیلدها زیر برچسبش بنشیند نه کنارش، ارتفاعش با فیلد همسایه
   یکی باشد، و در ستون باریک به‌جای سرریز، خودش جمع شود. */
.plate-input { display: flex; width: max-content; max-width: 100%; min-height: 38px; }
.plate-input .plate-box { flex: 0 1 auto; min-width: 0; font-size: 1.1rem; padding-block: .2rem; }
/* کنار فیلدهای بزرگ (form-control-lg) */
.plate-input.plate-lg { min-height: 48px; }
.plate-lg .plate-box { font-size: 1.3rem; }
/* کنار فیلدهای کوچک (form-control-sm) */
.plate-input.plate-sm { min-height: 32px; }
.plate-sm .plate-box { font-size: 1rem; padding: .15rem .2rem; }
.plate-sm .plate-left, .plate-sm .plate-region { width: 2.5rem; }
.plate-sm .plate-middle { width: 3.2rem; }
.plate-sm .plate-letter { width: 2.8rem; font-size: .95rem; }
.plate-sm .plate-ir b { font-size: .5rem; }
/* پلاک نیمه‌پر (site.js ← plateSync): قاب قرمز، چون این مقدار دیگر ذخیره نمی‌شود و
   فرم تا کامل یا کاملا خالی شدن پلاک نمی‌رود. رنگ تم‌آگاه است نه مشکی ثابت پلاک. */
.plate-input.is-invalid {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 .2rem rgba(217, 72, 59, .28);
}

/* ---------- ورودی مبلغ ---------- */
.amount-wrap { display: block; }
/* مبلغ به حروف زیر فیلد — نقشش یادآوری است نه تزئین، پس کم‌رنگ ولی خوانا */
.amount-words {
  min-height: 1.15rem; margin-top: .3rem; font-size: .82rem; line-height: 1.5;
  color: inherit; font-weight: 600;
}
.amount-words:empty { display: none; }

/* ---------- راهنمای اپراتور موبایل ---------- */
.phone-hint { font-size: .78rem; color: var(--muted); min-height: 1rem; margin-top: .2rem; }
.phone-hint:empty { display: none; }

/* ---------- درصد تغییر روی کارت آمار ---------- */
.stat-delta {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .78rem; font-weight: 700; margin-top: .15rem;
}
.stat-delta.up { color: var(--ok-text); }
.stat-delta.down { color: var(--danger-text); }
.stat-delta.flat { color: var(--muted); font-weight: 600; }
.stat-delta .cmp { color: var(--muted); font-weight: 500; }


/* ================================================================
   پایه
   ================================================================ */
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--ground); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font); font-size: var(--fs-m); line-height: 1.85;
  color: var(--ink);
}
h1, h2, h3 { line-height: 1.5; font-weight: 600; }
a { color: var(--navy-700); text-underline-offset: 0.3em; }
a:hover { color: var(--navy-900); }
.num { font-variant-numeric: tabular-nums; }
.icon { flex: none; }
::selection { background: var(--cyan-100); color: var(--navy-900); }
hr { border-color: var(--line); opacity: 1; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ================================================================
   پوسته: نوار کناری + محتوا
   ================================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-block-size: 100dvh;
}

.sidebar {
  position: sticky; inset-block-start: 0; z-index: 30;
  block-size: 100dvh;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem 0.875rem;
  background: var(--chrome-deep);
  color: var(--on-dark-2);
}
/* در تیره سطحِ نوار و زمینه نزدیک‌اند؛ یک خطِ مو مرز را نگه می‌دارد */
[data-bs-theme="dark"] .sidebar { border-inline-end: 1px solid var(--line); }

.sidebar > .sidebar-top, .sidebar > .me { flex: none; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.brand {
  display: flex; align-items: center; gap: 0.75rem; min-inline-size: 0;
  padding-inline: 0.375rem; color: inherit; text-decoration: none;
}
.brand:hover { color: inherit; }
.brand-mark {
  display: grid; place-items: center; flex: none;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--r-m);
  background: rgb(255 255 255 / 0.08);
  color: var(--cyan-400);
}
.brand-mark img { inline-size: 100%; block-size: 100%; object-fit: contain; border-radius: inherit; }
.brand-mark.has-logo { background: #fff; padding: 3px; }
.brand-text { display: grid; line-height: 1.5; min-inline-size: 0; }
.brand-name { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-product { color: var(--on-dark-4); font-size: var(--fs-xs); }

.side-tools { display: flex; align-items: center; gap: 0.125rem; }
.side-btn {
  position: relative; display: inline-grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: 0; border-radius: var(--r-m); background: none;
  color: var(--on-dark-2); cursor: pointer;
}
.side-btn:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.side-btn:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 1px; }
.side-badge {
  position: absolute; inset-block-start: 0.2rem; inset-inline-end: 0.15rem;
  min-inline-size: 1.125rem; padding-inline: 0.25rem;
  border-radius: var(--r-pill); background: var(--amber-500); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; text-align: center;
}
.nav-toggle { display: none; }

/* فهرستِ بلندتر از صفحه داخل خودش بلغزد؛ min-block-size: 0 شرطِ لازمِ آیتمِ فلکس است */
.nav-scroll {
  flex: 1 1 auto; min-block-size: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.25) transparent;
}
.sidebar .nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sidebar .nav a {
  display: flex; align-items: center; gap: 0.75rem;
  min-block-size: 2.625rem;
  padding-block: 0.375rem; padding-inline: 0.625rem 0.75rem;
  border-inline-start: 3px solid transparent; border-radius: var(--r-m);
  color: inherit; text-decoration: none; font-size: var(--fs-m);
}
.sidebar .nav a .icon { opacity: 1; }
.sidebar .nav a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.sidebar .nav a.active { background: rgb(255 255 255 / 0.1); border-inline-start-color: var(--cyan-400); color: #fff; }
.sidebar .nav a.active .icon { color: var(--cyan-400); }
.sidebar .nav.is-collapsed { display: none; }

/* عنوانِ گروه: دکمه‌ای که فهرستش را جمع می‌کند؛ وضعیت در مرورگر می‌ماند */
.nav-group {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  inline-size: 100%;
  margin-block: 1.125rem 0.375rem; padding: 0 0.625rem;
  border: 0; background: none;
  color: var(--on-dark-4); font: inherit; font-size: var(--fs-xs); font-weight: 600;
  text-align: start; cursor: pointer;
}
.nav-group:hover { color: var(--on-dark-2); }
.nav-group:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; border-radius: var(--r-s); }
.nav-group .icon { opacity: 0.7; transition: transform var(--t-base) var(--ease); }
.nav-group[aria-expanded="false"] .icon { transform: rotate(180deg); }

.nav-collapse-all {
  display: inline-flex; align-items: center; gap: 0.375rem;
  margin-block-start: 0.75rem; margin-inline-start: 0.625rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--r-pill);
  background: none; color: var(--on-dark-3);
  font: inherit; font-size: var(--fs-xs); cursor: pointer;
}
.nav-collapse-all:hover { border-color: rgb(255 255 255 / 0.35); color: #fff; }
.nav-collapse-all:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }

/* کاربر و کنش‌های شخصی، پایینِ نوار */
.me {
  margin-block-start: auto;
  display: grid; gap: 0.125rem;
  padding: 0.875rem 0.625rem 0;
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
}
.me-name { color: #fff; font-weight: 500; }
.me-role { color: var(--on-dark-4); font-size: var(--fs-xs); margin-block-end: 0.25rem; }
.me-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-block-size: 2rem; padding: 0;
  border: 0; background: none;
  color: var(--on-dark-3); font: inherit; font-size: var(--fs-s);
  text-decoration: none; text-align: start; cursor: pointer;
}
.me-link:hover, .me-link.active { color: #fff; }
.me-link.is-danger:hover { color: #FFB4A8; }
.me-link .side-badge { position: static; }

.main { min-inline-size: 0; padding-block: 1.75rem 4rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.page { max-inline-size: 76rem; }

/* پرده پشتِ فهرستِ بازِ موبایل — کلیک رویش فهرست را می‌بندد */
.side-backdrop {
  position: fixed; inset: 0; z-index: 25;
  background: rgb(16 13 8 / 0.5);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.side-backdrop.show { opacity: 1; visibility: visible; }

@media (min-width: 56.0625rem) {
  .side-backdrop { display: none; }
}

@media (max-width: 56rem) {
  /* ردیفِ سربرگ به قدِ خودش؛ وگرنه در صفحه‌ی کوتاه زیرِ سربرگ نوارِ تیره‌ی بلند می‌ماند */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }

  /* در موبایل نوار کناری یک سربرگِ چسبان می‌شود و فهرست پشتِ دکمه می‌رود */
  .sidebar { block-size: auto; gap: 0; padding: 0.5rem 1rem; }
  .nav-toggle { display: inline-grid; }
  .brand-product { display: none; }

  .nav-scroll { display: none; margin-block: 0.625rem; max-block-size: min(60dvh, 28rem); }
  .sidebar.open .nav-scroll { display: block; }
  .sidebar:not(.open) .me { display: none; }
  .me {
    margin-block-start: 0; padding: 0.625rem 0.625rem 0.25rem;
    grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem;
    overflow-x: auto;
  }
  .me-name, .me-role { display: none; }
  .main { padding-block: 1rem 6.5rem; }
}

/* ---------- نوار پایین موبایل (کارکنان) ---------- */
.botbar { display: none; }
@media (max-width: 56rem) {
  .botbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 28;
    background: var(--surface);
    border-block-start: 1px solid var(--line);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -0.5rem 1.5rem -1rem rgb(var(--shadow-hue) / 0.35);
  }
  .botbar-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; min-height: 73px; padding: 9px 2px;
    color: var(--ink-3); text-decoration: none;
    font-size: .86rem; font-weight: 500; line-height: 1.1;
  }
  .botbar-item.active { color: var(--navy-700); font-weight: 600; }
  .botbar-item.active::before {
    content: ""; position: absolute; inset-block-start: 0; left: 50%;
    inline-size: 28px; block-size: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: var(--cyan-400);
  }
  .botbar-item:active { background: var(--cyan-50); }
  .botbar-item:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -3px; border-radius: var(--r-m); }
  /* دکمه‌ی ثبت سفارش: فیروزه‌ای با متنِ سرمه‌ای — همان کنشِ اصلیِ سربرگ‌ها */
  .botbar-fab {
    justify-self: center;
    inline-size: 64px; block-size: 64px; margin-block-start: -24px;
    display: grid; place-items: center;
    border-radius: 50%; border: 4px solid var(--ground);
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(var(--shadow-hue) / 0.45);
    text-decoration: none;
  }
  .botbar-fab:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .botbar-fab:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 2px; }
}

/* ---------- سربرگِ پنل مشتری (بی‌نوار کناری) ---------- */
.portal-bar {
  position: sticky; inset-block-start: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem clamp(1rem, 3vw, 2.5rem);
  background: var(--chrome-deep); color: var(--on-dark-2);
}
.portal-bar .brand { margin-inline-end: auto; }
.portal-bar .pill-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem; border-radius: var(--r-pill);
  border: 1px solid rgb(255 255 255 / 0.28); background: rgb(255 255 255 / 0.08);
  color: #fff; font-size: var(--fs-s); font-weight: 600; text-decoration: none;
}
.portal-bar .pill-btn:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
.portal-bar .pill-btn.is-primary { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.portal-bar .pill-btn.is-primary:hover { background: var(--accent-soft); }
.portal-main { padding-block: 1.5rem 4rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }

@media print {
  .sidebar, .botbar, .side-backdrop, .portal-bar { display: none !important; }
  .shell { display: block; }
  .main, .portal-main { padding: 0 !important; }
  body { background: #fff !important; }
}

/* عددِ کنارِ آیتمِ منو — مثل نشانِ «درخواست‌های نوبت» در DentalSuite */
.nav-badge {
  margin-inline-start: auto; min-inline-size: 1.5rem; padding-inline: 0.375rem;
  border-radius: var(--r-pill); background: var(--amber-500); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; text-align: center;
}
.nav-badge.is-calm { background: rgb(234 179 8 / 0.2); color: var(--accent-soft); }

/* ================================================================
   سرصفحه‌ی همه‌ی صفحه‌ها — همان سطحِ تیره‌ی DentalSuite
   گرادیانِ سرمه‌ای با دو هاله‌ی فیروزه‌ای، بافتِ نقطه‌ای، و یک خاموتِ کم‌رنگ در گوشه (امضای
   برنامه). متن سفید، دکمه‌ها شیشه‌ای، کنشِ اصلی فیروزه‌ای — تنها رنگِ پُرِ روی نوار.
   ================================================================ */
.page-head {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
  margin-block-end: 1.5rem; padding: 1.375rem 1.625rem;
  border-radius: calc(var(--r-l) + 4px);
  background:
    radial-gradient(110% 130% at 100% 0%, rgb(234 179 8 / 0.28) 0%, transparent 52%),
    radial-gradient(80% 120% at 0% 100%, rgb(234 179 8 / 0.14) 0%, transparent 58%),
    linear-gradient(140deg, var(--chrome-strong) 0%, var(--chrome-deep) 100%);
  color: #fff;
  box-shadow: 0 1.25rem 2.75rem -1rem rgb(var(--shadow-hue) / 0.45);
}
/* عنوان همه‌ی فضای خالی را می‌گیرد و کنش‌ها کنار هم در لبه‌ی انتهایی می‌نشینند */
.page-head > :first-child { margin-inline-end: auto; min-inline-size: 0; }

.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  pointer-events: none;
}
.page-head::after {
  content: ""; position: absolute; z-index: -1;
  inset-block-end: 0.75rem; inset-inline-end: 0.875rem;
  inline-size: 5.5rem; block-size: 5.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='26' height='20' rx='3'/%3E%3Cpath d='M8 7 L4 2 M12 8 L15 2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.07; pointer-events: none;
}
.page-head.pulse::after, .page-head.list-hero::after { display: none; }

.page-head h1 {
  margin: 0; color: #fff; font-weight: 600;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1.35;
}
.page-head .eyebrow { margin: 0; color: var(--on-dark-accent); font-size: var(--fs-s); }
.page-head .lead { margin: 0.375rem 0 0; max-inline-size: 42rem; color: var(--on-dark-2); }
.page-head .muted, .page-head .hint { color: var(--on-dark-2); }
.page-head .back {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-block-end: 0.25rem;
  color: var(--on-dark-3); font-size: var(--fs-s); text-decoration: none;
}
.page-head .back:hover { color: #fff; }
.page-head a:not(.btn, .back, .pulse-btn, .scope) { color: #fff; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* دکمه‌ها روی سطحِ تیره: شیشه‌ای؛ کنشِ اصلی فیروزه‌ای با متنِ سرمه‌ایِ تیره */
.page-head .btn {
  --bs-btn-color: #fff; --bs-btn-bg: rgb(255 255 255 / 0.08); --bs-btn-border-color: rgb(255 255 255 / 0.28);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgb(255 255 255 / 0.16); --bs-btn-hover-border-color: rgb(255 255 255 / 0.4);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgb(255 255 255 / 0.2); --bs-btn-active-border-color: rgb(255 255 255 / 0.4);
  border-radius: var(--r-pill);
}
.page-head .btn-molten, .page-head .btn-primary {
  --bs-btn-color: var(--accent-ink); --bs-btn-bg: var(--accent); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: transparent;
  font-weight: 700;
}
.page-head .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgb(234 179 8 / 0.55); }
.page-head :is(select, input:not([type="checkbox"], [type="radio"])) {
  border-color: transparent; background-color: var(--surface); color: var(--ink);
}

/* جست‌وجوی بزرگِ سفید روی نوار */
.hero-search { position: relative; display: flex; align-items: center; max-inline-size: 34rem; }
.hero-search .icon { position: absolute; inset-inline-start: 1rem; color: var(--ink-3); pointer-events: none; }
.hero-search input {
  inline-size: 100%; min-block-size: 3.25rem; padding-inline: 3rem 1rem;
  border: 1px solid transparent; border-radius: var(--r-l);
  background: var(--surface); color: var(--ink); font-size: var(--fs-l);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 0.75rem 1.75rem -1rem rgb(0 0 0 / 0.45);
}
.hero-search input:focus { outline: none; border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgb(234 179 8 / 0.45); }
.hero-search-hint { margin: 0.375rem 0 0; color: var(--on-dark-3); font-size: var(--fs-xs); }

@media (max-width: 40rem) {
  .page-head { padding: 1.125rem; }
  .page-head::after { inline-size: 4rem; block-size: 4rem; }
}

/* روی کاغذ: بی رنگ، فقط یک خطِ زیر */
@media print {
  .page-head {
    padding: 0 0 0.5rem !important; border-block-end: 1px solid #999 !important;
    border-radius: 0 !important; background: none !important; color: #000 !important; box-shadow: none !important;
  }
  .page-head::before, .page-head::after { display: none !important; }
  .page-head * { color: #000 !important; }
  .page-head .page-actions, .page-head .hero-search { display: none !important; }
}

/* ================================================================
   اجزا — نشانه‌گذاریِ بوت‌استرپ با ظاهرِ DentalSuite
   ================================================================ */

/* ---------- دکمه ---------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: var(--fs-m);
  --bs-btn-line-height: 1.6;
  --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 1.125rem;
  --bs-btn-border-radius: var(--r-m);
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--navy-700); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-border-color: var(--navy-700);
  --bs-btn-active-color: var(--navy-700); --bs-btn-active-bg: var(--cyan-50); --bs-btn-active-border-color: var(--navy-700);
  --bs-btn-disabled-color: var(--ink-3); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--line);
  --bs-btn-focus-box-shadow: var(--ring);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-block-size: 2.5rem;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn .icon { vertical-align: 0; }
.btn:disabled, .btn.disabled { opacity: 0.6; }
/* بعد از .btn دوباره تعریف می‌شوند، وگرنه متغیرهای بالا اندازه و رنگِ این‌ها را می‌پوشاند */
.btn-sm {
  --bs-btn-padding-y: 0.125rem; --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: var(--fs-s); --bs-btn-border-radius: var(--r-m);
  min-block-size: 2rem; gap: 0.375rem;
}
.btn-lg {
  --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: var(--fs-l); --bs-btn-border-radius: var(--r-m);
  min-block-size: 3rem;
}
/* کنشِ اصلی: سرمه‌ایِ پُر */
.btn-molten, .btn-primary {
  --bs-btn-color: var(--fill-ink); --bs-btn-bg: var(--fill); --bs-btn-border-color: var(--fill);
  --bs-btn-hover-color: var(--fill-ink); --bs-btn-hover-bg: var(--fill-strong); --bs-btn-hover-border-color: var(--fill-strong);
  --bs-btn-active-color: var(--fill-ink); --bs-btn-active-bg: var(--fill-deep); --bs-btn-active-border-color: var(--fill-deep);
  --bs-btn-disabled-color: var(--fill-ink); --bs-btn-disabled-bg: var(--fill); --bs-btn-disabled-border-color: var(--fill);
}
.btn-outline-secondary, .btn-secondary, .btn-light { /* همان دکمه‌ی پیش‌فرض */ }
.btn-outline-primary {
  --bs-btn-color: var(--navy-700); --bs-btn-border-color: var(--navy-700);
  --bs-btn-hover-color: var(--navy-900); --bs-btn-hover-bg: var(--cyan-50); --bs-btn-hover-border-color: var(--navy-900);
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--ok-fill); --bs-btn-border-color: var(--ok-fill);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #155A34; --bs-btn-hover-border-color: #155A34;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #155A34; --bs-btn-active-border-color: #155A34;
}
.btn-outline-success {
  --bs-btn-color: var(--ok-700); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ok-700); --bs-btn-hover-bg: var(--ok-50); --bs-btn-hover-border-color: var(--ok-700);
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--danger-fill); --bs-btn-border-color: var(--danger-fill);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger-fill-strong); --bs-btn-hover-border-color: var(--danger-fill-strong);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--danger-fill-strong); --bs-btn-active-border-color: var(--danger-fill-strong);
}
/* کنشِ ویرانگری که دکمه‌ی اصلی نیست: رنگش هشدار می‌دهد ولی وزنش سنگینی نمی‌کند */
.btn-outline-danger {
  --bs-btn-color: var(--alert-600); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--alert-700); --bs-btn-hover-bg: var(--alert-50); --bs-btn-hover-border-color: var(--alert-200);
  --bs-btn-active-color: var(--alert-700); --bs-btn-active-bg: var(--alert-50); --bs-btn-active-border-color: var(--alert-200);
}
.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-bg: rgb(255 255 255 / 0.08); --bs-btn-border-color: rgb(255 255 255 / 0.28);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgb(255 255 255 / 0.16); --bs-btn-hover-border-color: rgb(255 255 255 / 0.4);
}
.btn-link { --bs-btn-color: var(--navy-700); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- پنل (کارت) ---------- */
.card {
  --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--r-l);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.card.border-danger { border-color: var(--alert-200) !important; }
.card.p-3 { padding: 1.125rem 1.25rem !important; }
.card.p-4 { padding: 1.25rem 1.5rem !important; }

/* عنوانِ پنل با نشانِ خودش: آیکون در مربعِ فیروزه‌ایِ کم‌رنگ */
h2.fw-bold { display: flex; align-items: center; gap: 0.5rem; }
.page h2:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6),
.portal-main h2:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {
  font-size: var(--fs-l); font-weight: 600 !important; line-height: 1.5; color: var(--ink);
}
.page h2.small, .portal-main h2.small { font-size: var(--fs-m) !important; }
:is(.page, .portal-main) h2.fw-bold > .icon:first-child,
.card-head h2 > .icon:first-child,
.panel-title > .icon:first-child {
  box-sizing: content-box; inline-size: 18px; block-size: 18px; padding: 7px; flex: none;
  border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-800);
}
:is(.page, .portal-main) h2.text-danger > .icon:first-child { background: var(--alert-50); color: var(--alert-600); }

.card-head, .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap;
  margin-block-end: 0.875rem;
}
.card-head h2, .panel-head h2 { margin: 0 !important; display: flex; align-items: center; gap: 0.5rem; }
.card-head .head-meta, .panel-sub { color: var(--ink-3); font-size: var(--fs-s); font-weight: 400; }
.panel-link { font-size: var(--fs-s); }
.card > h6.fw-bold { padding-bottom: .45rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); color: var(--navy-900); }

/* ---------- جدول داده ---------- */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: var(--cyan-50); --bs-table-hover-color: var(--ink);
  --bs-table-striped-bg: var(--surface-2);
  margin-bottom: 0; font-size: var(--fs-s); line-height: 1.7;
}
.table > thead > tr > th {
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2);
  font-weight: 500; white-space: nowrap; text-align: start;
}
.table > thead > tr > th:first-child { border-start-start-radius: var(--r-m); }
.table > thead > tr > th:last-child { border-start-end-radius: var(--r-m); }
.table > tbody > tr > td { padding: 0.5rem 1rem; vertical-align: middle; border-bottom-color: var(--line); }
.table-sm > thead > tr > th { padding: 0.5rem 0.75rem; }
.table-sm > tbody > tr > td { padding: 0.375rem 0.75rem; }
.table > tbody > tr:last-child > td { border-bottom-width: 0; }
.table td:last-child .btn-sm { white-space: nowrap; }
.table-hover > tbody > tr:focus-within > * { --bs-table-bg-state: var(--cyan-50); }
.table > tbody > tr.table-warning { --bs-table-bg: var(--amber-50); --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
[data-bs-theme="dark"] .table-warning > td { --bs-table-color: var(--ink); --bs-table-bg: var(--amber-50); background: var(--amber-50); color: var(--ink); }
.table-responsive { border-radius: var(--r-m); }
@media (max-width: 40rem) {
  .table > thead > tr > th, .table > tbody > tr > td { padding-inline: 0.625rem; }
}

/* نوارِ وضعیت کنارِ ردیف (نام‌ها از OrderUi.RowClass) */
tr.st-pending,  tr.st-pendingapproval { --st-bar: var(--amber-500); }
tr.st-queue,    tr.st-inqueue         { --st-bar: var(--line-strong); }
tr.st-ready    { --st-bar: #2E9D63; }
tr.st-shipped  { --st-bar: var(--slate-500); }
tr.st-canceled { --st-bar: var(--alert-600); }
tr.st-pending > td:first-child, tr.st-pendingapproval > td:first-child,
tr.st-queue > td:first-child, tr.st-inqueue > td:first-child,
tr.st-ready > td:first-child, tr.st-shipped > td:first-child,
tr.st-canceled > td:first-child { border-inline-start: 3px solid var(--st-bar); }
tr.st-canceled { opacity: .6; }
tr.is-urgent > td { background: var(--amber-50); }

/* ---------- فرم ---------- */
.form-label { font-size: var(--fs-s); font-weight: 500; color: var(--ink); margin-bottom: 0.25rem; }
.form-control, .form-select {
  min-block-size: 2.625rem; padding: 0.375rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background-color: var(--surface); color: var(--ink); font-size: var(--fs-m);
  transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-inline-end: 2.25rem; background-position: left 0.75rem center; }
.form-control-sm, .form-select-sm { min-block-size: 2.125rem; padding-block: 0.1875rem; font-size: var(--fs-s); border-radius: var(--r-m); }
.form-control-lg, .form-select-lg { min-block-size: 3.25rem; font-size: var(--fs-l); border-radius: var(--r-l); }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--ring); }
.form-control[aria-invalid="true"], .form-control.is-invalid { border-color: var(--alert-600); background-color: var(--alert-50); }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); }
.form-text { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2); }
.form-check-input { border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--fill); border-color: var(--fill); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--navy-700); }
.form-switch .form-check-input:checked { background-color: var(--fill); }
::placeholder { color: var(--ink-3) !important; opacity: 1; }
[dir="rtl"] input[dir="ltr"].form-control { text-align: right; }

/* ---------- برچسب‌ها (pill) ---------- */
.badge {
  --bs-badge-font-size: var(--fs-xs); --bs-badge-font-weight: 500;
  --bs-badge-padding-y: 0; --bs-badge-padding-x: 0.625rem;
  --bs-badge-border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1.9; white-space: nowrap;
}
.badge.text-bg-warning, .pill-amber { background: var(--amber-50) !important; color: var(--amber-700) !important; box-shadow: inset 0 0 0 1px var(--amber-100); }
.badge.text-bg-success, .pill-ok { background: var(--ok-50) !important; color: var(--ok-700) !important; }
.badge.text-bg-secondary, .pill-muted { background: var(--surface-2) !important; color: var(--ink-3) !important; box-shadow: inset 0 0 0 1px var(--line); }
.badge.text-bg-primary, .badge.text-bg-info { background: var(--cyan-50) !important; color: var(--navy-900) !important; }
.badge.text-bg-danger { background: var(--alert-50) !important; color: var(--alert-700) !important; }
.badge.text-bg-dark { background: var(--chrome-strong) !important; color: #fff !important; }
.badge.bg-danger { background: var(--amber-500) !important; }
/* وضعیتِ سفارش: همان برچسبِ قرصیِ DentalSuite، با نقطه‌ی رنگی */
.badge-status { font-weight: 600; }
.badge-status::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* اولویت: «فوری» پُر و پررنگ — باید از دور دیده شود */
.prio.text-bg-danger { background: var(--danger-fill) !important; color: #fff !important; box-shadow: none; font-weight: 700; }
.prio.text-bg-warning { font-weight: 700; }

/* ---------- پیام‌ها (banner) ---------- */
.alert {
  --bs-alert-padding-x: 1rem; --bs-alert-padding-y: 0.625rem;
  --bs-alert-border-radius: var(--r-m);
  font-size: var(--fs-s); line-height: 1.8;
}
.alert-warning { --bs-alert-bg: var(--amber-50); --bs-alert-color: var(--amber-700); --bs-alert-border-color: var(--amber-100); }
.alert-success { --bs-alert-bg: var(--ok-50); --bs-alert-color: var(--ok-700); --bs-alert-border-color: transparent; }
.alert-info, .alert-primary { --bs-alert-bg: var(--cyan-50); --bs-alert-color: var(--navy-900); --bs-alert-border-color: transparent; }
.alert-danger { --bs-alert-bg: var(--alert-50); --bs-alert-color: var(--alert-700); --bs-alert-border-color: var(--alert-200); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--surface-2); --bs-alert-color: var(--ink-2); --bs-alert-border-color: var(--line); }

/* ---------- انتخابِ بخش‌بندی‌شده (segmented) ---------- */
.nav-pills, .seg {
  display: inline-flex; flex-wrap: wrap; gap: 0.1875rem;
  inline-size: fit-content; max-inline-size: 100%; padding: 0.1875rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--surface-2); list-style: none; margin: 0;
}
.nav-pills .nav-link, .seg > a, .seg > button, .seg .nav-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.875rem; min-block-size: 0;
  border: 0; border-radius: 7px; background: none;
  color: var(--ink-2); font-size: var(--fs-s); font-weight: 400; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.nav-pills .nav-link:hover, .seg > a:hover, .seg .nav-link:hover { color: var(--navy-900); }
.nav-pills .nav-link.active, .seg > a.active, .seg > button.active, .seg .nav-link.active {
  background: var(--surface); color: var(--navy-900); font-weight: 500;
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.16);
}
.seg .count, .nav-pills .badge {
  min-inline-size: 1.375rem; padding-inline: 0.375rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 12%, transparent); color: inherit;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; text-align: center;
}

/* ---------- دراپ‌داون و مودال ---------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-l); --bs-dropdown-color: var(--ink);
  --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-color: var(--navy-900);
  --bs-dropdown-link-hover-bg: var(--cyan-50); --bs-dropdown-link-active-bg: var(--fill); --bs-dropdown-link-active-color: var(--fill-ink);
  padding: 0.375rem; font-size: var(--fs-s);
  box-shadow: 0 10px 30px rgb(var(--shadow-hue) / 0.18);
}
.dropdown-item { border-radius: var(--r-s); white-space: normal; }
.modal-content {
  --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); --bs-modal-border-radius: var(--r-l);
  box-shadow: 0 10px 30px rgb(var(--shadow-hue) / 0.25);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-size: var(--fs-l); font-weight: 600; color: var(--navy-900); }

/* ---------- صفحه‌بندی ---------- */
.pager { gap: 0.375rem; padding-top: 1rem; }
.pager a, .pager .current {
  min-inline-size: 2.25rem; min-block-size: 2.25rem; padding: 0 0.625rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-s);
}
.pager a { color: var(--ink-2); }
.pager a:hover { border-color: var(--navy-700); color: var(--navy-700); background: var(--surface); }
.pager .current { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); font-weight: 600; }
.pager-info { color: var(--ink-3); font-size: var(--fs-s); }

/* ---------- پیام شناور ---------- */
.app-toast {
  border-radius: var(--r-l); border: 1px solid var(--line); border-inline-start-width: 3px;
  background: var(--surface); box-shadow: 0 10px 30px rgb(var(--shadow-hue) / 0.18);
}
.app-toast.toast-ok { border-inline-start-color: var(--ok-700); }
.app-toast.toast-ok .icon { color: var(--ok-700); }
.app-toast.toast-err { border-inline-start-color: var(--alert-600); background: var(--alert-50); color: var(--alert-700); }
.app-toast.toast-err .icon { color: var(--alert-600); }

/* ---------- حالتِ خالی ---------- */
.empty-state { padding: 2rem 1.25rem; color: var(--ink-2); }
.empty-state .icon {
  box-sizing: content-box; inline-size: 26px; block-size: 26px; padding: 15px;
  border-radius: 50%; background: var(--cyan-50); color: var(--navy-700);
}
.empty-state .es-title { color: var(--ink); font-weight: 600; font-size: var(--fs-m); }
.empty-state .es-hint { color: var(--ink-2); font-size: var(--fs-s); }

/* ---------- تراشه‌ها ---------- */
.filter-chips { border-top-color: var(--line); }
.filter-chips .chip, .chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding-inline: 0.625rem; min-height: 0; line-height: 1.9;
  border: 0; border-radius: var(--r-pill);
  background: var(--cyan-50); color: var(--navy-900);
  font-size: var(--fs-xs); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.filter-chips .chip:hover { background: var(--cyan-100); color: var(--navy-900); }
.filter-bar .form-label { color: var(--ink-2); font-size: var(--fs-xs); }

/* ---------- دایره‌ی نام، دکمه‌ی آیکونی، فهرستِ میله‌ای ---------- */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  font-size: var(--fs-m); font-weight: 600; line-height: 1;
}
.avatar-0 { background: var(--cyan-100); color: var(--navy-900); }
.avatar-1 { background: var(--line); color: var(--navy-800); }
.avatar-2 { background: var(--amber-100); color: var(--amber-700); }
.avatar-3 { background: var(--ok-50); color: var(--ok-700); }
.icon-btn {
  display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.icon-btn:hover { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-700); }
.bar-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; align-items: baseline; }
.bar-name { min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--fs-s); }
.bar-name small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.bar-value { color: var(--navy-900); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.bar-track { grid-column: 1 / -1; block-size: 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-400); }

/* ---------- رنگِ لینکِ بوت‌استرپ (از --bs-link-color-rgb می‌خواند) ---------- */
:root {
  --bs-link-color: #8A6100; --bs-link-color-rgb: 138, 97, 0;
  --bs-link-hover-color: #5C4100; --bs-link-hover-color-rgb: 92, 65, 0;
}
[data-bs-theme="dark"] {
  --bs-link-color: #F2C94C; --bs-link-color-rgb: 242, 201, 76;
  --bs-link-hover-color: #F7DC8A; --bs-link-hover-color-rgb: 247, 220, 138;
}
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--navy-700); }
.sidebar :where(a, button):focus-visible { outline-color: var(--cyan-400); }

/* ---------- کارتِ آمار در صفحه‌های دیگر ← کاشیِ شاخصِ DentalSuite ---------- */
.stat-card {
  --accent: var(--navy-700);
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: 0.25rem;
  padding: 1rem 1.125rem 0.875rem !important;
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.stat-card::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px;
  background: linear-gradient(to left, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
.stat-card.s-warn { --accent: var(--amber-500); }
.stat-card.s-ok { --accent: var(--ok-700); }
.stat-card.s-info { --accent: var(--cyan-500); }
.stat-card .lbl { order: -1; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; line-height: 1.6; }
.stat-card .num { color: var(--navy-900); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-row .stat-card .num { font-size: var(--fs-xl); }
a:hover > .stat-card {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0.875rem 2rem -1rem rgb(var(--shadow-hue) / 0.4);
}
.stat-delta { margin-top: 0.125rem; }
.stat-delta .cmp { border: 0; padding: 0; border-radius: 0; font-size: inherit; color: var(--ink-3); }

/* ---------- بخش‌های کارکردیِ قدیمی: رنگ‌های سطحِ پُر ---------- */
.khamoot-track .node.done .dot { border-color: var(--fill); background: var(--fill); }
.khamoot-track .bar.done { background: var(--fill); }
.khamoot-track .node.done .lbl { color: var(--navy-700); }
.item-row { background: var(--surface-2); border-color: var(--line-strong); border-radius: var(--r-l); }
.cust-dropdown { border-radius: var(--r-l); box-shadow: 0 10px 30px rgb(var(--shadow-hue) / 0.18); }
.cust-item:hover { background: var(--cyan-50); }
.cust-info, .sms-check { background: var(--cyan-50); border-color: var(--cyan-100); color: var(--navy-900); }
.range-banner { border-radius: var(--r-l); border-inline-start-color: var(--cyan-500); }
.share-bar span { background: var(--cyan-400); }
.size-chip { border-radius: var(--r-pill); }
.size-chip .ss-pct { color: var(--navy-700); }
.ship-card { border-radius: calc(var(--r-l) + 2px); box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.04); }
.ship-card:hover { border-color: color-mix(in srgb, var(--navy-700) 30%, var(--line)); box-shadow: 0 0.875rem 1.75rem -1rem rgb(var(--shadow-hue) / 0.4); transform: translateY(-1px); }
.cmp, .scorecard > div { border-radius: var(--r-l); background: var(--surface); }
.tpl-ph { background: var(--cyan-50); border-color: var(--cyan-100); color: var(--navy-900); border-radius: var(--r-pill); }
.fab-btn { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(var(--shadow-hue) / 0.45); }
.fab-btn:hover { background: var(--accent-soft); box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(var(--shadow-hue) / 0.45); }
.fab-item { border-color: var(--line); background: var(--surface); }
.fab-item:hover { border-color: var(--navy-700); color: var(--navy-700); }
.fab-item .icon { color: var(--navy-700); }
.th-sort:hover, .th-sort.desc, .th-sort.asc { color: var(--navy-700); }
.text-molten { color: var(--navy-700); }
.overdue { color: var(--alert-600) !important; font-weight: 600; }
.text-success { color: var(--ok-700) !important; }
.text-warning { color: var(--amber-700) !important; }
:is(.page, .portal-main) .text-danger, .table .text-danger { color: var(--alert-600) !important; }

/* صفحه‌ی ورود: نیمه‌ی تیره همان سطحِ سرصفحه‌هاست */
.track-header { background: linear-gradient(140deg, var(--chrome-strong) 0%, var(--chrome-deep) 100%); }
/* پیش‌نمایشِ صفحه‌ی ورود در «پروفایل مجموعه» — همان سطحِ تیره‌ی تازه */
.login-preview {
  background:
    radial-gradient(500px 260px at 88% -12%, rgb(234 179 8 / 0.28), transparent 62%),
    linear-gradient(140deg, var(--chrome-strong) 0%, var(--chrome-deep) 100%);
}
.login-preview .lp-points .icon, .login-preview .lp-site .icon { color: var(--accent-soft); }

/* ================================================================
   داشبورد — «صفحه‌ی فرمانِ روز»: نوارِ بالا با حلقه‌ی کارگاه، بقیه آرام و منظم
   ================================================================ */
.pulse {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr);
  grid-template-areas: "main ring now";
  align-items: center; gap: 1.25rem 2rem;
  padding: 1.625rem 1.875rem;
}
.page-head.pulse > :first-child { margin-inline-end: 0; }
.pulse-main { grid-area: main; display: grid; gap: 0.5rem; min-inline-size: 0; }
.pulse h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.3; }
.pulse .today-date { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; color: var(--on-dark-2); }
.pulse-clock {
  padding: 0.125rem 0.625rem; border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pulse-sentence { margin: 0.125rem 0 0.25rem; color: var(--on-dark-1); font-size: var(--fs-m); }
.pulse .hero-search { margin-block-start: 0.25rem; }
.pulse-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: 0.25rem; }
.pulse .pulse-action-more { color: var(--on-dark-accent); font-size: var(--fs-s); }
.pulse .pulse-action-more:hover { color: #fff; }

/* حلقه‌ی کارگاه: سهمِ هر وضعیت از سفارش‌های باز */
.pulse-ring { grid-area: ring; display: grid; justify-items: center; gap: 0.5rem; }
.day-ring { position: relative; inline-size: 10.5rem; aspect-ratio: 1; margin: 0; }
.day-ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); animation: ring-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ring-in { from { transform: rotate(-200deg) scale(0.9); opacity: 0; } to { transform: rotate(-90deg) scale(1); opacity: 1; } }
.day-ring circle { fill: none; stroke-width: 11; }
.day-ring-track { stroke: rgb(255 255 255 / 0.12); }
.day-ring.is-empty .day-ring-track { stroke-dasharray: 3 5; stroke: rgb(255 255 255 / 0.28); }
.arc-pending { stroke: var(--amber-500); background: var(--amber-500); }
.arc-queue { stroke: var(--accent); background: var(--accent); }
.arc-ready { stroke: #5EDDA0; background: #5EDDA0; }
.day-ring-center {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  color: #fff; text-align: center;
}
.day-ring-center strong { font-size: 2.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.day-ring-center span { margin-block-start: 0.25rem; color: var(--on-dark-3); font-size: var(--fs-s); }
.pulse .pulse-progress-note { margin: 0; color: var(--on-dark-2); font-size: var(--fs-xs); }
.ring-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.75rem;
  max-inline-size: 15rem; margin: 0; padding: 0; list-style: none;
  color: var(--on-dark-2); font-size: var(--fs-xs);
}
.ring-legend li { display: inline-flex; align-items: center; gap: 0.3rem; }
.ring-legend i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; }

/* ستونِ «الان» */
.pulse-now {
  grid-area: now; display: grid; align-content: center; gap: 0.5rem; min-inline-size: 0;
  padding-block: 0.25rem; padding-inline-start: 1.5rem;
  border-inline-start: 1px solid rgb(255 255 255 / 0.18);
}
.pulse-now-title { margin: 0; color: var(--on-dark-accent); font-size: var(--fs-xs); font-weight: 700; }
.pulse-line { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--on-dark-1); line-height: 1.8; }
.pulse-line .icon { color: var(--accent-soft); }
.pulse-line a { color: #fff; }
.pulse-line-live { padding: 0.375rem 0.75rem; border-radius: var(--r-m); background: rgb(234 179 8 / 0.14); }
.pulse-line-warn { padding: 0.375rem 0.75rem; border-radius: var(--r-m); background: rgb(240 138 36 / 0.18); color: #FED7AA; }
.pulse-line-warn .icon { color: #FDBA74; }

@media (max-width: 72rem) {
  .pulse { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main ring" "now now"; }
  .pulse-now { padding-inline-start: 0; padding-block-start: 1rem; border-inline-start: 0; border-block-start: 1px solid rgb(255 255 255 / 0.18); }
}
@media (max-width: 40rem) {
  .pulse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "ring" "now"; padding: 1.25rem 1.125rem; }
  .day-ring { inline-size: 9rem; }
  .pulse-action .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .day-ring svg { animation: none; } }

/* ---------- کارهای امروز (تراشه‌های عدددار) ---------- */
.today-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0 0.25rem; }
.today-action {
  --accent: var(--navy-700);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.today-action:hover { color: var(--ink); border-color: var(--accent); box-shadow: 0 0.375rem 1rem -0.5rem rgb(var(--shadow-hue) / 0.35); }
.today-action-icon {
  display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.today-action strong { color: var(--accent); font-size: var(--fs-l); }
.today-action.a-amber { --accent: var(--amber-700); }
.today-action.a-cyan { --accent: var(--cyan-500); }
.today-action.a-ok { --accent: var(--ok-700); }
.today-action.a-alert { --accent: var(--alert-600); }
.today-actions-clear { margin: 0; padding: 0.375rem 0.875rem; border-radius: var(--r-pill); background: var(--ok-50); color: var(--ok-700); display: inline-flex; align-items: center; gap: 0.375rem; }

/* ---------- میان‌بُرها ---------- */
.quick-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; }
.quick-tile {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-block-size: 2.625rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.quick-tile:hover { color: var(--ink); transform: translateY(-1px); border-color: var(--navy-700); box-shadow: 0 0.5rem 1.25rem -0.75rem rgb(var(--shadow-hue) / 0.4); }
.quick-tile-icon { display: inline-grid; place-items: center; inline-size: 1.875rem; block-size: 1.875rem; border-radius: 50%; background: var(--cyan-50); color: var(--navy-800); }
.quick-tile-label { font-size: var(--fs-s); }
@media (max-width: 40rem) {
  .quick-tiles { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 0.25rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .quick-tile { flex: none; }
}

/* ---------- ردیفِ شاخص‌ها ---------- */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; margin-block: 0.5rem 1.25rem; }
.kpi-tile {
  --accent: var(--navy-700);
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: 0.25rem;
  padding: 1rem 1.125rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.kpi-tile::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px;
  background: linear-gradient(to left, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
a.kpi-tile:hover { color: var(--ink); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0.875rem 2rem -1rem rgb(var(--shadow-hue) / 0.4); }
.kpi-tile-head { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.kpi-tile-icon {
  display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}
.kpi-tile-value {
  display: flex; align-items: baseline; gap: 0.375rem; margin-block-start: 0.375rem;
  color: var(--navy-900); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.kpi-tile-value small { color: var(--ink-3); font-size: var(--fs-s); font-weight: 500; }
.kpi-tile-sub { color: var(--ink-2); font-size: var(--fs-s); }
.kpi-tile .stat-delta { justify-self: start; padding: 0 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); }
.kpi-tile .stat-delta.up { background: var(--ok-50); }
.kpi-tile .stat-delta.down { background: var(--amber-50); color: var(--amber-700); }
.kpi-queue { --accent: var(--cyan-500); }
.kpi-shipped { --accent: var(--navy-700); }
.kpi-money { --accent: var(--ok-700); }
.kpi-debt { --accent: var(--amber-500); }
.kpi-debt .kpi-tile-value { color: var(--amber-700); }

.mini-bars { display: flex; align-items: stretch; gap: 0.3rem; block-size: 3.5rem; margin: 0.625rem 0 0; padding: 0; list-style: none; }
.mini-bars li { flex: 1 1 0; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 0.2rem; min-inline-size: 0; }
.mini-bar { align-self: end; inline-size: 100%; max-inline-size: 1.5rem; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent, var(--navy-700)) 30%, transparent); }
.mini-bars .is-highlight .mini-bar { background: var(--accent, var(--navy-700)); }
.mini-bars .is-zero .mini-bar { background: var(--line); }
.mini-bars small { color: var(--ink-3); font-size: 0.6875rem; line-height: 1; white-space: nowrap; }
.mini-bars .is-highlight small { color: var(--ink); font-weight: 700; }
@media (max-width: 52rem) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .kpi-strip { gap: 0.625rem; }
  .kpi-tile { padding: 0.75rem 0.75rem 0.625rem; }
  .kpi-tile-head { font-size: var(--fs-xs); gap: 0.375rem; }
  .kpi-tile-icon { inline-size: 1.625rem; block-size: 1.625rem; }
  .kpi-tile-value { font-size: var(--fs-xl); }
  .kpi-tile-sub { font-size: var(--fs-xs); }
  .mini-bars { block-size: 2.75rem; gap: 0.2rem; }
}

/* ---------- ویجت‌ها ---------- */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1.125rem; align-items: start; }
.widget { --accent: var(--navy-700); min-inline-size: 0; }
.widget-wide { grid-column: 1 / -1; }
@media (max-width: 60rem) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.home-grid .panel { transition: box-shadow .2s ease, border-color .2s ease; }
.home-grid .panel:hover { box-shadow: 0 0.75rem 1.75rem -1.25rem rgb(var(--shadow-hue) / 0.45); }

.panel {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.panel-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-l); font-weight: 600; color: var(--ink); }
.widget .panel-title > .icon:first-child { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.w-queue { --accent: var(--cyan-500); }
.w-late { --accent: var(--alert-600); }
.w-price { --accent: var(--ok-700); }
.w-shipped { --accent: var(--navy-700); }
.w-chart { --accent: var(--cyan-500); }
.w-customers { --accent: var(--navy-700); }
.w-sizes { --accent: var(--amber-500); }
@media (max-width: 40rem) { .panel { padding: 1rem 1.125rem; } }

/* فهرستِ ردیفی داخلِ ویجت */
.list-rows { display: grid; margin: 0 -0.5rem; padding: 0; list-style: none; }
.list-rows > li + li { border-block-start: 1px solid var(--line); }
.lr { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.5rem; border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
a.lr:hover { background: var(--cyan-50); color: var(--ink); }
.lr-main { flex: 1; min-inline-size: 0; display: grid; }
.lr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-weight: 600; font-size: var(--fs-s); }
.lr-sub { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-side { flex: none; display: grid; justify-items: end; font-size: var(--fs-s); line-height: 1.6; }
.lr-side small { color: var(--ink-3); font-size: var(--fs-xs); }
.late-tag { display: inline-flex; padding: 0 0.5rem; border-radius: var(--r-pill); background: var(--alert-50); color: var(--alert-700); font-size: var(--fs-xs); font-weight: 700; }
.code-chip {
  display: inline-block; padding-inline: 0.5rem; border-radius: var(--r-s);
  background: var(--cyan-50); color: var(--navy-900);
  font-weight: 600; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* قیمتِ روز */
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem; }
.price-grid label { display: block; margin-block-end: 0.25rem; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; }
.price-grid .price-input { max-width: none; inline-size: 100%; }

/* ستونِ ماهانه‌ی بزرگ‌تر (تناژ) */
.month-bars { block-size: 9.5rem; gap: 0.625rem; }
.month-bars .mini-bar { max-inline-size: 2.75rem; border-radius: 6px 6px 3px 3px; }
.month-bars small { font-size: var(--fs-xs); }
.month-bars .mb-val { color: var(--navy-900); font-size: 0.6875rem; font-weight: 600; }

/* ستونِ ماهانه با برچسبِ مقدار بالای هر میله (گزارش‌ها) */
.report-months { block-size: 11rem; }
.mb-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.15rem; min-block-size: 0; inline-size: 100%; }
.report-months .mini-bar { align-self: center; }
.report-months .mb-val { font-size: 0.6875rem; line-height: 1.1; }

/* نوارِ دوره‌ی گزارش: برچسب‌های آماده + بازه‌ی دستی */
.report-bar { justify-content: space-between; }
.report-bar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.report-bar-form .form-control { inline-size: 9rem; }
.report-bar-form .form-select { inline-size: auto; min-inline-size: 10rem; }

/* ================================================================
   سفارش‌ها — همان الگوی «بیماران» در DentalSuite:
   سرِ تیره با جست‌وجو و کاشی‌های وضعیت، بعد ردیف‌های کارت‌مانند
   ================================================================ */
.page-head.list-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  grid-template-areas: "main scopes" "search scopes" "actions actions";
  align-items: start; gap: 1rem 2rem;
  padding: 1.625rem 1.875rem 1.25rem;
}
.page-head.list-hero > :first-child { margin-inline-end: 0; }
.list-hero-main { grid-area: main; display: grid; gap: 0.375rem; min-inline-size: 0; }
.list-hero h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.3; }
.list-sentence { margin: 0; color: var(--on-dark-2); line-height: 1.9; }
.list-search { grid-area: search; margin: 0; }

/* کاشی‌های وضعیت: هم عدد، هم دکمه. کاشیِ روشن همان برشی است که فهرست نشان می‌دهد */
.scopes { grid-area: scopes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-content: start; }
.scope {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--r-l);
  background: rgb(255 255 255 / 0.07); color: var(--on-dark-1); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.scope:hover { background: rgb(255 255 255 / 0.13); color: #fff; }
.scope:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(234 179 8 / 0.55); }
.scope-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-m); background: rgb(234 179 8 / 0.18); color: var(--accent-soft); }
.scope-label { font-size: var(--fs-s); font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope strong { color: #fff; font-size: var(--fs-l); font-weight: 700; font-variant-numeric: tabular-nums; }
.scope.s-pending .scope-icon { background: rgb(240 138 36 / 0.2); color: #FDBA74; }
.scope.s-ready .scope-icon { background: rgb(94 221 160 / 0.18); color: #5EDDA0; }
.scope.s-canceled .scope-icon { background: rgb(255 180 168 / 0.14); color: #FFB4A8; }
.scope.is-active { border-color: transparent; background: var(--surface); color: var(--ink-2); box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.5); }
.scope.is-active strong { color: var(--navy-900); }
.scope.is-active .scope-icon { background: var(--cyan-50); color: var(--navy-700); }
.list-hero .page-actions { grid-area: actions; justify-content: flex-end; padding-block-start: 0.875rem; border-block-start: 1px solid rgb(255 255 255 / 0.12); }
.list-hero .filters-toggle { margin-inline-end: auto; }

@media (max-width: 60rem) {
  .page-head.list-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "search" "scopes" "actions";
    padding: 1.25rem 1.125rem 1rem;
  }
  .scopes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.125rem; padding: 0.5rem 0.625rem; }
  .scope-icon { display: none; }
  .scope strong { font-size: var(--fs-m); }
}
@media (max-width: 30rem) {
  .list-hero .page-actions .btn-molten { flex: 1 1 100%; }
}

/* فیلترهای بیشتر: پنلی که زیرِ سرصفحه باز می‌شود */
.filters-panel { margin-block: -0.5rem 1.25rem; }
.filters-panel .panel { display: grid; gap: 0.875rem; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block: -0.5rem 1rem; color: var(--ink-3); font-size: var(--fs-s); }
.active-filters .chip-x { display: inline-flex; opacity: 0.7; }

/* سرِ فهرست */
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin-block: 0.25rem 1rem; }
.list-title { display: grid; gap: 0.125rem; min-inline-size: 0; }
.list-title h2 { margin: 0 !important; color: var(--navy-900) !important; font-size: var(--fs-xl) !important; line-height: 1.4; }
.list-title .result-count { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.sort-form { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.sort-form .form-select { inline-size: auto; min-inline-size: 11rem; }

/* گروه‌ها: عنوانِ هر بازه، با خطی تا لبه */
.o-groups { display: grid; gap: 1.5rem; }
.o-group { display: grid; gap: 0.625rem; }
.o-group-head {
  display: flex; align-items: center; gap: 0.625rem; margin: 0; padding-block: 0.375rem;
  background: var(--ground); color: var(--ink-2); font-size: var(--fs-s); font-weight: 700;
}
.o-group-head::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.o-group-head small {
  display: inline-grid; place-items: center; min-inline-size: 1.5rem; padding-inline: 0.375rem;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.6;
}
@media (min-width: 56.0625rem) { .o-group-head { position: sticky; inset-block-start: 0; z-index: 2; } }

/* هر سفارش یک ردیفِ کارت‌مانند؛ کلِ ردیف لینکِ جزئیات است (پوششِ ::after روی لینکِ نام) */
.o-items { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.o-item {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(13rem, 17rem) auto;
  align-items: center; gap: 0.5rem 1.25rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line); border-radius: calc(var(--r-l) + 2px);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.04);
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.o-item:hover { border-color: color-mix(in srgb, var(--navy-700) 30%, var(--line)); box-shadow: 0 0.875rem 1.75rem -1rem rgb(var(--shadow-hue) / 0.4); transform: translateY(-1px); }
.o-item:has(.o-link:focus-visible) { border-color: var(--navy-700); box-shadow: var(--ring); }
/* لبه‌ی شروع: قرمز برای دیرکرد، کهربایی برای فوری، فیروزه‌ای برای آماده‌ی ارسال */
.o-item::before {
  content: ""; position: absolute; inset-block: 0.75rem; inset-inline-start: -1px;
  inline-size: 3px; border-radius: var(--r-pill); background: transparent;
}
.o-item.is-ready::before { background: var(--cyan-500); }
.o-item.is-urgent::before { background: var(--amber-500); }
.o-item.is-late::before { background: var(--alert-600); }
.o-item.is-canceled { opacity: 0.65; }

.o-id { display: grid; gap: 0.125rem; min-inline-size: 0; }
.o-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; }
.o-link { color: var(--ink); font-size: var(--fs-m); font-weight: 700; text-decoration: none; }
.o-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.o-link:focus-visible { outline: none; }
.o-item:hover .o-link { color: var(--navy-700); }
.o-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.875rem; margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

.o-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.o-facts > div { display: grid; align-content: start; gap: 0.125rem; min-inline-size: 0; }
.o-facts dt { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.o-facts dd { display: grid; justify-items: start; margin: 0; font-size: var(--fs-s); line-height: 1.6; }
.o-facts dd strong { color: var(--ink); font-weight: 600; }
.o-facts dd small { color: var(--ink-3); font-size: var(--fs-xs); }
.o-facts .is-late strong { color: var(--alert-600); }
.o-end { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; pointer-events: none; }
.o-go { display: inline-grid; place-items: center; inline-size: 1.5rem; color: var(--ink-3); transition: color .15s ease, translate .15s ease; }
.o-item:hover .o-go { color: var(--navy-700); translate: -2px 0; }

@media (max-width: 64rem) {
  .o-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .o-facts { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 40rem) {
  .o-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem 0.75rem; padding: 0.75rem 0.875rem; }
  .o-facts { grid-column: 1 / -1; grid-row: 2; }
  .o-go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .o-item, .o-item:hover { transform: none; } }
@media print {
  .o-item { break-inside: avoid; box-shadow: none; }
  .filters-panel, .sort-form { display: none !important; }
}

/* پایینِ فهرست */
.list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-block: 1.5rem 0.5rem; color: var(--ink-3); font-size: var(--fs-s); }
.list-foot .pager { padding: 0; }

/* ---------- ریزه‌ها ---------- */
.avatar-sm { inline-size: 2rem; block-size: 2rem; font-size: var(--fs-xs); }
.note-line { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.active-filters a:not(.chip) { font-size: var(--fs-s); }
.list-foot .pager-info { margin-inline-start: 0.75rem; }
/* عددِ بلند (مبلغِ میلیاردی) در کاشیِ باریکِ گوشی: کوچک‌تر، و واحد به سطرِ بعد برود نه بیرون */
.kpi-tile-value { flex-wrap: wrap; min-inline-size: 0; }
.kpi-tile-value.is-long { font-size: var(--fs-xl); }
@media (max-width: 40rem) { .kpi-tile-value.is-long { font-size: var(--fs-l); } }
/* گوشی: هویت بالا، زیرش «موعد / وزن» و برچسبِ وضعیت کنارشان — ستونِ جدا کارت را بی‌دلیل بلند می‌کرد */
@media (max-width: 40rem) {
  .o-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .o-id { grid-column: 2 / -1; }
  .o-facts { grid-column: 1 / 3; grid-row: 2; }
  .o-end { grid-column: 3; grid-row: 2; align-self: end; }
  .hide-sm { display: none !important; }
}
div.o-name { display: flex; }
/* زیرنویسِ برند کنارِ زنگوله دوخطی نشود */
.brand-product, .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   فهرست‌های کارت‌مانند — مشترک بین سفارش‌ها، مشتری‌ها و بقیه
   ================================================================ */
/* کنش‌های کنارِ ردیف بالای پوششِ لینکِ ردیف می‌نشینند */
.row-actions { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.25rem; }
.icon-btn.is-primary { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.icon-btn.is-primary:hover { background: var(--fill-strong); border-color: var(--fill-strong); color: var(--fill-ink); }
.icon-btn.is-danger:hover { border-color: var(--alert-200); background: var(--alert-50); color: var(--alert-600); }
.o-group-head .group-debt { color: var(--alert-600); font-weight: 600; font-size: var(--fs-xs); }

@media (max-width: 60rem) { .scopes.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .o-item > .row-actions { grid-column: 3; grid-row: 2; align-self: end; }
}

/* نوارِ سنِ بدهی روی سرِ تیره‌ی «مطالبات» */
.aging { display: grid; gap: 0.625rem; padding: 0.875rem 1rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--r-l); background: rgb(255 255 255 / 0.06); }
.aging-bar { display: flex; block-size: 0.75rem; overflow: hidden; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.12); }
.aging-bar i { display: block; block-size: 100%; }
.ag-fresh { background: #5EDDA0; }
.ag-mid { background: var(--amber-500); }
.ag-old { background: #FF8A7A; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--on-dark-2); font-size: var(--fs-xs); }
.aging-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.aging-legend i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; }
.aging-legend b { color: #fff; font-weight: 600; }
.o-item > .row-actions .btn-sm { white-space: nowrap; }

/* فرمِ یک‌خطی روی سرِ تیره (کارنامه: «راکدتر از … روز») */
.hero-inline-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--r-l);
  background: rgb(255 255 255 / 0.06); color: var(--on-dark-1);
}
.hero-inline-form .form-control { inline-size: 6rem; min-block-size: 2.5rem; text-align: center; }
.name-cell { display: inline-flex; align-items: center; gap: 0.625rem; }
.table tr.row-muted > td { color: var(--ink-3); }
.table .icon-btn { inline-size: 2rem; block-size: 2rem; }

/* ردیفِ خلاصه‌ی برچسبی زیرِ سرصفحه (مثل «۱ کالا · ۱ رو به اتمام» در انبارِ DentalSuite) */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block: -0.5rem 1rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem; padding-inline: 0.625rem;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; line-height: 1.9; white-space: nowrap;
}
.pill-ok { background: var(--ok-50); color: var(--ok-700); }
.pill-amber { background: var(--amber-50); color: var(--amber-700); box-shadow: inset 0 0 0 1px var(--amber-100); }
.pill-muted { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.pill-calm { background: var(--cyan-50); color: var(--navy-900); }
/* سطحِ موجودیِ هر سایز نسبت به پرموجودترین */
.stock-level { display: block; block-size: 0.375rem; margin-block: 0.5rem 0.125rem; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.stock-level > span { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); }
.kpi-warn { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--amber-700); font-weight: 600; }

/* پنلِ راهنمای تاشو (مثل «این بخش چطور کار می‌کند») */
.help-panel > summary {
  display: flex; align-items: center; gap: 0.5rem; list-style: none; cursor: pointer;
  font-size: var(--fs-m); font-weight: 600; color: var(--navy-900);
}
.help-panel > summary::-webkit-details-marker { display: none; }
.help-panel > summary > .icon:first-child {
  box-sizing: content-box; inline-size: 18px; block-size: 18px; padding: 7px;
  border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-800);
}
.help-panel[open] > summary { margin-block-end: 0.75rem; }
.help-panel ul { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; color: var(--ink-2); font-size: var(--fs-s); line-height: 2; }
.banner-calm { margin: 0; padding: 0.625rem 1rem; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-900); font-size: var(--fs-s); }

/* اعلان‌ها و لاگ */
.notif-icon { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: none; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-800); }
.notif-list .is-unread .lr-title { color: var(--navy-900); }
.notif-list .is-unread .notif-icon { background: var(--fill); color: var(--fill-ink); }
.notif-msg { white-space: normal; }
.filter-select { inline-size: auto; min-inline-size: 11rem; }
.changes-cell { max-inline-size: 460px; overflow-wrap: anywhere; }

/* ================================================================
   پرونده‌ی سفارش — مثل پرونده‌ی بیمار: سرِ تیره با نام، کد و واقعیت‌ها
   ================================================================ */
.file-head { align-items: flex-end; }
.file-head-main { display: grid; gap: 0.375rem; min-inline-size: 0; }
.file-eyebrow { display: flex; align-items: center; gap: 0.5rem; }
.page-head .code-chip {
  background: rgb(255 255 255 / 0.1); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  font-size: var(--fs-s); padding-block: 0.0625rem;
}
.file-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.file-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0.5rem 0 0; }
.file-facts > div { display: grid; min-inline-size: 0; }
.file-facts dt { color: var(--on-dark-accent); font-size: var(--fs-xs); font-weight: 400; }
.file-facts dd { margin: 0; color: #fff; font-weight: 600; }
.page-head .late-tag { background: rgb(255 180 168 / 0.16); color: #FFB4A8; }

/* تاریخ‌های هر مرحله زیرِ خطِ زمانی */
.date-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  margin: 0.75rem 0 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
}
.date-strip > div { display: grid; gap: 0; padding: 0.5rem 0.75rem; background: var(--surface-2); text-align: center; }
.date-strip dt { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.date-strip dd { margin: 0; font-size: var(--fs-s); font-weight: 600; }
.date-strip .is-late dd { color: var(--alert-600); }
@media (max-width: 40rem) { .date-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* خطِ زمانی روی زمینه‌ی پنل */
.khamoot-track { margin: 0.25rem 0 0.5rem; }
.khamoot-track .dot { border-radius: 50%; border-width: 2px; border-color: var(--line-strong); }
.khamoot-track .bar { background: var(--line); }

/* فهرستِ «کلید — مقدار» (مالی و مانند آن) */
.kv { display: grid; margin: 0; }
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-block-end: 1px solid var(--line); }
.kv > div:last-child { border-block-end: 0; }
.kv dt { color: var(--ink-2); font-size: var(--fs-s); font-weight: 400; }
.kv dd { margin: 0; font-weight: 600; text-align: end; }
.kv .is-strong dd { color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; }

.table tr.row-total > td { background: var(--surface-2); font-weight: 700; color: var(--navy-900); }
.note-box {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.875rem 0 0;
  padding: 0.625rem 0.875rem; border-radius: var(--r-m);
  background: var(--amber-50); color: var(--amber-700); font-size: var(--fs-s);
}
.note-box .icon { margin-block-start: 0.3rem; }
.thumb { display: block; inline-size: 6rem; block-size: 6rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); }
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media print {
  .file-facts dt, .file-facts dd { color: #000 !important; }
  .page-head .code-chip { box-shadow: none; }
}

/* ================================================================
   فرم‌ها — بخش‌بندی مثل DentalSuite: هر بخش یک پنل با عنوانِ خودش
   ================================================================ */
.form-card { display: grid; gap: 1.25rem; }
.form-section {
  min-inline-size: 0; margin: 0; padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.form-section > legend {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.875rem; padding: 0;
  font-size: var(--fs-l); font-weight: 600; line-height: 1.5; color: var(--navy-900);
}
.form-section > legend > .icon:first-child {
  box-sizing: content-box; inline-size: 18px; block-size: 18px; padding: 7px;
  border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-800);
}
.form-section > .hint { margin-block-end: 0.75rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.req { color: var(--alert-600); }
.optional { color: var(--ink-3); font-weight: 400; }
.hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.scale-input { min-block-size: 4.25rem; padding: 0.5rem !important; font-size: 1.9rem !important; font-weight: 700; }
.receipt-preview { max-block-size: 190px; border: 1px solid var(--line); border-radius: var(--r-m); object-fit: contain; }
@media (max-width: 40rem) { .form-section { padding: 1rem 1.125rem 1.25rem; } }

/* جمعِ فرم سفارش (وزن و مبلغ تقریبی) */
.form-summary {
  display: grid; gap: 0.25rem;
  padding: 0.875rem 1rem; border-radius: var(--r-m);
  background: var(--cyan-50); color: var(--navy-900);
}
.form-summary-row { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: var(--fs-m); }
.form-summary b { font-size: var(--fs-l); }
.form-summary .hint { color: var(--ink-2); }

/* نوارِ کنش‌های پایانِ فرم — در دسکتاپ پایینِ صفحه می‌چسبد تا در فرمِ بلند گم نشود */
.form-actions-bar {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 -0.5rem 1.5rem -1.25rem rgb(var(--shadow-hue) / 0.35);
}
.form-actions-bar .sms-check { margin: 0; }
.btn-push-end { margin-inline-start: auto; }
@media (min-width: 56.0625rem) {
  .form-actions-bar { position: sticky; inset-block-end: 0.75rem; z-index: 5; }
}
@media (max-width: 40rem) {
  .form-actions-bar .btn { flex: 1 1 auto; }
  .btn-push-end { display: none; }
}

/* پنلِ ویرایشگرِ کنارِ فهرست (سایزها، محصولات) — در دسکتاپ کنارِ جدول می‌چسبد */
@media (min-width: 62rem) { .editor-panel { position: sticky; inset-block-start: 1rem; } }
.pt-shape { block-size: 44px; inline-size: 56px; object-fit: contain; }

/* نوارِ بازه‌ی تاریخ زیرِ سرصفحه (دفتر کارگر، گزارش‌ها) */
.period-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-block: -0.5rem 1rem; padding: 0.625rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.period-bar-label { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.period-bar .form-control { inline-size: 9.5rem; }
.months-input { inline-size: 5rem !important; text-align: center; }

/* مرکزِ تنظیمات — فهرستِ بخش‌ها کنارِ صفحه */
.settings-center { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-nav {
  position: sticky; inset-block-start: 1rem;
  display: grid; gap: 0.125rem; padding: 0.5rem;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.settings-nav a {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem;
  border-radius: var(--r-m); color: var(--ink-2); font-size: var(--fs-s); text-decoration: none;
}
.settings-nav a:hover { background: var(--cyan-50); color: var(--navy-900); }
.settings-nav .icon { color: var(--navy-700); }
.settings-nav-sep { display: block; block-size: 1px; margin: 0.375rem 0.5rem; background: var(--line); }
.settings-body { min-inline-size: 0; }
.settings-body .form-section, .settings-body .panel { scroll-margin-block-start: 1rem; }
.user-editor { padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
@media (max-width: 62rem) {
  .settings-center { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .settings-nav { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .settings-nav a { flex: none; }
  .settings-nav-sep { inline-size: 1px; block-size: auto; margin: 0.25rem; }
}

/* ================================================================
   رنگ‌بندیِ زرد — جزئیاتی که از توکن‌ها درنمی‌آیند
   ================================================================ */
/* روی زرد، تیکِ سفید دیده نمی‌شود: تیک و نقطه تیره */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231F1A0B' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231F1A0B'/%3e%3c/svg%3e");
}
.khamoot-track .node.done .dot::after { color: var(--fill-ink); }

/* «ارسال شده» فولادی، نه زرد — کارِ تمام‌شده نباید با «در جریان» رقابت کند */
.badge-status.text-bg-primary { background: var(--slate-50) !important; color: var(--slate-700) !important; box-shadow: none; }
.scope.s-shipped .scope-icon { background: rgb(255 255 255 / 0.1); color: var(--on-dark-3); }

/* دکمه‌ی اصلی روی سطحِ روشن: زرد با متنِ تیره و لبه‌ی کمی پررنگ‌تر تا روی سفید گم نشود */
.btn-molten, .btn-primary { box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12); }

/* ================================================================
   داشبورد: نوارِ قیمتِ روز + چیدمانِ ویجت‌ها
   ================================================================ */

/* شبکه دیگر خودش جای خالی را پر نمی‌کند (dense ترتیبِ دیداری را از ترتیبِ کاربر جدا
   می‌کرد)؛ به‌جایش نیم‌عرضی که در ردیفش تنها بماند پهن می‌شود (is-solo، از اسکریپتِ صفحه) */
.home-grid { position: relative; grid-auto-flow: row; }
.widget.is-solo { grid-column: 1 / -1; }
.widget.is-off { display: none; }
/* کاشی‌های شاخص، کارهای امروز و میان‌برها حالا ویجت‌اند؛ فاصله را خودِ شبکه می‌دهد */
.home-grid > .widget > .kpi-strip,
.home-grid > .widget > .today-actions,
.home-grid > .widget > .quick-tiles { margin-block: 0; }
.w-today { --accent: var(--amber-500); }
.w-quick { --accent: var(--navy-700); }
.w-kpi { --accent: var(--cyan-500); }
.w-price { --accent: var(--fill-deep); }

/* ---------- نوارِ قیمتِ روز ---------- */
.price-bar {
  display: flex; align-items: center; gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--fill) 45%, var(--line));
  border-radius: var(--r-l);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--fill) 7%, transparent)),
    var(--cyan-50);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.price-bar-head { flex: none; display: flex; align-items: center; gap: 0.625rem; }
.price-bar-icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-m);
  background: var(--fill); color: var(--fill-ink);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
}
.price-bar-title { margin: 0; font-size: var(--fs-m); font-weight: 700; line-height: 1.3; color: var(--ink); }
.price-bar-sub { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.price-bar-empty { flex: 1; margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

.price-bar-fields {
  flex: 1; min-inline-size: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--fill) 35%, var(--line));
}
.price-field {
  flex: 1 1 9rem; max-inline-size: 13rem;
  display: flex; align-items: stretch;
  margin: 0; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--surface);
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.price-size {
  flex: none; display: grid; place-items: center;
  min-inline-size: 2.5rem; padding-inline: 0.5rem;
  border-inline-end: 1px solid var(--line);
  background: var(--ground); color: var(--ink);
  font-size: var(--fs-m); font-weight: 700;
  white-space: nowrap;
}
.price-field .price-input {
  flex: 1; min-inline-size: 0; inline-size: 100%; max-width: none;
  padding: 0.5rem 0.625rem;
  border: 0; outline: 0; background: transparent;
  color: var(--ink); font-size: var(--fs-m); font-weight: 600;
  text-align: center;
}
.price-field:hover { border-color: color-mix(in srgb, var(--fill) 60%, var(--line-strong)); }
.price-field:focus-within { border-color: var(--fill-deep); box-shadow: var(--ring); }
/* قیمتی که عوض شده ولی هنوز ثبت نشده */
.price-field.is-changed { border-color: var(--amber-500); }
.price-field.is-changed .price-size { background: var(--amber-500); border-color: var(--amber-500); color: #fff; }
.price-bar-save { flex: none; white-space: nowrap; }
.price-bar.has-changes .price-bar-save { box-shadow: var(--ring), inset 0 -2px 0 rgb(0 0 0 / 0.12); }

/* اندازه‌ها به پهنای خودِ نوار بسته است، نه صفحه — چه کنارِ منو باشد چه در گوشی */
.w-price { container-type: inline-size; }
/* نوارِ باریک: سربرگ و دکمه در یک ردیف، ورودی‌ها زیرشان */
@container (max-width: 50rem) {
  .price-bar { flex-wrap: wrap; }
  .price-bar-head { flex: 1 1 auto; }
  .price-bar-fields { order: 3; flex: 1 1 100%; padding-inline-start: 0; border-inline-start: 0; }
}
/* گوشی: ورودی‌ها در دو ستون، دکمه تمام‌عرض */
@container (max-width: 30rem) {
  .price-bar { padding: 0.875rem; }
  .price-bar-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .price-field { max-inline-size: none; }
  .price-bar-actions { order: 4; flex: 1 1 100%; }
  .price-bar-actions .price-bar-save { flex: 1; }
}

/* ---------- نوارِ چیدمان ---------- */
.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  margin-block: 0 0.875rem;
}
.dash-toolbar-note { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.dash-toolbar-note:empty { display: none; }
.dash-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline-start: auto; }
.dash-toolbar .btn:not(.btn-molten) { --bs-btn-bg: transparent; --bs-btn-border-color: var(--line-strong); --bs-btn-color: var(--ink-2); }
.dash-toolbar .btn:not(.btn-molten):hover { --bs-btn-hover-bg: var(--surface); --bs-btn-hover-color: var(--ink); }
.dash-toolbar .btn { display: inline-flex; align-items: center; gap: 0.375rem; }
/* در حالتِ چیدمان نوار می‌چسبد تا «تمام» همیشه دمِ دست باشد */
.dash-toolbar.is-on {
  position: sticky; inset-block-start: 0.75rem; z-index: 25;
  padding: 0.625rem 0.75rem 0.625rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--fill) 55%, var(--line));
  border-radius: var(--r-l);
  background: var(--cyan-50);
  box-shadow: 0 0.75rem 1.5rem -1rem rgb(var(--shadow-hue) / 0.45);
}
.dash-toolbar.is-on .dash-toolbar-note { flex: 1 1 18rem; color: var(--ink-2); font-size: var(--fs-s); }
@media (max-width: 56rem) {
  /* زیرِ سربرگِ چسبانِ گوشی */
  .dash-toolbar.is-on { inset-block-start: 4.25rem; }
}

/* ---------- حالتِ چیدمان: هر ویجت یک کاشیِ کوچک ---------- */
.w-arrange { display: none; }
.home-grid.is-arranging { gap: 0.625rem; }
.home-grid.is-arranging > .widget > :not(.w-arrange) { display: none; }
.home-grid.is-arranging > .widget.is-off { display: block; }
.home-grid.is-arranging > .widget > .w-arrange {
  display: flex; align-items: center; gap: 0.625rem;
  min-block-size: 3.75rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.06);
  user-select: none; -webkit-user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.home-grid.is-arranging > .widget > .w-arrange:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
@media (pointer: fine) {
  .home-grid.is-arranging > .widget > .w-arrange { cursor: grab; }
}
.w-grip {
  flex: none; display: grid; place-items: center;
  inline-size: 2.25rem; block-size: 2.75rem; border-radius: var(--r-m);
  color: var(--ink-3); cursor: grab;
  touch-action: none;
}
.w-grip:hover { background: var(--cyan-50); color: var(--ink); }
.w-arrange-icon {
  flex: none; display: grid; place-items: center;
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.w-arrange-text { flex: 1; min-inline-size: 0; display: grid; line-height: 1.35; }
.w-arrange-text strong { font-size: var(--fs-s); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-arrange-text small { color: var(--ink-3); font-size: var(--fs-xs); }
.w-off-tag { display: none; color: var(--alert-700); font-weight: 600; }
.w-arrange-tools { flex: none; display: flex; gap: 0.25rem; }
.w-arrange-tools .icon-btn:disabled { opacity: 0.35; pointer-events: none; }
/* چشم: بازی‌ها چشمِ باز، پنهان‌ها چشمِ خط‌خورده */
.w-eye .icon + .icon { display: none; }
.widget.is-off .w-eye .icon { display: none; }
.widget.is-off .w-eye .icon + .icon { display: block; }
.widget.is-off .w-eye { color: var(--alert-700); }
.home-grid.is-arranging > .widget.is-off > .w-arrange {
  border-style: dashed; background: transparent; box-shadow: none;
}
.widget.is-off .w-arrange-icon,
.widget.is-off .w-arrange-text strong { opacity: 0.5; }
.widget.is-off .w-off-tag { display: inline; }

/* کاشیِ در حالِ کشیدن: بالای بقیه و همراهِ نشانگر */
.home-grid > .widget.is-dragging { position: relative; z-index: 6; }
.home-grid > .widget.is-dragging > .w-arrange {
  border-color: var(--fill-deep);
  box-shadow: var(--ring), 0 1.25rem 2.5rem -1rem rgb(var(--shadow-hue) / 0.55);
  cursor: grabbing;
}
body.is-dragging-widget, body.is-dragging-widget * { cursor: grabbing !important; }
body.is-dragging-widget { user-select: none; -webkit-user-select: none; }

@media print {
  .dash-toolbar, .w-arrange { display: none !important; }
}

/* گوشی: نوارِ چسبانِ چیدمان یک ردیف بماند تا جای کاشی‌ها را نگیرد */
@media (max-width: 40rem) {
  .dash-toolbar.is-on { flex-wrap: nowrap; padding: 0.5rem 0.625rem; }
  .dash-toolbar.is-on .dash-toolbar-note { flex: 1 1 auto; font-size: var(--fs-xs); line-height: 1.6; }
  .dash-toolbar.is-on .dash-toolbar-actions { flex-wrap: nowrap; }
  .dash-toolbar .dash-reset .dash-btn-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ================================================================
   ورود — به الگوی DentalSuite: دو نیمه، فرم در سمتِ شروع (راست) و نمای تیره در سمتِ دیگر.
   نیمه‌ی تیره همان دودیِ گرمِ منو و سربرگ‌هاست با هاله‌ی زرد و بافتِ نقطه‌ای، تا ورود و پنل
   یک خانواده باشند. روی گوشی نیمه‌ی تیره نوارِ بالای فرم می‌شود.
   ================================================================ */
.auth-body { min-block-size: 100dvh; margin: 0; background: var(--surface); }

.login {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "form art";
  min-block-size: 100dvh;
}

/* دکمه‌ی تم: گوشه‌ی بالای نیمه‌ی فرم */
.login-theme {
  position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 3;
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.login-theme:hover { border-color: var(--line-strong); color: var(--ink); }

.login-panel { grid-area: form; display: grid; align-content: center; padding: 3.5rem clamp(1.25rem, 5vw, 4.5rem) 2.5rem; }
.login-inner { display: grid; gap: 1.5rem; inline-size: min(100%, 26rem); justify-self: center; }

/* نشانِ مجموعه: همان نشانِ بالای منو — لوگوی آپلودشده، وگرنه خاموتِ زرد روی دودی */
.login-brand { display: flex; align-items: center; gap: 0.75rem; min-inline-size: 0; }
.login-brand .brand-mark {
  inline-size: 2.75rem; block-size: 2.75rem;
  background: linear-gradient(140deg, var(--chrome-strong), var(--chrome-deep));
  color: var(--accent);
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgb(var(--shadow-hue) / 0.5);
}
.login-brand .brand-mark.has-logo { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.login-brand-text { display: grid; min-inline-size: 0; line-height: 1.4; }
.login-brand-text strong { color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-brand-text small { color: var(--ink-3); font-size: var(--fs-xs); }

.login-intro { display: grid; gap: 0.375rem; }
.login-intro h1 { margin: 0; color: var(--navy-900); font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); font-weight: 700; line-height: 1.35; }
.login-intro p { margin: 0; line-height: 1.9; }
.login-intro .muted { color: var(--ink-3); }
.login-eyebrow { color: var(--navy-700); font-size: var(--fs-s); font-weight: 600; }
.login-alert { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.625rem 0.875rem; font-size: var(--fs-s); line-height: 1.8; }
.login-alert .icon { flex: none; margin-block-start: 0.3rem; }

/* برگشت به مرحله‌ی قبل (صفحه‌ی کد) */
.login-back {
  display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start;
  margin-block-end: 0.375rem; padding-block: 0.25rem; padding-inline: 0.5rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--navy-700);
  font-size: var(--fs-s); text-decoration: none;
}
.login-back:hover { background: var(--cyan-50); color: var(--navy-900); }

/* سگمنتِ «ورود مشتری / پیگیری سفارش» — همان سگمنتِ تب‌های داشبورد */
.auth-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem;
  margin: 0; padding: 0.25rem;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface-2);
}
.auth-seg button {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-block-size: 2.5rem; padding: 0.5rem 0.4rem;
  border: 0; border-radius: calc(var(--r-m) - 3px);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: var(--fs-s); font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth-seg button:hover { color: var(--ink); }
.auth-seg button[aria-selected="true"] { background: var(--surface); color: var(--navy-900); box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.16); }
.auth-seg button[aria-selected="true"] .icon { color: var(--fill-deep); }

/* ---------- فرم ---------- */
.login-form { display: grid; gap: 1.125rem; }
.login-form .field { display: grid; gap: 0.375rem; }
.login-form label { color: var(--ink); font-size: var(--fs-s); font-weight: 600; }
.login-form .form-text { margin: 0; }

/* ورودی با آیکونِ شروع و جای خالیِ پایان (اپراتورِ شماره یا دکمه‌ی نمایشِ رمز). ورودی‌های LTR
   فاصله‌ی دوطرفه‌ی برابر دارند تا هم آیکونِ راست و هم دکمه‌ی چپ جا شوند. */
.login-input { position: relative; }
.login-input .form-control {
  min-block-size: 3.125rem;
  padding-inline: 2.875rem;
  border-color: var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: 1.0625rem;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.login-input .form-control:hover { border-color: color-mix(in srgb, var(--fill-deep) 45%, var(--line-strong)); }
.login-input .form-control:focus { background: var(--surface); border-color: var(--fill-deep); box-shadow: var(--ring); }
.login-input .form-control::placeholder { color: var(--ink-3); opacity: 0.55; letter-spacing: normal; }
.login-input-icon {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  display: grid; place-items: center; inline-size: 2.875rem;
  color: var(--ink-3); pointer-events: none;
}
.login-input:focus-within .login-input-icon { color: var(--fill-deep); }
.auth-phone { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-weight: 600; }

/* نامِ اپراتور کنارِ شماره: «همراه اول» یعنی شماره کامل و پیش‌شماره‌اش آشناست */
.login-input-op {
  position: absolute; inset-block: 0; inset-inline-end: 0.5rem;
  display: flex; align-items: center; pointer-events: none;
}
.login-input-op:empty { display: none; }
.login-input-op.is-ok, .login-input-op.is-warn {
  margin-block: auto; block-size: 1.75rem; padding-inline: 0.625rem;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
}
.login-input-op.is-ok { background: var(--ok-50); color: var(--ok-700); }
.login-input-op.is-warn { background: var(--amber-50); color: var(--amber-700); }
/* برچسب سمتِ چپ است؛ خودِ ورودی LTR است و «inline-end»ـش راست می‌شود، پس اینجا جهتِ فیزیکی درست است */
.login-input.has-op .form-control { padding-left: 7.5rem; }

/* دکمه‌ی نمایشِ رمز داخلِ ورودی */
.password-toggle {
  position: absolute; inset-block: 0; inset-inline-end: 0.25rem; margin-block: auto;
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem; padding: 0;
  border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.password-toggle:hover { background: var(--cyan-50); color: var(--ink); }
.password-toggle[aria-pressed="true"] { color: var(--navy-700); }

/* کدِ پیامکی: رقم‌ها درشت و وسط */
/* قاعده‌ی سراسریِ «ورودیِ LTR در صفحه‌ی RTL راست‌چین» ([dir=rtl] input[dir=ltr]) را اینجا با وزنِ بیشتر کنار می‌گذاریم */
[dir] .login-otp input.form-control[dir] { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em; }

/* یادآوریِ صفحه‌کلیدِ فارسی / Caps Lock */
.login-hint {
  display: flex; align-items: center; gap: 0.375rem;
  margin: 0.25rem 0 0; padding: 0.375rem 0.625rem;
  border-radius: var(--r-s);
  background: var(--amber-50); color: var(--amber-700);
  font-size: var(--fs-xs);
}
.login-hint[hidden] { display: none; }

.login-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  inline-size: 100%; min-block-size: 3.125rem; margin-block-start: 0.25rem;
  border-radius: var(--r-m);
  background: linear-gradient(140deg, var(--fill), var(--fill-strong));
  font-size: 1.0625rem; font-weight: 600;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(var(--shadow-hue) / 0.6), inset 0 -2px 0 rgb(0 0 0 / 0.12);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.login-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 1rem 1.75rem -0.75rem rgb(var(--shadow-hue) / 0.65), inset 0 -2px 0 rgb(0 0 0 / 0.12); }
.login-submit:disabled { cursor: progress; opacity: 0.85; }

/* کادرِ راهنما پایینِ فرم */
.login-help {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.login-help p { margin: 0; color: var(--ink-3); font-size: var(--fs-s); line-height: 1.9; }
.login-help strong { display: block; color: var(--ink); font-weight: 600; }
.login-help a { font-weight: 600; }
.login-help-icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  background: var(--cyan-50); color: var(--navy-700);
}

/* جابه‌جایی بینِ ورودِ مشتری و مدیریت */
.auth-alt {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.375rem;
  padding-block-start: 1rem; border-block-start: 1px solid var(--line);
  color: var(--ink-3); font-size: var(--fs-s);
}
.auth-alt .icon { color: var(--ink-3); }
.auth-alt a { font-weight: 700; }

/* ---------- نیمه‌ی تیره ---------- */
.login-art {
  grid-area: art;
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 1.5rem;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(234 179 8 / 0.26) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgb(234 179 8 / 0.14) 0%, transparent 60%),
    linear-gradient(150deg, var(--chrome-strong) 0%, var(--chrome-deep) 100%);
  color: #fff;
}
.login-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1.4px);
  background-size: 20px 20px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 75%);
}
/* بنرِ آپلودشده پشتِ همه‌چیز. شفافیتِ ۱۵٪ عمدی است: حتی عکسِ کاملاً سفید هم
   کم‌کنتراست‌ترین متنِ این نیمه را زیرِ ۴.۵:۱ نمی‌برد. */
.login-art-banner { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: 0.15; }

.login-art-head { display: grid; gap: 0.625rem; max-inline-size: 36rem; }
.login-art-head h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.375rem); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.login-art-head p { margin: 0; color: var(--on-dark-2); line-height: 1.9; }

/* خاموتی که جلوی چشم خم می‌شود */
.login-art-stage { position: relative; display: grid; place-items: center; min-block-size: 18rem; }
.login-stirrup { inline-size: min(72%, 24rem); block-size: auto; overflow: visible; filter: drop-shadow(0 0 1.5rem rgb(234 179 8 / 0.28)); }
.ls-dim path { stroke: rgb(255 255 255 / 0.32); stroke-width: 1.5; }
.ls-label rect { fill: rgb(255 255 255 / 0.08); stroke: rgb(255 255 255 / 0.22); }
.ls-label text { fill: var(--on-dark-1); font-family: inherit; font-size: 13px; font-weight: 600; text-anchor: middle; }
.ls-rebar { stroke: url(#loginRebar); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ls-ribs { stroke: rgb(0 0 0 / 0.16); stroke-width: 9; stroke-dasharray: 1.4 5.6; stroke-linejoin: round; }

.login-float {
  position: absolute;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--r-l);
  background: rgb(255 255 255 / 0.08); color: #fff;
  box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.login-float > span:last-child { display: grid; line-height: 1.5; }
.login-float strong { font-size: var(--fs-m); font-weight: 600; }
.login-float small { color: var(--on-dark-3); font-size: var(--fs-xs); }
.login-float-icon { display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-m); background: rgb(234 179 8 / 0.2); color: var(--on-dark-accent); }
.login-float-icon.is-ok { background: rgb(94 221 160 / 0.18); color: #5EDDA0; }
.login-float-a { inset-block-start: 6%; inset-inline-start: 0; }
.login-float-b { inset-block-end: 6%; inset-inline-end: 0; }
.login-float-c { inset-block-start: 40%; inset-inline-end: -2%; }
.login-mini-ring { inline-size: 2.25rem; block-size: 2.25rem; rotate: -90deg; }
.login-mini-ring circle { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 4; }
.login-mini-ring .is-done { stroke: var(--accent); stroke-linecap: round; }

.login-art-points { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; color: var(--on-dark-1); }
.login-art-points li { display: flex; align-items: center; gap: 0.625rem; }
.login-art-points .icon { flex: none; color: var(--accent); }

.login-art-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  padding-block-start: 1.25rem; border-block-start: 1px solid rgb(255 255 255 / 0.12);
  color: var(--on-dark-3); font-size: var(--fs-s);
}
.login-art-foot > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.login-art-foot a { color: #fff; text-decoration: none; }
.login-art-foot a:hover { color: var(--on-dark-accent); }
.login-site {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--r-pill);
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}
.login-site:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.5); }
.login-site .icon { color: var(--accent); }
.login-art :where(a):focus-visible { outline-color: var(--on-dark-accent); }

@media (prefers-reduced-motion: no-preference) {
  .ls-rebar { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ls-bend 2.4s cubic-bezier(.55, .05, .25, 1) .35s forwards; }
  .ls-ribs { opacity: 0; animation: ls-fade .6s ease 2.5s forwards; }
  .ls-dim, .ls-label { opacity: 0; animation: ls-fade .6s ease 2.7s forwards; }
  .login-float { animation: login-float 7s ease-in-out infinite; }
  .login-float-b { animation-delay: -2.4s; }
  .login-float-c { animation-delay: -4.6s; }
  .login-inner { animation: login-in .5s ease-out both; }
}
@keyframes ls-bend { to { stroke-dashoffset: 0; } }
@keyframes ls-fade { to { opacity: 1; } }
@keyframes login-float { 50% { translate: 0 -8px; } }
@keyframes login-in { from { opacity: 0; translate: 0 8px; } }

/* تبلت: نیمه‌ی تیره باریک‌تر؛ کارت‌ها جا ندارند و روی خطِ اندازه‌ها می‌افتادند، پس فقط خودِ خاموت می‌ماند */
@media (max-width: 72rem) {
  .login { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .login-float { display: none; }
}

/* گوشی: نیمه‌ی تیره نوارِ بالای فرم می‌شود — فقط تیتر؛ خاموت و کارت‌ها جا ندارند.
   تلفنِ کارگاه در کادرِ راهنمای فرم هست، پس پانویس هم نمی‌آید. */
@media (max-width: 52rem) {
  .auth-body { background: var(--ground); }
  .login { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "form"; grid-template-rows: auto 1fr; }
  .login-art { grid-template-rows: auto; padding: 1.75rem 1.25rem 2.75rem; border-end-start-radius: 1.5rem; border-end-end-radius: 1.5rem; }
  .login-art-stage, .login-art-points, .login-art-foot { display: none; }
  .login-art-head { padding-inline-end: 2.75rem; }
  .login-art-head h2 { font-size: 1.375rem; }
  .login-art-head p { font-size: var(--fs-s); line-height: 1.8; }
  .login-panel { position: relative; z-index: 1; align-content: start; margin-block-start: -1.5rem; padding: 0 1rem 2rem; }
  .login-inner { padding: 1.5rem 1.25rem; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 1rem 2.5rem -1.25rem rgb(var(--shadow-hue) / 0.35); }
  /* دکمه‌ی تم روی نوارِ تیره می‌نشیند */
  .login-theme { inset-inline-start: auto; inset-inline-end: 1rem; background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.22); color: #fff; }
  .login-theme:hover { background: rgb(255 255 255 / 0.18); border-color: rgb(255 255 255 / 0.4); color: #fff; }
}

/* پیش‌نمایشِ نیمه‌ی تیره در «پروفایل مجموعه» — همان سطح و همان تیتر */
.login-preview {
  border-radius: var(--r-l);
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(234 179 8 / 0.26) 0%, transparent 55%),
    linear-gradient(150deg, var(--chrome-strong) 0%, var(--chrome-deep) 100%);
}
.login-preview .lp-name { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.login-preview .lp-tag { color: var(--on-dark-2); }
.login-preview .lp-points li { color: var(--on-dark-1); }
.login-preview .lp-points .icon, .login-preview .lp-site .icon { color: var(--accent); }

/* ================================================================
   میان‌برهای صفحه‌کلید و جست‌وجوی سراسری (Ctrl+K) — مثل DentalSuite
   ================================================================ */

kbd {
  display: inline-block;
  min-inline-size: 1.4em;
  padding: 0 0.35em;
  border: 1px solid var(--line-strong);
  border-block-end-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8em; font-weight: 500;
  line-height: 1.6;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
  box-shadow: none;
}

/* ---------- دکمه‌ی جست‌وجو در منو ---------- */
.side-search {
  display: flex; align-items: center; gap: 0.5rem;
  inline-size: 100%; min-block-size: 2.5rem;
  margin-block: -0.25rem 0.25rem; padding: 0.4rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--r-m);
  background: rgb(255 255 255 / 0.05);
  color: var(--on-dark-3); font: inherit; font-size: var(--fs-s);
  text-align: start; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.side-search:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.22); color: #fff; }
.side-search:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 1px; }
.side-search > span:first-of-type { flex: 1; }
.side-search-keys { display: inline-flex; gap: 0.2rem; }
.side-search-keys kbd, .me-kbd {
  border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.06); color: var(--on-dark-2);
}
.me-kbd { margin-inline-start: 0.25rem; }
.side-search-btn { display: none; }
@media (max-width: 56rem) {
  /* گوشی: نوارِ جست‌وجو جا ندارد؛ آیکونش کنارِ زنگ است */
  .side-search { display: none; }
  .side-search-btn { display: inline-grid; }
}

/* ---------- پنجره‌ی جست‌وجو ---------- */
.palette-modal .modal-dialog.palette { max-inline-size: 36rem; margin: 4rem auto 1rem; }
@media (max-width: 40rem) { .palette-modal .modal-dialog.palette { margin: 0.75rem; } }
.palette .modal-content { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.28); }
.palette-field {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-block-end: 1px solid var(--line);
  color: var(--ink-3);
}
.palette-field input {
  flex: 1; min-inline-size: 0;
  border: 0; background: transparent; outline: 0;
  color: var(--ink); font: inherit; font-size: 1.0625rem;
}
.palette-field input::-webkit-search-cancel-button { display: none; }
.palette-hint {
  flex: none;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  color: var(--ink-3); font-size: var(--fs-xs);
}
.palette-results { max-block-size: min(62vh, 30rem); overflow-y: auto; padding-block: 0.25rem 0.5rem; }
.palette-group {
  margin: 0; padding: 0.75rem 1rem 0.25rem;
  color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600;
}
.palette-results > div > .palette-group:first-child { padding-block-start: 0.5rem; }
.palette-group[hidden] { display: none; }
.palette-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  inline-size: 100%; min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  color: var(--ink); text-decoration: none;
}
.palette-row[hidden] { display: none; }
.palette-row:hover, .palette-row.is-active { background: var(--cyan-50); color: var(--ink); }
.palette-row.is-active { box-shadow: inset 3px 0 0 var(--fill-deep); }
[dir="rtl"] .palette-row.is-active { box-shadow: inset -3px 0 0 var(--fill-deep); }
.palette-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.5rem; min-inline-size: 0; font-weight: 600; }
.palette-name small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.palette-icon {
  display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem; border-radius: var(--r-m);
  background: var(--surface-2); color: var(--navy-700);
}
.palette-row.is-active .palette-icon { background: var(--fill); color: var(--fill-ink); }
.palette-command .palette-name { font-weight: 500; }
.palette-phone { color: var(--ink-3); font-size: var(--fs-s); }
.palette-tag {
  padding: 0 0.4rem; border-radius: var(--r-pill);
  background: var(--cyan-50); color: var(--navy-900);
  font-size: 0.6875rem; font-weight: 600;
}
.palette-tag.is-muted { background: var(--surface-2); color: var(--ink-3); }
.palette-row-links {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  margin-block: -0.375rem 0.25rem; padding-inline: 1rem 3.75rem;
  font-size: var(--fs-xs);
}
.palette-row-links a { color: var(--navy-700); font-weight: 600; text-decoration: none; }
.palette-row-links a:hover { text-decoration: underline; }
.palette-empty { margin: 0; padding: 0.75rem 1rem; color: var(--ink-3); font-size: var(--fs-s); }
.palette-empty[hidden] { display: none; }
.palette-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  margin: 0; padding: 0.5rem 1rem;
  border-block-start: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-xs);
}
/* لمسی: صفحه‌کلید در کار نیست، راهنمای کلیدها هم نه */
@media (hover: none) {
  .palette-field .palette-hint, .palette-foot, .palette-command .palette-hint { display: none; }
}

/* ---------- راهنمای میان‌برها ---------- */
.shortcut-modal .modal-dialog { max-inline-size: 32rem; }
.shortcut-modal .modal-title { display: flex; align-items: center; gap: 0.5rem; }
.shortcut-list { display: grid; gap: 0.125rem; margin: 0 0 1rem; }
.shortcut-list div {
  display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 1rem;
  padding: 0.4rem 0; border-block-end: 1px dashed var(--line);
}
.shortcut-list div:last-child { border-block-end: 0; }
.shortcut-list dt { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.shortcut-list dd { margin: 0; font-size: var(--fs-s); }
.shortcut-note { margin: 0; padding: 0.625rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.8; }

/* ---------- ردیفی که با پیکان رویش آمده‌اید ---------- */
/* لایه‌ی حالتِ خودِ بوت‌استرپ (همان که hover به کار می‌برد)، تا با نوارِ رنگیِ وضعیت قاطی نشود */
.table tr:has([data-row-link]:focus) > * { --bs-table-bg-state: var(--cyan-50); }
.table [data-row-link].code-chip:focus-visible { outline: 2px solid var(--fill-deep); outline-offset: 2px; }
a.lr:focus { outline: none; background: var(--cyan-50); box-shadow: var(--ring); }
/* ردیفِ کارتیِ فهرست‌ها: حلقه هم با فوکوسِ برنامه‌ای (پیکان‌ها) دیده شود، نه فقط focus-visible */
.o-item:has(.o-link[data-row-link]:focus) { border-color: var(--navy-700); box-shadow: var(--ring); }

/* ================================================================
   قیمتِ روز: تغییر نسبت به دیروز، روندِ ۳۰ روزه، پیامک به همکارها، تاریخچه
   ================================================================ */
.price-bar-actions { flex: none; display: flex; align-items: center; gap: 0.5rem; }
.price-bar-tool {
  display: inline-flex; align-items: center; gap: 0.375rem;
  --bs-btn-bg: var(--surface); --bs-btn-border-color: color-mix(in srgb, var(--fill) 40%, var(--line-strong));
  --bs-btn-color: var(--ink-2); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--fill-deep);
}
.price-bar-tool.is-on { --bs-btn-bg: var(--fill); --bs-btn-color: var(--fill-ink); --bs-btn-border-color: var(--fill); --bs-btn-hover-bg: var(--fill-strong); --bs-btn-hover-color: var(--fill-ink); }
@container (max-width: 44rem) { .price-bar-tool span { display: none; } }

/* تغییرِ هر قیمت نسبت به پایانِ دیروز — خنثی، نه سبز/قرمز: گران‌تر شدن برای فروشنده «بد» نیست */
.price-delta {
  flex: none; align-self: center;
  margin-inline-end: 0.375rem; padding: 0.05rem 0.4rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}
.price-delta.is-up { background: var(--amber-50); color: var(--amber-700); }
.price-delta.is-down { background: var(--slate-50); color: var(--slate-700); }

/* پنلِ روند زیرِ نوار */
.price-chart-panel {
  margin-block-start: 0.75rem; padding: 1rem 1.25rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface);
}
.price-chart-panel[hidden] { display: none; }
.price-chart-more { display: inline-block; margin-block-start: 0.5rem; font-size: var(--fs-xs); font-weight: 600; }

/* نمودار */
.price-chart { margin: 0; }
.price-chart svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; direction: rtl; }
.pc-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.pc-axis { fill: var(--ink-3); font-family: "Vazirmatn FD", Vazirmatn, sans-serif; font-size: 11px; }
.pc-series polyline { fill: none; stroke: var(--pc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pc-series circle { fill: var(--pc); stroke: var(--surface); stroke-width: 2; }
.pc-s0 { --pc: var(--fill-deep); }
.pc-s1 { --pc: var(--amber-500); }
.pc-s2 { --pc: var(--slate-500); }
.pc-s3 { --pc: var(--ok-700); }
.pc-s4 { --pc: var(--navy-700); }
.pc-s5 { --pc: var(--alert-600); }
.price-chart-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin-block-start: 0.5rem; color: var(--ink-2); font-size: var(--fs-s); }
.pc-key { display: inline-flex; align-items: center; gap: 0.375rem; }
.pc-key i { display: inline-block; inline-size: 1rem; block-size: 0.25rem; border-radius: 2px; background: var(--pc); }
.pc-key b { color: var(--ink); }
.pc-key small { font-weight: 700; }
.pc-key .is-up, .delta-up { color: var(--amber-700); }
.pc-key .is-down, .delta-down { color: var(--slate-700); }
.price-chart-empty { margin: 0; padding: 0.5rem 0; color: var(--ink-3); font-size: var(--fs-s); }

/* پنجره‌ی پیامکِ قیمت */
.sms-recipients { margin-block-end: 0.75rem; }
.sms-preview {
  margin: 0 0 0.5rem; padding: 0.75rem 1rem;
  border: 1px dashed var(--line-strong); border-radius: var(--r-m);
  background: var(--surface-2); color: var(--ink);
  font-family: inherit; font-size: var(--fs-s); line-height: 1.9;
  white-space: pre-wrap; direction: rtl;
}

/* صفحه‌ی سایزها: فهرستِ تغییرها */
.price-changes small { color: inherit; opacity: 0.8; }

/* ================================================================
   نقشه‌ی خاموت زیرِ هر ردیفِ فرمِ سفارش (js/shapes.js + renderItemShape)
   ================================================================ */
.item-shape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-block-start: 0.5rem; padding: 0.375rem 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--fill) 45%, var(--line));
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--cyan-50) 60%, var(--surface));
  color: var(--ink-2); font-size: var(--fs-xs);
}
.item-shape[hidden] { display: none; }
.shape-svg { display: block; overflow: visible; }
.item-shape .shape-svg { flex: none; inline-size: 120px; block-size: 76px; color: var(--fill-deep); }
.shape-bar { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.shape-dim { fill: var(--ink-2); font-family: "Vazirmatn FD", Vazirmatn, sans-serif; font-size: 11px; font-weight: 700; }
.item-shape-text { display: grid; gap: 0.125rem; line-height: 1.7; }
.item-shape-text b { color: var(--ink); font-size: var(--fs-s); }
.item-shape-text small { color: var(--ink-3); font-size: 0.6875rem; }

/* صفحه‌ی پیگیری: نوارِ کارمندِ واردشده (اسکنِ QRِ برگه‌ی کارگاه) */
.staff-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--fill) 50%, var(--line)); border-radius: var(--r-l);
  background: var(--cyan-50); color: var(--ink-2); font-size: var(--fs-s);
}
.staff-bar > span:first-child { display: inline-flex; align-items: center; gap: 0.375rem; }
.staff-bar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.staff-bar-actions .btn { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ================================================================
   گروه‌های پیامک، پنجره‌ی پیامکِ قیمت، و شکلِ نوعِ محصول
   ================================================================ */

/* فهرستِ گروه‌ها */
.sms-groups { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sms-group {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface);
}
.sms-group.is-auto { background: var(--surface-2); border-style: dashed; }
.sms-group-icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-m);
  background: var(--cyan-50); color: var(--navy-700);
}
.sms-group-main { flex: 1; min-inline-size: 0; display: grid; line-height: 1.6; }
.sms-group-main small { color: var(--ink-3); font-size: var(--fs-xs); }
.sms-group-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.sms-group-link:hover { color: var(--navy-700); text-decoration: underline; }
.sms-group-count { flex: none; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }

/* عضوها */
.sms-members .lr { padding-inline: 0.5rem 0.25rem; }
.sms-members form { flex: none; }

/* انتخابِ مشتری‌ها */
.pick-quick { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-end: 0.5rem; }
.pick-list {
  max-block-size: 20rem; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2);
}
.pick-list [hidden] { display: none; }
.pick-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.375rem 0.5rem; border-radius: var(--r-s);
  cursor: pointer;
}
.pick-row:hover { background: var(--cyan-50); }
.pick-row .form-check-input { flex: none; margin: 0; }
.pick-name { flex: 1; min-inline-size: 0; font-size: var(--fs-s); font-weight: 600; }
.pick-name small { color: var(--ink-3); font-weight: 400; margin-inline-start: 0.25rem; }
.pick-phone { flex: none; color: var(--ink-3); font-size: var(--fs-xs); }
.danger-zone { border-color: color-mix(in srgb, var(--alert-600) 30%, var(--line)); }

/* پنجره‌ی پیامکِ قیمت */
.sms-target { margin-block-end: 1rem; }
.sms-target-row { display: flex; gap: 0.5rem; }
.sms-target-row .form-select { flex: 1; min-inline-size: 0; }
.sms-target-row .btn { flex: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.sms-editor textarea { font-size: var(--fs-s); line-height: 1.9; resize: vertical; }
.sms-meter {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem;
  margin-block: 0.375rem 0.25rem;
  color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600;
}
.sms-meter .is-over { color: var(--alert-700); }
.sms-meter .btn-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-xs); text-decoration: none; }

/* نوعِ محصول: نقشه‌ای که در برگه چاپ می‌شود */
.pt-shape-cell { min-inline-size: 8.5rem; }
.pt-shape-draw { display: block; }
.pt-shape-draw .shape-svg { inline-size: 110px; block-size: 64px; color: var(--fill-deep); }
.pt-shape-name { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.pt-shape-cell .pt-shape { display: block; max-block-size: 34px; margin-block-start: 0.25rem; }
.pt-shape-preview {
  margin-block-start: 0.5rem; padding: 0.5rem;
  border: 1px dashed color-mix(in srgb, var(--fill) 45%, var(--line)); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--cyan-50) 60%, var(--surface));
  text-align: center;
}
.pt-shape-preview[hidden] { display: none; }
.pt-shape-preview .shape-svg { display: block; inline-size: 170px; block-size: 100px; margin-inline: auto; color: var(--fill-deep); }

/* ================================================================
   چینش برگه کارگاه (/SheetLayouts): فهرستِ چینش‌ها، نوارِ پهنای ستون‌ها با مرزهای کشیدنی،
   فهرستِ ستون‌ها با درصد و سانتی‌متر، و کلیدهای روشن/خاموش
   ================================================================ */
.sheet-layouts > li.is-current > .lr { background: var(--cyan-50); }
.sheet-layouts a.lr-main { color: var(--ink); text-decoration: none; }
.sheet-layouts a.lr-main:hover .lr-title { color: var(--navy-700); text-decoration: underline; }
.palette-tag.is-ok { background: var(--ok-50); color: var(--ok-700); }

/* نوارِ پیش‌نمایش: هر ستون به نسبتِ درصدش از کاغذ؛ «انجام» هرچه بماند */
.sheet-preview {
  display: flex; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); font-size: var(--fs-xs); line-height: 1.2;
}
.sheet-preview .sp-col {
  flex: 0 0 auto; min-inline-size: 0; overflow: hidden; white-space: nowrap;
  padding: 0.75rem 0.125rem; text-align: center; color: var(--ink-2);
  border-inline-start: 1px solid var(--line);
}
.sheet-preview .sp-col:first-child { border-inline-start: 0; }
.sheet-preview .sp-done { flex: 1 1 auto; background: var(--cyan-50); color: var(--navy-900); font-weight: 700; }
.sheet-preview.is-editable { overflow: visible; }
.sheet-preview.is-editable .sp-col { position: relative; overflow: visible; }
/* دستگیره روی لبه‌ی چپِ هر ستون (پایانش در راست‌به‌چپ) */
.sp-handle {
  position: absolute; inset-block: -0.25rem; inset-inline-end: -0.375rem; z-index: 1;
  inline-size: 0.75rem; cursor: col-resize; touch-action: none;
}
.sp-handle::after {
  content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 50%;
  inline-size: 3px; border-radius: 2px; background: var(--line-strong); transform: translateX(-50%);
  transition: background var(--t-fast, 0.15s);
}
.sp-handle:hover::after, .sheet-preview.is-dragging .sp-handle::after { background: var(--fill); }
.sheet-preview.is-dragging { cursor: col-resize; user-select: none; }

/* فهرستِ ستون‌ها */
.sheet-cols { display: grid; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.sheet-col {
  display: grid; align-items: center; gap: 0.5rem;
  grid-template-columns: auto auto minmax(7rem, 1fr) 6.5rem 4.5rem;
  grid-template-areas: "grip move name width cm" ". . warn warn warn";
  padding: 0.375rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
}
.sheet-col.is-off { background: var(--surface-2); }
.sheet-col.is-off .sc-name span, .sheet-col.is-off .sc-width { color: var(--ink-3); }
.sheet-col.is-dragging { opacity: 0.55; border-style: dashed; }
.sheet-col.is-bad { border-color: var(--alert-200); background: var(--alert-50); }
.sc-grip { grid-area: grip; display: grid; place-items: center; color: var(--ink-3); cursor: grab; touch-action: none; }
.sc-move { grid-area: move; display: inline-flex; gap: 0.125rem; }
.sc-move .icon-btn { inline-size: 1.75rem; block-size: 1.75rem; }
.sc-name { grid-area: name; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; cursor: pointer; }
.sc-name .form-check-input { flex: none; margin: 0; }
.sc-name small { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.sc-width { grid-area: width; display: inline-flex; align-items: center; gap: 0.25rem; }
.sc-width .form-control { inline-size: 4.5rem; text-align: center; }
.sc-width.is-rest { font-weight: 700; color: var(--navy-900); }
.sc-width.is-rest small { font-weight: 400; color: var(--ink-3); }
.sc-cm { grid-area: cm; color: var(--ink-2); font-size: var(--fs-s); text-align: end; white-space: nowrap; }
.sc-warn { grid-area: warn; color: var(--warn-text); font-size: var(--fs-xs); }
@media (max-width: 40rem) {
  .sheet-col {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "grip move name name" ". width width cm" ". warn warn warn";
  }
  .sheet-preview { font-size: 0.625rem; }
  .sheet-preview .sp-col { padding-inline: 0; }
}

/* کلیدهای روشن/خاموش و انتخابِ کاغذ */
.sheet-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 0.375rem; }
.sheet-group-title { margin: 0.75rem 0 0.5rem; font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }
.sheet-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
  min-block-size: 2.5rem; padding: 0.375rem 0.625rem 0.375rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); cursor: pointer; user-select: none;
  transition: background var(--t-fast, 0.15s), border-color var(--t-fast, 0.15s);
}
.sheet-toggle:hover { border-color: var(--line-strong); }
.sheet-toggle:has(input:checked) { border-color: var(--fill); background: var(--cyan-50); }
.sheet-toggle:has(input:focus-visible) { box-shadow: var(--ring); }
.sheet-toggle .form-check-input { flex: none; margin: 0; inline-size: 1.125rem; block-size: 1.125rem; }
.sheet-editor .form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ================================================================
   تصویرِ کنارِ «نوع محصول» در فرمِ سفارش: همان نقشه‌ی برگه‌ی کارگاه با اندازه‌های نمونه
   (js/shapes.js → thumb)؛ عکسِ آپلودی فقط برای محصولِ بی‌نقشه. جای قاعده‌ی img قدیمی در kept.css را می‌گیرد.
   ================================================================ */
.pt-thumb {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 46px; block-size: 34px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--fill-deep);
}
.pt-thumb[hidden] { display: none; }
.pt-thumb .shape-svg { inline-size: 100%; block-size: 100%; }
/* نقشه حدودِ یک‌سوم کوچک می‌شود؛ خطِ پهن‌تر تا شکل در این اندازه هم خوانا بماند */
.pt-thumb .shape-bar { stroke-width: 7; }
.pt-thumb img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }

/* ================================================================
   فرمِ سفارش: نوارِ «قیمت هر کیلو در این سفارش» بالای اقلام (فقط کارکنان) با دکمه‌ی «اعمال»
   ================================================================ */
.order-prices {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem;
  margin-block-end: 1rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2);
}
.order-prices-title { flex-basis: 100%; display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }
.order-prices-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.op-item { display: grid; gap: 0.125rem; margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.op-item .form-control { inline-size: 7rem; text-align: center; }
.op-note { color: var(--ok-700); font-size: var(--fs-s); }
.op-note:empty { display: none; }

/* ================================================================
   دفترِ حسابِ کارگر (Workers/Account): دوره‌ی هفتگی، حسابِ دوره، خلاصه، دفتر با مانده‌ی جاری
   ================================================================ */
.ledger-period {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;
  margin-block-end: 1rem; padding: 0.625rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
}
.ledger-nav { display: inline-flex; align-items: center; gap: 0.25rem; }
.ledger-period-label { font-size: var(--fs-s); white-space: nowrap; }
.ledger-custom { display: inline-flex; align-items: center; gap: 0.375rem; margin-inline-start: auto; }
.ledger-custom .form-control { inline-size: 7.5rem; }
.ledger-sum { margin-block-end: 1rem; }
.ledger-overview .table th[scope="row"] { color: var(--ink-2); font-weight: 600; }
.ledger-owed { display: flex; align-items: center; gap: 0.375rem; margin: 0.75rem 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.ledger-owed strong { font-size: var(--fs-m); color: var(--ink); }
.ledger-owed.is-owed strong { color: var(--danger-text, #b42318); }
.ledger-table tr.ledger-opening > td { background: var(--surface-2); color: var(--ink-2); }
.ledger-table tfoot td { border-block-start: 2px solid var(--line-strong); font-weight: 700; }
.ledger-weeks tr.is-current > td, .table tr.is-current > td { background: var(--cyan-50); }
@media (max-width: 40rem) {
  .ledger-custom { margin-inline-start: 0; }
}

/* ================================================================
   پنلِ کارگر (WorkerPortal) و برچسبِ «آماده در کارگاه»
   ================================================================ */
/* برچسبِ «آماده در کارگاه»: خطِ چین، چون فقط اعلامِ کارگر است و وضعیتِ رسمی («آماده ارسال») را مدیر می‌زند */
.badge.wready {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px dashed var(--ok-700); background: var(--ok-50) !important; color: var(--ok-700) !important;
  font-weight: 700;
}
.wready-note {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: var(--r-m);
  background: var(--ok-50); color: var(--ok-700); font-size: var(--fs-s); line-height: 1.7;
}
.wready-note > .icon { flex: none; margin-block-start: 0.25rem; }
/* با «آماده در کارگاه» نوارِ تاریخ‌های جزئیاتِ سفارش شش خانه دارد، نه پنج */
.date-strip.has-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 40rem) { .date-strip.has-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* سربرگِ پنلِ کارگر: دو مقصد کنارِ هم؛ در گوشی ردیفِ دوم و تمام‌عرض */
.portal-nav { display: flex; gap: 0.375rem; }
@media (max-width: 40rem) {
  .portal-bar { flex-wrap: wrap; }
  .portal-nav { order: 3; inline-size: 100%; }
  .portal-nav .pill-btn { flex: 1; justify-content: center; }
}

/* صفِ کارگاه: هر سفارش یک کارت؛ کلِ بالای کارت پیوندِ صفحه‌ی سفارش و دکمه‌ها جدا */
.wq-section { margin-block-end: 1.5rem; }
.wq-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: var(--fs-m); font-weight: 700; }
.wq-head small {
  padding: 0 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 600;
}
.wq-none { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.wq-list { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.wq-card {
  position: relative; display: grid; align-content: start; gap: 0.625rem; padding: 0.875rem 1rem;
  border: 1px solid var(--line); border-radius: calc(var(--r-l) + 2px); background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.04);
}
.wq-card::before {
  content: ""; position: absolute; inset-block: 0.75rem; inset-inline-start: -1px;
  inline-size: 3px; border-radius: var(--r-pill); background: transparent;
}
.wq-card.is-urgent::before { background: var(--amber-500); }
.wq-card.is-late::before { background: var(--alert-600); }
.wq-card.is-ready::before { background: var(--ok-700); }
.wq-card:has(.wq-main:focus-visible) { border-color: var(--navy-700); box-shadow: var(--ring); }
.wq-main { display: grid; gap: 0.375rem; color: inherit; text-decoration: none; }
.wq-main:focus-visible { outline: none; }
.wq-main:hover .wq-no b { color: var(--navy-700); }
.wq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.wq-no { color: var(--ink-2); font-size: var(--fs-s); }
.wq-no b { color: var(--ink); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.wq-due { margin-inline-start: auto; color: var(--ink-3); font-size: var(--fs-xs); }
.wq-who { display: flex; flex-wrap: wrap; gap: 0 0.625rem; font-size: var(--fs-s); }
.wq-who span { color: var(--ink-3); }
.wq-items { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.wq-item { padding: 0.125rem 0.5rem; border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-xs); line-height: 1.8; }
.wq-item.is-more { color: var(--ink-3); }
.wq-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.wq-ready { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ok-700); font-size: var(--fs-s); font-weight: 600; }
.wq-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wq-actions form { margin: 0; }
/* انگشت در کارگاه، نه موس: دکمه‌ها بلندتر از معمول */
.wq-actions .btn { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.5rem; }

/* صفحه‌ی یک سفارش برای کارگر */
.wq-announce { display: grid; justify-items: start; gap: 0.5rem; }
.wq-announce form { inline-size: 100%; margin: 0; }
.wq-big {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  inline-size: 100%; max-inline-size: 28rem; min-block-size: 3.5rem;
  font-size: var(--fs-l); font-weight: 800;
}
.wq-hint { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.wq-announce.is-done { border-color: color-mix(in srgb, var(--ok-700) 35%, var(--line)); background: var(--ok-50); }
.wq-done-line { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ok-700); font-weight: 700; }
.wq-announce .btn-outline-secondary { display: inline-flex; align-items: center; gap: 0.375rem; }
.wq-table td { vertical-align: middle; }
.wq-shape { inline-size: 132px; }
.wq-shape .shape-svg { inline-size: 120px; block-size: 72px; color: var(--fill-deep); }
@media (max-width: 40rem) {
  .wq-shape { inline-size: 96px; }
  .wq-shape .shape-svg { inline-size: 88px; block-size: 54px; }
}

/* ================================================================
   کدِ پیگیری همیشه با رقمِ لاتین
   قلمِ پنل «Vazirmatn FD» رقمِ لاتین را فارسی می‌کشد؛ در کدی مثل 1405-0052-6DZ7 رقمِ «۷» شکلِ حرفِ V
   می‌شود که خودش در الفبای کد هست، و یک بار همین کد «6DZV» خوانده شد و پیگیری پیدایش نکرد. کد در پیامک،
   ربات و برگه‌های چاپی (با Vazirmatnِ معمولی) لاتین است؛ روی صفحه هم همان شکل را دارد تا کارمندی که پشتِ
   تلفن کد را می‌خواند و کارگری که از روی صفحه برمی‌دارد همان را ببیند که دستِ مشتری است.
   Vazirmatnِ بی FD همان قلم با رقمِ لاتین است و همه‌ی قاب‌ها (_Layout، _Public، Track) بارش می‌کنند.
   ================================================================ */
.track-code {
  font-family: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  direction: ltr; unicode-bidi: isolate;
}

/* ================================================================
   مرحله‌ی ۱ نقشه‌ی بهبود (مهر ۱۴۰۵): حسابِ مشتری، محلِ تحویل، نوارِ سفارش در گوشی، متنِ درشت، نصب
   ================================================================ */
/* منوی پنلِ مشتری: صفحه‌ی جاری روشن، «ثبت سفارش» همچنان دکمه‌ی اصلی */
.portal-bar .portal-nav .pill-btn[aria-current="page"]:not(.is-primary) {
  border-color: transparent; background: rgb(255 255 255 / 0.92); color: var(--chrome-deep);
}

/* یادداشتِ مشتری زیرِ سرِ حساب */
.file-note { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0.5rem 0 0; color: var(--on-dark-2); font-size: var(--fs-s); max-width: 70ch; }
.file-note > .icon { flex: none; margin-block-start: 0.3rem; }

/* ریزِ هر ارسال در گردشِ حساب (وزن × قیمت) */
.ledger-det { color: var(--ink-3); font-size: var(--fs-xs); }

/* محلِ تحویل در جزئیاتِ سفارش (کارکنان و مشتری) */
.deliv-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.deliv-icon { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-900); }
.deliv-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; flex: 1 1 18rem; min-inline-size: 0; }
.deliv-facts > div { display: grid; min-inline-size: 0; }
.deliv-facts dt { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.deliv-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* یادداشتِ داخلیِ دفتر: جدا از توضیحاتی که روی برگه چاپ می‌شود */
.note-box.is-internal { border-style: dashed; background: var(--surface-2); }

/* مودالِ مشتری: «اطلاعاتِ بیشتر» جمع‌شونده */
.cust-more summary { cursor: pointer; color: var(--ink-2); }

/* نوارِ کارهای اصلیِ سفارش در گوشی — بالای نوارِ پایینِ برنامه */
.order-actbar { display: none; }
@media (max-width: 56rem) {
  .order-actbar {
    display: flex; gap: 0.5rem; position: fixed; inset-inline: 0; z-index: 27;
    inset-block-end: calc(73px + env(safe-area-inset-bottom, 0px));
    padding: 0.5rem 1rem; border-block-start: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px);
  }
  .order-actbar .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-block-size: 2.75rem; font-weight: 700; }
  .main:has(.order-actbar) { padding-block-end: 11rem; }
}
@media print { .order-actbar { display: none !important; } }

/* نوارِ تاریخ‌های سفارش در گوشی: آخرین خانه بقیه‌ی ردیف را پر می‌کند تا خانه‌ی خاکستریِ خالی نماند */
@media (max-width: 40rem) {
  .date-strip > div:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .date-strip > div:last-child:nth-child(3n + 1) { grid-column: span 3; }
}

/* متنِ درشت: همه‌ی اندازه‌های rem با ریشه بزرگ می‌شوند */
html[data-text="lg"] { font-size: 112.5%; }

/* کارتِ نصبِ برنامه */
.install-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-block-end: 1rem;
  padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
}
.install-card[hidden] { display: none; }
.install-icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-900); }
.install-text { display: grid; flex: 1 1 14rem; min-inline-size: 0; font-size: var(--fs-s); }
.install-text span { color: var(--ink-3); }
.install-actions { display: flex; gap: 0.5rem; }
.install-actions [hidden] { display: none; }

/* ==========================================================================
   مرحله‌ی ۲ نقشه‌ی بهبود (مهر ۱۴۰۵): دو قیمت (معمولی/همکار)، پیش‌نمایشِ پیامکِ قیمت، تسویه‌ی هفتگیِ کارگرها
   ========================================================================== */

/* نوارِ قیمتِ داشبورد با دو ردیف (معمولی، همکار): کنارِ سربرگ و دکمه‌ها جا نمی‌شود و هر سایز یک خط می‌شد؛
   پس سربرگ و دکمه‌ها بالا و دو ردیف زیرشان در تمامِ پهنا */
.price-bar { flex-wrap: wrap; }
.price-bar-head { flex: 1 1 auto; }
.price-bar-lists {
  order: 3; flex: 1 1 100%; min-inline-size: 0;
  display: grid; gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--fill) 35%, var(--line));
}
.price-bar-lists .price-bar-fields { flex: none; padding-inline-start: 0; border-inline-start: 0; }
.price-row-label {
  flex: none; align-self: center; min-inline-size: 3.25rem;
  color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700;
}
.price-bar-fields.is-dealer .price-row-label { color: var(--fill-deep); }
.price-bar-fields.is-dealer .price-size { background: color-mix(in srgb, var(--fill) 16%, var(--ground)); }
/* خانه‌ی خالیِ همکار = همان قیمتِ معمولی؛ عددِ کم‌رنگ فقط راهنماست، نه قیمتِ ثبت‌شده */
.price-bar-fields.is-dealer .price-input::placeholder { color: var(--ink-3); opacity: 0.75; font-weight: 400; }
@container (max-width: 30rem) {
  .price-row-label { grid-column: 1 / -1; }
}

/* پیش‌نمایشِ پیامکِ قیمت برای همکار و مشتریِ معمولی (sms-preview نامِ جعبه‌ی پیش‌نمایشِ صفحه‌ی پیامک است) */
.price-sms-preview summary { cursor: pointer; color: var(--ink-2); }
.price-sms-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.price-sms-preview pre {
  margin: 0.25rem 0 0; padding: 0.5rem 0.625rem; max-block-size: 14rem; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: var(--fs-xs); line-height: 1.7;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--ground); color: var(--ink);
}

/* تسویه‌ی هفتگیِ کارگرها */
.payroll-table .payroll-pay { min-inline-size: 9.5rem; }
.payroll-table td.payroll-pay .form-control { text-align: center; font-weight: 600; }
.payroll-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); }
.payroll-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem; margin: 0.75rem 0 0.5rem; }
.payroll-fields { display: grid; grid-template-columns: auto minmax(7.5rem, 9rem) auto minmax(10rem, 16rem); align-items: center; gap: 0.5rem 0.625rem; }
.payroll-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 40rem) {
  .payroll-fields { grid-template-columns: auto 1fr; inline-size: 100%; }
  .payroll-buttons { inline-size: 100%; }
  .payroll-buttons .btn-molten { flex: 1 1 100%; }
}

/* ابعاد و تعدادِ قلمِ سفارش در ستونِ یک‌دوازدهم (از ۷۶۸ پیکسل) جا نمی‌شد و «30» فقط «3» دیده می‌شد:
   بی فلشِ کم‌وزیادِ عدد و با حاشیه‌ی کمتر */
#itemRows input[type=number] { padding-inline: 0.375rem; -moz-appearance: textfield; appearance: textfield; }
#itemRows input[type=number]::-webkit-inner-spin-button,
#itemRows input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   مرحله‌ی ۳ نقشه‌ی بهبود (مهر ۱۴۰۵): انبارِ میلگرد، فروش به تفکیکِ محصول، کارنامه‌ی کارگرها، مشتریِ تازه در فرمِ سفارش
   ========================================================================== */

/* سهمِ هر ردیف در گزارش (نوعِ محصول) */
.share-bar { display: inline-block; vertical-align: middle; inline-size: 3.5rem; block-size: 0.375rem; margin-inline-end: 0.375rem;
  overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.share-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--fill-deep); }

/* انبار: ورودِ بار برای همه‌ی سایزها در یک فرم */
.stock-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.625rem; }
.stock-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.375rem; }
.stock-size { display: grid; place-items: center; min-inline-size: 2.5rem; block-size: 2.375rem; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--ground);
  color: var(--ink); font-weight: 700; cursor: pointer; }
.stock-count td { vertical-align: middle; }
.stock-count .amount-wrap .form-control { min-inline-size: 6.5rem; }

/* کارنامه‌ی کارگرها: عددِ هر هفته با نوارِ کوچکی نسبت به پرکارترین هفته */
.worker-report .wr-week { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.worker-report .wr-cell { text-align: center; min-inline-size: 4.25rem; }
.worker-report .wr-bar { display: block; block-size: 0.3125rem; margin: 0.25rem auto 0; inline-size: 100%; max-inline-size: 4rem;
  overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.worker-report .wr-bar > span { display: block; block-size: 100%; margin-inline-start: 0; border-radius: inherit; background: var(--accent); }
.worker-report tbody th { white-space: nowrap; }

/* مشتریِ تازه از داخلِ فرمِ سفارش */
.cust-new-btn { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: var(--fs-xs); text-decoration: none; }
.cust-item.cust-new { border-top: 1px solid var(--line); color: var(--fill-deep); font-weight: 600; }

/* ==========================================================================
   مرحله‌ی ۵ نقشه‌ی بهبود (مهر ۱۴۰۵): اعلانِ فوری روی گوشی، اعتبارِ پیامک، هشدارهای داشبورد
   ========================================================================== */

/* کارتِ اعلانِ فوری (_PushCard): هم‌شکلِ کارتِ نصب؛ از متن و دکمه‌ها فقط بخشِ وضعیتِ فعلی (data-state) دیده می‌شود */
.push-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-block-end: 1rem;
  padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
}
.push-card[hidden] { display: none; }
.push-icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-900); }
.push-card[data-state="on"] .push-icon { background: var(--fill); color: var(--fill-ink); }
.push-text { display: grid; flex: 1 1 14rem; min-inline-size: 0; font-size: var(--fs-s); }
.push-text span { color: var(--ink-3); }
.push-msg { color: var(--molten-on-light); font-weight: 600; }
.push-msg:empty { display: none; }
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.push-card:not([data-state="off"]) [data-when="off"],
.push-card:not([data-state="on"]) [data-when="on"],
.push-card:not([data-state="denied"]) [data-when="denied"],
.push-card:not([data-state="unsupported"]) [data-when="unsupported"],
.push-card:not([data-state="disabled"]) [data-when="disabled"] { display: none !important; }

/* ==========================================================================
   مرحله‌ی ۶ نقشه‌ی بهبود (مهر ۱۴۰۵): سایتِ عمومی، جدولِ کارت‌شکل در گوشی، «برگردان»، راهنما و نکته‌ها
   ========================================================================== */

/* ---------- سایتِ عمومی (_Site): صفحه‌ی معرفی و قیمتِ روز ---------- */
.site-body { background: var(--ground); min-height: 100vh; display: flex; flex-direction: column; }
.site-wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: 1rem; }
.site-header { background: var(--chrome-mid, #19150F); color: #F3EFE4; position: sticky; top: 0; z-index: 20; }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.75rem; flex-wrap: wrap; padding-block: 0.4rem; }
.site-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.site-brand img { height: 2.4rem; width: auto; max-width: 7rem; object-fit: contain; }
.site-brand:hover { color: #EAB308; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.35rem; }
.site-nav a, .site-theme { color: #E9E2D0; text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.92rem; background: none; border: 0; display: inline-flex; align-items: center; gap: 0.3rem; }
.site-nav a:hover, .site-nav a.is-on, .site-theme:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.site-nav .site-nav-login { background: #EAB308; color: #1F1A0B; font-weight: 700; }
.site-nav .site-nav-login:hover { background: #F2C12E; color: #1F1A0B; }
@media (max-width: 36rem) { .site-nav-call span { display: none; } .site-brand span { font-size: 0.95rem; } }
.site-main { flex: 1 0 auto; }
.site-hero { background: linear-gradient(160deg, var(--chrome-deep, #0E0C08), var(--chrome-strong, #221D14)); color: #F3EFE4; padding-block: 2.5rem 2.75rem; }
.site-hero.is-compact { padding-block: 1.75rem 1.9rem; }
.site-hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; line-height: 1.4; margin: 0 0 0.6rem; text-wrap: balance; }
.site-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (max-width: 48rem) { .site-hero-grid { grid-template-columns: 1fr; } .site-hero-art { display: none; } }
.site-eyebrow { color: #EAB308; font-weight: 700; margin: 0 0 0.35rem; font-size: 0.95rem; }
.site-lead { color: #CFC6B0; font-size: 1.02rem; line-height: 1.95; margin: 0 0 0.6rem; max-width: 40rem; }
.site-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.site-btn-ghost, .site-btn-ghost:focus { border: 1px solid rgb(255 255 255 / 0.35); color: #F3EFE4; background: transparent; }
.site-btn-ghost:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.site-facts { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.site-facts li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: #E9E2D0; font-size: 0.9rem; }
.site-facts .icon { color: #EAB308; }
.site-hero-art { display: grid; place-items: center; }
.site-hero-art .shape-svg { width: 100%; max-width: 20rem; height: auto; }
.site-hero-art .shape-bar { stroke: #EAB308; }
.site-hero-art .shape-dim { display: none; }
.site-sections { display: grid; gap: 1rem; padding-block: 1.25rem 2rem; }
.site-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.1rem 1.25rem; }
.site-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.site-card-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.site-card-head h2 .icon { color: var(--molten-on-light); }
.site-more { font-size: 0.9rem; text-decoration: none; color: var(--molten-on-light); display: inline-flex; align-items: center; gap: 0.2rem; }
.site-note { color: var(--ink-3); font-size: 0.9rem; margin: 0.5rem 0 0; }
.site-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.site-prices li { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.7rem 0.9rem; display: grid; gap: 0.15rem; background: var(--surface-2); }
.sp-size { color: var(--ink-2); font-size: 0.92rem; }
.sp-price { font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.site-prices.is-large .sp-price { font-size: 1.7rem; }
.site-prices .is-up { color: var(--alert-600); font-weight: 700; }
.site-prices .is-down { color: var(--ok-700); font-weight: 700; }
.sp-same { color: var(--ink-3); }
.site-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.site-products li { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.75rem; display: grid; justify-items: center; gap: 0.25rem; text-align: center; background: var(--surface-2); }
.site-products .shape-svg { width: 100%; max-width: 7.5rem; height: 4.5rem; }
.site-products img { width: 100%; max-width: 7.5rem; height: 4.5rem; object-fit: contain; }
.site-products small { color: var(--ink-3); }
.site-points { list-style: none; padding: 0; margin: 0 0 0.9rem; display: grid; gap: 0.4rem; }
.site-points li { display: flex; gap: 0.45rem; align-items: flex-start; }
.site-points .icon { color: var(--ok-700); margin-top: 0.3rem; flex: none; }
.site-track { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.site-track input { min-width: 0; }
.site-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-contact li { display: flex; gap: 0.5rem; align-items: flex-start; }
.site-contact .icon { color: var(--molten-on-light); margin-top: 0.3rem; flex: none; }
.site-footer { background: var(--chrome-deep, #0E0C08); color: #CFC6B0; padding-block: 1.25rem; font-size: 0.92rem; }
.site-footer-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer strong { color: #F3EFE4; }
.site-footer p { margin: 0.3rem 0 0; display: flex; gap: 0.35rem; align-items: center; }
.site-footer a { color: #EAB308; text-decoration: none; }
.site-footer-links { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }

/* نوارِ قیمتِ داشبورد: پیوندِ صفحه‌ی عمومی */
.price-bar-public { display: inline-flex; gap: 0.3rem; margin-inline-start: auto; }
.price-bar-public .is-done { color: var(--ok-700); border-color: var(--ok-700); }

/* ---------- G4: جدولِ پهن در گوشی = کارت‌ها (برچسب‌ها از site.js initStackTables) ---------- */
@media (max-width: 40rem) {
  .table.stack-sm, .table.stack-sm > tbody, .table.stack-sm > tfoot, .table.stack-sm > tbody > tr, .table.stack-sm > tfoot > tr { display: block; width: 100%; }
  .table.stack-sm > thead { display: none; }
  .table.stack-sm > tbody > tr, .table.stack-sm > tfoot > tr {
    border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.5rem 0.75rem; margin-block-end: 0.5rem; background: var(--surface);
  }
  .table.stack-sm > tfoot > tr, .table.stack-sm > tbody > tr.row-total { background: var(--surface-2); font-weight: 700; }
  /* برچسب در سمتِ شروع (راست) شناور و مقدار در سمتِ پایان؛ محتوای چندتکه (کد، جهت، ریزِ مبلغ) مثلِ متن کنارش می‌پیچد */
  .table.stack-sm > :not(caption) > tr > td, .table.stack-sm > :not(caption) > tr > th {
    display: block; border: 0; padding: 0.2rem 0; box-shadow: none; background: transparent; text-align: end; white-space: normal;
  }
  .table.stack-sm > :not(caption) > tr > td::before {
    content: attr(data-label); float: inline-start; margin-inline-end: 0.75rem; color: var(--ink-3); font-size: 0.8rem; font-weight: 400;
  }
  .table.stack-sm > :not(caption) > tr > td::after { content: ""; display: block; clear: both; }
  .table.stack-sm > :not(caption) > tr > td:not([data-label])::before { content: none; }
  .table.stack-sm > :not(caption) > tr > td.stack-blank { display: none; }
  .table.stack-sm > :not(caption) > tr > td.stack-wide { text-align: start; }
  .table.stack-sm > :not(caption) > tr > td:first-child { font-weight: 700; }
  .table.stack-sm > :not(caption) > tr > td.no-print { padding-top: 0.35rem; }
  .table-responsive:has(> .stack-sm) { overflow: visible; }
}

/* ---------- G5: «برگردان» در پیامِ «حذف شد» ---------- */
.toast-undo { margin: 0; flex: none; }
.toast-undo .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }
.ledger-del { inline-size: 1.6rem; block-size: 1.6rem; margin-inline-start: 0.35rem; vertical-align: middle; opacity: 0.55; }
tr:hover .ledger-del, .ledger-del:focus-visible { opacity: 1; }
@media (pointer: coarse) { .ledger-del { opacity: 1; } }

/* ---------- G7: نکته‌ی بارِ اول و صفحه‌ی راهنما ---------- */
.page-tip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-block-end: 1rem;
  padding: 0.7rem 0.9rem; border: 1px dashed var(--line-strong); border-radius: var(--r-l); background: var(--surface);
}
.page-tip[hidden] { display: none; }
.page-tip-icon { display: inline-grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-900); flex: none; }
.page-tip p { margin: 0; flex: 1 1 16rem; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.9; }
.page-tip-actions { display: flex; gap: 0.4rem; }
.help-page { display: grid; gap: 1rem; max-width: 52rem; }
.help-toc { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; }
.help-toc a { padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 0.9rem; }
.help-toc a:hover { border-color: var(--molten); color: var(--ink); }
.help-toc [data-tips-reset] { margin-inline-start: auto; }
.help-sec { scroll-margin-top: 1rem; }
.help-sec h2 { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.help-sec h2 .icon { color: var(--molten-on-light); }
.help-sec ol, .help-sec ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.45rem; line-height: 1.95; }
.help-sec p { line-height: 1.95; }

/* فرمِ سفارش: تیکِ «دو سر خم» برای سنجاقی، هم‌قدِ خانه‌های کنارش */
.pin-check { display: flex; align-items: center; gap: 0.4rem; min-height: calc(1.5em + 0.5rem + 2px); margin: 0;
  padding: 0.2rem 0.55rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.pin-check .form-check-input { float: none; margin: 0; flex: none; }
.pin-check .form-check-label { white-space: nowrap; cursor: pointer; }

/* ---------- پنلِ کارگر: اقلامِ سفارش به شکلِ کارت (گوشی و کارگاه) ---------- */
.wq-note { font-size: 1rem; }
.wq-items-head { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; margin: 0.25rem 0 0.5rem; }
.wq-view-toggle { margin-inline-start: auto; }
.wq-view-toggle > button { min-block-size: 2.25rem; font-size: 0.95rem; }
/* دو نمای اقلام: فقط یکی دیده می‌شود (data-wq-view روی بخش) */
.wq-pieces-wrap[data-wq-view="list"] .wq-pieces { display: none; }
.wq-pieces-wrap[data-wq-view="cards"] .wq-lines { display: none; }
/* نمای «فهرست»: هر قلم یک خط — شماره‌ی ردیف، نام و اندازه، و تعدادِ درشت در سمتِ پایان */
.wq-lines { list-style: none; margin: 0 0 0.5rem; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.wq-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.7rem 0.85rem; border-block-end: 1px solid var(--line); }
.wq-line:last-child { border-block-end: 0; }
.wq-line:nth-child(even) { background: var(--surface-2); }
.wq-line-no { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--cyan-50); color: var(--navy-900); font-weight: 800; font-size: 0.9rem; }
.wq-line-main { display: grid; gap: 0.1rem; min-inline-size: 0; }
.wq-line-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; font-size: 1.05rem; }
.wq-line-dims { font-size: 1.2rem; font-weight: 800; line-height: 1.4; }
.wq-line-dims small { color: var(--ink-3); font-size: 0.8rem; font-weight: 400; }
.wq-line-qty { display: grid; justify-items: end; color: var(--ink-2); font-size: 0.9rem; white-space: nowrap; }
.wq-line-qty b { color: var(--ink); font-size: 1.55rem; font-weight: 900; line-height: 1.15; }
.wq-line-qty small { color: var(--ink-3); font-size: 0.78rem; }
.wq-items-head h2 { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 1.15rem; font-weight: 800; }
.wq-items-head h2 .icon { color: var(--molten-on-light); }
.wq-items-head > span { color: var(--ink-3); font-size: var(--fs-s); }
.wq-size-head {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0.75rem 0 0.5rem; padding: 0.35rem 0.75rem;
  border-radius: var(--r-m); background: var(--chrome-mid, #19150F); color: #F3EFE4; font-size: 1.05rem; font-weight: 800;
}
.wq-size-head b { color: #EAB308; font-size: 1.25rem; }
.wq-size-head small { margin-inline-start: auto; color: #CFC6B0; font-size: 0.85rem; font-weight: 400; }
.wq-pieces { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-block-end: 0.5rem; }
.wq-piece {
  display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; gap: 0.75rem; align-items: center;
  padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.04);
}
.wq-piece-body { display: grid; gap: 0.2rem; min-inline-size: 0; }
.wq-piece-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; font-size: 1.1rem; }
.wq-variant { padding: 0.05rem 0.55rem; border-radius: var(--r-pill); background: var(--fill); color: var(--fill-ink); font-weight: 800; font-size: 0.85rem; }
.wq-row { margin-inline-start: auto; color: var(--ink-3); font-size: 0.8rem; }
.wq-piece-dims { font-size: 1.35rem; font-weight: 800; line-height: 1.4; }
.wq-piece-dims small { margin-inline-start: 0.25rem; color: var(--ink-3); font-size: 0.8rem; font-weight: 400; }
.wq-piece-qty { font-size: 1rem; color: var(--ink-2); }
.wq-piece-qty b { color: var(--ink); font-size: 1.75rem; font-weight: 900; line-height: 1.2; }
.wq-piece-kg { color: var(--ink-3); font-size: 0.85rem; }
.wq-piece-shape { display: grid; place-items: center; min-block-size: 5.75rem; padding: 0.35rem; border-radius: var(--r-m); background: var(--surface-2); }
.wq-piece-shape .shape { display: block; inline-size: 100%; }
.wq-piece-shape .shape-svg { inline-size: 100%; block-size: auto; aspect-ratio: 160 / 96; color: var(--fill-deep); }
.wq-piece-shape .shape-dim { font-size: 13px; }
@media (max-width: 22rem) { .wq-piece { grid-template-columns: minmax(0, 1fr) 7.5rem; } }
/* «آماده شد» در گوشی پایینِ صفحه */
.wq-actbar { display: none; }
@media (max-width: 56rem) {
  .wq-actbar {
    display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 27;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px);
  }
  .wq-actbar form { margin: 0; }
  .wq-actbar .btn { inline-size: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3.1rem; font-size: 1.05rem; font-weight: 800; }
  .portal-main:has(.wq-actbar) { padding-block-end: 6rem; }
}
@media print { .wq-actbar { display: none !important; } }


/* ---------- پنلِ کارگر: «حساب من» — هفته واحدِ اصلی؛ درشت و خوانا در گوشی ---------- */
.wa-owed {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0.4rem 0 0;
  padding: 0.45rem 1rem; border-radius: var(--r-l); background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); color: var(--on-dark-2); font-size: var(--fs-s);
}
.wa-owed strong { color: #fff; font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.wa-owed.is-owed strong { color: var(--accent); }
.wa-owed small { color: var(--on-dark-3); font-size: var(--fs-s); }

.wa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.75rem; margin-block-end: 1rem; }
.wa-kinds > a { min-block-size: 2.25rem; }
.wa-nav {
  display: flex; align-items: center; gap: 0.25rem; flex: 1 1 20rem; max-inline-size: 34rem; padding: 0.25rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
}
.wa-arrow {
  display: inline-flex; align-items: center; gap: 0.15rem; flex: none; min-block-size: 2.75rem; padding-inline: 0.6rem 0.8rem;
  border-radius: var(--r-pill); color: var(--navy-700); font-size: var(--fs-s); font-weight: 700; text-decoration: none;
}
.wa-arrow:last-child { padding-inline: 0.8rem 0.6rem; }
a.wa-arrow:hover { background: var(--cyan-50); color: var(--navy-900); }
a.wa-arrow:focus-visible { outline: none; box-shadow: var(--ring); }
.wa-arrow.is-off { color: var(--ink-3); opacity: 0.4; }
.wa-nav-mid { display: grid; flex: 1 1 auto; justify-items: center; min-inline-size: 0; padding-block: 0.1rem; text-align: center; line-height: 1.45; }
.wa-nav-mid strong { font-size: 1.1rem; font-weight: 800; }
.wa-nav-mid span { color: var(--ink-3); font-size: var(--fs-xs); }
.wa-now { display: inline-flex; align-items: center; gap: 0.3rem; }
@media (max-width: 40rem) {
  .wa-kinds { inline-size: 100%; }
  .wa-kinds > a { flex: 1 1 0; justify-content: center; }
  .wa-nav { max-inline-size: none; }
}

.wa-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.wa-col { display: grid; gap: 1rem; min-inline-size: 0; }
@media (min-width: 64rem) { .wa-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }

/* چهار عدد: دستمزد پررنگ‌تر از بقیه */
.wa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.wa-stat { display: grid; align-content: start; gap: 0.15rem; min-inline-size: 0; padding: 0.7rem 0.85rem; border-radius: var(--r-m); background: var(--surface-2); }
.wa-stat > span { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.wa-stat strong { font-size: 1.45rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.wa-stat strong small { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; }
.wa-stat.is-main { background: var(--cyan-50); box-shadow: inset 0 0 0 1px var(--cyan-100); }
.wa-stat.is-main strong { color: var(--navy-900); }
@media (max-width: 40rem) {
  .wa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-stat strong { font-size: 1.3rem; }
}

/* روزهای هفته: ستونِ هر روز به اندازه‌ی کارکردش؛ امروز قاب دارد، روزهای نیامده کم‌رنگ */
.wa-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.wa-day {
  position: relative; display: grid; grid-template-rows: 1.15rem 5.5rem auto auto; justify-items: center; gap: 0.15rem;
  min-inline-size: 0; padding: 0.35rem 0 0.4rem; border-radius: var(--r-m);
}
.wa-day.is-today { background: var(--cyan-50); box-shadow: inset 0 0 0 1.5px var(--cyan-300); }
.wa-day-kg { color: var(--ink-2); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.wa-day-bar { position: relative; inline-size: min(68%, 2rem); border-radius: 0.45rem 0.45rem 0.25rem 0.25rem; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.wa-day-bar i { position: absolute; inset-inline: 0; inset-block-end: 0; border-radius: inherit; background: var(--fill); }
.wa-day.is-future .wa-day-bar { background: none; box-shadow: inset 0 0 0 1px var(--line); opacity: 0.55; }
.wa-day-name { color: var(--ink); font-size: 0.85rem; font-weight: 800; line-height: 1.2; }
.wa-day-date { color: var(--ink-3); font-size: 0.72rem; line-height: 1.2; }
.wa-day.is-future :is(.wa-day-name, .wa-day-date) { color: var(--ink-3); font-weight: 500; }
.wa-day-pay { position: absolute; inset-block-start: 1.45rem; inset-inline-end: 0.15rem; display: inline-grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background: var(--ok-50); color: var(--ok-700); }

/* مقایسه با دوره‌ی قبل: دو نوار هم‌مقیاس */
.wa-compare { display: grid; gap: 0.4rem; margin-block-start: 1rem; }
.wa-cmp { display: grid; grid-template-columns: minmax(6rem, 9.5rem) minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: var(--fs-s); }
.wa-cmp-name { color: var(--ink-2); font-weight: 600; }
.wa-cmp b { font-weight: 800; white-space: nowrap; }
.wa-cmp-track { block-size: 0.65rem; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.wa-cmp-track i { display: block; block-size: 100%; border-radius: inherit; background: var(--fill); }
.wa-cmp.is-prev .wa-cmp-track i { background: var(--line-strong); }
.wa-cmp.is-prev :is(.wa-cmp-name, b) { color: var(--ink-3); }
.wa-cmp-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.1rem 0 0; color: var(--ink-3); font-size: var(--fs-xs); }
.wa-delta { padding: 0.05rem 0.6rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.wa-delta.up { background: var(--ok-50); color: var(--ok-700); }
.wa-delta.down { background: var(--amber-50); color: var(--amber-700); }
@media (max-width: 30rem) { .wa-cmp { grid-template-columns: minmax(0, 1fr) auto; } .wa-cmp-track { grid-column: 1 / -1; grid-row: 2; } }

/* حسابِ دوره مثلِ رسید: مانده از قبل + دستمزد − پرداخت = مانده */
.wa-calc { display: grid; margin: 1rem 0 0; padding: 0.25rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.wa-calc > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; }
.wa-calc > div + div { border-block-start: 1px solid var(--line); }
.wa-calc dt { color: var(--ink-2); font-weight: 500; }
.wa-calc dt small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.wa-calc dd { margin: 0; font-weight: 700; white-space: nowrap; }
.wa-calc dd small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }
.wa-op { display: inline-block; inline-size: 1rem; color: var(--ink-3); font-weight: 800; text-align: center; }
.wa-calc > .is-total { border-block-start: 2px solid var(--ink-2); }
.wa-calc > .is-total :is(dt, dd) { color: var(--ink); font-size: 1.1rem; font-weight: 800; }

.wa-paid { display: flex; align-items: center; gap: 0.45rem; margin: 0.75rem 0 0; padding: 0.55rem 0.8rem; border-radius: var(--r-m); font-size: var(--fs-s); font-weight: 600; }
.wa-paid.is-ok { background: var(--ok-50); color: var(--ok-700); }
.wa-paid.is-due { background: var(--amber-50); color: var(--amber-700); }
.wa-paid.is-open { background: var(--surface-2); color: var(--ink-2); }

/* ریزِ دوره: روز به روز */
.wa-group + .wa-group { margin-block-start: 0.9rem; }
:is(.page, .portal-main) h3.wa-dayhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.4rem;
  color: var(--ink-2); font-size: var(--fs-s); font-weight: 600;
}
.wa-dayhead b { color: var(--ink); font-weight: 800; }
.wa-dayhead small { color: var(--ink-3); font-size: var(--fs-xs); }
.wa-lines { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.wa-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.75rem; padding: 0.65rem 0.85rem; }
.wa-line + .wa-line { border-block-start: 1px solid var(--line); }
.wa-line-icon { display: inline-grid; place-items: center; inline-size: 2.15rem; block-size: 2.15rem; border-radius: 50%; }
.wa-line.is-work .wa-line-icon { background: var(--cyan-50); color: var(--navy-700); }
.wa-line.is-pay .wa-line-icon { background: var(--ok-50); color: var(--ok-700); }
.wa-line-main { display: grid; min-inline-size: 0; }
.wa-line-main b { font-weight: 700; }
.wa-line-main small { color: var(--ink-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.wa-line-amt { display: grid; justify-items: end; text-align: end; white-space: nowrap; }
.wa-line-amt b { font-size: 1.1rem; font-weight: 800; }
.wa-line.is-pay .wa-line-amt b { color: var(--ok-700); }
.wa-line-amt small { color: var(--ink-3); font-size: 0.75rem; }

/* میلگردِ دوره */
.wa-rebar-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
.wa-rebar-stats > div { display: grid; padding: 0.55rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.wa-rebar-stats span { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.wa-rebar-stats b { font-size: 1.1rem; font-weight: 800; }
.wa-rebar-stats b small { font-size: var(--fs-xs); font-weight: 600; }
.wa-rebar-stats .is-bad b { color: var(--alert-600); }
.wa-handovers { display: grid; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.wa-handovers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; padding-block: 0.3rem; border-block-end: 1px solid var(--line); }
.wa-handovers li:last-child { border-block-end: 0; }
.wa-handovers span { color: var(--ink-3); }
.wa-handovers small { flex-basis: 100%; color: var(--ink-3); font-size: var(--fs-xs); }

/* هفته‌ها و ماه‌ها: هر کدام یک ردیفِ بازشدنی با وضعیتِ پرداخت */
.wa-plist { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.wa-prow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wage" "chip kg";
  align-items: center; gap: 0.2rem 0.75rem; padding: 0.65rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--ink); text-decoration: none;
}
.wa-prow:hover { border-color: var(--cyan-300); background: var(--cyan-50); color: var(--ink); }
.wa-prow:focus-visible { outline: none; box-shadow: var(--ring); }
.wa-prow.is-current { border-color: var(--fill); box-shadow: inset 0 0 0 1px var(--fill); background: var(--cyan-50); }
.wa-prow-name { grid-area: name; display: grid; min-inline-size: 0; line-height: 1.45; }
.wa-prow-name b { font-weight: 800; }
.wa-prow-name small { color: var(--ink-3); font-size: var(--fs-xs); }
.wa-prow-wage { grid-area: wage; justify-self: end; font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.wa-prow-wage small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }
.wa-prow-kg { grid-area: kg; justify-self: end; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.wa-prow .wa-chip { grid-area: chip; justify-self: start; }
.wa-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.6rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.wa-chip.is-ok { background: var(--ok-50); color: var(--ok-700); }
.wa-chip.is-due { background: var(--amber-50); color: var(--amber-700); }
.wa-chip.is-open { background: var(--cyan-50); color: var(--navy-800); }
.wa-chip.is-none { background: var(--surface-2); color: var(--ink-3); }
@media print { .wa-bar, .wa-periods { display: none !important; } }
/* ---------- طرحِ برگه‌ی کارگاه: کارت‌های انتخابی با نمای کوچک و نمادینِ هر طرح ---------- */
.sheet-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.sheet-template {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: center;
  padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); cursor: pointer;
}
.sheet-template:hover { border-color: var(--line-strong); }
.sheet-template:has(input:checked) { border-color: var(--fill); background: var(--cyan-50); box-shadow: inset 0 0 0 1px var(--fill); }
.sheet-template:has(input:focus-visible) { box-shadow: var(--ring); }
.sheet-template .form-check-input { position: absolute; inset-block-start: 0.55rem; inset-inline-end: 0.55rem; margin: 0; }
/* کاغذ همیشه سفید با خطِ تیره است، در پوسته‌ی تیره هم */
.st-thumb { display: block; inline-size: 3.5rem; color: #1D1A14; }
.st-thumb svg { display: block; inline-size: 100%; block-size: auto; }
.st-thumb .pg { fill: #fff; stroke: #C8BFA9; stroke-width: 1; }
.st-text { display: grid; gap: 0.1rem; min-inline-size: 0; padding-inline-end: 1.5rem; }
.st-text b { font-weight: 700; }
.st-text small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.6; }

/* ردیفِ سفارشِ محصولی که «خم اول» را می‌پرسد یک خانه‌ی عددی بیشتر دارد (اتکا: خم اول + سه اندازه + تعداد) و با
   ستون‌های ثابتِ یک‌دوازدهم در یک خط جا نمی‌شد؛ خانه‌های عددیِ همان ردیف جای مانده را بینِ خودشان قسمت می‌کنند. */
@media (min-width: 768px) {
  .item-row.has-bend .num-col { flex: 1 0 0%; inline-size: auto; max-inline-size: none; min-inline-size: 3.5rem; }
}
/* نوع محصولات: رفتارِ هر محصول در فرمِ سفارش */
.pt-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.25rem; font-weight: 400; }
.pt-flags .chip { font-size: var(--fs-xs); cursor: default; }
.pt-entry { margin: 0; padding: 0; border: 0; }
.pt-entry legend { float: none; inline-size: auto; margin-block-end: 0.375rem; font-size: inherit; }

/* ==========================================================================
   صفحه‌ی وضعیت (۴۰۴، ۴۰۳، ۵۰۰، …) — Views/Home/Status.cshtml
   همان دو نیمه‌ی صفحه‌ی ورود: نیمه‌ی روشن می‌گوید چه شد و راهِ ادامه را می‌دهد، در نیمه‌ی تیره خودِ کدِ وضعیت با
   میلگرد خم می‌شود. جسارتِ صفحه همان یک نقش است؛ بقیه آرام.
   ========================================================================== */

.status-brand { color: inherit; text-decoration: none; justify-self: start; border-radius: var(--r-m); }
.status-brand:hover .login-brand-text strong { color: var(--navy-700); }

/* نشانیِ بازشده: خودِ کاربر اغلب همان‌جا غلطِ تایپی‌اش را می‌بیند */
.status-path {
  display: grid; gap: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--line-strong); border-radius: var(--r-m);
  background: var(--surface-2);
}
.status-path span { color: var(--ink-3); font-size: var(--fs-xs); }
.status-path bdi {
  display: block; text-align: end;
  color: var(--ink); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-s);
  line-height: 1.7; overflow-wrap: anywhere;
}

.status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status-actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; }

.status-track { display: grid; gap: 0.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.status-track label { color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.status-track-row { display: flex; gap: 0.5rem; }
.status-track-row .form-control { flex: 1 1 auto; min-inline-size: 0; min-block-size: 2.75rem; text-align: center; }
.status-track-row .btn { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; }

/* برای پشتیبانی: کد، زمان و (در خطای برنامه) شناسه‌ی همان درخواست در لاگ */
.status-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.status-meta div { display: flex; gap: 0.375rem; min-inline-size: 0; }
.status-meta dt { font-weight: 400; }
.status-meta dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
/* شناسه را پشتیبانی عیناً در لاگ می‌گردد: رقمِ لاتین، نه گلیفِ فارسیِ قلمِ برنامه */
.status-meta bdi { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---- نیمه‌ی تیره ---- */
.status-art { grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 1.75rem; }
.status-stage { display: grid; place-items: center; inline-size: 100%; }
.status-code { inline-size: min(92%, 32rem); block-size: auto; overflow: visible; filter: drop-shadow(0 0 1.75rem rgb(234 179 8 / 0.3)); }
.status-code.is-hot { filter: drop-shadow(0 0 1.75rem rgb(240 138 36 / 0.34)); }
.sr-rebar { stroke: url(#srRebar); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.is-hot .sr-rebar { stroke: url(#srHot); }
.sr-ribs { stroke: rgb(0 0 0 / 0.16); stroke-width: 9; stroke-dasharray: 1.4 5.6; stroke-linejoin: round; }
/* میزِ خم‌کاری: خطِ زیرِ قطعه با هاشور، مثلِ نقشه */
.sr-bench path { stroke: rgb(255 255 255 / 0.24); stroke-width: 1.5; stroke-linecap: round; }
.status-caption { margin: 0; color: var(--on-dark-2); font-size: var(--fs-l); line-height: 1.9; text-align: center; text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  /* رقم‌ها یکی‌یکی از چپ خم می‌شوند؛ خطِ اندازه و جمله بعد از آخرین خم می‌آیند — یک لحظه، بی تکرار */
  .sr-rebar { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ls-bend 1s cubic-bezier(.55, .05, .25, 1) forwards; animation-delay: calc(var(--i, 0) * 0.42s + 0.25s); }
  .sr-ribs { opacity: 0; animation: ls-fade .5s ease forwards; animation-delay: calc(var(--i, 0) * 0.42s + 1.15s); }
  .status-art .ls-dim, .status-art .ls-label, .sr-bench { opacity: 0; animation: ls-fade .6s ease 1.9s forwards; }
  .status-caption { opacity: 0; animation: ls-fade .6s ease 2.1s forwards; }
}

/* گوشی: نیمه‌ی تیره نوارِ بالا می‌شود ولی کدِ خم‌شده می‌ماند — حرفِ اصلیِ همین صفحه است */
@media (max-width: 52rem) {
  .status-art { padding: 3.25rem 1.25rem 3rem; gap: 0.5rem; }
  .status-code { inline-size: min(78%, 17rem); }
  .status-caption { font-size: var(--fs-m); }
  .status-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- رنگ‌بندیِ صف (۲۵ مهر ۱۴۰۵) ----------
   کاربر: «رنگ‌بندیِ صفِ کارگاه یک‌دسته و گمراه‌کننده است». زرد/نارنجی/قرمز هر سه گرم بودند، «آماده» با زردِ برند
   (cyan-500) کشیده می‌شد و همه‌ی وضعیت‌های صف خاکستری بودند. حالا هر حالت یک رنگِ جدا و یک معنا دارد و همه‌جا یکی است
   (داشبورد، فهرستِ سفارش‌ها، ثبتِ ارسال، پنلِ کارگر):
     قرمز = دیر شده | بنفش = فوری | آبی = در صف | سبز = آماده | نارنجی = در انتظارِ تأیید | خاکستری = ارسال‌شده
   زردِ برند فقط برای دکمه و برند می‌ماند، نه برای حالت. */
:root {
  --q-blue: #2563EB;   --q-blue-text: #1D4ED8;   --q-blue-bg: #EAF1FF;   --q-blue-line: #C7D8FD;
  --q-violet: #7C3AED; --q-violet-text: #6D28D9; --q-violet-bg: #F3EEFF; --q-violet-line: #DCCDFB;
  --q-green: #1F9D55;  --q-green-text: var(--ok-700); --q-green-bg: var(--ok-50); --q-green-line: #BFE3CC;
  --q-red: var(--alert-600); --q-red-text: var(--alert-700); --q-red-bg: var(--alert-50); --q-red-line: var(--alert-200);
}
[data-bs-theme="dark"] {
  --q-blue: #5B8CFF;   --q-blue-text: #A9C3FF;   --q-blue-bg: rgb(91 140 255 / 0.16);  --q-blue-line: rgb(91 140 255 / 0.4);
  --q-violet: #A78BFA; --q-violet-text: #D4C4FF; --q-violet-bg: rgb(167 139 250 / 0.16); --q-violet-line: rgb(167 139 250 / 0.4);
  --q-green: #3FBF75;  --q-green-line: rgb(63 191 117 / 0.4);
}

/* بجِ وضعیت (OrderUi.BadgeClass) */
.badge.bs-pending  { background: var(--amber-50) !important; color: var(--amber-700) !important; box-shadow: inset 0 0 0 1px var(--amber-100); }
.badge.bs-queue    { background: var(--q-blue-bg) !important; color: var(--q-blue-text) !important; box-shadow: inset 0 0 0 1px var(--q-blue-line); }
.badge.bs-ready    { background: var(--q-green-bg) !important; color: var(--q-green-text) !important; box-shadow: inset 0 0 0 1px var(--q-green-line); }
.badge.bs-shipped  { background: var(--slate-50) !important; color: var(--slate-700) !important; box-shadow: none; }
.badge.bs-canceled { background: var(--surface-2) !important; color: var(--ink-3) !important; box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; }

/* بجِ اولویت: فوری پُر و بنفش (از دور دیده شود)، بالا کم‌رنگِ همان بنفش */
.badge.prio { font-weight: 700; }
.badge.prio-urgent { background: var(--q-violet) !important; color: #fff !important; box-shadow: none; }
[data-bs-theme="dark"] .badge.prio-urgent { color: #1B1030 !important; }
.badge.prio-high { background: var(--q-violet-bg) !important; color: var(--q-violet-text) !important; box-shadow: inset 0 0 0 1px var(--q-violet-line); }

/* دیرکرد: قرمز با ساعت، تا با «فوری» یکی دیده نشود */
.late-tag { align-items: center; gap: 0.25rem; background: var(--q-red-bg); color: var(--q-red-text); box-shadow: inset 0 0 0 1px var(--q-red-line); }

/* رنگِ هر حالت روی یک متغیر؛ لبه‌ی ردیف، کارت و برچسب همه از آن می‌خوانند */
.q-normal { --q: var(--q-blue);   --q-text: var(--q-blue-text);   --q-bg: var(--q-blue-bg);   --q-line: var(--q-blue-line); }
.q-urgent { --q: var(--q-violet); --q-text: var(--q-violet-text); --q-bg: var(--q-violet-bg); --q-line: var(--q-violet-line); }
.q-late   { --q: var(--q-red);    --q-text: var(--q-red-text);    --q-bg: var(--q-red-bg);    --q-line: var(--q-red-line); }
.q-ready  { --q: var(--q-green);  --q-text: var(--q-green-text);  --q-bg: var(--q-green-bg);  --q-line: var(--q-green-line); }

/* لبه‌ی کارت‌ها: پهن‌تر از قبل (۳px در تم روشن به چشم نمی‌آمد) و برای همه‌ی حالت‌ها، حتی «در صف» */
.o-item.q-normal::before, .o-item.q-urgent::before, .o-item.q-late::before, .o-item.q-ready::before,
.wq-card.q-normal::before, .wq-card.q-urgent::before, .wq-card.q-late::before, .wq-card.q-ready::before {
  inline-size: 4px; background: var(--q);
}
.wq-card.q-late, .wq-card.q-urgent { border-color: color-mix(in srgb, var(--q) 35%, var(--line)); }
.wq-card.q-ready { background: color-mix(in srgb, var(--q-bg) 55%, var(--surface)); }

/* جدولِ صفِ داشبورد: نوارِ کنارِ ردیف + برچسبِ حالت */
.q-table tr[class*="q-"] > td:first-child { border-inline-start: 4px solid var(--q); }
.q-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.625rem; border-radius: var(--r-pill);
  background: var(--q-bg); color: var(--q-text); box-shadow: inset 0 0 0 1px var(--q-line);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.9; white-space: nowrap;
}
.q-pill::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--q); flex: none; }

/* کدِ پیگیری در صف‌ها خنثی است تا زردش با رنگِ حالت قاطی نشود */
.code-chip.is-plain { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* راهنمای رنگ بالای هر صف */
.q-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; margin: 0 0 0.75rem; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--fs-xs); }
.q-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.q-legend li::before { content: ""; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 3px; background: var(--q); flex: none; }
.q-legend b { color: var(--ink-2); font-weight: 600; }
@media print { .q-legend { display: none; } }

/* ---------- مانده‌ی میلگردِ واگذاری (بالای کارگرها) و انبارِ خاموت — ۲۵ مهر ۱۴۰۵ ---------- */
.rebar-left { margin-block-end: 1rem; }
.rl-grid { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.rl-tile {
  display: grid; gap: 0.125rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
}
.rl-size { color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.rl-left { display: flex; align-items: baseline; gap: 0.25rem; color: var(--ink); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.rl-left small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }
.rl-bar { display: block; block-size: 0.375rem; margin-block: 0.375rem 0.125rem; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.rl-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--q-green); }
.rl-sub { color: var(--ink-3); font-size: var(--fs-xs); }
.rl-warn { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--amber-700); font-size: var(--fs-xs); font-weight: 600; }
.rl-tile.is-neg { border-color: var(--amber-100); background: var(--amber-50); }
.rl-tile.is-nosize { border-style: dashed; }

.depot-table tfoot td { border-block-start: 2px solid var(--line-strong); border-block-end: 0; }
.depot-est { color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }

/* ---------- قیمتِ میلگردِ خام از سایتِ آهن کاوه، زیرِ نوارِ قیمت (فقط دیدنی) — ۲۷ مهر ۱۴۰۵ ---------- */
.market-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
  margin-block-start: 0.5rem; padding: 0.5rem 0.875rem;
  border: 1px dashed var(--line-strong); border-radius: var(--r-l);
  background: var(--surface-2);
  color: var(--ink-2); font-size: var(--fs-xs);
}
.market-strip-label { flex: none; font-weight: 700; }
.market-strip-label a { color: var(--ink-3); font-weight: 500; text-decoration: none; }
.market-strip-list { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.market-strip-list li {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); white-space: nowrap;
}
.market-size { font-weight: 700; }
.market-size small { color: var(--ink-3); font-weight: 500; }
.market-strip-list .price-delta { margin: 0; }
.market-strip-time { flex: none; color: var(--ink-3); }