/* ==========================================================================
   کامپوننت‌ها — یک سیستم، نه چند سیستم موازی

   پیش از این هشت خانوادهٔ «کارت‌مانند» موازی وجود داشت (card, tile, feed,
   room-list, crm-panel, voice-card, task-item, board-card). این فایل همه را
   به چهار الگوی پایه تبدیل می‌کند:

     .card    — هر سطح محتوا
     .metric  — نمایش عدد شاخص
     .list    — ردیف‌های فشرده و قابل لمس (پرکاربردترین)
     .badge   — وضعیت

   قاعده: هیچ کامپوننتی مقدار خام رنگ/فاصله ندارد؛ همه از tokens.css.
   ========================================================================== */

/* ==========================================================================
   ۱) سطح — کارت
   ========================================================================== */
.card {
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  min-width: 0;
  overflow: clip;             /* گوشهٔ محتوای درونی را می‌برد */
}

.card--flat { box-shadow: none; }

/* کارتی که خودش تورفتگی دارد — بدون card__body */
.card--pad { padding: var(--s-5); }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--bw) solid var(--line-2);
  background: var(--surface-2);
  min-height: var(--h-tap);
}

.card__title {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.card__title .icon { color: var(--ink-3); }


.card__body { padding: var(--s-5); }
.card__body--tight { padding: var(--s-4); }

.card__foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-top: var(--bw) solid var(--line-2);
  background: var(--surface-2);
}

/* سربرگ بخش بدون کارت — سبک‌تر از card__head */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  min-width: 0;
}
.section-head h2,
.section-head h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-semi);
}
.section-head__count {
  font-size: var(--t-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.section-head__link {
  margin-inline-start: auto;
  font-size: var(--t-small);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: none;
  padding: var(--s-1) 0;
}
@media (hover: hover) {
  .section-head__link:hover { color: var(--red); }
}

/* ==========================================================================
   ۲) عدد شاخص — metric
   ========================================================================== */
.metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.metric__label {
  font-size: var(--t-caption);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: var(--w-medium);
}
.metric__label .icon { width: 0.8125rem; height: 0.8125rem; color: var(--ink-4); }

.metric__value {
  font-size: var(--t-metric);
  font-weight: var(--w-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.metric__unit {
  font-size: var(--t-caption);
  font-weight: var(--w-normal);
  color: var(--ink-3);
  letter-spacing: 0;
}

.metric__hint {
  font-size: var(--t-caption);
  color: var(--ink-3);
}

.metric--hero .metric__value { font-size: var(--t-metric-lg); }
.metric--sm .metric__value { font-size: var(--t-h2); }

.metric--red .metric__value { color: var(--red); }
.metric--green .metric__value { color: var(--green); }
.metric--amber .metric__value { color: var(--amber); }

/* تغییر نسبت به دورهٔ قبل — با فلش، پس فقط رنگ نیست */
.metric__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.metric__delta--up { color: var(--green); }
.metric__delta--down { color: var(--red); }

/* کارت شاخص آماده — کاشی */
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  min-width: 0;
  min-height: 4.75rem;
  justify-content: center;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.tile:active { background: var(--paper-2); }
@media (hover: hover) {
  a.tile:hover, button.tile:hover { border-color: var(--ink-4); }
}
.tile__label {
  font-size: var(--t-caption);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.tile__label .icon { width: 0.8125rem; height: 0.8125rem; color: var(--ink-4); }
.tile__value {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tile__value--red { color: var(--red); }
.tile__value--green { color: var(--green); }
.tile__value--amber { color: var(--amber); }
.tile__hint { font-size: var(--t-caption); color: var(--ink-3); }

/* نوار نسبت چندبخشی — جای سه عدد مجزا، یک نوار خوانا */
.meter {
  display: flex;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  overflow: hidden;
}
.meter__seg { height: 100%; transition: width var(--d-slow) var(--ease); }
.meter__seg--green { background: var(--green); }
.meter__seg--blue { background: var(--blue); }
.meter__seg--amber { background: var(--amber); }
.meter__seg--red { background: var(--red); }

/* راهنمای نوار — نقطهٔ رنگی + برچسب + عدد */
.meter-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.meter-key__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}
.meter-key__item::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--swatch, var(--ink-4));
  flex: none;
}
.meter-key__item b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: var(--w-semi);
}

/* نوار پیشرفت ساده */
.bar {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  overflow: hidden;
}
.bar--lg { height: 8px; }
.bar__fill {
  height: 100%;
  background: var(--ink-3);
  border-radius: var(--r-full);
  transition: width var(--d-slow) var(--ease);
}
.bar__fill--green { background: var(--green); }
.bar__fill--amber { background: var(--amber); }
.bar__fill--red { background: var(--red); }
.bar__fill--blue { background: var(--blue); }
.bar__fill--neutral { background: var(--ink-3); }

/* ردیف نوار نسبت — برچسب/عدد بالا، نوار پایین */
.progress { min-width: 0; }
.progress + .progress { margin-top: var(--s-3); }
.progress__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-caption);
  margin-bottom: 0.2rem;
  min-width: 0;
}
.progress__head > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress__value {
  margin-inline-start: auto;
  color: var(--ink-3);
  white-space: nowrap;
  flex: none;
}

/* ==========================================================================
   ۳) فهرست — پرکاربردترین الگوی محیط کار
   ========================================================================== */
.list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.list__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--bw) solid var(--line-2);
  min-height: var(--h-tap);
  min-width: 0;
  transition: background var(--d-fast) var(--ease);
}
.list__item:last-child { border-bottom: none; }
.list__item:active { background: var(--paper-2); }
/* اعلان خوانده‌نشده — پس‌زمینهٔ نرم به‌عنوان نشانهٔ دوم، همراه نشان «تازه» */
.list__item.is-unread { background: var(--red-bg); }
/* ردیف تیک‌خورده: JS کلاس is-done را روی [data-tick-row] می‌گذارد.
   بدون این قاعده، تیک سبز می‌شد ولی خودِ ردیف بی‌تغییر می‌ماند. */
.list__item.is-done .list__title { color: var(--ink-3); text-decoration: line-through; }
.list__item.is-done .list__amount,
.list__item.is-done .list__meta { opacity: 0.65; }
/* ردیف بدون تورفتگی افقی — وقتی فهرست داخل card__body است */
.list--flush .list__item { padding-inline: 0; }
@media (hover: hover) {
  a.list__item:hover, button.list__item:hover, .list__item--link:hover { background: var(--paper-2); }
}

/* آیتم دو سطری با شرح */
.list__item--stacked { align-items: flex-start; }
.list__item--stacked .list__lead { margin-top: 0.1rem; }

/* نشانگر سمت شروع: آیکون، شماره یا آواتار */
.list__lead {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  flex: none;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.list__lead--round { border-radius: var(--r-full); }
.list__lead--sm { width: 1.75rem; height: 1.75rem; }
.list__lead--red { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
.list__lead--green,
.list__lead--success { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.list__lead--amber { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.list__lead--blue,
.list__lead--info { border-color: var(--blue-line); background: var(--blue-bg); color: var(--blue); }
.list__lead--neutral { border-color: var(--line); background: var(--paper-2); color: var(--ink-2); }

.list__main { min-width: 0; flex: 1; }

.list__title {
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list__title--wrap { white-space: normal; }

.list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-top: 0.1rem;
  min-width: 0;
}
.list__meta > * { display: inline-flex; align-items: center; gap: 0.2rem; }
.list__meta .icon { width: 0.8125rem; height: 0.8125rem; }
.list__meta .is-late { color: var(--red); font-weight: var(--w-medium); }

.list__desc {
  font-size: var(--t-caption);
  color: var(--ink-2);
  line-height: var(--lh-snug);
  margin-top: 0.15rem;
}

/* سمت پایان: مبلغ، وضعیت، فلش */
.list__end {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-inline-start: auto;
}
.list__end .icon { color: var(--ink-4); }

.list__amount {
  font-size: var(--t-body-sm);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: end;
}
.list__amount--red { color: var(--red); }
.list__amount--green { color: var(--green); }
.list__amount small {
  font-size: var(--t-caption);
  font-weight: var(--w-normal);
  color: var(--ink-3);
  margin-inline-start: 0.15rem;
}

/* در نمایش باریک، بخش پایان به سطر بعد می‌رود — نه اسکرول افقی */
@media (max-width: 480px) {
  .list__item--fold {
    flex-wrap: wrap;
    row-gap: var(--s-2);
  }
  .list__item--fold .list__end {
    margin-inline-start: calc(2rem + var(--s-3));
    width: 100%;
    justify-content: flex-start;
  }
}

/* دکمهٔ تیک سریع در ردیف */
.tick {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  border: var(--bw-2) solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: none;
  color: transparent;
  position: relative;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.tick .icon { width: 0.8125rem; height: 0.8125rem; stroke-width: 3; }
.tick.is-on { background: var(--green); border-color: var(--green); color: #fff; }
/* هدف لمسی بزرگ‌تر از ظاهر */
.tick::after {
  content: "";
  position: absolute;
  inset: -0.6rem;
}

/* ردیف چک‌لیست تیک‌خورده (صفحهٔ کار) — JS کلاس is-done را روی دکمه می‌گذارد */
.is-done > .t-body-sm { color: var(--ink-3); text-decoration: line-through; }

/* ==========================================================================
   ۴) وضعیت — badge / chip / pill
   ========================================================================== */

/* نشان آرام: نقطهٔ رنگی + متن. پیش‌فرض محصول. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1.4;
}
.badge::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--r-full);
  background: var(--dot, var(--ink-4));
  flex: none;
}
.badge--red { --dot: var(--red); color: var(--red-ink); }
.badge--green { --dot: var(--green); color: var(--green-ink); }
.badge--amber { --dot: var(--amber); color: var(--amber-ink); }
.badge--blue { --dot: var(--blue); color: var(--blue-ink); }
.badge--neutral { --dot: var(--ink-4); color: var(--ink-2); }

/* نشان پرکنتراست — فقط برای وضعیت‌های نهایی و مهم */
.badge--solid {
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--tone-bg);
  border: var(--bw) solid var(--tone-line);
  color: var(--tone-fg);
}
.badge--solid::before { display: none; }
.badge--solid.badge--red { --tone-bg: var(--red-bg); --tone-line: var(--red-line); --tone-fg: var(--red-ink); }
.badge--solid.badge--green { --tone-bg: var(--green-bg); --tone-line: var(--green-line); --tone-fg: var(--green-ink); }
.badge--solid.badge--amber { --tone-bg: var(--amber-bg); --tone-line: var(--amber-line); --tone-fg: var(--amber-ink); }
.badge--solid.badge--blue { --tone-bg: var(--blue-bg); --tone-line: var(--blue-line); --tone-fg: var(--blue-ink); }

.badge__note {
  font-size: var(--t-caption);
  font-weight: var(--w-normal);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* شمارندهٔ گرد */
.pill {
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--w-bold);
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.pill--quiet { background: var(--paper-3); color: var(--ink-2); }

/* چیپ فیلتر */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 var(--s-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.chip .icon { width: 0.875rem; height: 0.875rem; }
.chip b { font-variant-numeric: tabular-nums; font-weight: var(--w-semi); }
@media (hover: hover) { .chip:hover { border-color: var(--ink-4); color: var(--ink); } }
.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip.is-on b { color: var(--paper); }
.chip--red.is-on { background: var(--red); border-color: var(--red); }
/* مرحلهٔ نرسیده در مسیر وضعیت — کم‌رنگ، نه غیرفعال */
.chip.is-off { color: var(--ink-4); border-style: dashed; }

/* آواتار */
.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  background: var(--paper-3);
  color: var(--ink-2);
  border: var(--bw) solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  flex: none;
  overflow: hidden;
}
.avatar--sm { width: 1.625rem; height: 1.625rem; font-size: 0.625rem; }
.avatar--lg { width: 2.75rem; height: 2.75rem; font-size: var(--t-body-sm); }
.avatar--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================================
   ۵) دکمه
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--h-control);
  padding: 0 var(--s-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
  white-space: nowrap;
  position: relative;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease);
}
.btn .icon { width: 0.9375rem; height: 0.9375rem; }

/* هدف لمسی ۴۴px بدون بزرگ‌کردن ظاهر */
.btn::after { content: ""; position: absolute; inset: -3px; }

.btn:active { background: var(--paper-2); }
@media (hover: hover) { .btn:hover { border-color: var(--ink-4); } }

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: var(--e-1);
}
.btn--primary:active { background: var(--red-ink); }
@media (hover: hover) { .btn--primary:hover { background: var(--red-ink); border-color: var(--red-ink); box-shadow: var(--e-2); } }

.btn--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (hover: hover) { .btn--dark:hover { background: var(--ink-2); border-color: var(--ink-2); } }

.btn--ghost { background: transparent; border-color: var(--line); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
@media (hover: hover) { .btn--quiet:hover { background: var(--paper-2); color: var(--ink); } }

.btn--danger { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
@media (hover: hover) { .btn--danger:hover { border-color: var(--red); } }

.btn--sm { height: 2rem; padding: 0 var(--s-3); font-size: var(--t-small); }
.btn--lg { height: var(--h-control-lg); padding: 0 var(--s-5); font-size: var(--t-body); }
.btn--block { width: 100%; }


.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  animation: spin 0.6s linear infinite;
  color: var(--ink-2);
}
.btn--primary.is-loading::before,
.btn--dark.is-loading::before { color: #fff; }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* دکمهٔ آیکونی سبک نوار بالا */
.iconbtn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  position: relative;
  flex: none;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.iconbtn .icon { width: 1.125rem; height: 1.125rem; }
.iconbtn--sm { width: 1.75rem; height: 1.75rem; }
.iconbtn--sm .icon { width: 0.875rem; height: 0.875rem; }
.iconbtn:active { background: var(--paper-2); }
@media (hover: hover) { .iconbtn:hover { background: var(--paper-2); color: var(--ink); } }
.iconbtn__pill { position: absolute; top: 0.1rem; inset-inline-end: 0.1rem; }

/* کنترل بخش‌بندی‌شده — جای تب‌های شبیه دکمه */
.segment {
  display: inline-flex;
  padding: 2px;
  background: var(--paper-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  gap: 2px;
}
.segment__item {
  height: 1.875rem;
  padding: 0 var(--s-3);
  border-radius: calc(var(--r-sm) - 1px);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.segment__item.is-on {
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--w-semi);
  box-shadow: var(--e-1);
}

/* ==========================================================================
   ۶) فرم
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.field__label {
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.field__label .req { color: var(--red); }
.field__hint { font-size: var(--t-caption); color: var(--ink-3); }

/* خطا: آیکون + متن، نه فقط رنگ */
.field__error {
  display: none;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--red);
}
.field.has-error .field__error { display: flex; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--red); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--h-control-lg);
  padding: 0 var(--s-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-lead);        /* ۱۶px تا سافاری موبایل زوم نکند */
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-4); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ring-line);
  box-shadow: var(--ring);
}

.input[disabled],
.select[disabled],
.textarea[disabled] {
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

.textarea {
  padding: var(--s-3);
  min-height: 5rem;
  line-height: var(--lh-snug);
  resize: vertical;
}

/* فلش select: <select> نمی‌تواند ::after داشته باشد و mask روی خودش
   متن را هم می‌پوشاند. پس تنها راه امن، background-image است — و چون رنگ
   داخل data-URI ثابت است، تم تیره یک قاعدهٔ دوم لازم دارد.
   این تنها استثنای پذیرفته‌شدهٔ «رنگ خام بیرون tokens.css» است. */
.select {
  appearance: none;
  padding-inline-end: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7663' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--s-3) center;
  background-size: 1rem;
  cursor: pointer;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23928b79' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ورودی کد یک‌بارمصرف — رقم‌ها با فاصله و وسط‌چین تا خوانا باشند */
.input--otp {
  letter-spacing: 0.4em;
  text-align: center;
  font-size: var(--t-h2);
  font-variant-numeric: tabular-nums;
}

.input-icon { position: relative; }
.input-icon > .icon {
  position: absolute;
  inset-inline-start: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}
.input-icon .input { padding-inline-start: 2.25rem; }

/* شبکهٔ فرم — خودتنظیم، بدون media query */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s-4);
}
.form-grid__full { grid-column: 1 / -1; }

/* ردیف مرحلهٔ پرداخت در فرم ساخت روم: شماره + عنوان + مبلغ + سرسید.
   در موبایل عنوان تمام‌عرض می‌شود و مبلغ/سرسید کنار هم می‌مانند. */
.stage-fields {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
  min-width: 0;
}
.stage-fields__no { margin-top: 1.6rem; }
.stage-fields > .field { flex: 1 1 10rem; min-width: 0; }
.stage-fields > .field--sm { flex: 0 1 8rem; }


/* چک‌باکس و رادیو */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  min-height: var(--h-tap);
  padding: var(--s-1) 0;
}
.check input {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  border: var(--bw-2) solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  flex: none;
  position: relative;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.check input[type="radio"] { border-radius: var(--r-full); }
.check input:checked { background: var(--ink); border-color: var(--ink); }
/* تیک با mask کشیده می‌شود نه با تصویر رنگی — تا رنگش از توکن بیاید و
   در تم تیره خودکار عوض شود. (نسخهٔ قبلی سفیدِ ثابت داشت.) */
.check input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tick-mark);
  -webkit-mask: no-repeat center/0.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
  mask: no-repeat center/0.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}
.check input[type="radio"]:checked::after {
  background: var(--paper);
  inset: 0.2rem;
  border-radius: var(--r-full);
}
.check input:focus-visible { box-shadow: var(--ring); }
.check__text { min-width: 0; }
.check__text b { display: block; font-size: var(--t-body-sm); font-weight: var(--w-semi); }
.check__text span { font-size: var(--t-caption); color: var(--ink-3); }

/* سوییچ */
.switch {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  min-height: var(--h-tap);
  padding: var(--s-1) 0;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  background: var(--paper-3);
  border: var(--bw) solid var(--line);
  position: relative;
  flex: none;
  margin-top: 0.05rem;
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  inset-inline-start: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--e-1);
  transition: transform var(--d-base) var(--ease);
}
.switch input:checked + .switch__track {
  background: var(--green);
  border-color: var(--green);
}
/* در RTL دستهٔ سوییچ به چپ می‌رود */
.switch input:checked + .switch__track::after { transform: translateX(-1rem); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* ==========================================================================
   ۷) جدول — در موبایل به کارت تبدیل می‌شود
   ========================================================================== */
.table-wrap {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  font-size: var(--t-body-sm);
}

.table th {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-3);
  text-align: start;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table td {
  padding: var(--s-4) var(--s-4);
  border-bottom: var(--bw) solid var(--line-2);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) { .table tbody tr:hover { background: var(--paper-2); } }

.table th.num,
.table td.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* موبایل: هر ردیف یک کارت. نیازمند data-label روی td */
@media (max-width: 780px) {
  .table-wrap--cards {
    border: none;
    background: transparent;
    overflow: visible;
  }
  .table-wrap--cards .table { display: block; }
  .table-wrap--cards thead { display: none; }
  .table-wrap--cards tbody { display: flex; flex-direction: column; gap: var(--s-4); }
  .table-wrap--cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .table-wrap--cards td {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: 0;
    border: none;
    font-size: var(--t-body-sm);
  }
  .table-wrap--cards td.num { text-align: start; }
  .table-wrap--cards td[data-label]::before {
    content: attr(data-label);
    font-size: var(--t-caption);
    color: var(--ink-3);
    flex: none;
  }
  /* ستون اصلی تمام عرض، بدون برچسب */
  .table-wrap--cards td[data-main] {
    grid-column: 1 / -1;
    font-weight: var(--w-semi);
    padding-bottom: var(--s-2);
    border-bottom: var(--bw) dashed var(--line-2);
  }
  .table-wrap--cards td[data-main]::before { content: none; }
  .table-wrap--cards td[data-end] { grid-column: 1 / -1; margin-top: var(--s-1); }
  .table-wrap--cards td[data-end]::before { content: none; }
}

/* ==========================================================================
   ۸) تب
   ========================================================================== */
.tabs {
  display: flex;
  gap: var(--s-5);
  border-bottom: var(--bw) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--s-3) 0;
  font-size: var(--t-body-sm);
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
@media (hover: hover) { .tabs__item:hover { color: var(--ink); } }
.tabs__item.is-on {
  color: var(--ink);
  font-weight: var(--w-semi);
  border-bottom-color: var(--ink);
}
.tabs__count {
  font-size: var(--t-caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ۹) حالت‌ها — خالی، بارگذاری، خطا، موفقیت
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-5);
  text-align: center;
}
.empty__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  border: var(--bw) dashed var(--line);
  background: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--ink-4);
}
.empty__icon .icon { width: 1.25rem; height: 1.25rem; }
.empty__title { font-size: var(--t-body); font-weight: var(--w-semi); }
.empty__body { font-size: var(--t-body-sm); color: var(--ink-3); max-width: 24rem; line-height: var(--lh-snug); }

/* حالت خالی درون فهرست */
.list__empty {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  font-size: var(--t-body-sm);
  color: var(--ink-3);
}

/* اسکلت بارگذاری */
.skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 50%, var(--paper-2) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-xs);
  height: 0.75rem;
}
.skeleton--line { width: 100%; }
.skeleton--short { width: 38%; }

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.spinner {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--line);
  border-top-color: var(--red);
  border-radius: var(--r-full);
  animation: spin 0.6s linear infinite;
  flex: none;
}

/* پیام درون‌صفحه‌ای */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--tone-line);
  border-inline-start: 3px solid var(--tone-fg);
  border-radius: var(--r-sm);
  background: var(--tone-bg);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  --tone-line: var(--line);
  --tone-bg: var(--paper-2);
  --tone-fg: var(--ink-3);
}
.note > .icon { color: var(--tone-fg); margin-top: 0.1rem; flex: none; }
.note__body { min-width: 0; flex: 1; }
.note b { display: block; font-weight: var(--w-semi); margin-bottom: 0.1rem; }
.note--red { --tone-line: var(--red-line); --tone-bg: var(--red-bg); --tone-fg: var(--red); }
.note--green { --tone-line: var(--green-line); --tone-bg: var(--green-bg); --tone-fg: var(--green); }
.note--amber { --tone-line: var(--amber-line); --tone-bg: var(--amber-bg); --tone-fg: var(--amber); }
.note--blue { --tone-line: var(--blue-line); --tone-bg: var(--blue-bg); --tone-fg: var(--blue); }

/* نقل‌قول آرام */
.hint {
  border-inline-start: 2px solid var(--line);
  padding: var(--s-1) var(--s-4);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}
.hint b { color: var(--ink); font-weight: var(--w-semi); }

/* ==========================================================================
   ۱۰) روپوش — شیت پایین‌آمدنی در موبایل، مودال میانی در دسکتاپ
   ========================================================================== */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
}
.sheet.is-open { display: block; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-deep);
  animation: fade var(--d-base) var(--ease);
}
@supports (backdrop-filter: blur(2px)) {
  .sheet__scrim { backdrop-filter: blur(3px); }
}

.sheet__panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 44rem);
  background: var(--surface);
  border-top: var(--bw) solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--e-4);
  animation: sheet-up var(--d-slow) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.sheet__grab {
  width: 2.25rem;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--line);
  margin: var(--s-3) auto var(--s-1);
  flex: none;
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-3);
  border-bottom: var(--bw) solid var(--line-2);
  flex: none;
}
.sheet__head h2, .sheet__head h3 { font-size: var(--t-h3); }
.sheet__head p { font-size: var(--t-caption); color: var(--ink-3); }

.sheet__close {
  margin-inline-start: auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  background: var(--paper-2);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  flex: none;
}

.sheet__body {
  padding: var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.sheet__foot {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-top: var(--bw) solid var(--line-2);
  background: var(--surface-2);
  flex: none;
}
.sheet__foot .btn { flex: 1; }

/* دسکتاپ: مودال میانی */
@media (min-width: 900px) {
  .sheet { display: none; align-items: center; justify-content: center; padding: var(--s-6); }
  .sheet.is-open { display: flex; }
  .sheet__panel {
    position: relative;
    inset: auto;
    width: min(34rem, 100%);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-lg);
    animation: pop var(--d-base) var(--ease-out);
    max-height: 86dvh;
    padding-bottom: 0;
  }
  .sheet__grab { display: none; }
  .sheet__foot { justify-content: flex-end; }
  .sheet__foot .btn { flex: none; }
}

/* ==========================================================================
   ۱۱) توست
   ========================================================================== */
.toasts {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--toast-bottom, var(--s-5)) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-4);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(28rem, 100%);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  box-shadow: var(--e-3);
  animation: toast-in var(--d-slow) var(--ease-out);
  pointer-events: auto;
}
.toast .icon { flex: none; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: var(--d-base) var(--ease); }
.toast--green { background: var(--green-ink); }
.toast--red { background: var(--red-ink); }
.toast--amber { background: var(--amber-ink); }
.toast--blue { background: var(--blue-ink); }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* ==========================================================================
   ۱۲) خط زمانی
   ========================================================================== */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

.timeline__item {
  display: flex;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  position: relative;
}
.timeline__item:last-child { padding-bottom: 0; }

/* خط اتصال */
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.96875rem;
  top: 2rem;
  bottom: 0;
  width: var(--bw);
  background: var(--line);
}

.timeline__mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  border: var(--bw) solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-3);
  z-index: 1;
}
.timeline__mark .icon { width: 0.875rem; height: 0.875rem; }
.timeline__mark--red { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
.timeline__mark--green { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.timeline__mark--amber { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.timeline__mark--blue { border-color: var(--blue-line); background: var(--blue-bg); color: var(--blue); }
.timeline__mark--neutral { border-color: var(--line); background: var(--paper-2); color: var(--ink-3); }

.timeline__body { min-width: 0; flex: 1; padding-top: 0.2rem; }
.timeline__title { font-size: var(--t-body-sm); font-weight: var(--w-semi); }
.timeline__desc { font-size: var(--t-caption); color: var(--ink-2); margin-top: 0.1rem; line-height: var(--lh-snug); }
.timeline__when {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-top: 0.2rem;
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* ==========================================================================
   ۱۳) نمودار
   ========================================================================== */
.chart { width: 100%; min-height: 8rem; }
.chart canvas { display: block; width: 100%; }

.chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-caption);
  color: var(--ink-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--bw) dashed var(--line-2);
}
.chart-key__item { display: inline-flex; align-items: center; gap: 0.3rem; }
.chart-key__dot { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex: none; }

/* ==========================================================================
   ۱۴) دراپ‌داون
   ========================================================================== */
.menu-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + var(--s-1));
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(16rem, calc(100vw - var(--s-8)));
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  padding: var(--s-2);
  animation: pop var(--d-fast) var(--ease-out);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  min-height: 2.375rem;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.menu__item .icon { color: var(--ink-4); }
@media (hover: hover) { .menu__item:hover { background: var(--paper-2); color: var(--ink); } }
.menu__item:active { background: var(--paper-2); }
.menu__sep { height: var(--bw); background: var(--line-2); margin: var(--s-2) 0; }
.menu__label { font-size: var(--t-caption); color: var(--ink-3); padding: var(--s-2) var(--s-3) var(--s-1); }

/* سربرگ منو — هویت کاربر بالای فهرست */
.menu__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: var(--bw) solid var(--line-2);
  margin-bottom: var(--s-2);
  min-width: 0;
}
.menu__head b {
  display: block;
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
}

/* ==========================================================================
   ۱۵) آکاردئون
   ========================================================================== */
.accordion {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: clip;
}
.accordion + .accordion { margin-top: var(--s-2); }

.accordion > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
  cursor: pointer;
  min-height: var(--h-tap);
  list-style: none;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary .icon { color: var(--ink-3); }
.accordion__chev {
  margin-inline-start: auto;
  transition: transform var(--d-base) var(--ease);
  flex: none;
}
.accordion[open] .accordion__chev { transform: rotate(180deg); }
.accordion__body {
  padding: 0 var(--s-4) var(--s-4);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  line-height: var(--lh-normal);
}

/* بخش جمع‌شدنی بدون کادر — برای داشبورد */
.fold > summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--bw) solid var(--line);
  cursor: pointer;
  list-style: none;
  min-height: var(--h-tap);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2, .fold > summary h3 { font-size: var(--t-h3); font-weight: var(--w-semi); }
.fold__body { padding-top: var(--s-4); }

/* ==========================================================================
   ۱۶) صفحه‌بندی
   ========================================================================== */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  flex-wrap: wrap;
}
.pager__item {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--s-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  display: inline-grid;
  place-items: center;
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .pager__item:hover { border-color: var(--ink-4); color: var(--ink); } }
.pager__item.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pager__item.is-off { opacity: 0.4; pointer-events: none; }
.pager__info { font-size: var(--t-caption); color: var(--ink-3); }

/* ==========================================================================
   ۱۷) نوار ابزار
   ========================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-width: 0;
}
.toolbar__search { flex: 1 1 15rem; min-width: 0; max-width: 24rem; }
.toolbar__count {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-inline-start: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .toolbar__search { flex-basis: 100%; max-width: none; order: -1; }
  .toolbar__count { order: 99; margin-inline-start: 0; }
}

/* ==========================================================================
   ۱۸) انیمیشن‌های کوچک مشترک
   ========================================================================== */
.flash { animation: flash-bg 1.4s var(--ease); }
@keyframes flash-bg {
  from { background: var(--amber-bg); }
  to { background: transparent; }
}

.dot-live {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--red);
  flex: none;
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--red);
  vertical-align: -2px;
  margin-inline-start: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   ۱۹) کارت نمودار

   این چهار الگو پیش‌تر در pages/dashboard.css بودند، ولی کامپوننت‌های مشترک
   (components/ui/chart.html، components/cards/room_tile.html،
   components/tasks/ai_suggestion.html) از آن‌ها استفاده می‌کنند — پس هر صفحه‌ای
   که dashboard.css را لینک نمی‌کرد بی‌استایل رندر می‌شد. اینجا جای درستشان است.
   ========================================================================== */
.chart-card {
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  min-width: 0;
}
.chart-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  min-width: 0;
}
.chart-card__head h3 {
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
}
.chart-card__note {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-inline-start: auto;
  white-space: nowrap;
  flex: none;
}

/* ==========================================================================
   ۲۰) کارت هشدار — یک خط، قابل کلیک، همیشه با آیکون
   ========================================================================== */
.alert {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--red-line);
  border-inline-start: 3px solid var(--red);
  border-radius: var(--r-md);
  background: var(--red-bg);
  min-height: var(--h-tap);
  min-width: 0;
  transition: background var(--d-fast) var(--ease);
}
.alert:active { background: var(--red-line); }
.alert > .icon { color: var(--red); flex: none; }
.alert__body { min-width: 0; flex: 1; }
.alert__title { font-size: var(--t-body-sm); font-weight: var(--w-semi); color: var(--red-ink); }
.alert__desc { font-size: var(--t-caption); color: var(--ink-2); margin-top: 0.1rem; }
.alert__go { color: var(--red); flex: none; }

.alert--amber {
  border-color: var(--amber-line);
  border-inline-start-color: var(--amber);
  background: var(--amber-bg);
}
.alert--amber:active { background: var(--amber-line); }
.alert--amber > .icon,
.alert--amber .alert__go { color: var(--amber); }
.alert--amber .alert__title { color: var(--amber-ink); }

.alert--green {
  border-color: var(--green-line);
  border-inline-start-color: var(--green);
  background: var(--green-bg);
}
.alert--green:active { background: var(--green-line); }
.alert--green > .icon,
.alert--green .alert__go { color: var(--green); }
.alert--green .alert__title { color: var(--green-ink); }

.alert--blue {
  border-color: var(--blue-line);
  border-inline-start-color: var(--blue);
  background: var(--blue-bg);
}
.alert--blue:active { background: var(--blue-line); }
.alert--blue > .icon,
.alert--blue .alert__go { color: var(--blue); }
.alert--blue .alert__title { color: var(--blue-ink); }

/* ==========================================================================
   ۲۱) کارت تأیید — پیشنهاد موتور فهم که منتظر تصمیم کاربر است
   ========================================================================== */
.approve {
  border: var(--bw) solid var(--amber-line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: clip;
  min-width: 0;
}
.approve.is-done { border-color: var(--green-line); }

.approve__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--amber-bg);
  border-bottom: var(--bw) solid var(--amber-line);
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--amber-ink);
  min-height: 2.25rem;
}
.approve__head .icon { flex: none; }
.approve.is-done .approve__head {
  background: var(--green-bg);
  border-color: var(--green-line);
  color: var(--green-ink);
}
.approve__conf {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.approve__body { padding: var(--s-4); }

.approve__quote {
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  border-inline-start: 2px solid var(--line);
  padding-inline-start: var(--s-3);
  margin-bottom: var(--s-3);
  line-height: var(--lh-snug);
}

/* فهرست کنش‌ها — نقطه‌گذاری با ::before، بدون <ul> */
.approve__lines { display: flex; flex-direction: column; gap: var(--s-2); }
.approve__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
}
.approve__line::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-full);
  background: var(--ink-4);
  flex: none;
  transform: translateY(-1px);
}

.approve__foot {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: var(--bw) solid var(--line-2);
  background: var(--surface-2);
}
.approve__foot .btn { flex: 1; }
@media (min-width: 700px) {
  .approve__foot .btn { flex: none; }
}

/* ==========================================================================
   ۲۲) کاشی روم — کارت خلاصهٔ یک روم
   ========================================================================== */
.room-tile {
  display: block;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  min-width: 0;
  transition: border-color var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.room-tile:active { background: var(--paper-2); }
@media (hover: hover) {
  .room-tile:hover { border-color: var(--ink-4); box-shadow: var(--e-2); }
}

.room-tile__top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: 0.15rem;
}
.room-tile__name {
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-tile__who { font-size: var(--t-caption); color: var(--ink-3); }
.room-tile__bar { margin: var(--s-3) 0 var(--s-2); }

.room-tile__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.room-tile__nums b {
  color: var(--ink);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.room-tile__nums .is-due b { color: var(--red); }

.room-tile__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--bw) dashed var(--line-2);
}

/* ==========================================================================
   ۲۳) برند — در سایدبار، هدر سایت، پای سایت و صفحهٔ ورود مشترک است
   ========================================================================== */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex: none;
}
.brand__mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  flex: none;
}
.brand__mark .icon { width: 1rem; height: 1rem; }
.brand__text { min-width: 0; }
.brand__name {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  display: block;
  line-height: 1.2;
}
.brand__sub {
  font-size: var(--t-caption);
  color: var(--ink-3);
  display: block;
  line-height: 1.2;
}

/* پیام‌های Django — در هر سه پوسته (app/public/auth) استفاده می‌شود */
.messages {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

/* ==========================================================================
   ۲۴) ابزارهای کوچک — جای استایل درون‌خطی تکراری در قالب‌ها

   قاعده: قالب هیچ‌وقت `style="margin-…"` نمی‌نویسد. ریتم عمودی صفحه از
   همین کلاس‌ها می‌آید تا همهٔ صفحات یک ضرب‌آهنگ داشته باشند.

   چرا !important روی فاصله‌ها؟ کار این کلاس‌ها *بازنویسی* فاصلهٔ پیش‌فرض
   کامپوننت است (مثلاً `.section + .section` که دو کلاس دارد و در نبرد
   ویژگی برنده می‌شد). این تنها جای مجاز !important در پروژه است.
   ========================================================================== */
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-5 { margin-bottom: var(--s-5) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.mb-8 { margin-bottom: var(--s-8) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mt-10 { margin-top: var(--s-10) !important; }
.mt-12 { margin-top: var(--s-12) !important; }

.my-4 { margin-block: var(--s-4) !important; }
.my-5 { margin-block: var(--s-5) !important; }
.ms-2 { margin-inline-start: var(--s-2); }

.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.text-start { text-align: start; }

/* عرض بیشینهٔ کنترل‌های فیلتر و ستون‌های تنگ */
.w-8 { max-width: 8rem; }
.w-9 { max-width: 9rem; }
.w-10 { max-width: 10rem; }
.w-11 { max-width: 11rem; }
.w-12 { max-width: 12rem; }
.w-13 { max-width: 13rem; }
.w-prose { max-width: var(--w-prose); }
.w-min-12 { min-width: 12rem; }

.d-block { display: block; }
.lh-snug { line-height: var(--lh-snug); }
.lh-normal { line-height: var(--lh-normal); }
.w-normal { font-weight: var(--w-normal); }
.t-body { font-size: var(--t-body); }
.strike { text-decoration: line-through; }

/* ==========================================================================
   ۲۵) دکمهٔ «حرف بزن» — کنش اول صفحهٔ روم

   یک دکمهٔ تمام‌عرض با میکروفون قرمز. تنها کنش اولیهٔ روم است، پس بزرگ‌تر از
   دکمهٔ معمولی و بدون رقیب بصری در همان بلوک.
   ========================================================================== */
.talk {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  text-align: start;
  padding: var(--s-4);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  min-width: 0;
  transition: border-color var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.talk:active { background: var(--paper-2); }
@media (hover: hover) {
  .talk:hover { border-color: var(--red-line); box-shadow: var(--e-2); }
}

.talk__mic {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--glow-red-sm);
}

.talk__text { min-width: 0; flex: 1; }
.talk__text b {
  display: block;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
}
.talk__text span {
  font-size: var(--t-caption);
  color: var(--ink-3);
  display: block;
  line-height: var(--lh-snug);
}
.talk > .icon { color: var(--ink-4); flex: none; }

/* ==========================================================================
   ۲۶) ردیف کاشی شاخص

   ریتم استاندارد صفحات محیط کار:
     .page-head → (.tabs) → .tiles → .toolbar → .scroller → محتوا → .section …
   فاصلهٔ بین این بلوک‌ها با کلاس‌های .mb-* بند ۲۴ داده می‌شود.

   در موبایل اسکرول افقی است، از ۵۶۰px به بالا شبکه — چون چهار کاشی
   روی‌هم‌چیده صفحه را بی‌دلیل بلند می‌کند و عدد مهم پایین تا می‌افتد.
   ========================================================================== */
.tiles {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad-x, 0px));
  padding-inline: var(--pad-x, 0px);
  padding-bottom: var(--s-1);
  min-width: 0;
}
.tiles::-webkit-scrollbar { display: none; }
.tiles > * { flex: 0 0 8.5rem; scroll-snap-align: start; }
.tiles--wide > * { flex: 0 0 11rem; }

@media (min-width: 560px) {
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: var(--s-3);
  }
  .tiles--wide { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .tiles > * { flex: initial; }
}

/* ==========================================================================
   ۲۷) ردیف‌ها و کارت‌های ساخته‌شده در جاوااسکریپت

   ماژول‌های `static/js/modules/*.js` فهرست‌ها را از API می‌گیرند و مستقیم HTML
   می‌سازند. آن نشانه‌گذاری تا این بند هیچ قاعدهٔ CSS نداشت: عناصر بدون کادر و
   بدون فاصله، چسبیده به هم رندر می‌شدند.

   قاعده‌های این بند عمداً همان زبان بند ۱ و ۳ را دارند (سطح کارت، خط جداکننده،
   فاصلهٔ پایهٔ ۴) تا نتیجهٔ سرور و نتیجهٔ جاوااسکریپت یکسان دیده شوند.
   ========================================================================== */

/* ---------------------------- ردیف عمومی ---------------------------- */
/* هر «row» یک سطر افقی با کادر است: مرحله، قول، چک، کار، یادآور، عضو تیم. */
.stage-row,
.promise-row,
.cheque-row,
.task-row,
.reminder-row,
.voice-row,
.member-row,
.note-item,
.room-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-body-sm);
  min-width: 0;
}
.stage-row + .stage-row,
.promise-row + .promise-row,
.cheque-row + .cheque-row,
.task-row + .task-row,
.reminder-row + .reminder-row,
.voice-row + .voice-row,
.member-row + .member-row,
.note-item + .note-item,
.room-link + .room-link { margin-top: var(--s-2); }

@media (hover: hover) {
  a.room-link:hover,
  a.task-title:hover { border-color: var(--ink-4); }
}

.task-row.is-overdue { border-color: var(--red-line); background: var(--red-bg); }

.stage-num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--r-full);
  border: var(--bw) solid var(--line);
  background: var(--paper-2);
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
}
.stage-amount { font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.stage-due,
.stage-paid,
.task-due,
.note-meta { font-size: var(--t-caption); color: var(--ink-3); }

.promise-body,
.reminder-title,
.member-name,
.note-body { min-width: 0; flex: 1; }

.task-title {
  min-width: 0;
  flex: 1;
  font-weight: var(--w-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.note-body { line-height: var(--lh-snug); }

/* --------------------------- کارت روم / ویس / مشتری --------------------------- */
.room-card,
.voice-card,
.customer-card {
  display: block;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  min-width: 0;
  transition: border-color var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease);
}
@media (hover: hover) {
  a.room-card:hover,
  a.customer-card:hover { border-color: var(--ink-4); box-shadow: var(--e-2); }
}

.room-card__head,
.voice-card__head,
.customer-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}
.room-card__title,
.voice-card__title,
.customer-card__name {
  font-size: var(--t-body-sm);
  font-weight: var(--w-semi);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-card__meta,
.voice-card__meta,
.customer-card__job,
.customer-card__stats,
.room-card__due {
  font-size: var(--t-caption);
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  min-width: 0;
}
.room-card__money {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.room-card__money b { color: var(--ink); font-variant-numeric: tabular-nums; }
.room-card__progress { color: var(--green); font-weight: var(--w-semi); }
.room-card__due { margin-top: var(--s-2); }
.customer-card__stats { margin-top: var(--s-3); }

/* ------------------------------ کارت آماری ------------------------------ */
.stat-card {
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  min-width: 0;
}
.stat-label { font-size: var(--t-caption); color: var(--ink-3); }
.stat-value {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------- کارت هشدار داشبورد ----------------------------- */
.attention-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  min-width: 0;
}
.attention-item + .attention-item { margin-top: var(--s-2); }
.attention-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--red-line);
  background: var(--red-bg);
  color: var(--red);
}
.attention-title { font-size: var(--t-body-sm); font-weight: var(--w-semi); }
.attention-detail {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-top: 0.1rem;
  line-height: var(--lh-snug);
}

/* -------------------------------- برد کارها -------------------------------- */
.board-col {
  background: var(--paper-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  min-width: 0;
}
.board-col__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.board-col__count {
  margin-inline-start: auto;
  font-size: var(--t-caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.board-col__items { display: flex; flex-direction: column; gap: var(--s-2); }

.board-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--e-1);
  font-size: var(--t-body-sm);
  min-width: 0;
}
.board-card__room,
.board-card__due { font-size: var(--t-caption); color: var(--ink-3); }

/* ------------------------------ موج صوتی ------------------------------ */
/* بوم موج در ماژول ضبط ساخته می‌شود و باید ارتفاع قابل‌اندازه‌گیری داشته باشد. */
.waveform { display: block; width: 100%; min-height: 2.5rem; }
.waveform canvas { display: block; width: 100%; height: 100%; }

/* --------------------------- دکمه‌های کوچک کنشی --------------------------- */
/* ردیف‌های ساخته‌شده در JS دکمهٔ ریز دارند: «وفا»، «وصول»، «انجام». */
.btn--xs {
  height: 1.75rem;
  padding: 0 var(--s-2);
  font-size: var(--t-caption);
  gap: var(--s-1);
}
.btn--green { color: var(--green-ink); border-color: var(--green-line); background: var(--green-bg); }
.btn--red { color: var(--red-ink); border-color: var(--red-line); background: var(--red-bg); }

/* ------------------------------ جدول کلید/مقدار ------------------------------ */
/* مودال جزئیات (چک، مرحله) — یک ستون برچسب، یک ستون مقدار. */
.kv { display: flex; flex-direction: column; }
.kv__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: var(--bw) dashed var(--line-2);
  font-size: var(--t-body-sm);
}
.kv__row:last-child { border-bottom: none; }
.kv__key { flex: 0 0 7.5rem; color: var(--ink-3); font-size: var(--t-caption); }
.kv__val { min-width: 0; flex: 1; font-weight: var(--w-medium); }

/* ردیف جدولی که کل سطرش کنش دارد */
.is-clickable { cursor: pointer; }
@media (hover: hover) {
  tr.is-clickable:hover { background: var(--paper-2); }
}